Cara membuat tombol sosial dengan efek slide

Cara membuat tombol sosial dengan efek slide - Hampir sama dengan beberapa postingan saya sebelumnya, Cara membuat tombol sosial dengan efek slide ini adalah generasi ke 3. Dengan gambar tombol yang lebih besar dan lebih responsive. berikut tutorial Cara membuat tombol sosial dengan efek slide. Check it out.

1. Masuk ke akun Blogger sobat.
2. Buka Tab Rancangan >> Template Edit Html, Lalu pastekan kode berikut tepat sebelum kode ]]></b:skin>

.social{float:left;display:inline}

.fb{height:64px;width:65px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpuO583mqPV9tEFmlzf0cTFcb3Me4pnjrTMvc0zmUsPzZyweRvXptlr8xwsYEhczWdx7PPaeODjytBpTVqwaPTu6LkfQZjeaQlrSKZpi9WDup4tRtVxhYyYz9vvfWoGuk7Y96ks4bXch9W/s1600/Social+Network.png) no-repeat;background-position:0 0;-moz-transition:all .2s;-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s}

.fb:hover{background-position:0 -65px}

.tw{height:64px;width:64px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpuO583mqPV9tEFmlzf0cTFcb3Me4pnjrTMvc0zmUsPzZyweRvXptlr8xwsYEhczWdx7PPaeODjytBpTVqwaPTu6LkfQZjeaQlrSKZpi9WDup4tRtVxhYyYz9vvfWoGuk7Y96ks4bXch9W/s1600/Social+Network.png) no-repeat;background-position:-66px 0;-moz-transition:all .2s;-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s}

.tw:hover{background-position:-65px -65px}

.gp{height:64px;width:64px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpuO583mqPV9tEFmlzf0cTFcb3Me4pnjrTMvc0zmUsPzZyweRvXptlr8xwsYEhczWdx7PPaeODjytBpTVqwaPTu6LkfQZjeaQlrSKZpi9WDup4tRtVxhYyYz9vvfWoGuk7Y96ks4bXch9W/s1600/Social+Network.png) no-repeat;background-position:-130px -0px;-moz-transition:all .2s;-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s}

.gp:hover{background-position:-130px -65px}

.rss{height:64px;width:65px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpuO583mqPV9tEFmlzf0cTFcb3Me4pnjrTMvc0zmUsPzZyweRvXptlr8xwsYEhczWdx7PPaeODjytBpTVqwaPTu6LkfQZjeaQlrSKZpi9WDup4tRtVxhYyYz9vvfWoGuk7Y96ks4bXch9W/s1600/Social+Network.png) no-repeat;background-position:-195px 0;-moz-transition:all .2s;-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s}

.rss:hover{background-position:-195px -65px}

3. Simpan template anda.
4. Langkah selanjutnya Masuk Tab Rancangan >> Tata letak >> Add Gadget.

<div class='social'><a href='http://facebook.com/USER_NAME'><div class='fb'></div></a></div>

<div class='social'><a href='http://twitter.com/USER_NAME'><div class='tw'></div></a></div>

<div class='social'><a href='http://plus.google.com/GOOGLE+ID'><div class='gp'></div></a></div>

<div class='social'><a href='/feeds/posts/default'><div class='rss'></div></a></div>

5. Simpan.

Catatan: Ganti Kode yang saya beri arna biru dengan ID masing masing.

6. Lihat hasilnya.

Sekian tutorial Cara membuat tombol sosial dengan efek slide semoga dapat bermanfaat.