موضوع اليوم عن إنشاء شريط الشبكات الإجتماعية بصيغة جميلة. كالصورة الموجودة بالأسفل و إن نزلت لأسفل التدوينة ستجد الشريط يمكنك تجربته بمشاركة هذا الموضوع و لا تنسى وضع تعليق فهذا يشجعنا على الإستمرار.

لكي لا أطيل عليك ندخل في صلب الموضوع

الأن قم بالدخول لقالب المدونة و ابحث عن الكود التالي <data:post.body/> قد تجد أكثر من كود حسب القالب سيكون الثاني و إن لم يعمل جربه على باقي الأكواد الموجودة فسيعمل مع أحدها.

بعد ذالك قم بلصق الكود التالي تحث الأول مباشرة

<style> 

/*--------Flipper Sharing Widget ------*/ 

.flipper a { 

display:block; 

height:48px; 

width:48px; 

padding:0 4px; 

float:left; 

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_v1aWdCcZ_GcWWO26qBeZAPpRuzGKl4BnoDhWtzP0Vd8EDQcZPx-Qp15cad_CRHXzaWlZWSWkDjV73JY7EFehaPv88-jhAQ25sj7rCJQRfRpjtgljzafdiWjlJwcFU0yrLSBm-ft08d5J/s1600/flipper.png) no-repeat; 

-webkit-transition: ease-in 0.15s all;    

-moz-transition: ease-in 0.15s all;    

-o-transition: ease-in 0.15s all;    

-ms-transition: ease-in 0.15s all;    

transition: ease-in 0.15s all; 

cursor:pointer;

}

.flipper a.googleplus { 

background-position: 0px -348px;

} 

.flipper a.googleplus:hover { 

background-position: 0px -406px;

}

.flipper a.pinterest { 

background-position: 0px -464px; 

} 

.flipper a.pinterest:hover { 

background-position: 0px -522px;

}

.flipper a.delicious { 

background-position: 0px 0px; 

} 

.flipper a.delicious:hover { 

background-position: 0px -58px;

} 

.flipper a.digg { 

background-position: 0px -116px;

} 

.flipper a.digg:hover { 

background-position: 0px -174px;

} 

.flipper a.stumbleupon { 

background-position: 0px -812px;

} 

.flipper a.stumbleupon:hover { 

background-position: 0px -870px;

} 

.flipper a.technorati { 

background-position: 0px -928px;

} 

.flipper a.technorati:hover { 

background-position: 0px -406px;

} 

.flipper a.twitter { 

background-position: 0px -928px;

} 

.flipper a.twitter:hover { 

background-position: 0px -986px;

} 

.flipper a.facebook { 

background-position: 0px -232px;

} 

.flipper a.facebook:hover { 

background-position: 0px -290px;

} 

.flipper a.reddit { 

background-position: 0px -580px;

} 

.flipper a.reddit:hover { 

background-position: 0px -638px;

}

.flipper a.rss { 

background-position: 0px -696px;

} 

.flipper a.rss:hover { 

background-position: 0px -754px;

}

.Pleaseshare{ 

margin:10px 0px; 

color:#333333; 

font-weight:bold; 

font-size:20px; 

font-family:sans-serif;

} 

</style>

<div class='flipper'> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class="Pleaseshare"> 

إن أعجبك الموضوع قم بنشره) </div>

<!--Google Plus--> 

<a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>

<!--Facebook--> 

<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>

<!-- Twitter --> 

<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>

<!-- Pinterest --> 

<a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>

<!-- Delicious --> 

<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>

<!--DIGG--> 

<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>

<!--Stumble--> 

<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>

<!-- Reddit --> 

<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>

<!--RSS --> 

<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Bookmark plz :&gt;'/> 

</b:if></div>

<div style="clear:both"/>

1. ما هو باللون البرتقالي يمكنك تغيره بما تريد فهو لون النص.
2. أما الكلام باللون الأحمر يمكنك كتابة ما تريد أو تركه كما هو.
3. بعد ذالك قم بحفظ القالب و اذهب للمدونة لترى النتيجة.

تابع الموضوع »

أهمية الشبكات الإجتماعية أصبحت أكثر مما كانت عليه سابقا بسبب قوتها و تفاعلها الكبير. إذ يوجد الملايين من الناس بها و هي منجم مهم لجلب الزوار، و على كل مدون إستغلالها بشتى الطرق ليستفيد منها.

ومن بين هذه الطرق وضع أيقونات الشبكات الإجتماعية في مدونته من أجل جدب المزيد من الزوار. و إضافتنا لهذا اليوم ستكون عبارة عن أيقونات الشبكات الإجتماعيىة بشكل مميز و جميل.

إبحث عن الكود التالي (لمن ليس له خبرة في منصة بلوجر يزور هذا الرابط فسيساعده أساسيات بلوجر

</body> و قم بوضع الكود الموجود بالأسفل فوقه مباشرة. 

<!-- import Scripts -->

<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/mblsocialbar.js"></script>

<div id="scolder">

<script type="text/javascript" src=" http://mbl-flipper-google-blogger.googlecode.com/files/socialflipmin.js"></script></div>    

<link href='http://mybloggerlab.com/StyleSheet/mblsocialbar.css' rel='stylesheet' type='text/css'/>

<!-- Social Media Bar For Blogger  -->  

<script type="text/javascript">

$(document).ready(function(){

$.mblSocialBar({

items: {

twitter: { url: '#', text: 'تابعني على تويتر' },

facebook: { url: '#', text: 'تابعني على الفيسبوك' },

rss: { url: '#', text: 'الخلاصات' },

google: { url: '#', text: 'تابعني على جوجل +' },

youtube: { url: '#', text: 'قناتي على اليوتيوب' },

orkut: { url: '#', text: 'تابعني على أوركيت' },

myspace: { url: '#', text: 'تابعني على مايسبيس' },

digg: { url: '#', text: 'تابعني على دييغ' },   

},

show: 8,

position: "left",

skin: "clear"

});  

});

</script>

لتعديل على الكود عير ما هو ملون بما يناسب.
اللون الأحمر بروابط الشبكات الإجتماعية
اللون البرتقالي غير رقم 8 لأي رقم أخر لعرض أقل لشبكات الإجتماعية
اللون الأزرق يمكنك تغييره لتحكم بموقع الإضافة
اللون البنفسجي لتغير لون الإضافة فهناك لونان لون فاتح clear و لون غامق dark غيره حسب ذوقك أو لون المدونة.

بعد التغير قم بحفظ القالب و إذهب لمعاينته على مدونتك.

تابع الموضوع »

السلام عليكم و رحمة الله تعالى و بركاته

أولا أعتدر من جميع متتبعي مدونة أسرار بلوغر على الإنقطاع الطويل عن التدوين و أعتدر بالخصوص لكل من وضع تعليق أو أرسل رسالة و لم يتلقى رد مني و ذالك بسبب أشغال خاصة أخدت كل وقتي. و من بين الطلبات الكثيرة التي تلقيتها طريقة وضع شعار المدونة بالطريقة الموجودة في المدونة، و لكي لا أطيل عليكم أترككم مع شرح الطريقة.

هذه الطريقة تستخدم تقنية CSS3 و لكي تقوم بتركيبها على مدونتك يجب أن تفتح دهنك جيدا أنها تحتاج للقليل من الجهد و الرياضيات نعم كما سمعت لكن لا تقلق سنشرح كل شيء ببساطة إن شاء الله.

قم بإختيار صورة كبيرة أو صمم شعار المدونة بحجم و مساحة أكبر. و لتفهم ذالك أكثر سنجري بعض العمليات الحسابية ليتضح لك الأمر. 

لنفترض أن لدينا صورة بحجم 1024px في العرض و 768px في الإرتفاع و تريد تقليل حجمها دون فقد جودتها. فإذا كنت تريد أن يكون عرض الصورة الجديدة 500px فما هي قيمة إرتفاع الصورة؟؟؟

ولكي نحصل على القيمة الصحيحة سنقوم بإجراء عملية حسابية بسيطة و معروفة، و هي لمعرفة القيمة X نضرب القيمة A في B و نقسمها على Y.

و لأوضح القاعدة أكثر لمن لم يفهم نقوم بضرب العرض المرغوب في الإرتفاع الأصلي و النتيجة نقسمها على العرض الحقيقي لصورة، و النتيجة ستكون هي قيمة الإرتفاع لصورة الجديدة. الأن سنطبق هذا عمليا لتفهم أكثر.

نقوم بضرب قيمة عرض الصورة الجديدة و هي 500 في إرتفاع الصورة الأصلية و هو 768 و النتيجة ستكون 384,000px بعد ذالك نقوم بقسمة النتيجة على عرض الصورة الأصلية و هو 1024 و النتيجة المحصل عليها ستكون 375px و هي القيمة لإرتفاع الصورة الجديدة.

و إذا كنت تريد معرفة العرض بدل الإرتفاع قم بنفس العملية لكن بالإتجاه المعاكس، بضرب الإرتفاع في العرض الأصلي لصورة و النتيجة تقسمها على الإرتفاع الأصلي لصورة.

الأن إنتهينا من العمليات الحسابية و ننتقل لتطبيق ما تعلمناه على شعار المدونة ليظهر بالشكل المرغوب. عندما تقوم بتصميم تعار مدونتك صممه بحجم كبير لكي يظهر جيدا عندما يتم تكبيره، الكود الموجود بالأسفل هو نفس الكود اللذي أضعه في مدونتي لتفهم أكتر.


- الأن توجه للوحة التحكم ثم تحرير HTML و ابحث عن الكود التالي  ]]></b:skin> و ضع الكود قبله.

#header img
{ width:256px; /* عرض الصورة التي ستظهر عليه أي العرض الجديد */
height:67px; /*إرتفاع الصورة التي ستظهر عليه أي الإرتفاع الجديد */ 
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s; }

#header img:hover
{ width:514px; /*عرض الصورة الأصلي اللذي صممته */
height:134px; /* إرتفاع الصورة الأصلي اللذي صممته */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s; }

قم بتغير الإرتفاع و العرض حسب الصورة التي صممتها، القيم الأولى هي المقاسات التي سيظهر بها شعارك على المدونة و القيم الثانية هي المقاسات التي سيظهر بها شعارك بعد مرور زر الفأرة عليه.


و إن كنت من الأشخاص اللذين لا يحبون وضع الصور في الشعار و تريد تطبيق هذا التأثير على عنوان مدونتك فالأمر بسيط جدا، ما عليك سوى وضع الكود التالي قبل الوسم ]]></b:skin> و نتهى الأمر

#header h1
{ -moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s; }

#header h1:hover
{ font-size:80px; /*حجم الكتابة بعد مرور زر الفأرة ععليها */
color:#FF00FF; /* لون الكتابة بعد مرور زر الفأرة ععليها  */
margin-left:-30px; /* نسبة الإزاحة لليسار */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s; }

الأمر بسيط جدا كل ما في الأمر هو أن تعرف مقاس الصورة بدقة و حجم الخط و انتهى الأمر، و الأن تمتع بالمظهر الجديد و الإحترافي لمدونتك.


أتمنى أن تشارك هذا الموضوع مع من تحب.

تابع الموضوع »

بسم الله الرحمن الرحيم


موضوع اليوم جميل جدا و هو خاص بمشاهدة الفيديو. فكما تعرف أن الجميع يحبون مشاهدة الفيديو على النت، فإن كنت ممن يظعون الفيديو على مدوناتهم فهذه الطريقة ستساعدك على كسب ثقة زوارك و جلب المزيد منهم.فعند مشاهدتك لأحد الفيديوهات الموجودة في أحد المواقع ستجد أن هناك الكثير من الإلهاءات التي ستحول في عدم تركيزك على ما تشاهد.



لذا فالحل ستجده في هذا الموضوع و هو متمثل في سكريت JQuery يسمح لك بأن تحيط الفيديو بظا أسود داكن لتحجب باقي محتوى الموقع و تحصل بذالك على مشاهدة شبيه بالسنما :-) يمكنك مشاهدة مثال بالأسفل و ذالك بالضغط على كلمة “إطفاء الأنوار” .

إطفاء النور

و لكي تظيف هذه الخاصية لمدونتك تابع الشرح بالأسفل.


1- توجه لتحرير قالب المدونة و ابحث عن الوسم </head> ثم ضع فوقه الكود التالي:


  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <br /><script type='text/javascript'> <br />//<![CDATA[ <br />$(document).ready(function(){ <br />$("#oscuridad").css("height", $(document).height()).hide(); <br />$(".lightSwitcher").click(function(){ <br />$("#oscuridad").toggle(); <br />if ($("#oscuridad").is(":hidden")) <br />$(this).html("إطفاء النور").removeClass("turnedOff"); <br />else <br />$(this).html("تشغيل النور;).addClass("turnedOff"); <br />}); <br />}); <br />//]]> <br /></script>


2- ثم بعد ذالك إبحث عن الوسم ]]></b:skin> و أضف قبله الكود التالي:


  /* turn off lights <br />----------------------------------------------- */ <br />#videoLuces { <br />position:relative; <br />z-index:102; <br />} <br />#apagador { <br />max-width:640px; <br />text-align:left; <br />position:relative; <br />height:25px; <br />display:block; <br />margin: 25px 0 0 60px; <br />} <br />.lightSwitcher { <br />position:absolute; <br />z-index:101; <br />background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH7VqyUzb7I8xFhuEiRd7ER20xUQRTNFBKuyhxbYSTIE8ABdb4Y7MqXMLMBOYGSIii1jWIeZToCCRtjTHDKpHR_ZltNnAsUgXb3QakPMNTfQAEymyQrAcBU0Ey59uLk_Kg_ZyaL9SlY7c/s16/luces-on.png); <br />background-repeat:no-repeat; <br />background-position:left; <br />padding: 0 0 0 20px; <br />outline:none; <br />text-decoration:none; <br />} <br />.lightSwitcher:hover {text-decoration:underline;} <br />.turnedOff { <br />color:#ffff00 !important; <br />background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwDtaoqnnkoW7rsZwNA9Ymccih_vhohPnAPV2D6DUbub5Ev8ptfjv6RoMI53eKm8rlr5rzKnqgFfclitVA3djP6FVqJUqISB3esT8MHpQmR_zGYI4NlyYgvtO4glrcBDgVgPiOuVxmJHo/s16/luces-off.png); <br />} <br />#oscuridad { <br />background:#000; <br />opacity:0.9; <br />filter:alpha(opacity=90); <br />position:absolute; <br />left:0; <br />top:0; <br />width:100%; <br />z-index:100; }


3- و أخيرا ابحث عن الوسك </body> و أضف قبله الكود التالي:


  <div id='oscuridad'/>


4- الأن نأتي للخطوة الأخيرة و هي إضافة الفيديو و أعتقد أن الجميع يعرفون الطريقة. الأن بعد أن تضيف الفيديو في موضوع جديد نتجه لتبويب تحرير HTML و نضع الكود التالي بحيث يكون الفيديو بينه.


  <center> <div id="apagador"><a class="lightSwitcher" href="javascript:void(0);">إطفاء النور;/a></div> <div id="videoLuces"> ...سيكون الفيديو في هذا المكان... </div> </center>


بهذا نكون قد انتهينا من هذه الإضافة الجميلة كما اتمنى أن تروق لك.


إن أعجبك الموضوع فأرجوا ألا تبخل علينا ب 5 ثوان من وقتك و تقوم بنشر الموضوع بين أصدقائك

تابع الموضوع »

بسم الله الرحمن الرحيم



قام اليوم موقع Blogger بإضافة أداتين جديدتين لقائمة “إضافة أداة” و هي خاصة بموقع +Google و بهذه الخطوة يقوم موقع blogger التابع لشركة google العملاقة بتحسين منصة بلوغر لتتناسب مع احتياجات المستخدمين.




كما قد أضاف الموقع في وقت سابق خاصية ال Meta Tag للمواضيع بالإضافة لخدمات أخرى ستجعل المدونات تتناسب مع محركات البحث لإن إستعملت بشكل جيد. (سأقوم بوضع موضوع عن الأمر في القريب العاجل)


يمكنك أن تضيف هذه الأداة في العمود الجانبي للمدونة أو أسفل المدونة. يمكنك زيارة الموضوع الأصلي من هنا





إذا أعجبك الموضوع أرجوا أن تأخد من وقتك 5 ثوان لتشاركه مع أصدقائك.

تابع الموضوع »

بسم الله الرحمن الرحيم

 

السلام عليكم إخوتي أخواتي الكرام اليوم سأقدم لكم تدوينة سريعة هي عبارة عن لعبة السودوكو الشهيرة. يمكنك الأن وضعها في مدونتك بطريقة سهل وبسيطة.

فهي ستساعدك على إبقاء الزوار في مدونتك لأطول فترة ممكنة، و كما تعلم أن هذا أمر مهم لتحصل على نسبة مشاهدة عالية سترجع بالإيجاب على ترتيبك في محركات البحث.

 

يمكنك تجربة اللعبة كما يمكنك إختيار مدى صعوبة المرحلة و الجميل أنها تحدد لك الزمن اللذي استغرقته في إنهاء المرحلة.

 

مدونة أسرار بلوغر

 

لتركيب اللعبة إختر إضافة أداة كما هو مشروح في المواضيع السابقة ثم ألصق الكود الموجود في الأسفل.

 

<br /><iframe style="width: 452px; height: 261px" height="260" src="http://www.odyssey.ie/sudoku/sudoku-google.html" frameborder="0" width="200" scrolling="no"></iframe>

<div style="text-align: center; margin: -8px 0px; width: 234px; background: #fff"><a style="color: #555; font-size: 60%; text-decoration: none" href="http://widget-blogs.blogspot.com/">مدونة أسرار بلوغر</a></div>

 

بعد ذالك قم بحفظ الأداة و استمتع باللعبة الشهيرة أنت و زوارك.

 

إذا أعجبك الموضوع أتمنى أن تمنحني 5 ثوان من وقتك و تشارك الموضوع مع أصدقائك.

تابع الموضوع »

بسم الله الرحمن الرحيم

 

اليوم سأقدم تدوينة سريعة عن طريقة وضع صندوق لمعجبي تويتر، و هو شبه بصندوق معجبي الفيس بوك. يمكنك زيارة الموضوع من هنا إضافة مربع الفيسبوك بشكل عائم و منزلق Fan Box .

 

طريقة الإضافة بسيطة توجه لإضافة أداة Html/JavaScript و ضع بها الكود التالي:

<div class="textwidget">
<script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script><div id="twitterfanbox">
<script type="text/javascript">fanbox_init("إسم صفحتك");</script></div>
</div>
<style>
.FB_SERVER_IFRAME {
width: 290px !important; /* عرض الإضافة*/
height: 250px !important; /* إرتفاع الإضافة*/
}
</style>

الأن قم بإضافة إسم صفحتك على تويتر مكا اللون الأحمر. أما اللون الأخضر فهو خاص بأبعاد الإضافة إن لم تتناسب مع قالب مدونتك قم بالتعديل في القيم حتى تصبح ملائمة للمدونة.

 

يوجد صندوق بالأسفل جرب كتابة شيء ما فيه

تابع الموضوع »

بسم الله الرحمن الرحيم

 

الكل يعرف مذى أهمية نشر روابط المقالات التي تقوم بكتابتها في مدونتك، فهي تقوم بالتعريف عن مدونتك للكثير من الأشخاص. لكن الأهم من ذالك هو تقديم الوسيلة السهلة لقرائك ليقوموا بنشرها.

و هذا ما سنتطرق له في هذه التدوينة إن شاء الله. هذه الإضافة تقدم لقرائك عدة خيارات ليقوموا بنشر المقالات التي يرون أنها مهمة و يجب مشاركتها مع الأخرين. فهي تقدم لهم رابط المقال الأصلي و رابط Html و رابط خاص بالمنتديات.

سيكون الأمر سهل وبسيط كل ما سيفعله القارئ هة نسخ الرابط و نشره.

 

 

يمكنك معاينة الأداة بالضغط على الزر و النزول لأسفل التدوينة.

 

 

و لتركيب الإضافة توجه إلى تصميم / تحرير Html / توسيع القالب / ثم إبحث عن الوسم <data:post.body/> و ضع الكود الموجود بالأسفل تحته مباشرة.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='compartir-post'>
<p>إذا وجدت هذا الموضوع مفيد يمكنك مشاركته مع زوار مدونتك&#1548; أو نشره في المنتديات.</p>
<p>&lt;label for=&quot;aa-url&quot;&gt;رابط:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-url&quot; value=&quot;<data:post.url/>&quot; /&gt;</p><p>&lt;label for=&quot;aa-forum&quot;&gt;رابط HTML:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;&lt;a href=&amp;quot;<data:post.url/>&amp;quot;&gt;<data:post.title/>&lt;/a&gt;&quot; /&gt;</p><p>
&lt;label for=&quot;aa-forum&quot;&gt;رابط للمنتديات:&lt;/label&gt;&lt;br /&gt;
&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;[url=<data:post.url/>]<data:post.title/>[/url]&quot; /&gt;</p>
</div>
</b:if>

إبحث الأن عن الوسم التالي ]]></b:skin> و ضع الكود الموجود بالأسفل فوقه تماما

* Share entries

----------------------------------------------- */
.compartir-post {
background:#EFF5FB; /* لون الخلفية*/
margin-top:30px;
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
}
.compartir-post p {
font-size:12px; /* حجم نص الرسالة*/
}
.compartir-post input {
background:#ffffff;
border: 1px solid #A4A4A4; /* حواف الخلفية*/
}

قم بحفظ التغيرات. الأداة لا تظهر إلا في داخل المواضيع.

كما يمكنك التغير في الكود الخاص بالصندوق من حيث اللون و حجم الخط و قد أشرت لذالك باللون الأخضر. و بهذا يصبح لقارئك المبتدء الوسيلة السهل ليقوم بنشر مواضيعك التي نالت إعجابه.

 

الأن دورك ليس بنشر المقال ولكن بوضع تعليق في السفل.

تابع الموضوع »

بسم الله الرحمن الرحيم

 

اليوم سنقوم بوضع موضوع أو إضافة مشابهة Tabbed Sidebar إضافة جميلة و سهلة و التي كنت قد وضعتها في أول أيام المدونة و لقد لاقت إعجاب الكثيرين. لكن للأسف، مع عدم خبرة الكثير من القراء لم يستطيعوا إضافة هذه الأداة لمدوناتهم. أخرهم كتنت الأخت “أوراق” و قد وعدتها بإضافة مماثلة و ها أنا أفي بوعدي لها و لجميع قراء مدونتي المتواضعة.

هذه الإضافة مخصصة لمدونة Wordpress لكن تم بحمد الله تحويلها من طرف أحد الإخوة لتتوافق مع منصة Blogger و لكي لا أطيل عليكم الكلام أترككم مع شرح طريقة إضافتها لمدونتك.

 

بالمناسبة سيكون هناك شرح بالفيديو ستجده في أخر الموضوع.

 

طريقة إضافة الأداة لمدونتك

 

1- توجه للوحة تحكم المدونة / تصميم / تحرير Html / قم بتوسيع القالب

2- قم بالبحث عن الوسم التالي ]]></b:skin> و ضع قبله الكود بالأسفل

/*---- Wordpress Style MBT Menu Tabs----*/

.MBT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.MBT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.MBT-tabs li:first-child{margin:0}
.MBT-tabs li a{color:#fff;background:#333333;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}
.MBT-tabs li a:hover,.MBT-tabs li a.MBT-tabs-current{background:#A46F38;color:#fff;text-decoration:none}
.MBT-tabs-content{background:#212121}
.MBT-tabviewsection{margin-top:10px;margin-bottom:10px;}

3- إن أردت قم بتغير A46F38# باللون الموجود في مدونتك ليتناسب معها.

4- إبحث عن الوسم <div id='sidebar-wrapper'> و ضع تحته الكود بالأسفل

<div class='MBT-tabviewsection'>

<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                $(&quot;ul.MBT-tabs-widget-MBT-id li:first a&quot;).addClass(&quot;MBT-tabs-current&quot;).show();
                $(&quot;.MBT-tabs-content-widget-MBT-id:first&quot;).show();
                $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).click(function() {
                    $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).removeClass(&quot;MBT-tabs-current a&quot;);
                    $(this).addClass(&quot;MBT-tabs-current&quot;);
                    $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>

<ul class='MBT-tabs MBT-tabs-widget-MBT-id'>
<li><a href='#widget-MBT-id1'>مواضيع جديدة</a></li>
<li><a href='#widget-MBT-id2'>القائمة البريدية</a></li>
<li><a href='#widget-MBT-id3'>أخرالتعليقات</a></li>
</ul>

<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>                                      
</div>  

<div style='clear:both;'/>                       
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>                                        
</div>  

<div style='clear:both;'/>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                       
</div>

</div>
<div style='clear:both;'/>

5- قم بتغير كلمات ( مواضيع جديدة ، القائمة البريدية ، أخر التعليقات ) بما يناسبك.

6- الأن قم بحفظ القالب

7- الأن قم بالذهاب لعناصر الصفحة سوف تجد أنه قد ظهرت 3 إضافات قم بسحب الإضافات التي تريد إليها.

8- بعد هذه الخطوة قم بحفظ التعديلات و عاين الأداة في مدونتك.

 

شرح الفيديو

 

 

 

الأن جاء دورك لتتحفنا و تضع تعليقك في المربع الموجود بالأسفل

تابع الموضوع »

بسم الله الرحمن الرحيم

 

إضافة اليوم هي عبارة عن نافدة إعلان تظهر بمجرد دخول الزائر لمدونتك و الجميل فيها أنها تحتوي على زر إغلاق حتى يتمكن الزائر من غلقها بعد القراءة و بهذا لن تسبب له أي إزعاج. مثل هذه النوافد تستعمل في الكثير من الأحيان في المناسبات أو للإعلان عن تحديث في المدونة أو أي شيء أخر. و ميزتها أنها تظهر أمام الزائر أي أنك لن تخشى ألا يرها زوار مدونتك.

و النتيجة مربع إشعارات بخاصية الإغلاق كما أنه تم إستعمال كود CSS3 الرائع في هذا الكود و يمكنك ملاحظة ذالك في الظلال الموجودة أسفل الإضافة.

 

و طريقة الإضافة سهلة للغاية ما عليك سوى نسخ الكود الموجود بالأسفل و لصقه في صندوق إضافة أداة الخاصة ب Html/JavaScript و إدخال بعض التعديلات عليه.

<style type="text/css">
#aviso{
width:500px; /* عرض النافدة */
padding:5px; position:absolute; z-index:5000;}
.caja-aviso{
border:4px double #0080FF; /* لون الحدود */
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 8px 8px 6px #808080; -moz-box-shadow: 8px 8px 6px #808080; box-shadow: 8px 8px 6px #808080;
background-color: #CEECF5; /* لون الخلفية */
padding: 10px; font-family: Verdana, Geneva, sans-serif;
color: #0B173B; /* لون النص */
}
.letrero-aviso {

font-size:18pt;
font-weight:bold;
color:#B4045F;
text-shadow: 0px 0px 10px #BA55D3;}
</style>

<div id="aviso" style="left:300px; top:100px; padding:0;">
<div align="right" style="margin-bottom:-30px;"><b><a href="javascript:closeit()" ><font face="Arial" size="1">إغلاق</font> <img valign="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiifJIUKIZ1KJihyrKttxWal9ghACty-LYJKJfDoYKqut0dpdT-NLa3fKc1vX9C6jdhic_Lve9oMw9P9jE6SBsdeR-feKe9FaQEA74xJfs3EtAJycHDsNpNZMfuBqYD1bXLTkGLLIOFLe22/" style="vertical-align:middle;"/></a></b></div>

<br/>
<fieldset class="caja-aviso">
<legend class="letrero-aviso" align="center">إعلان</legend>
... هنا قم بوضع الكلام أو الرسالة التي تريد إصالها لزوار مدونتك  ...
<br/><div align="right"><a href="http://www.facebook.com/إسم صفحتك" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAeYuR9kWxs6M8jFS0jdArajACqX7S-EqSQE07rrNiZJaCZHMu39bnmk9RuNrDP-piiKTQbdJiV7pirzzfjAqWR68lUP6t4R7saWmPsBP6uXNOHfVRzXAredQwj8NTEPTS5X6O2Lw2jGrv/" width="26"/></a>
<a href="http://twitter.com/إسم حسابك" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLEAYhrDZD_llZhM2FMfp7vVaXcga315rx1emOk7vkNDKRScZjHO1wulRKNOhFOCW2Z_JFOeA__L90bs6teBA8IBT9ucZR62fSjDoT_A7FOjn7m4Q8H_dXcPUIcCVI0ghLjtiIcOJy76ht/" width="25"/></a></div>
</fieldset>

<script>
function closeit(){
document.getElementById("aviso").style.visibility = "hidden";
}
</script>

</div><div class="clear"/></div>

الأن قم بتغير الكود و كتابة الرسالة التي تريد إيصالها لزوارك و إدخال رابط صفحتك على الفيس بوك و تويتر إن أردت ذالك. كما أن الجزء الأول من الكود قابل لتغير و قد وضعت الكلمات باللون الأخضر يمكنك التغير فيها كما تريد. كما يمكنك التغير في مكان تمركز صندوق الإعلان بالتعديل في القيم الموجودة باللون الأحمر.

 

و كأخر خطوة لك في هذا الموضوع، ضع تعليقك بالأسفل.

تابع الموضوع »

بسم الله الرحمن الرحيم

 

هناك بعض المواقع التي تقوم بزيارتها تجد أن لديها قائمة جانبية تتحرك مع الصفحة ليكون من السهل على الزوار الدخول لأي صفحة. و إضافة اليوم هي إضافة جميلة و أنيقة تتمثل في قائمة جانبية تبقى تابثة في وسط الصفحة ختى لو قام الزائر بالنزول لأسفل الصفحة فستبقى القائمة أمام ناظريه.

 

تعتمد هذه افضافة على تقنية CSS3 و هي فعلا جميلة يمكنك معاينة الإضافة بالظغط على الأيقونة بالأسفل.

 

طريقة تركيب الإضافة

1- توجه للوحة التحكم / تصميم / تحرير Html / و لا تنسى أخد نسخة من المدونة لو حدث أي خطأ يمكنك تذاركه.

2- إبحث عن الوسم ]]></b:skin> و ألصق الكود الموجود في الأسفل قبله تماما.

  <div dir="ltr" style="text-align: left;">/* CSS Style for Horizontal Menu - info @ http://widget-blogs.blogspot.com*/ <br />#hor { <br />list-style:none; <br />padding:0; <br />margin:0; <br />} </p> <p>#hor li { <br />float:left; <br />padding:5px; <br />} </p> <p>#hor a { <br />display:block; <br />height: 12px; <br />text-indent:-999em; <br />} </p> <p>#hor a.home { <br />width:46px; <br />background:url(vHome.gif) no-repeat 0 0; <br />} </p> <p>#hor a.download { <br />width:94px; <br />background:url(vDownload.gif) no-repeat 0 0; <br />} </p> <p>#hor a.contact { <br />width:74px; <br />background:url(vContact.gif) no-repeat 0 0; <br />} </p> <p>/* CSS Style for Vertical Menu */ </p> <p>#ver { <br />list-style:none; <br />padding:0; <br />margin:0; <br />} </p> <p>#ver li { <br />padding:2px; <br />} </p> <p>#ver li a { <br />display:block; <br />height:12px; <br />text-indent:-999em; <br />} </p> <p>#ver a.home { <br />width:47px; <br />background:url(hHome.gif) no-repeat 0 0; <br />} </p> <p>#ver a.download { <br />width:95px; <br />background:url(hDownload.gif) no-repeat 0 0; <br />} </p> <p>#ver a.contact { <br />width:74px; <br />background:url(hContact.gif) no-repeat 0 0; <br />} </p> <p>.clear { <br />clear:both; <br />} </p> <p>*{ <br />/* A universal CSS reset */ <br />margin:0; <br />padding:0; <br />} </p> <p>#navigationMenu body{ <br />font-size:14px; <br />color:#666; <br />background:#111 no-repeat; </p> <p>/* CSS3 Radial Gradients */ <br />background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px); <br />background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111)); </p> <p>font-family:Arial, Helvetica, sans-serif; <br />} </p> <p>#navigationMenu li{ <br />list-style:none; <br />height:39px; <br />padding:2px; <br />width:40px; <br />} </p> <p>#navigationMenu span{ <br />/* Container properties */ <br />width:0; <br />left:38px; <br />padding:0; <br />position:absolute; <br />overflow:hidden; </p> <p>/* Text properties */ <br />font-family:'Myriad Pro',Arial, Helvetica, sans-serif; <br />font-size:18px; <br />font-weight:bold; <br />letter-spacing:0.6px; <br />white-space:nowrap; <br />line-height:39px; </p> <p>/* CSS3 Transition: */ <br />-webkit-transition: 0.25s; </p> <p>/* Future proofing (these do not work yet): */ <br />-moz-transition: 0.25s; <br />transition: 0.25s; <br />} </p> <p>#navigationMenu a{ <br />background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXFNjy4QC78lXMRzTeuAfiW4FerXQ5SXSlf2TB-SJsSCHnYt3ptqck2-cUboPwzvZmTHxsVAxfJ3NG-F-CNmCYfWq8neTtXXEWD46a-zgyXbi3JtD6v63k4rdbEtWyPfQ1Khcr3fFwIK4/s1600/navigation.jpg') no-repeat; </p> <p>height:39px; <br />width:38px; <br />display:block; <br />position:relative; <br />} </p> <p>/* General hover styles */ </p> <p>#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; } <br />#navigationMenu a:hover{ <br />text-decoration:none; </p> <p>/* CSS outer glow with the box-shadow property */ <br />-moz-box-shadow:0 0 5px #9ddff5; <br />-webkit-box-shadow:0 0 5px #9ddff5; <br />box-shadow:0 0 5px #9ddff5; <br />} </p> <p>/* Green Button */ </p> <p>#navigationMenu .home { background-position:0 0;} <br />#navigationMenu .home:hover { background-position:0 -39px;} <br />#navigationMenu .home span{ <br />background-color:#7da315; <br />color:#3d4f0c; <br />text-shadow:1px 1px 0 #99bf31; <br />} </p> <p>/* Blue Button */ </p> <p>#navigationMenu .about { background-position:-38px 0;} <br />#navigationMenu .about:hover { background-position:-38px -39px;} <br />#navigationMenu .about span{ <br />background-color:#1e8bb4; <br />color:#223a44; <br />text-shadow:1px 1px 0 #44a8d0; <br />} </p> <p>/* Orange Button */ </p> <p>#navigationMenu .services { background-position:-76px 0;} <br />#navigationMenu .services:hover { background-position:-76px -39px;} <br />#navigationMenu .services span{ <br />background-color:#c86c1f; <br />color:#5a3517; <br />text-shadow:1px 1px 0 #d28344; <br />} </p> <p>/* Yellow Button */ </p> <p>#navigationMenu .portfolio { background-position:-114px 0;} <br />#navigationMenu .portfolio:hover{ background-position:-114px -39px;} <br />#navigationMenu .portfolio span{ <br />background-color:#d0a525; <br />color:#604e18; <br />text-shadow:1px 1px 0 #d8b54b; <br />} </p> <p>/* Purple Button */ </p> <p>#navigationMenu .contact { background-position:-152px 0;} <br />#navigationMenu .contact:hover { background-position:-152px -39px;} <br />#navigationMenu .contact span{ <br />background-color:#af1e83; <br />color:#460f35; <br />text-shadow:1px 1px 0 #d244a6; <br />} </p> <p>/*End menu css - info @ http://widget-blogs.blogspot.com */

3- قم بحفظ القالب الأن

4- توجه لإضافة أداة

 

5- ضع الأن الكود التالي

<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="http://widget-blogs.blogspot.com/">
<span>الرئيسية</span>
</a>
</li>

<li>

<a class="about" href="http://widget-blogs.blogspot.com/p/blog-page_5332.html">
<span>عن المدون</span>
</a>
</li>

<li>
<a class="services" href="http://widget-blogs.blogspot.com/">
<span>خدمات</span>
</a>

</li>

<li>
<a class="portfolio" href="http://widget-blogs.blogspot.com/p/blog-page_6091.html">
<span>فهرس المدونة</span>
</a>
</li>

<li>
<a class="contact" href="http://widget-blogs.blogspot.com/p/blog-page_5585.html">

<span>إتصل بنا</span>
</a>
</li>
</ul>
</div><a href="http://widget-blogs.blogspot.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a>

6- قم بتغير ما هو باللون الأحمر بروابط مدونتك، و إن أردت قم بتغير ما هو باللون الأخظر بالكلمات التي تريد.

7- الأن إحفظ الأداة و اسحبها لأسفل التصميم، و قم بالمعاينة

 

و أخيرا قم بوضع تعليقك بالأسفل

تابع الموضوع »

بسم الله الرحمن الرحيم

 

في موضوع سابق كنا قد تطرقنا لإضافة صندوق المعجبين للمدونة ( إضافة مربع الفيسبوك بشكل عائم و منزلق Fan Box  ) لكن ظهرة مشكلة لعدد من الإخوة و الأخوات عند تركيب الإضافة و هي عبارة عن رسالة الخطأ التالية : ( Could not retrieve id for the specified page. Please verify correct href was passed in. ) و قد كنت من بين الشخاص اللذين ظهر لهم هذا الخطأ لذالك لم أضع هذا الصندوق المهم بمدونتي.

 

لكن الأن الحمد لله فقد حلت المشكلة و أسف لكل الأشخاص اللذين راسلوني بخصوص هذا المشكل و لم أقدم لهم الحل لأنه لم يكن لدي. لكن كما عودتكم بالمميز و الحصري دائما. نعم حصري لأنه لن تجد حل لهذه المشكلة في أي موقع أو منتدى أو مدونة عربية  و هذا لأمر بسيط أنني أمضيت أسابيع أبحث عن الحل فيها و طرحت السؤال في عذة منابر منها لكن الإجابة كانت إما بالتجاهل أو بمسح عضويتي من المنتدى بسب إعادة السؤال عن الحل.

 

لكن الأن الحل موجود بين يديك وبذون البحث و التجوال المضني بين المواقع و المنتديات الركيكة. و لكي لا أطيل عليك الحل أترككك مع الشرح.

 

1- إن أردت أن تضع صندوق Like Box بالشكل الجانبي المنزلق إتبع الخطوات الموجودة هنا إضافة مربع الفيسبوك بشكل عائم و منزلق Fan Box  و توقف عند أخر كود اللذي ستضيف لصندوق Html/JavaScript و اتبع الخطوة التي سأشرحها في أخر الموضوع.

 

2- أما إن كنت تريد إضافة صندوق Like Box في القئمة الجانبية للمدونة فتابع الشرح أدناه.

* توجه للعنوان التالي رابط الإضافة

* الأن بعد أن ضغط على زر Get Code سوف تظهر لك نافدة بها كود إضافة Like Box.

* بعد ذالك قم بحفظ الأداة و عاين النتيجة و إن ظهرت لك رسالة الخطأ فلا تقلق فالحل بين يديك.

 

شرح طريقة حل المشكلة

* لتخلص من هذه المشكلة قم بالدخول لحسابك على الفيس بوك من من الموقع الرسمي، ثم توجه لصفحة مدونتك.

 

* بعد ذالك توجه لأعلى المتصفح في خانة العنوان و خد الرابط بالكامل و استبدله بالرابط الموجود في الإضافة إن أردت أن تضيف صندوق Like Box الجانبي المنزلق أما إن كنت ستضيف الصندوق للقائمة الجانبية لمدونتك ما عليك سوى أن تضيفه لخانة العنوان كما شرحت في الصورة الأولى.

و بهذا يكون الحل السحري اللذي أتعبني حتى وجدته. الأن يمكنك الإستمتاع بهذه الإضافة المهمة و الرائعة.

 

الأن ضع تعليقك أو إستفسارك حول الإضافة

 

تابع الموضوع »