إضافة صندوق تويتر العائم بمدونة بلوجر floating twitter tweets box

إضافة صندوق تغريدات تويتر العائم بمدونة بلوجر floating twitter box


صندوق تغريداتك بتويتر العائم  يخدم زوار مدونتك ويجعل مدونتك اكثر تفاعل وحيوية

مشاهده حيـّه Live Demo

ولإضافته نتبع الآتي:

1- ندخل للتخطيط او الLayout

2- إضافة اداة او Add Gadget

3- نختار اداة HTML/Javascript

4- ننسخ بالصندوق الكود التالي :

 <style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#twitter_div{width:246px;height:353px;overflow:hidden;}#google_plus_div{width:152px;height:97px;overflow:hidden;margin-left:50px;margin-top:10px;}#knfeedburner_div{width:300px;height:97px;margin-top:25px;overflow:hidden;}#kakinetwork_div{width:300px;height:97px;overflow:hidden;}

#twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px;}#twitter_right_img{position:absolute;top:-2px;left:-35px;border:0;}

#kakinetwork_right{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_right img{position:absolute;top:-2px;left:-101px;}/* left side style */#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}#twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px;}#twitter_left_img{position:absolute;top:-2px;right:-35px;border:0;}
#kakinetwork_left{z-index:10003;border:2px solid #303030;background-
color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_left img{position:absolute;top:-2px;right:-101px;}

</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script>

<div id="on"><div id="twitter_right" style="top: 20%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZZAU2p_nqN6o0-JnurK85d7VgWnqfP4p0hokC_RIpFUs9JRO-5PZyeFpJ36jS2vzrX837ojTLvSHf8rArBJxyG0ojFlKxXhlcXUfr_xDlCisVlyq6jd5DMJb9OkCcgnar60Bo25sLkdw/s320/allbloggingtips.com-twitter-icon.png" /><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 260,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('blog2noob').start();</script></div></div></div>

5- قم بإستبدال الموجود باللون الأحمر blog2noob  بعنوان حسابك بتويتر 

6- ثم حفظ وهكذا إنتهيت 

والآن أصبح بمدونتك صندوق تغريدات تويتر العائم ... تهانينا..!

إقرأ المزيد... >>

إضافة ازرار المشاركة بمدونة لوجر العائمة Floating share buttons

أداة إضافة ازرار المشاركة الرائعة لمدونتك ببلوجر  Floating share buttons bar

ولإضافة تلك الأداة نقوم بعمل الآتي

1- نذهب لقالب او Template 

   *هنا خطوة إختيارية لمن يريد أخذ نسخة إحتياطية للقالب في حال حدوث خطأ

 

*ثم نختار تنزيل النموذج بالكامل أو Full download 

  

2- إختيار  Edit أو تحرير شيفرة HTML 

3- نضغط على متابعة أو proceed

 4-ثم نضغط على توسيع القالب او Expand

 ومن لوحة المفاتيح نضغط CTRL+F للبحث بالكود بشكل اسهل عن السطرالتالي:

<body>

و نقوم بنسخ هذا الكود أسفل السطر  :

 <!-- AddThis Button BEGIN (blog2noob.blogspot.com) -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left: 50px; top: 50px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count" href="http://www.blogger.com/blogger.g?blogID=7085736832521121017"></a>
<a class="addthis_button_tweet" href="http://www.blogger.com/blogger.g?blogID=7085736832521121017" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall" href="http://www.blogger.com/blogger.g?blogID=7085736832521121017"></a>
</div>
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-50a7a8c60990b1f8" type="text/javascript"></script>
<!-- AddThis Button END -->

ثم نضغط حفظ (ويفضل قبلها معاينة لنتأكد من ان الخطوات سليمة)

والآن اصبح بمدونتك ازرار مشاركة العائمة ...تهانينا!

إقرأ المزيد... >>

اداة وإضافة ازرار المشاركة بمدونة بلوجر الرائعة Sassy Bookmarks

هذه أداة رائعة وإضافة ازرار مشاركة جذابة

أداة Sassy Bookmarks تضيف جاذبية لمدونتك

مشاهده حيـّه Live Demo

ولإضافتها نقوم بعمل الآتي :

1- نذهب لقالب او Template

2- إختيار  Edit أو تحرير شيفرة HTML 

3- نضغط على متابعة أو proceed

 4-ثم نضغط على توسيع القالب او Expand

 ومن لوحة المفاتيح نضغط CTRL+F للبحث بالكود بشكل اسهل عن السطرالتالي:

</body>

5- و نقوم بنسخ هذا الكود أعلى السطر مباشرة :

6- ثم حفظ

والآن اصبح لديك إضافة ازرار مشاركة جذابة ورائعة...تهانينا!

إقرأ المزيد... >>

أضف حيوية لمدونتك بإضافة طائر تويتر لمدونة بلوجر بالصور

هذه الاداة جميلة وتضفي حركة وحيوية لصفحة مدونتك 

مشاهده حيـّه Live Demo

ولاضافة طائر تويتر نتبع الخطوات التالية 

1- نذهب لقالب او Template

2- إختيار  Edit أو تحرير شيفرة HTML 

3- نضغط على متابعة أو proceed

 4-ثم نضغط على توسيع القالب او Expand

 ومن لوحة المفاتيح نضغط CTRL+F للبحث بالكود بشكل اسهل عن السطرالتالي:

<body>

و نقوم بنسخ هذا الكود أعلى السطر مباشرة :

5- نضع مكان "blog2noob"   عنوان حسابنا بتويتر "..........."

6- ثم نقم بحفظ القالب (يفضل قبلها عمل مشاهدة preview للتأكد )

*إضغط على الصور لمشاهدتها بشكل اوضح وبحجمها الطبيعي

والآن اصبح بمدونتك طائر تويتر ...تهانينا ..!

إقرأ المزيد... >>