cara membuat social media di blogspot
Cara membuat social media di blogspot - tutorial cara membuat social media di blogspot ini simpel dan memiliki code yang ringan dan sangat mudah dipahami, bila anda tertarik untuk melihat tampilan cara membuat social media di blogspot ini silahkan kunjungi link downloadnya dibawah ini, bila anda tertarik untuk memasangnya silahkan simak tutorial dibawah ini, langsung saja menuju TKP.Install Program CSS
- Login ke dashboard anda
- Masuk ke "TEMPLATE" lalu klik " Edit HTML "
- Cari code ]]></b:skin>
- 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 : http://mas-arie69.blogspot.com/
******************************************/
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/AVvXsEhuF9FfI8R4g3mSIryRybPehzq3vS-K8pL4vl_2MkendlgNZdCX7z2fL7lZMLNT76GKBmsUF6DRxxrGFUN5iI6F3Lx7RyTPwg7-5ASrbwai8aK7Skesj4hyphenhyphenoGEibMBH0J5QRTO0AMvVZwo/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/AVvXsEhuF9FfI8R4g3mSIryRybPehzq3vS-K8pL4vl_2MkendlgNZdCX7z2fL7lZMLNT76GKBmsUF6DRxxrGFUN5iI6F3Lx7RyTPwg7-5ASrbwai8aK7Skesj4hyphenhyphenoGEibMBH0J5QRTO0AMvVZwo/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}
Name : cara membuat social media di blogspot
By : http://mas-arie69.blogspot.com/
******************************************/
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/AVvXsEhuF9FfI8R4g3mSIryRybPehzq3vS-K8pL4vl_2MkendlgNZdCX7z2fL7lZMLNT76GKBmsUF6DRxxrGFUN5iI6F3Lx7RyTPwg7-5ASrbwai8aK7Skesj4hyphenhyphenoGEibMBH0J5QRTO0AMvVZwo/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/AVvXsEhuF9FfI8R4g3mSIryRybPehzq3vS-K8pL4vl_2MkendlgNZdCX7z2fL7lZMLNT76GKBmsUF6DRxxrGFUN5iI6F3Lx7RyTPwg7-5ASrbwai8aK7Skesj4hyphenhyphenoGEibMBH0J5QRTO0AMvVZwo/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}
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.
<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>