Media Sosial merupakan Tempat dimana kita memudahkan Pengunjung untuk berkomunikasi dengan Kita.
Nah Kali ini saya akan membagikan Widget Blog Media Sosial Keren yag saya dapatkan dari Situs Blog Tutorial.
Dan untuk cara penerapanya sangat mudah Karena hanya menggunakan HTML.
Jadi Kita bisa langsung menerapkannya didalam Widget HTML/Javascript yang sudah tersedia didalam Blogger.
Next :
- diDalam Blogger
- Pilih Tata Letak
- Add Gadget
- Pilih Html/Java Script
- Terapkan Kode berikut ini :
<style>
#abt{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#abt a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#abt li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#abt .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(https://lh6.googleusercontent.com/-O_eNfqyGbXY/Ua7QecE1aiI/AAAAAAAAA_M/CyeEAD56u1M/w35-h158-no/facebook+and+google%252B+.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;}
#abt li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#abt .icon{overflow:hidden; color:#fafafa;}
#abt .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#abt .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#abt .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#abt .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#abt .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#abt li:hover .icon,
.touch #abt li .icon{width:210px;}
.touch #abt li .facebook, #abt li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #abt li .twitter, #abt li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #abt li .googleplus, #abt li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #abt li .pinterest, #abt li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #abt li .rss, #abt li:hover .rss{background-color:rgba(255,102,0,1);}
</style><a href="http://erdinmaulana.blogspot.com" style="font-size:0pt">Erdin Maulana</a>
<ul id="abt">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="https://www.facebook.com/erdinmaulana99" target="blank">Follow us on Facebook</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/102457111541169552733" target="blank">Follow us on Google+</a></li>
<li data-alt="Follow us on twitter"><a class="icon twitter" href="https://twitter.com/erdin_maulana99/" target="blank">Follow us on Twitter</a></li>
<li data-alt="Subscribe via RSS"><a class="icon rss" href="http://feeds.feedburner.com/ErdinMaulanah" target="blank">Subscribe via RSS</a></li>
</ul>
- Save
- Demo
Sumber : contohblog.com
