Cara Mudah Memasang Tombol Sosmed Keren Pada Blog

Pada zaman sekarang ini sosial media sudah lekat dengan kehidupan kita. Sosial media memudahkan kita untuk berhubungan dengan orang-orang yang kita kenal maupun tidak kita kenal, termasuk sangat berguna untuk mempromosikan produk ataupun blog kita. Pada kesempatan ini, 'CS mau memberikan trik bagaimana memasang tombol sosmed keren pada blog. Tombol sosmed ini berguna agar para pengunjung blog dapat dengan mudah menghubungi melalui sosmed yang sobat punya, baik itu facebook, twitter dan lainnya. Oke langsung saja kita login ke cara mudah memasang tombol sosmed keren pada blog, disimak ya~!


Baca juga cara mudah membuat label keren warna-warni

1. Login ke Blogger

2. Pilih Template ► Edit HTML

3. Cari kode ]]></b:skin>

4. Pasang kode dibawah ini diatas kode ]]></b:skin>

#head-soc ul li {list-style :none; padding: 0 0 0 12px; float: right;}
#head-soc ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden ; height: 32px; width: 32px ;border: 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiN7nGtVbOkSakSzVE9tLE2fxXvJbREePX7jSmaXxNgABi4CchrOWg8xYWfd-ZBJy_vIY4BsJJHKFTzu6VypJcBLhwn2PCUK3rhX0vGKlT1cBryyt9yBQNd2bQlAA07flrcbNkkaB7fFU5/s1600/spice-up-blog-sprite.gif) no-repeat; display: block;}

#head-soc li#g a {background-position: 0px 0px;}
#head-soc li#g a:hover {background-position: 0px -32px;}

#head-soc li#rss a {background-position: -32px 0px;}
#head-soc li#rss a:hover {background-position: -32px -32px;}

#head-soc li#sub a {background-position: -64px 0px;}
#head-soc li#sub a:hover {background-position: -64px -32px;}

#head-soc li#fb a {background-position: -96px 0px;}
#head-soc li#fb a:hover {background-position: -96px -32px;}

#head-soc li#twit a {background-position: -128px 0px;}
#head-soc li#twit a:hover {background-position: -128px -32px;}

#head-soc li#li a {background-position: -160px 0px;}
#head-soc li#li a:hover {background-position: -160px -32px;}

#head-soc li#youtube a {background-position: -192px 0px;}
#head-soc li#youtube a:hover {background-position: -192px -32px;}

Angka yang berwarna biru merupakan ukuran tombol widget, bisa sobat ganti sesuai dengan kebutuhan

5. Simpan

6. Selanjutnya Pilih Tata Letak ► Tambah gadget

7. Pilih HTML/JavaScript

8. Pasang kode dibawah ini pada kolom HTML/JavaScript

<!--Social Sprite Html-->
<div id="head-soc" style="margin: 0 0 20px -10px">
<ul>
<li id="g"><a href="https://plus.google.com/110791741386418225279/posts" target="-blank">Google+</a></li>
<li id="rss"><a href="http://feeds.feedburner.com/copasange" target="-blank">RSS Feed</a> </li>
<li id="sub"><a href="http://feedburner.google.com/fb/a/mailverify?uri=copasange" target="_blank">Subscribe</a></li>
<li id="fb"><a href="http://facebook.com/copasange" target="-blank">Facebook</a></li>
<li id="twit"><a href="http://twitter.com/copasange" target="-blank">Twitter</a></li>
<li id="li"><a href="http://www.linkedin.com/in/copasange" target="-blank">LinkedIn</a></li>
<li id="youtube"><a href="https://www.youtube.com/user/copasange" target="-blank">YouTube</a></li>
</ul>
</div>

Ganti tulisan yang berwarna biru dengan No ID dan nama akun sosmed sobat

9. Simpan dan lihat hasilnya

Demikian cara mudah memasang tombol sosmed keren pada blog, semoga dapat membantu dan bermanfaat. Terimakasih atas kunjungannya.

loading...

► Copas Sange ◄

Berbagi Macam-Macam Tutorial Sobat sedang membaca artikel tentang Cara Mudah Memasang Tombol Sosmed Keren Pada Blog. Jika sobat ada pertanyaan atau pesan mengenai artikel diatas, salurkan pada kolom berkomentar !! Dan untuk mendapatkan tambahan pahala, silahkan LIKE and SHARE ♂

:: Salam Blogger ! ::

LANGGANAN ARTIKEL GRATIS
Dapatkan Artikel Terbaru Disini !
Masukkan email anda di bawah ini ! Maka otomatis anda akan mendapatkan kiriman terbaru dari Blog ini secara gratis via email. Terimakasih.

0 Response to "Cara Mudah Memasang Tombol Sosmed Keren Pada Blog"

Post a Comment