الخميس، 18 سبتمبر 2014

جديد أزرار المشاركة الإجتماعية لمواضيع المدونة

بقلم: BR MED يوم الخميس، 18 سبتمبر 2014 القسم : 0 التعليقات
السلام عليكم و رحمة الله و بركاته
متابعينا الأوفياء معنا اليوم حلة جديدة من أزرار المشاركة الإجتماعية التي توضع أسفل الموضوع أو التدوينة قصد تمكين الزائر من مشاركتها مع أصدقائه و لقد تكلمنا في تدوينات سابقة عن أهميتها في نشر مواضيع المدونة و جعلها تستقطب زوارا كثر من مختلف المصادر كي لا أنسى يمكنكم الحصول على المزيد و من الأزرار بأنواع و أشكال مختلفة فقط في قسم الأضافات الإجتماعية
المهم كي لا أطيل عليكم ننتقل لطريقة التركيب
1- نذهب للوحة التحكم ثم نختار القالب ثم تحرير html
2- نبحث عن الوسم </head>
ثم نضع الكود التالي قبله

        <style type='text/css'>
        ul.social { list-style:none; margin:15px auto;display:inline-block; }
        ul.social li { display:inline; float:left; background-repeat:no-repeat; }
        ul.social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
        ul.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff;padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0,0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0,0.5);}
        ul.social li.facebook { background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGStpwBSDqgrEb9eihWn3DvLs4wUrRyYPWa-eYN-YcEHh8XbD8cjNW6b6Fs17_DyFnVN5P2jwNBf50c_qBtPfP3vmfOagr5LCugHLcEbt1FsUDkN_Gmz4dZ4en4vNPJPz_G-E6tFC8S4Lv/s1600/way2blogging-facebook.png&quot;); }
        ul.social li.twitter { background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxuTcgbnTyr2h-e0C0AlVWRfM1pluoMZ7i682kJGwESDeI23etROwuGXnwkPTYlgYLKZMn1a0uHBiggnagDG5txuxsHskPGf207IlV5hZQvq7_an2VlAuYWfht0gyVoJ5QrQ_6YyJCcLa-/s1600/way2blogging-twitter.png&quot;); } 
        ul.social li.googlebuzz { background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkh0ZEFnwUGa7YQ9qvJtp_djbsqpllaEIVvBqPahyphenhyphenlaQGtFCcJam8zYe8iG7PnIH7ic-uNxcPlxt1Tj_kjhPcPegWJgEFUkXeO48NP6Z18WeOuvcR-P1onLMI19hKRgKRmzhPz49nWNOFF/s1600/way2blogging-googlebuzz.png&quot;); }
        ul.social li.stumbleupon { background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqCnsid5w8d4pqyZj-TI9tpHwZyBWQMBZqYSVWAgn_i6XIVp5gO2vjc-XQILm-ZAXtei6lcZUROomJFmvizPiSckpmMTq11tt6qbKKKYhsDl4JD5p7yrauw8LEKgDLC5CENy4LLzl6ivg8/s1600/way2blogging-stumbleupon.png&quot;); }
        ul.social li.digg { background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVBwBOAtSzV3WMWFYixt26oQQl9ActQQqiFB9RTK3-AfZ8YI14zsn-Yz4DculXtyjMr0gZBNx_3TZbKiWszaVRjiK_WN_JU-OHkD6cdZW96wgOzDGRdZjw-WnC6l3IBF-f74tVWOSeJxqe/s1600/way2blogging-digg.png&quot;); }
        ul.social li.delicious { background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt1cYgcj4Qh3oVX6nptrd-SBIJOJTe3ZLoLfk398bEcFx7CpW0IVwdemS5W942CAUR_WE9gbYb9IatxG3yXwUnh04zwr2X2OV1D4Y2IQiBSRTBeJq10h6j28FY1niZk7YY-5WVJv6a1H3g/s1600/way2blogging-delicious.png&quot;); }
        ul.social li.linkedin { background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTwn3xR5L-U_-0fI6H-GlwCSdpnhI3b4XcKM2H3AgmB0hleHwD6IBL9HJzy0KihoyXmyuuXr7x3ByobdJvOkd_yyHvhrI6yu0Qd-ghWZuDxdykIdl1MHA3pIDoV0HRMV5cNI6SIDHvvQF/s1600/way2blogging-linkedin.png&quot;); }
        ul.social li.reddit { background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPGBgW0Jv4cwLc4730EsVN_G0xgeTFMubbWB6OHb5nKZocIO0823K_JANmBNLdG88HtvEcexzDxbigVD2hwnHwAqFFIpoYwHhGI4Y0eHlW6HG48PCDEwOo2vzVl_iX92MyQLrXzd_IbaeY/s1600/way2blogging-reddit.png&quot;); }
        ul.social li.technorati { background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyS_lbUY6iW9-VRHvUKiQf9prU5zbSEaZ-ubrZr1HcLxmYHAXrX8_6Jpk9M9BgeRD9ChcbtRQvxBvg1gnuqpIZ__bjY3P5IlUHMao09Wikq_JQ1VFZsmzNE5_ChoH3NJh5mNh2BcxAFpXp/s1600/way2blogging-technorati.png&quot;); }
        #cssanime:hover li { opacity:0.2; }
        #cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
        #cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
        #cssanime li:hover { opacity:1; }
        #cssanime li:hover a strong { opacity:1; top:-10px; }
        </style>
3- ثم نبحث عن هذا الكود 
 <data:post.body/>
* ملاحظة قد نجد أكثر من كود الثاني هو المقصود
و نضع الكود التالي بعده
 <!-- by warch-mo.blogspot.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
        <ul class='social' id='cssanime'>
        <li class='facebook'>
        <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
        </li>
        <li class='twitter'>
        <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
        </li>
        <li class='googlebuzz'>
        <a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a>
        </li>
        <li class='stumbleupon'>
        <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
        </li>
        <li class='digg'>
        <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
        </li>
        <li class='delicious'>
        <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
        </li>
        <li class='linkedin'>
        <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
        </li>
        <li class='reddit'>
        <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
        </li>
        <li class='technorati'>
        <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
        </li>
        </ul>
        </b:if>
<!-- by warch-mo.blogspot.com -->
ثم قم بحفظ القالب و قم بمعاينة المدونة و إنشاء الله ستحصل على أزرار رائعة
دمتم بود في أمان الله

ليست هناك تعليقات:

إرسال تعليق

يسعدنا تفاعلكم بالتعليق , أما لو لديك سؤال خارج الموضوع يرجى استخدام ركن الأسئلة ولإضافة كود قم بتحويله أولابمحول الأكواد , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r