إضافة أزرار المفضلات الاجتماعية أسفل التدوينات في بلوجر

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



انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).
تذكير:لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء.




</head>
ثم ضع الكود التالي فوقه :
<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url(&#39;https://sites.google.com/site/lightbox007/photo/youlikethisarticle.png&#39;) no-repeat left bottom;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url(&#39;https://sites.google.com/site/lightbox007/photo/sharingblogger.png&#39;) no-repeat right bottom;
position:absolute;
right:-17px;
}

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;

}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url(&#39;https://sites.google.com/site/lightbox007/photo/bookmark2.png%27&#39;) no-repeat !important;
}

.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}

</style>
ثم قم بالبحث عن الكود التالي :
<data:post.body/>
ثم قم بوضع الكود التالي بعده :
<!--SexySharing abu-iyad--><b:if cond='data:blog.pageType == &quot;item&quot;'><div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'> <ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='أضف رابط خلاصات الخاص بك هنا ' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>
<span class='sexy-rightside'/></div>

<div class='sexy-link'> Distributed by <a href='http://abu-iyad.blogspot.com' title='أبو إياد'>Abu-Iyad</a>
</div></b:if>
أخيرا قم بحفظ القالب و إذهب للمعاينة.ولا تنسى أن تقوم بتبديل ما باللون الأحمر بعنوانك على Feed Burner
أنتظر تشجيعاتكم

هناك 28 تعليقًا:

  1. أزال المؤلف هذا التعليق.

    ردحذف
  2. بارك الله فيك,, انا اريد ان احذف الجمله؟؟

    ردحذف
  3. @aqeeil
    الجملة هي عبارة عن صورة ورابطها هو
    http://i27.tinypic.com/2qfqu.png
    قم بحذفه من الكود الأول

    ردحذف
  4. موضوع مميز
    جزاك الله خيرا
    http://earnlessons.blogspot.com

    ردحذف
  5. انا مش لاقي الكود دا

    ردحذف
  6. السلام عليكم
    اشكرك اخي على الأداه بجد ممتازة
    لكن للأسف في اغلب االأدوات خطوة البحث عن كود [ ]
    غير متواجد عندي !!
    مالعمل ؟

    ردحذف
  7. مشكوررر ابو اياد :))Blogger

    ردحذف
  8. جربتها يا غالي ولم تظهر لدي :(

    http://ahmad-najem.blogspot.com/

    ردحذف
  9. مش بتظهر عندى اخى ابو اياد ارجو التوضيح

    ردحذف
  10. جربتها أكثر من مرة وللأسف الشديد لم تظهر ...

    هل هناك أي شيء يعوضني عنها ...؟!!

    http://leave1name.blogspot.com

    ردحذف
  11. لاسف غير شغال لنك مدونتك هو لموجود

    ردحذف
  12. الان ضهرت حبيب اغير الصورة كيف اغيرها وشكرا

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

    http://enboiraq.blogspot.com/2011/06/google-adsense.html

    ردحذف
  14. مش بتظهر عندى اخى ابو اياد ارجو التوضيح
    www.google--plus.blogspot.com

    ردحذف
  15. جربتهه بطريقه صحيحه مثل الشرح بالضبك ولن تظهر عندة ما الحل
    مشكووووور

    ردحذف
  16. بوركت عزيزي :)
    لكن الكلمة الثانية ( ) لم اجدها ؟؟

    ما المشكل ؟

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

    ردحذف
  18. لم اعثر على هذا الكود في مدونتي

    ردحذف
  19. شكرا لك على المجهود

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

    منتظر ردك .. معلهش هتعبك معايا شوية

    ردحذف
  21. مشكور على الاضافة اخى ابواياد
    http://nice4alll.blogspot.com/

    ردحذف
  22. لم تظهر عندى ايضا اخى لماذا ..؟؟..


    وايضا وجدت كلمة ابو اياد فى الكود بالعربى والانجليزى لماذا؟..



    ارجو التوضيح

    ردحذف
  23. أتقي الله يارجل في هذه الإضافة إضافة مغلوطة

    ردحذف
  24. شكرا يا غالى تم التركيب

    http://www.egnewstoday.com/

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية