Cara Membuat Widget Social Media Metro Style Di Blog

Selasa, 06 Agustus 2013

Cara Membuat Widget Social Media Metro Style Di Blog - Postingan yang satu ini saya akan membahas tentang dunia blogger yaitu cara membuat widget social media metro style di blog. Sudah banyak para pengguna blogger yang memasangkan social media seperti facebook, twitter dan google plus di blog tetapi memasangnya tidak begitu menarik perhatian pengunjung. Kegunaan social media adalah untuk mengetahui info lebih serta untuk menjalin tali silaturahmi kepada sesama pengguna blogger. Artikel yang saya posting ini sudah banyak sekali para pengguna blogger mempostingnya juga mungkin saya pemosting artikel ini yang ke 1000 kali ya. Langsung saja ke pokok pembicaraan, social media ini bentuknya hampir mirip seperti social media yang terdapat di windows 8. Cara memasangnya cukup mudah dan sangat simple. Ikuti cara-cara dibawah ini untuk memasang widget social media metro style.

1. Masuk ke blogger.
2. Pilih tata letak.
3. Pilig tambahkan.
4. Carilah html/javascript.
5. Salin kode dibawah ini.

<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/AVvXsEiVyUtPSJZMnBXYEc7xlJwByoNqjEtEv17gTAF_udG15yQiM2MvTqHJRtGQadVjD975seK_Bbgl9L5wxfhgXPBwzY5npMAVEaT_0V3-Sp4cTs-qE-NJ-Ak9Zyvi1n8NYZw7NGAp4PXoSqI/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/AVvXsEhdkQqBTa26FZDwBn8HrtNYCVb3mUSBwgHmcxKaz6wBXH_3drMclWIMQyz1Tf25P5zC0ENYpoqOhAaXvtKJx_cpo1J043bczMI5cH9KhAsXI91DUFRG47Wm7ykrUqyZS7B019tguV9TPbo/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/AVvXsEjMNrPgr0gERdjO-crbtMOoVqPHwAmpttibVj5GO0EiRg6dV2W2DFeVa9hp7pnF0ya1O7TaezKLJzl1meEWh-2Pgem9hOfJpvNXt9xmd2a8c86fyw8up2IbhWEXx0YqyNZDfCM4gdKXNwc/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/AVvXsEiBOZKa-DydHuKTZQGEgFHjikhiEMsc1QkDYwARw2nkTBo-kXv3Qya0a0DVjkKDulGxrSa8N2KduQ62m2-U8zDROExX6j8mzD5nKb-CrFjDtaCeOU3hRzssE0JLZ20T9_cDzHuLHcMeKc8/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/AVvXsEgDTWKppurmE7CSAHM1Fhd1PrkRNxLrRw5QJQyqorx8oovUhfmflvYfX4NULpDxYUIEH0Hk3NwueWTrpgA9hxFjH7gedTof7KQqT_d6M8uAahKcUnpGAnkmon-oq6ltiYKI6RRZdUxwzIA/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/AVvXsEjzsf9iC27Y0zzAHhgSK0lG7fwFT4iEPW9EGdi-lfpADgIZjlYBeybzmFDj2XZOUAcnT4EC924a5Qkaw61farj5XoA-x_YwmZ-VdzM2O70j1Qzwyvt0728gKCE5IU_pzgFgOz526WHPT6Q/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/AVvXsEhF4p7gYutPjC99RM0JdM4sLfG3i03YWB4AjsorR28_YTuBnq_rd3Ga7kCavaqK3tmABqD6ezmjZ0KDSyMk6MxAO8Ru9JhFjwBjhDPq1DUjogDJCi7HayegLPTp4PoVzF-yS8_1uGkgi2o/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/AVvXsEjKkLgGELhBNZmOXqGAkCiGBwpRnRK0my-6_fCaYT0ZplEADqOD2GyMURMTUMTdEYrvcVsTu3tW_NMl3jKKVWFhHOMBA-y3vC8OvfQr1j2W2YKzoaonscAXbuqnvG3VGUQUBoiH3cQADq0/s1600/facebook-tuliskan.png) no-repeat center center #1f69b3}
.tuliskancom-metro-social li:hover .twittertuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL3d6cViPdfUVxUIAJ12otvTXIuaFjWBsShlpjjYP_H3QEEQeAiGXQUoED7TebP9xNH_orVUOF6DSP4tvM04APCIGnj2fBm9xdXe0cARfs05PhvhyphenhyphenZ2JbIJfkCyQ9Z3xrUa_OhM-ZT8sA/s1600/twitter-tuliskan.png) no-repeat center center #43b3e5}
.tuliskancom-metro-social li:hover .googleplustuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL3d6cViPdfUVxUIAJ12otvTXIuaFjWBsShlpjjYP_H3QEEQeAiGXQUoED7TebP9xNH_orVUOF6DSP4tvM04APCIGnj2fBm9xdXe0cARfs05PhvhyphenhyphenZ2JbIJfkCyQ9Z3xrUa_OhM-ZT8sA/s1600/twitter-tuliskan.png) no-repeat center center #da4a38}
.tuliskancom-metro-social li:hover .pinteresttuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBOZKa-DydHuKTZQGEgFHjikhiEMsc1QkDYwARw2nkTBo-kXv3Qya0a0DVjkKDulGxrSa8N2KduQ62m2-U8zDROExX6j8mzD5nKb-CrFjDtaCeOU3hRzssE0JLZ20T9_cDzHuLHcMeKc8/s1600/pinterest-tuliskan.png) no-repeat center center #d73532}
.tuliskancom-metro-social li:hover .linkedintuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDTWKppurmE7CSAHM1Fhd1PrkRNxLrRw5QJQyqorx8oovUhfmflvYfX4NULpDxYUIEH0Hk3NwueWTrpgA9hxFjH7gedTof7KQqT_d6M8uAahKcUnpGAnkmon-oq6ltiYKI6RRZdUxwzIA/s1600/linkedin-tuliskan.png) no-repeat center center #0097bd}
.tuliskancom-metro-social li:hover .youtubetuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzsf9iC27Y0zzAHhgSK0lG7fwFT4iEPW9EGdi-lfpADgIZjlYBeybzmFDj2XZOUAcnT4EC924a5Qkaw61farj5XoA-x_YwmZ-VdzM2O70j1Qzwyvt0728gKCE5IU_pzgFgOz526WHPT6Q/s1600/youtube-tuliskan.png) no-repeat center center #e64a41}
.tuliskancom-metro-social li:hover .rsstuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF4p7gYutPjC99RM0JdM4sLfG3i03YWB4AjsorR28_YTuBnq_rd3Ga7kCavaqK3tmABqD6ezmjZ0KDSyMk6MxAO8Ru9JhFjwBjhDPq1DUjogDJCi7HayegLPTp4PoVzF-yS8_1uGkgi2o/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/Muhammadagielkblogspotcom" title="Facebook"></a></li>
<li><a class="twittertuliskan" href="http://twitter.com/LabaLabaBlog" title="Twitter"></a></li>
<li><a class="googleplustuliskan" href="https://plus.google.com/106699483618300669459" title="Google+"></a></li>
<li><a class="pinteresttuliskan" href="http://pinterest.com/" title="Pinterest"></a></li>
<li><a class="linkedintuliskan" href="https://www.linkedin.com/" title="Linkedin"></a></li>
<li><a class="youtubetuliskan" href="http://www.youtube.com/" title="Youtube"></a></li>
<li><a class="rsstuliskan" href="http://feeds.feedburner.com/Laba-LabaBlog" title="Feedburner"></a></li>
</div>

6. Simpan.

Catatan:
1. Tulisan yang di tandai dengan warna merah anda bisa ganti dengan alamat facebook anda.
2. Tulisan yang berwarna biru anda bisa ganti dengan alamat atau username twitter anda.
3. Tulisan yang berwarna hijau anda bisa ganti dengan alamat google plus anda.

sumber: sch-xp.blogspot.com