Berbagi Pengetahuan Seputar Pendidikan | Berita | Metode Pembelajaran | Unik dan Menarik | Tips Tips

Cara Membuat Widget Social Media diblog


Halo Sobat blogger ... saya bagi - bagi ni cara membuat widget social media diblog :D
cukup mudah dan sangat gampang dipraktekin :D

1. Copy Script Dibawah ini

<style>

#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}

#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}

#tbisose li{position:relative; height:38px; cursor6 Cara Membuat Widget Social Media di Blog Website Widget twitter tips & trik Socia Media rss facebook ointer; padding: 0 !important;}

#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(http://pandito.web.id/wp-content/uploads/2013/12/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}

#tbisose .icon{overflow:hidden; color:#fafafa;}

#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}

#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}

#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}

#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}

#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}

#tbisose li:hover .icon,

.touch #tbisose li .icon{width:210px;}

.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}

.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}

.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}

.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}

.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}

</style>

<ul id=”tbisose”>

<li data-alt=”Follow us on Facebook”><a class=”icon facebook” href=”#Masukan URL Disini“>Follow us on Facebook</a></li>

<li data-alt=”Follow us on Twitter”><a class=”icon twitter” href=”#Masukan URL Disini“>Follow us on Twitter</a></li>

<li data-alt=”Follow us on Google+”><a class=”icon googleplus” href=”#Masukan URL Disini“>Follow us on Google+</a></li>

<li data-alt=”Follow us on Pinterest”><a class=”icon pinterest” href=”#Masukan URL Disini“>Follow us on Pinterest</a></li>

<li data-alt=”Subscribe with RSS”><a class=”icon rss” href=”#Masukan URL Disini“>Subscribe with RSS</a></li>

</ul><small><div style=”font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;”><a href=”http://pandito.web.id/cara-membuat-widget-social-media-di-blog-website/” target=”_blank” title=”Widget Follow Us”>+ Get Widget </a></div></small>

2. Masuk Ke dashboard blogger dan plih layout

Tutorial Blog

 3. Selanjutnya Pilih " ADD WIDGET "

Tutorial Blog
4. Selanjutnya Pilih " HTML/Javascript " 

Tutoril blog
 5. Pastekan code script tdi yang kita copy , kemudian SAVE

Tutorial Blog




Keterangan " #Masukan URL Disini“  
Ganti dengan URL sobat :D
oke cuman itu ...
semoga bermanfaat 
http://hamdanguangshemabu.blogspot.com/2014/03/cara-membuat-widget-social-media-diblog.html

Penulis: Hgs informasi Lokasi: Tarakan, kalimantan Utara

Artikel Cara Membuat Widget Social Media diblog, diterbitkan oleh Hgs informasi pada hari Selasa, 18 Maret 2014. Semoga artikel ini dapat menambah wawasan Anda. Hgs informasi adalah seorang penulis yang masih sedikit ilmunya tapi ingin berbagi. terima kasih sudah mau berkomentar di HGS INFORMASI . saya terima masukan atau kritik anda tentang Blog ini.

Artikel Terkait Cara Membuat Widget Social Media diblog :

Terima kasih sahabat HGS INFORMASI

NO SPAM
NO LINK AKTIF