Cara Membuat Widget Social Media Metro Style di Blog ~ SCH-XP

Cara Membuat Widget Social Media Metro Style di Blog - Dalam dunia blogging, Social Media dikenal sebagai sarana atau layanan untuk mempromosikan blog atau sering disebut sebagai blog marketing, dalam artianya, jejaring sosial dapat digunakan oleh para blogger dalam rangka meningkatkan trafik kunjungan mereka, karena dengan social media, bukan tidak mungkin suatu saat nanti sumber trafik utama search engine tergeser oleh social media, karena pada hakikatnya, semua orang menginginkan efisiensi yang tinggi dalam berinteraksi, dan semua itu telah terjawab oleh social media, karena semua orang bisa berinteraksi dengan mudahnya tanpa batasan-batasan apapun.

Nah, sehubungan dengan usaha kita dalam mengoptimalkan akun social media tersebut, dibawah ini sudah saya sertakan widget social media sederhana yang mengusung tema metro style, yakni tampilan atau antarmuka yang biasa dipakai di Windows 8 ataupun Windows phone, tentunya anda sudah tahu bukan, selain itu, warna-warnanya juga tidak default semuanya sama, warnanya juga disesuaikan dengan warna asli icon dari masing-masing jejaring sosialnya, seperti misalnya facebook berwarna biru tua.

Cara Membuat Widget Social Media Metro Style

1. Login ke Blogger.

2. Pilih Tata Letak.

3. Klik Add/Tambahkan gadget.

4. Pilih gadget HTML/JavaScript.

5. Letakkan kode CSS dan HTML berikut ini kedalamnya.

<style>
.tuliskancom-metro-social{width:300px}
.tuliskancom-metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.tuliskancom-metro-social .facebooktuliskan,.twittertuliskan,.googleplustuliskan,.pinteresttuliskan,.linkedintuliskan,.youtubetuliskan,.rsstuliskan{z-index:7;float:left;margin:1px;position:relative;display:block}
.tuliskancom-metro-social .facebooktuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDD3btX85lHrzkm17h_6bT_KRGJcOIn_CM2ydROORe4VbylkFw7S6mH4z69azMINAHTOcK0XH-XPnMMW6edgPEbu6bkHaGeVB6M3h2Oizt8HMP9aX1W_LInXRtMsP77Cyn2cbzbMd6r2Y/s1600/facebook-tuliskan.png) no-repeat center center #1f69b3;width:140px;height:141px}
.tuliskancom-metro-social .twittertuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXhX0l0YTswyQ-4OF7TJnEjZouI1EYgnADs0v6IowOndxdqD7OnSHD33tzZ7nmu1Hm9ZDkTAnAXqaa8M1bg0iCxaWVGUfV_Ssq33yniScT84UtuI0wikvRcBbq_5ezSnwB0utlyfA7pAk/s1600/twitter-tuliskan.png) no-repeat center center #43b3e5;width:68px;height:70px}
.tuliskancom-metro-social .googleplustuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnWnYCF4gdnrdNcsUQXtzjBFQN7ldPYGyLZmJPS9LdGT4EW_hde8O7xXexW_pCf-rNTtcWn2x6T78m12DiOuzh_WEoDqiNhCM4idOhm6Ll-Xceo8Ffe2rGd-GGmLqam73MXz9Yd744y6E/s1600/googleplus-tuliskan.png) no-repeat center center #da4a38;width:69px;height:70px}
.tuliskancom-metro-social .pinteresttuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoA6WRHUXBAhaA0zL3BxZ88UHKkQSWtKkK7SlcJDOcqNwLeJRnyaxrssAMzvqVmbYxkkofSg8VcwzpeEL4OVmjf9wv8Vl6r4WFOscjttCvVAcPcnuGTjBalhqK56CnpeUxZCLt47S1km0/s1600/pinterest-tuliskan.png) no-repeat center center #d73532;width:68px;height:69px}
.tuliskancom-metro-social .linkedintuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPbOfBgnr-gDlpY9AYkIO3gd6nR44IYD2OEUg3yQPfyzn9DxtnafSU_Ie48i0YPLktUezYi4o7jcya-0rid8fJLM8WqXoGGN1H_HAJlqsK9-m079PQVFsNRoyOirPvkaToyAoHjMgpbS0/s1600/linkedin-tuliskan.png) no-repeat center center #0097bd;width:69px;height:69px}
.tuliskancom-metro-social .youtubetuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlshOhkMWnVYKTfyLj2WVcoS3P02wUTsx3ecEq0kIOiqKYiRn0gICQFYke9A9Um6_gBTZyku1VI4oPowje6raCxIoCxEsYqti1FyWIio2mXCUNBYC8ePGaUQ3uV6lxlu8K-P7wiOEc0wM/s1600/youtube-tuliskan.png) no-repeat center center #e64a41;width:140px;height:69px}
.tuliskancom-metro-social .rsstuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk34-hGRGixsBYusO6KY5bC23C_adfeRr6txP7N5O1LMUf8AqnmT8iqCejAFmFcMqHGWm7TOtbFosUItpPZLgoqhRyWi-KXTI8OkDHgAJCNS10vELUJiUav4JS2ZXVwKlqWMSCRceYdfQ/s1600/rss-feed-tuliskan.png) no-repeat center center #e9a01c;width:140px;height:69px}
.tuliskancom-metro-social li:hover .facebooktuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtFCyJ7rVSkt61DHPd9I7j8Kd7y4IW3cPUPkomU3KU5iKhEibz9tSrKTC1aYftPtJghdyLrWF_zAec_dfbWXVh_1sjbXCBnFdC08h6PfVMC4f1bJPmddPvNP_0Vw4RcntwAqOnAVJBZ9g/s1600/facebook-tuliskan.png) no-repeat center center #1f69b3}
.tuliskancom-metro-social li:hover .twittertuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-d6m9w73ORgwrAAGRKoOjNWz7YLqBeSMTVSZQJJpCbhmfGnxgBn3HterjgkF22Py4xXDH4-tLT1KudqTYmuUr8YpyFyF0lLWwS7oXy28R2zJVpOm-V7YhClYaj27zEMLZy1nX9Mw8jVI/s1600/twitter-tuliskan.png) no-repeat center center #43b3e5}
.tuliskancom-metro-social li:hover .googleplustuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-d6m9w73ORgwrAAGRKoOjNWz7YLqBeSMTVSZQJJpCbhmfGnxgBn3HterjgkF22Py4xXDH4-tLT1KudqTYmuUr8YpyFyF0lLWwS7oXy28R2zJVpOm-V7YhClYaj27zEMLZy1nX9Mw8jVI/s1600/twitter-tuliskan.png) no-repeat center center #da4a38}
.tuliskancom-metro-social li:hover .pinteresttuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoA6WRHUXBAhaA0zL3BxZ88UHKkQSWtKkK7SlcJDOcqNwLeJRnyaxrssAMzvqVmbYxkkofSg8VcwzpeEL4OVmjf9wv8Vl6r4WFOscjttCvVAcPcnuGTjBalhqK56CnpeUxZCLt47S1km0/s1600/pinterest-tuliskan.png) no-repeat center center #d73532}
.tuliskancom-metro-social li:hover .linkedintuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPbOfBgnr-gDlpY9AYkIO3gd6nR44IYD2OEUg3yQPfyzn9DxtnafSU_Ie48i0YPLktUezYi4o7jcya-0rid8fJLM8WqXoGGN1H_HAJlqsK9-m079PQVFsNRoyOirPvkaToyAoHjMgpbS0/s1600/linkedin-tuliskan.png) no-repeat center center #0097bd}
.tuliskancom-metro-social li:hover .youtubetuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlshOhkMWnVYKTfyLj2WVcoS3P02wUTsx3ecEq0kIOiqKYiRn0gICQFYke9A9Um6_gBTZyku1VI4oPowje6raCxIoCxEsYqti1FyWIio2mXCUNBYC8ePGaUQ3uV6lxlu8K-P7wiOEc0wM/s1600/youtube-tuliskan.png) no-repeat center center #e64a41}
.tuliskancom-metro-social li:hover .rsstuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk34-hGRGixsBYusO6KY5bC23C_adfeRr6txP7N5O1LMUf8AqnmT8iqCejAFmFcMqHGWm7TOtbFosUItpPZLgoqhRyWi-KXTI8OkDHgAJCNS10vELUJiUav4JS2ZXVwKlqWMSCRceYdfQ/s1600/rss-feed-tuliskan.png) no-repeat center center #e9a01c}
</style>
<div class="tuliskancom-metro-social">
<br />
<li><a class="facebooktuliskan" href="http://www.facebook.com/sch-xp" title="Facebook"></a></li>
<li><a class="twittertuliskan" href="http://twitter.com/sch-xp" title="Twitter"></a></li>
<li><a class="googleplustuliskan" href="https://plus.google.com/101461963743509825679" title="Google+"></a></li>
<li><a class="pinteresttuliskan" href="http://pinterest.com/sch-xp" title="Pinterest"></a></li>
<li><a class="linkedintuliskan" href="https://www.linkedin.com/sch-xp" title="Linkedin"></a></li>
<li><a class="youtubetuliskan" href="http://www.youtube.com/sch-xp" title="Youtube"></a></li>
<li><a class="rsstuliskan" href="http://feeds.feedburner.com/sch-xp" title="Feedburner"></a></li>
</div>

Keterangan:
Ganti kode yang berwarna biru tua dengan ID / Nama Fan Page Facebook anda
Ganti kode yang berwarna biru muda dengan Username Twitter anda
Ganti kode yang berwarna pink dengan ID Google+ anda
Ganti kode yang berwarna merah dengan Username Pinterest anda
Ganti kode yang berwarna ungu dengan Username Linkedin anda
Ganti kode yang berwarna hijau dengan ID Youtube anda
Ganti kode yang berwarna oranye dengan ID Feedburner blog anda

6. Klik "Save/Simpan" gadget, dan selesai.

source