Membuat "Simple Rounded Social Widget"

Widih, nggak terasa udah 2 bulan saya gak nulisin blog ini hahaha.... sampe lupa saya pernah punya blog ini *GUBRAK!!!

Apa kabar semua? :)

Okeh, berhubung sore ini saya lagi nggak gitu sibuk dan kebetulan punya waktu untuk nulisin blog ini. Sore ini saya mau ngajak anda untuk ngebikin sebuah widget sederhana yang menurut saya cukup interaktif untuk anda pasang di blog anda *itu juga klo anda mau sih, klo nggak ya gpp, lha wong saya nggak maksa juga hhe...

Dan nama widget yang akan kita buat kali ini adalah "Simple Rounded Social Widget". Tolong jangan tanya kenapa saya namain gitu, karena saya sendiri juga masih bingung kenapa tiba-tiba ngasih nama sok-sok british untuk widget kali ini haha... intinya sih, saya namain rounded jelas karena bentuknya yang agak bundar *emank bundar malah, simple karena emank widget ini sangat-sangat sederhana bahkan jauh dari kesan bagus, dan untuk social widget, karena saya pikir fungsi widget ini lebih ke arah social networking share atau bahasa gampangnya untuk mengenalkan akun social network kita ke orang lain *halah ruwet'e eram haha...

Widget ini sendiri, awalnya cuma isenk saya bikin untuk salah satu blog pribadi saya, yang dari awal memang ingin saya kesankan bersih tanpa ada ornamen widget atau iklan sama sekali. Dan terinspirasi dari widget subscribe yang saya liat di blog W2B, akhirnya biarpun nggak mirip-mirip banget saya buat duplikasi widget tersebut untuk blog pribadi saya, yang tentu sedikit saya sesuaikan dengan warna dasar blog pribadi saya itu :)

Dan untuk anda yang ingin terlebih dahulu melihat demonya, anda bisa langsung menuju Serabutan.Com dan silahkan scroll ke arah paling bawah untuk melihat penampakan widget yang satu ini, pokoknya mah persis lah sama gambar dipaling atas hhe...

Udah diliat demonya? klo udah, untuk anda yang tertarik anda bisa mengikuti panduan singkat saya dibawah ini:

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/AVvXsEjbKOC31JfsexTjFljmN973JCICgDDZvX9Ua5OUmeQj90gLs48Y1a69XVXELfvYHvNda0U7Gkz9D8eLmp1cTRsHclJYT3qNoZqmpTXxLhdHmDslffIGRK9AoCuuI7N_V6ctqymWQ_Ca1vc_/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, harusnya sih bentuknya sama persis kaya yang bisa anda liat di blog personal saya itu :)

Gimana gampang kan? lha iya, wong hidup udah susah kok ngapain tutorial ikutan dibikin susah hahahaha.... C'u di postingan selanjutnya semuaaa.... aku arep nyepi mneh #glunthang

Ps: Untuk yang saya berikan warna merah, silahkan ganti dengan dengan url social networking anda masing-masing