إضافة أيقونات التواصل الإجتماعى لمشاركة التدوينات

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

أولا نذهب الى التخطيط ثم نضيف ويدجيت HTML/JavaScript

<style>
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://mybloggertricks.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;   
-moz-transition: ease-in 0.2s all;   
-o-transition: ease-in 0.2s all;   
-ms-transition: ease-in 0.2s all;   
transition: ease-in 0.2s all;
cursor:pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
</style>
<div class='touchme'>
<!--RSS-->
<a class='rss' href="###" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="###" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="###" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="###" rel='external nofollow' target='_blank' ></a>
</div>

وبالطبع لا تنسي استبدال ال ### بروابط صفحاتك الخاصة على جوجل والفيس بوك وتويتر .

دمتم بخير :)

شارك المقالة عبر:

إقرأ أيضا