إضافة أزرار المتابعة بثأثير رائع جداً
السلام عليكم اليوم بفضل الله تعالى أحضرت لكم إضافة جميلة جدا و بتأتير خرافي تثمثل في أزرار صغيرة للمتابعة على موقع تويتر , جوجل بلس + و يوتوب , ثم الخلاصات و أخيراً فيسبوك هذه الإضافة مقتبسة من قالب أجنبي إسمه Labnol أعجبتني و لما لا أشاركها معك ، غير ذلك نمر الأن لشرح تركيب الإضافةإضافة أزرار المتابعة بثأثير رائع جداً
إذهب لمدونتك و تخطيط ثم قم بإضافة أداة HTML/JAVASCRIPT و ألصق الكود التاليلا تنسى xxx التي باللون الأحمر بما يناسبك
<style>
.labnolSocial{display:inline-block;margin:10px
0}.labnolSocial
a{text-decoration:underline !important;float:right}.labnolSocial
span{float:left;display:inline;margin-right:10px}.labnolSocial
span.last{margin-left:0}.labnolSocial span
a{display:block;width:32px;height:32px;text-indent:-9999px;background-color:none;background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY9WEsPFPe9_zSrhEvwQL8uiDmCcY_7Le5RkSt5BPbhyW-m_BwRUv1EbGlfxEQhtg9C0lSKMpBIskMKbAUelCiu6OSbT1ATql85djnpn1qF-BVmCAcN-LSgrj049yUk_Iasc28p1cnpaiz/s1600/labnolcss.png") 0 0 no-repeat}
#iconTwitter{background-position:-33px -33px}#iconTwitter:hover{background-position:-33px 0}#iconFacebook{background-position:-66px -33px}#iconFacebook:hover{background-position:-66px 0}#iconRSS{background-position:0 -33px}#iconRSS:hover{background-position:0 0}#iconYouTube{background-position:-99px -33px}#iconYouTube:hover{background-position:-99px 0}#iconGooglePlus{background-position:-132px -33px}#iconGooglePlus:hover{background-position:-132px 0}.logo{background:url("labnol.org/wp/wp-content/themes/baba/logo-XL.png") no-repeat scroll 0 0 transparent;margin:0
auto;width:420px;padding:0
0 20px 0}
</style>
<div class="labnolSocial">
<span>
<a title="RSS Feed" href="http://feedburner.google.com/fb/a/mailverify?uri=xxx" target="_blank" id="iconRSS" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'RSS', document.location.pathname]);">RSS</a>
</span> <span>
<a title="Follow on Twitter" href="http://twitter.com/xxx" target="_blank" id="iconTwitter" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'Twitter', document.location.pathname]);">Twitter</a>
</span> <span>
<a title="Facebook Page" href="http://www.facebook.com/xxx" target="_blank" id="iconFacebook" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'Facebook', document.location.pathname]);">Facebook</a>
</span> <span>
<a title="YouTube Channel" href="http://www.youtube.com/user/xxx" target="_blank" id="iconYouTube" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'YouTube', document.location.pathname]);">YouTube</a>
</span> <span>
<a title="Google Plus" href="https://plus.google.com/xxx" target="_blank" id="iconGooglePlus" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'Google Plus', document.location.pathname]);">YouTube</a></span></div>
أتمنى أن ينال الموضوع إعجابك أترك بصمتك و لو فقط بتعليق بسيط.labnolSocial{display:inline-block;margin:10px
0}.labnolSocial
a{text-decoration:underline !important;float:right}.labnolSocial
span{float:left;display:inline;margin-right:10px}.labnolSocial
span.last{margin-left:0}.labnolSocial span
a{display:block;width:32px;height:32px;text-indent:-9999px;background-color:none;background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY9WEsPFPe9_zSrhEvwQL8uiDmCcY_7Le5RkSt5BPbhyW-m_BwRUv1EbGlfxEQhtg9C0lSKMpBIskMKbAUelCiu6OSbT1ATql85djnpn1qF-BVmCAcN-LSgrj049yUk_Iasc28p1cnpaiz/s1600/labnolcss.png") 0 0 no-repeat}
#iconTwitter{background-position:-33px -33px}#iconTwitter:hover{background-position:-33px 0}#iconFacebook{background-position:-66px -33px}#iconFacebook:hover{background-position:-66px 0}#iconRSS{background-position:0 -33px}#iconRSS:hover{background-position:0 0}#iconYouTube{background-position:-99px -33px}#iconYouTube:hover{background-position:-99px 0}#iconGooglePlus{background-position:-132px -33px}#iconGooglePlus:hover{background-position:-132px 0}.logo{background:url("labnol.org/wp/wp-content/themes/baba/logo-XL.png") no-repeat scroll 0 0 transparent;margin:0
auto;width:420px;padding:0
0 20px 0}
</style>
<div class="labnolSocial">
<span>
<a title="RSS Feed" href="http://feedburner.google.com/fb/a/mailverify?uri=xxx" target="_blank" id="iconRSS" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'RSS', document.location.pathname]);">RSS</a>
</span> <span>
<a title="Follow on Twitter" href="http://twitter.com/xxx" target="_blank" id="iconTwitter" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'Twitter', document.location.pathname]);">Twitter</a>
</span> <span>
<a title="Facebook Page" href="http://www.facebook.com/xxx" target="_blank" id="iconFacebook" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'Facebook', document.location.pathname]);">Facebook</a>
</span> <span>
<a title="YouTube Channel" href="http://www.youtube.com/user/xxx" target="_blank" id="iconYouTube" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'YouTube', document.location.pathname]);">YouTube</a>
</span> <span>
<a title="Google Plus" href="https://plus.google.com/xxx" target="_blank" id="iconGooglePlus" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'Google Plus', document.location.pathname]);">YouTube</a></span></div>
ليست هناك تعليقات
إرسال تعليق
جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).