Rabu, Juni 27

Membuat "Simple Rounder Social Button"

gag usah banyak cingcong, langsung ke TKP:

1. Silahkan Login ke akun Google anda masing-masing yang pastinya akan langsung terkoneksi dengan akun blog anda :)
2. Klo udah sampe di Dashboard, silahkan masuk ke Menu Rancangan (sorry saya masih suka pake Dashboard lama, jadi silahkan sesuaikan aja klo anda udah pake yang baru).
3. Klik Edit HTML
4. Centang Expand Template Widget
5. Cari kode berikut ini:

]]></b:skin>

5. Klo udah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode ]]></b:skin> tersebut:

/*--------Simple Rounded Social Widget------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi60_taLPoi_cqeugcKFftyFhcyhIR2gDHlzWnIBl6D_Kmbf0vUczbJJWjFwtPyMleAuSRrtADZA0c8b374rdEzcXrgBgaYNoZDMdFvNreaqI1oPiZhXofMqB3dlsKo89rRVs0VHgbr9u3z/s1600/Sharing+Touch+Me.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;

}


.touchme a.googleplus {
background-position: 0px -58px;

}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}


.touchme a.twitter {
background-position: 0px -290px;

}
.touchme a.twitter:hover {
background-position: 0px -232px;

}
.touchme a.facebook {
background-position: 0px -406px;

}
.touchme a.facebook:hover {
background-position: 0px -348px;

}


.touchme a.rss {
background-position: 0px -174px;

}
.touchme a.rss:hover {
background-position: 0px -116px;

}



Udah? klo udah silahkan save template anda dan taro HTML berikut ini ditempat yang anda inginkan, klo mau taro di Widget, ya silahkan klik Add Gadget dari menu Elemen laman kemudian pilih HTML/JavaScript dan letakkan HTML dibawah ini didalamnya, atau klo mau taro di dalem postingan silahkan taro ditempat yang anda suka lewat menu edit html anda masing-masing, caranya pasti udah pada tau donk hhe.... yupz, sama aja kaya anda naro iklan atau widget lain kedalem postinga. Dan berikut kode HTML-nya:

<div class='touchme'>

<!--RSS-->
<a class='rss' href="LINK RSS BLOG ANDA" rel='external nofollow' target='_blank'></a>

<!--Google Plus-->
<a class='googleplus' href="LINK GOOGLE+ ANDA" rel='external nofollow' target='_blank'></a>

<!--Facebook-->
<a class='facebook' href="LINK FACEBOOK ANDA" rel='external nofollow' target='_blank'></a>

<!-- Twitter -->
<a class='twitter' href="LINK TWITTER ANDA" rel='external nofollow' target='_blank' ></a>


</div>


Klo udah silahkan save kembali dan lihat hasilnya,

Tidak ada komentar:

Posting Komentar

Apabila ada yang kurang jelas, jangan sungkan-sungkan berkomen.
Komentar anda sangat dibutuhkan agar blog ini menjadi lebih baik :)

Berkomentarlah dengan sopan dan diusahakan komentar yang membangun