Bangiz - Untuk mempercantik tampilan blog tentunya banyak sekali cara yang bisa Anda lakukan. Tentunya dengan tujuan supaya blog kita kelihatan unik dan beda dengan yang lainnya. Mudah-mudahan cara berikut ini bisa memberi inspirasi untuk Anda yaitu dengan menambahkan tombol sosial media yang seksi dan keren tentunya.
Adapun jejaring sosial yang dipakai di sini ialah yang banyak digunakan oleh seluruh dunia, yaitu Facebook, Twitter, Google+, Pinterest, dan juga Subscribe dengan RSS.
Adapun jejaring sosial yang dipakai di sini ialah yang banyak digunakan oleh seluruh dunia, yaitu Facebook, Twitter, Google+, Pinterest, dan juga Subscribe dengan RSS.
 |
| Social media share |
1. Masuk Dasbor Blogger > Pilih blog.
2. Pilih menu Tata Letak > Tambahkan Gadget > cari HTML/Javascript.
3. Copy-Paste kode berikut pada tempat yang tersedia:
<!--Tombol Sosmed Keren By bangiz.blogspot.co.id--> <style> #wtss{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;} #wtss a{text-decoration:none; font-family:trebuchet ms,sans-serif;} #wtss li{position:relative; height:38px; cursor:pointer; padding: 0 !important;} #wtss .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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJrlswe6fV2uh-LvTWmhRU7Gv7I7y9uOe0zD4oLw-MlcnIpUqTtNkunQzF83QaDrYKwYe030M9xpVBHuPoP7Snvs5WXu7fAFMqVT4hDe57Hewm1PT68Un987AXEA2vgmx_ksztb2xdRtc/s800/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;} #wtss li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;} #wtss .icon{overflow:hidden; color:#fafafa;} #wtss .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;} #wtss .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;} #wtss .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;} #wtss .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;} #wtss .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;} #wtss li:hover .icon, .touch #wtss li .icon{width:210px;} .touch #wtss li .facebook, #wtss li:hover .facebook{background-color:rgba(59,89,152,1);} .touch #wtss li .twitter, #wtss li:hover .twitter{background-color:rgba(64,153,255,1);} .touch #wtss li .googleplus, #wtss li:hover .googleplus{background-color:rgba(228,69,36,1);} .touch #wtss li .pinterest, #wtss li:hover .pinterest{background-color:rgba(174,45,39,1);} .touch #wtss li .rss, #wtss li:hover .rss{background-color:rgba(255,102,0,1);} </style> <ul id="wtss"> <li data-alt="Follow us on Facebook"><a class="icon facebook" href="http://www.facebook.com/Bangiz">Follow us on Facebook</a></li> <li data-alt="Follow us on Twitter"><a class="icon twitter" href="http://www.twitter.com/Bangiz">Follow us on Twitter</a></li> <li data-alt="Follow us on Google+"><a class="icon googleplus" href="http://plus.google.com/Bangiz">Follow us on Google+</a></li> <li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="http://www.pinterest.com/Bangiz">Follow us on Pinterest</a></li> <li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/Bangiz">Subscribe with RSS</a></li> </ul> <!--Tombol Sosmed Keren By bangiz.blogspot.co.id-->
Keterangan:
Silahkan ganti yang berwarna merah dengan nama atau ID sosial media yang Anda miliki.
4. Jangan lupa Simpan.
Sekian empat tahapan yang bisa Anda coba terapkan untuk memiliki widget sosial media keren dengan efek hover di Blogger. Untuk hasilnya bisa di lihat gambar di bawah.
 |
| Social media share |
