Dalam posting ini saya akan menjelaskan bagaimana menambahkan Css geser daftar ikon sosial bagi blogger. Pada Sebelumnya saya telah memposting Cara Claim Blog Di Alexa, Dalam tutorial ini saya Dengan menggunakan widget ini Anda dapat menghubungkan media sosial Anda profil Facebook, Twitter, Google, dan Rss.
Langsung saja kita menuju yang dituju, Berikut langkah-langkahnya :
Langsung saja kita menuju yang dituju, Berikut langkah-langkahnya :
- Login ke Dashboard
- Masuk ke Layout/Tata Letak
- Add Gadget >> HTML/JavaScript
- Masukkan kode di bawah, lalu Simpan
<style> /*--------Social Sharing Widget ------*/ .socialsharing a { display:block; height:50px;width:50px;padding:0 4px;float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr4-T47mj8R66Tpb-Pf35unct3prAcSKeg2jU1CCrfW1z75nzv9jHBrD6oEvUxi2ggaE6AHoYlap0D31r759q83nukEjdK5pm1KvdJ-aI6vDD9p6QMNMQAkB1RjXF48Z2tIdQ0MJhPB-s/s1600/Sharing+buttons.png) no-repeat; -webkit-transition: ease-in 0.2s all; -moz-transition: ease-in 0.2s all; -o-transition: ease-in 0.2s all; -ms-transition: ease-in 0.2s all; transition: ease-in 0.2s all; cursor:pointer; } .socialsharing a.googleplus { background-position: 0px -58px; } .socialsharing a.googleplus:hover { background-position: 0px 0px; } .socialsharing a.twitter { background-position: 0px -290px; } .socialsharing a.twitter:hover { background-position: 0px -232px; } .socialsharing a.facebook { background-position: 0px -406px; } .socialsharing a.facebook:hover { background-position: 0px -348px; } .socialsharing a.rss { background-position: 0px -174px; } .socialsharing a.rss:hover { background-position: 0px -116px; } </style> <br /> <div class="socialsharing"> <a class="rss" href="RSS Link" rel="external nofollow" target="_blank"></a> <a class="googleplus" href="Google profile link" rel="external nofollow" target="_blank"></a> <a class="facebook" href="Facebook page Link" rel="external nofollow" target="_blank"></a> <a class="twitter" href="Twitter Link" rel="external nofollow" target="_blank"></a> </div> |
Save dan lihat hasilnyaa..
Catatan :
Merah : Ganti dengan kode URL Anda.
Semoga bermanfaat dan mohon maaf bila penyampaian saya kurang bagus :)
Semoga bermanfaat!












