معهد خبراء بلوجر - اضافة ازرار الموقع الاجتماعية بتقنية css4

اضافة ازرار المواقع الاجتماعية
حقوق الاضافة لدى معهد خبراء بلوجر

http://im13.gulfup.com/2012-07-08/1341777284831.png
طريقة التركيب
لوحة التحكم > تصميم > عناصر الصفحة > اضافة اداة

كود بلغة HTML:

<div class="widget HTML" id="HTML23">

<div class="widget-content">

<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;

}



.touchme a.youtube { 

background-position: 0px -406px;

} 

.touchme a.youtube:hover { 

background-position: 0px -348px;

}



</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="#"external nofollow" target="_blank"></a>

<!-- youtube --> 

<a class="youtube" href="#" rel="external nofollow" target="_blank"></a></div></div></div>

قم بتغير علامة# بروابط مدونتك