Kamis, 27 Februari 2014

cara membuat social media di blogspot



Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code ]]></b:skin> 
  4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : cara membuat social media di blogspot
By : Rivai Silaban | Ide Blogspot | Blog Design
Update : Senin 27 January 2014
******************************************/
ul.ideblogspot li {float:left;list-style: none outside none;border:none;}
ul.ideblogspot li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHTuL-rpdnSpFXdgBeLCP06Y02d3OVeejiEHWaTOADlQ4RPquMbAjd0o2pXa9oi2ioxLMGeCPWLoIdBvBkHB2PxAGl8lAkOmET7ifx8T92NJI5YKiD-0IMgcKas3cABLsx-z9woWgGNI8/s1600/ideblogspotsm.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
.ie7 ul.ideblogspot li a, .ie8 ul.ideblogspot li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHTuL-rpdnSpFXdgBeLCP06Y02d3OVeejiEHWaTOADlQ4RPquMbAjd0o2pXa9oi2ioxLMGeCPWLoIdBvBkHB2PxAGl8lAkOmET7ifx8T92NJI5YKiD-0IMgcKas3cABLsx-z9woWgGNI8/s1600/ideblogspotsm.png' )}
ul.ideblogspot li.facebook a{ background-position:0 0}
ul.ideblogspot li.flickr a{ background-position:-32px 0}
ul.ideblogspot li.dribbble a{ background-position:-64px 0}
ul.ideblogspot li.googleplus a{ background-position:-96px 0}
ul.ideblogspot li.linkedin a{ background-position:-128px 0}
ul.ideblogspot li.pinterest a{ background-position:-160px 0}
ul.ideblogspot li.rss a{ background-position:-192px 0}
ul.ideblogspot li.skype a{ background-position:-224px 0}
ul.ideblogspot li.twitter a{ background-position:-256px 0}
ul.ideblogspot li.vimeo a{ background-position:-288px 0}
ul.ideblogspot li.youtube a{ background-position:-320px 0}
ul.ideblogspot li.facebook a:hover, #sidebar ul.ideblogspot li.facebook a:hover{ background-position:0 -32px}
ul.ideblogspot li.flickr a:hover, #sidebar ul.ideblogspot li.flickr a:hover{ background-position:-32px -32px}
ul.ideblogspot li.dribbble a:hover, #sidebar ul.ideblogspot li.dribbble a:hover{ background-position:-64px -32px}
ul.ideblogspot li.googleplus a:hover, #sidebar ul.ideblogspot li.googleplus a:hover{ background-position:-96px -32px}
ul.ideblogspot li.linkedin a:hover, #sidebar ul.ideblogspot li.linkedin a:hover{ background-position:-128px -32px}
ul.ideblogspot li.pinterest a:hover, #sidebar ul.ideblogspot li.pinterest a:hover{ background-position:-160px -32px}
ul.ideblogspot li.rss a:hover, #sidebar ul.ideblogspot li.rss a:hover{ background-position:-192px -32px}
ul.ideblogspot li.skype a:hover, #sidebar ul.ideblogspot li.skype a:hover{ background-position:-224px -32px}
ul.ideblogspot li.twitter a:hover, #sidebar ul.ideblogspot li.twitter a:hover{ background-position:-256px -32px}
ul.ideblogspot li.vimeo a:hover, #sidebar ul.ideblogspot li.vimeo a:hover{ background-position:-288px -32px}
ul.ideblogspot li.youtube a:hover, #sidebar ul.ideblogspot li.youtube a:hover{ background-position:-320px -32px}
/* cara membuat social media di blogspot */

Install Program Tag HTML


  • Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
  • Copy code dibawah ini dan pastekan di widget anda silahkan anda ganti linknya menjadi link anda. Terimakasih salam Blogspot semoga bermanfaat.
<!-- cara membuat social media di blogspot code start-->
<ul class='ideblogspot'>
<li class='facebook'>
<a href='http://www.ideblogspot.com/' target='_blank' title='facebook'/>
</a></li>
<li class='googleplus'>
<a href='http://www.ideblogspot.com/' target='_blank' title='googleplus'/>
</a></li>
<li class='pinterest'>
<a href='http://www.ideblogspot.com/' target='_blank' title='pinterest'/>
</a></li>
<li class='twitter'>
<a href='http://www.ideblogspot.com/' target='_blank' title='twitter'/>
</a></li>
<li class='rss'>
<a href='http://www.ideblogspot.com/' target='_blank' title='rss'/>
</a></li>
<li class='skype'>
<a href='http://www.ideblogspot.com/' target='_blank' title='Skype'/>
</a></li>
<li class='vimeo'>
<a href='http://www.ideblogspot.com/' target='_blank' title='vimeo'/>
</a></li>
<li class='dribbble'>
<a href='http://www.ideblogspot.com/' target='_blank' title='dribble'/>
</a></li>
<li class='flickr'>
<a href='http://www.ideblogspot.com/' target='_blank' title='flickr'/>
</a></li>
<li class='linkedin'>
<a href='http://www.ideblogspot.com/' target='_blank' title='linkedin'/>
</a></li>
<li class='youtube'>
<a href='http://www.ideblogspot.com/' target='_blank' title='youtube'/>
</a></li>
</ul>
<!-- cara membuat social media di blogspot code end-->

0 komentar:

Posting Komentar