Cara Memasang Widget Social Media Sharing dengan Metro Style di Bawah Posting Blog : Tips ini saya dapat dari salah satu blog yang saya follow yakni Blogger Plus | Informasi seputar blog, website, internet, komputer, dan software gratis. Menurut saya, ini info keren dan penting yang layak untuk dibagikan.
Kenapa saya katakan keren dan penting? Pertama, tidak dapat dipungkiri bahwa media jejaring sosial sangat membantu para blogger dalam mempromosikan blognya. Oleh karena itu, hampir semua blogger memasang widget jejaring sosial pada blog mereka. Bahkan Blogger secara default sudah menyediakan fasilitas tersebut untuk semua blog (blogspot) secara otomatis. Itu menandakan bahwa widget tersebut penting.. ya kan…
Namun tampilan standar widget sosial media bawaan blogger terlihat sangat sederhan. Sedangkan style widget Social Media Sharing Metro Style sangat berbeda.
Untuk membuat tampilan widget social media agar terlihat lebih menarik perlu sedikit modifikasi pada kode CSS dan HTML blog. Salah satu yang saat ini sedang populer adalah Membuat Widget Social Media dengan Metro Style. Ini alasan kenapa saya bilang keren..
Metro Style merupakan model interface sistem operasi komputer yang pertama kali diperkenalkan Microsoft sejak Windows 8. Ciri khasnya berbentuk kotak dengan ukuran besar dan warna-warni yang mencolok. Widget social media memang perlu diberi warna yang mencolok agar para pengunjung blog lebih mudah menemukannya. Jika lebih mudah ditemukan maka kemungkinan untuk berbagi posting ke social media akan semakin besar.
 |
| Ini tampilan Widget Social Media Sharing Metro Style |
Berikut adalah cara Memasang Widget Social Media Sharing dengan Metro Style di bawah posting blog.
Pastikan Anda sudah login ke Blogger. Pada halaman Dashboard blogspot, pilih menu Template kemudian Edit HTML. Letakkan kode berikut di atas ]]></b:skin>
.promote_post_bg {
height: 70px;
background: #469ebe 0 -7px no-repeat;
width: 620px;
margin-left: 0;
}.authorimg img {
float: left;
height: 70px;
width: 70px;
margin-left: 0;
}.authorname {
text-shadow: none;
background: #CF910B;
float: left;
text-align: center;
font-weight: bold;
font-size: 16px;
font-family: ‘cambria’,serif;
margin-left: 0;
padding-top: 25px;
width: 120px;
height: 45px;
}.authorname a {
color: #fff;
}.authorname a:hover {
color: #5774b6;
}.promote_twitter {
width: 110px;
height: 40px;
float: left;
margin-left: 0;
padding: 30px 0 0 30px;
text-align: center;
background: #3BAAE1;
}.promote_facebook {
width: 150px;
height: 40px;
float: left;
margin-left: 0;
padding: 30px 0 0 0;
text-align: center;
background: #4861A3;
}.promote_google {
width: 120px;
height: 40px;
float: left;
margin-left: 0;
padding: 30px 0 0 20px;
text-align: center;
background: #D71D1E;
}
Kemudian cari kode <data:post.body/> dan letakan kode html berikut ini di bawah <data:post.body/>
<b:if cond=’data:blog.pageType == "item"’>
<div class=’promote_post_bg’>
<div class=’authorimg’>
<img src=’https://lh6.googleusercontent.com/-bPnA0pzPKrk/AAAAAAAAAAI/AAAAAAAAA08/NVnil4cN7T0/s120-c/photo.jpg‘/>
</div><div class=’authorname’>
<a href=’https://plus.google.com/113357786970397590676‘>DEDI ARIKO</a>
</div><div class=’promote_twitter’>
<a class=’twitter-share-button’ data-via=’MHT_MMT’ href=’https://twitter.com/share’>Tweet</a>
<script>
!
function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = "//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");
</script>
</div><div class=’promote_facebook’>
<fb:like action=’like’ colorscheme=’light’ expr:href=’data:post.canonicalUrl’ font=’verdana’ layout=’button_count’ send=’false’ show_faces=’false’/>
<div><b:if cond=’data:post.isFirstPost’>
<script>
(function (d) {
var js, id = 'facebook-jssdk';
if (d.getElementById(id)) {
return;
}
js = d.createElement('script');
js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
</b:if>
</div>
</div><div class=’promote_google’>
<g:plusone annotation=’bubble’ size=’medium’/>
<script type=’text/javascript’>
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
</b:if>
Keterangan:
Ukuran margin, padding, height, dan weight bisa diatur agar sesuai dengan ukuran dan tampilan blog Anda. Kode warna background juga bisa diubah sesuai selera Anda.
Kode yang berwarna merah sebaiknya diganti dengan alamat url gambar/foto yang lain. Yang berwarna Orange adalah url Google+ Anda dan yang Biru adalah nama profil Anda.
Itulah cara memasang widget social media sharing dengan metro style di bawah posting blog. Untuk memasangnya memang perlu ketelitian dan eksperimen agar hasilnya sesuai dengan yang diharapkan. Selamat mencoba!