» » » » Cara Memasang Widget Media Umum Di Sidebar Blog

Cara Memasang Widget Media Umum Di Sidebar Blog

— — Add Comment — , ,
Cara Memasang Widget Media Sosial di Sidebar Blog. Tips Membuat Ikon Link Akun Medsos di Sidebar Blog untuk SEO, Trafik, dan Likers/Followers. 

SOCIAL atau media umum menjadi salah satu pilar SEO blog. Widgetnya dapat dipasang di sidebar blog, contohnya di atas kotak berlanggganan (subscription box). Ini salah satu jenis tampilannya:

Cara Memasang Widget Media Sosial di Sidebar Blog Cara Memasang Widget Media Sosial di Sidebar Blog


Menurut para ahli, fungsi link akun media umum yang dipasang di blog antara lain "attract new readers and engage with regulars", menarik pembaca gres dan "merawat" pengunjung setia.

Berikut ini cara menampilkan, menambah, atau memasang widget icon/link media umum di sidebar blog yang juga berfungsi menambah follower, liker, dan teman. DEMO-nya dapat dilihat di ilustrasi gambar posting ini.

Tentu atuh, sebelumnya teh, Anda harus sudah punya akun-akun medsosnya, terutama: facebook, twitter, google plus, linkedin, pinterest, instagram, dan youtube.

Banyak pilihan Widget Ikon Link Media Sosial di Sidebar Blog. Anda tinggal pilih salah satu.

Cara Memasang Widget Ikon Media Sosial di Sidebar Blog

Pilihan pertama icon link medsos di sidebar blogger. Bisa dipasang di sidebar, header, atau footer.

Cara Memasangnya.
Untuk memasang di sidebar blog, sangat mudah.

1. Login ke Blogger.
2. Klik Layout (Tata Letak) > Add a Gadget > pilih HTML/JavaScript.
3. Copas aba-aba berikut ini di kolom konten:

<style>
.social-profiles-widget{width:100%;height:auto;padding:10px 0}
.social-profiles-widget ul {list-style: none;float: RIGHT;padding: 0;}
.social-profiles-widget ul li{list-style:none;margin:0;display:inline}
.social-profile .fa {width:50px;height:45px;color:rgba(255,255,255,0.8);text-align:center;line-height: 45px;
font-size: 2em;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;margin-right: 5px;}
.social-profile .fa-facebook{background:#3b5998}
.social-profile .fa-twitter{background:#55acee}
.social-profile .fa-youtube{background:#cc181e}
.social-profile .fa-instagram{background:#9c694c}
.social-profile .fa-google-plus{background:#d34836}
.social-profile .fa:hover,.social-profile .fa:active{color:#FFF;-webkit-box-shadow:1px 1px 3px #333;-moz-box-shadow:1px 1px 3px #333;box-shadow:1px 1px 3px #333}
</style>
<div class='social-profiles-widget'>
 <ul class='social-profile circle'>
 <li><a href='#'><i class='fa fa-facebook'/></i></a></li>
 <li><a href='#'><i class='fa fa-twitter'/></i></a></li>
 <li><a href='#'><i class='fa fa-youtube'/></i></a></li>
 <li><a href='#'><i class='fa fa-google-plus'/></i></a></li>
 <li><a href='#'><i class='fa fa-instagram'/></i></a></li>
 </ul>
</div><div class='clear'/>

4. Ganti tanda pagar (#) dengan url link akun media umum Anda.
5. Save! Simpan.

JIKA tidak muncul, tambahkan aba-aba link ke font awesome berikut ini di atas aba-aba </head> di dalam template Anda.

 Klik Tema > Edit HTML, kemudian copas aba-aba berikut ini di atas kode </head>


<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Selesai!

Posisi Header

Untuk menampilkannya di HEADER, lakukan langkah "agak ribet" berikut ini, dengan catatan Anda memakai template blog Simple bawaan Blogger.

1. Klik Tema > Edit HTML

Cara Memasang Widget Media Sosial di Sidebar Blog Cara Memasang Widget Media Sosial di Sidebar Blog


2. Copas Kode CSS Widget Media Sosial di Sidebar Blog berikut ini di atas aba-aba ]]></b:skin>

.social-profiles-widget{width:100%;height:auto;padding:10px 0}
.social-profiles-widget ul {list-style: none;float: RIGHT;padding: 0;}
.social-profiles-widget ul li{list-style:none;margin:0;display:inline}
.social-profile .fa {width:50px;height:45px;color:rgba(255,255,255,0.8);text-align:center;line-height: 45px;
font-size: 2em;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;margin-right: 5px;}
.social-profile .fa-facebook{background:#3b5998}
.social-profile .fa-twitter{background:#55acee}
.social-profile .fa-youtube{background:#cc181e}
.social-profile .fa-instagram{background:#9c694c}
.social-profile .fa-google-plus{background:#d34836}
.social-profile .fa:hover,.social-profile .fa:active{color:#FFF;-webkit-box-shadow:1px 1px 3px #333;-moz-box-shadow:1px 1px 3px #333;box-shadow:1px 1px 3px #333}

3. Copas aba-aba berikut ini di atas aba-aba <b:section class='header' id='header' 

<div class='social-profiles-widget'>
 <ul class='social-profile circle'>
 <li><a href='#'><i class='fa fa-facebook'/></a></li>
 <li><a href='#'><i class='fa fa-twitter'/></a></li>
 <li><a href='#'><i class='fa fa-youtube'/></a></li>
 <li><a href='#'><i class='fa fa-google-plus'/></a></li>
 <li><a href='#'><i class='fa fa-instagram'/></a></li>
 </ul>
</div>

4. Ganti tanda pagar (#) dengan url link akun media umum Anda
5. Save! Simpan template.

Selesai. Lihat hasilnya.
Jika tidak muncul, tambahkan link ke awesome font di atas.

CARA LAIN

Memasang Widget Media Sosial di Sidebar Blog

 1. Login ke Blogger.
2. Klik "Template/Theme" > "Edit HTML"
3. Temukan (Ctrl+F) aba-aba ]]></b:skin> atau </style>
4. Copas aba-aba CSS berikut ini di atasnya:


#top-social-profiles{height:42px;text-align:right}#top-social-profiles img{margin:0 6px 0 0px !important}
#top-social-profiles img:hover{opacity:0.8}
#top-social-profiles .widget-container{background:none;padding:0;border:0}
.social-profiles-widget img{margin:0 6px 0 0}
.social-profiles-widget img:hover{opacity:0.8}

5. Save Template!

Lanjut dengan langkah berikutnya, yaitu pemasangan link akun medosnya di Layout (Tata Letak):

5. Klik "Layout" > "Add a Gadget" > pilih "HTML/JavaScript".
6. Copas aba-aba berikut ini di kolom "content". Judulnya cuekin aja, biarkan kosong!

<div id='top-social-profiles'>
<ul class='widget-container'>
<li class='social-profiles-widget'>

<a href='http://www.twitter.com/romeltea/' target='_blank'><img alt='Twitter' src='https://lh6.googleusercontent.com/-40NMu9YKlek/VJ66NcYZy3I/AAAAAAAAI5Y/9Yn9ZtLQb18/s32-no/twitter.png' title='Twitter'/></a>
<a href='http://www.facebook.com/romelteamedia/' target='_blank'><img alt='Facebook' src='https://lh6.googleusercontent.com/-DDBzF64PrRQ/VJ66Llwc7uI/AAAAAAAAI44/9cZaAsCSBOM/s32-no/facebook.png' title='Facebook'/></a>
<a href='http://plus.google.com/103329103950948291283/' target='_blank'><img alt='Google Plus' src='https://lh4.googleusercontent.com/-87tOc499YgM/VJ66MM6smeI/AAAAAAAAI48/CpqKtTJyhSs/s32-no/google.png' title='Google Plus'/></a>
<a href='http://www.linkedin.com/in/romeltea' target='_blank'><img alt='LinkedIn' src='https://lh6.googleusercontent.com/-wsMOZqtgZsI/VJ_Wi7YStbI/AAAAAAAAI9Y/xWVrEivmlZY/s32-no/linkedin.png' title='LinkedIn'/></a>
<a href='http://www.pinterest.com/romeltea/' target='_blank'><img alt='Pinterest' src='https://lh5.googleusercontent.com/-rQI0ZCqxvX0/VJ_WjcQ9QII/AAAAAAAAI9g/0XajOPBuXKI/s32-no/pinterest.png' title='Pinterest'/></a>
<a href='http://instagram.com/romeltea' target='_blank'><img alt='Instagram' src='https://lh4.googleusercontent.com/-3MPofh4xhe4/VJ66Ma_XWaI/AAAAAAAAI5E/6d8mLJBvFFU/s32-no/instagram.png' title='Instagram'/></a>
<a href='http://www.youtube.com/user/romeltea' target='_blank'><img alt='Youtube Channel' src='https://lh3.googleusercontent.com/-iuHC7JsIgz0/VJ_WHFriyOI/AAAAAAAAI9I/S2gf8lcU8uA/s32-no/youtube%2Bicon.png' title='Youtube Channel'/></a>

</li>
</ul>
</div>


SUDAH? Belum......!
Ganti link yang berwarna merah dengan link media umum Anda!

8. Save!
You're done!!!

Widget Media Sosial di Sidebar Blog dengan CSS Sprite

Cara pasangnya sama dengan di atas. Widget media umum untuk sidebar berikut ini memakai gambar/image CSS Sprite --yaitu menggabungkan gambar icon medsos menjadi satu file-- sehingga LEBIH Fast Loading:

1. KODE CSS
Dipasang di atas aba-aba ]]></b:skin>

#head-soc ul li {list-style :none; padding: 0 0 0 12px; float: right;}
#head-soc ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden ; height: 32px; width: 32px ;border: 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ZC7Sf1oowFbYA_ZhrUmvtMXJtl8G5HZeqX1k2OyoDZOKRTnnksCzYzuh2n98FSKsKFfhXbDdwtv4K0c9HsF2Wr3j7WmMxJYXWg17uYXgry2M-J_d1IuxNMyIfsX7YHZqBW2NebHiD6vX/s1600/spice-up-blog-sprite.gif) no-repeat; display: block;}
#head-soc li#g a {background-position: 0px -32px;}
#head-soc li#g a:hover {background-position: 0px 0px;}
#head-soc li#rss a {background-position: -32px -32px;}
#head-soc li#rss a:hover {background-position: -32px 0px;}
#head-soc li#sub a {background-position: -64px -32px;}
#head-soc li#sub a:hover {background-position: -64px 0px;}
#head-soc li#fb a {background-position: -96px -32px;}
#head-soc li#fb a:hover {background-position: -96px 0px;}
#head-soc li#twit a {background-position: -128px -32px;}
#head-soc li#twit a:hover {background-position: -128px 0px;}
#head-soc li#li a {background-position: -160px -32px;}
#head-soc li#li a:hover {background-position: -160px 0px;}
#head-soc li#youtube a {background-position: -192px -32px;}
#head-soc li#youtube a:hover {background-position: -192px 0px;}

2. KODE HTML
Dipasang di widget: Layout > Add a Gadget > HTML/Javascript

<!--Social Sprite Html-->
<div id="head-soc" style="margin: 0 0 20px -10px">
<ul>
<li id="g"><a href="https://plus.google.com/103329103950948291283/posts" target="-blank">Google+</a></li>
<li id="rss"><a href="http://feeds.feedburner.com/blogromeltea" target="-blank">RSS Feed</a> </li>
<li id="sub"><a href="http://feedburner.google.com/fb/a/mailverify?uri=blogromeltea" target="_blank">Subscribe</a></li>
<li id="fb"><a href="http://facebook.com/romelteamedia" target="-blank">Facebook</a></li>
<li id="twit"><a href="http://twitter.com/romeltea" target="-blank">Twitter</a></li>
<li id="li"><a href="http://www.linkedin.com/in/romeltea" target="-blank">LinkedIn</a></li>
<li id="youtube"><a href="https://www.youtube.com/user/romeltea" target="-blank">YouTube</a></li>
</ul>
</div>

Style Lain Widget Media Sosial di Sidebar Blog

Jika kurang berkenan dengan desain  link media umum di atas, masih banyak desain lainnya, antara lain  yang ukuran iconnya lebih besar menyerupai ini. Cara pemasangannya pun lebih mudah.

Cara Memasang Widget Media Sosial di Sidebar Blog Cara Memasang Widget Media Sosial di Sidebar Blog

Cara Memasangnya:
1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Judul widget boleh diisi boleh tidak.
3. Masukkan aba-aba ini:

<style type='text/css'>
.social ul {list-style:none; display:inline}
.social li {float:left;padding: 0px 2px 0px 0px; margin-top:-4px}
.social li a img{height:57px;width:57px}
</style>
<div class='social'> <span class='fade'><ul>
<li><a href="URL FACEBOOK PAGE" target=_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKDG6T8TFyZ888IoUsstSBc30e1FL4M1Qn7Bq761DlbG10xI80QLzCmjcaVpLvG88NTJMY60GExmRPq3n5-4LmrwrkECt1l3QtG_MsG3vPm_2GFp2PSL84hwL6K_5svlzdUWCNEJRuwiAF/s57/Facebook%2520alt%25201.png" alt="Cara Memasang Widget Media Sosial di Sidebar Blog Cara Memasang Widget Media Sosial di Sidebar Blog"/></a></li>
<li><a href="URL GOOGLE PLUS" target=_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEb8NAhroXBxaeQA4QuPHcn_83A1XtFE3RpLFLLHWqU8gRPOF9BT4J43v5CLT3FiFZByd2XDP4ZeOjaC0HUi2SocYn9Rw8n_Do-PxAu1aNRbDNoNoGf_FJ2Pl3q6OonoP6zppOC7FfdWHx/s57/Google%252B%2520alt.png" alt="Cara Memasang Widget Media Sosial di Sidebar Blog Cara Memasang Widget Media Sosial di Sidebar Blog"/></a></li>
<li><a href="URL TWITTER" target=_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-96NsH5Iqq8EDeYFkO0ybjG8L0hBlz_ox-9uAUxCe-2Edj4l99L3e-EkcGBwOjT2x1-KtA_3LOXdn7jG6EFbY6CF5hF71h1kP3XZn5FOehsjviIKxAhyphenhyphenqSZc7q-aKU6aNP_2CSLRnk6Dw/s57/twitter%2520%252Balt.png" alt="Cara Memasang Widget Media Sosial di Sidebar Blog Cara Memasang Widget Media Sosial di Sidebar Blog" /></a></li>
<li><a href="URL FEED" target=_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYAG96D2RHx00qd9Ydgu6UtgPDqWwZbrHVEWeaivOsq5woJqHbJjLdu16jkHigWh783HhGsGqlOOZVHF4TXJuUqsbi8WQCjDivno9ziUuMWVGFRZcRKO7D_S1BVOr-FIOFfljn_Li8t4VX/s57/RSS%2520Feed.png" alt="Cara Memasang Widget Media Sosial di Sidebar Blog Cara Memasang Widget Media Sosial di Sidebar Blog"/></a></li>
<li><a href="URL YOUTUBE" target=_blank"><img style='width:60px' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixHUP8S2i6CiOKh-L7c56W-YC1HZNoDk9682IR_8cdyj1wYolMV36LMssJdEe8Kx1xyazfKYkcTt43e8rfCH-6fPg6dQrXsln_D8LK9Ku8sx8R0gk-81u6359hjlAt7Jqxiqp3RhtbmXIB/s57/YouTube%2520alt%25201.png" alt="Cara Memasang Widget Media Sosial di Sidebar Blog Cara Memasang Widget Media Sosial di Sidebar Blog"/></a></li>
</ul></span> </div> 

4. Save!

 STYLE LAIN LINK MEDIA SOSIAL

Kode widget media umum di sidebar blog yang terdiri dari facebook, twitter, linkedin, instagram, dan youtube menyerupai gambar ini:

Cara Memasang Widget Media Sosial di Sidebar Blog Cara Memasang Widget Media Sosial di Sidebar Blog

Ini kodenya. Pasang di Layout > Add a Gaget > HTML/JavaScript:

<style type='text/css'>
.social ul {list-style:none; display:inline}
.social li {float:left;padding: 0px 2px 0px 0px; margin-top:-4px}
.social li a img{height:57px;width:57px}
</style>
<div class='social'> <span class='fade'><ul>

<li><a href="URL FACEBOOK" target=_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKDG6T8TFyZ888IoUsstSBc30e1FL4M1Qn7Bq761DlbG10xI80QLzCmjcaVpLvG88NTJMY60GExmRPq3n5-4LmrwrkECt1l3QtG_MsG3vPm_2GFp2PSL84hwL6K_5svlzdUWCNEJRuwiAF/s57/Facebook%2520alt%25201.png" alt="Cara Memasang Widget Media Sosial di Sidebar Blog Cara Memasang Widget Media Sosial di Sidebar Blog"/></a></li>

<li><a href="URL TWITTER" target=_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-96NsH5Iqq8EDeYFkO0ybjG8L0hBlz_ox-9uAUxCe-2Edj4l99L3e-EkcGBwOjT2x1-KtA_3LOXdn7jG6EFbY6CF5hF71h1kP3XZn5FOehsjviIKxAhyphenhyphenqSZc7q-aKU6aNP_2CSLRnk6Dw/s57/twitter%2520%252Balt.png" alt="Cara Memasang Widget Media Sosial di Sidebar Blog Cara Memasang Widget Media Sosial di Sidebar Blog" /></a></li>

<li><a href="URL LINKEDIN" target=_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGKmyfKmQPlP2oU3lQD9Wmts8xE46rg_3OLaD2od52iQ-qR3Xe7I9E-3waSLLBbPPnJ9tLTsd7QBK10ZmM3MKbpe5RcwgZStRbp7C-JXKIDO0l6ARwK4U8nGRYHKSLsMZKRstN4i78Np3t/s1600/linkedin.JPG" alt="Cara Memasang Widget Media Sosial di Sidebar Blog Cara Memasang Widget Media Sosial di Sidebar Blog"/></a></li>

<li><a href="URL INSTAGRAM" target=_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNdXtZ9n1cLpH_q4Q87es-MiBkm5e-Yyn5NdlIvSMO4Y2eIKPivye57CbMg2p_vmnt_hxtHHdVdhp_tafi83Yh3PmUpLd9Gs5zqAezPgR1ttk94V9l_OwPylgFKNvrQ8VxNsa9xpuTVF9m/s1600/instagram.JPG" alt="Cara Memasang Widget Media Sosial di Sidebar Blog Cara Memasang Widget Media Sosial di Sidebar Blog"/></a></li>

<li><a href="URL YOUTUBE" target=_blank"><img style='width:60px' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixHUP8S2i6CiOKh-L7c56W-YC1HZNoDk9682IR_8cdyj1wYolMV36LMssJdEe8Kx1xyazfKYkcTt43e8rfCH-6fPg6dQrXsln_D8LK9Ku8sx8R0gk-81u6359hjlAt7Jqxiqp3RhtbmXIB/s57/YouTube%2520alt%25201.png" alt="Cara Memasang Widget Media Sosial di Sidebar Blog Cara Memasang Widget Media Sosial di Sidebar Blog"/></a></li>

</ul></span> </div>

Ada juga link media umum yang model metro style kayak gini nih:

Cara Memasang Widget Media Sosial di Sidebar Blog Cara Memasang Widget Media Sosial di Sidebar Blog

Cara Memasangnya:

1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Judul widget boleh diisi boleh tidak.
3. Masukkan aba-aba ini:

<div class="metro-social">
<li><a class="fb" href="http://www.facebook.com/username"></a></li>
<li><a class="tw" href="http://www.twitter.com/username"></a></li>
<li><a class="gp" href="https://plus.google.com/kodeID"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/kodeID"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}
</style>


CLOSING STATEMENT
Menurut para ahli, akun media sosial, selain berfungsi membuatkan posting blog, juga dapat menjadi sumber "backlink" atau "outbond link", yakni tautan dari situs lain ke blog kita.

Backlink yakni salah satu yang diperhatikan oleh mesin pencari Google untuk memilih peringkat blog kita di halaman hasil pencarian (SERP).

Maka, buatlah akun media umum sebanyak-banyaknya. Meskipun "gak diurus", minimal akan menjadi backlink ke blog kita, selama kita memasukkan link blog ke "profil" di media-media sosial itu.

Demikian Cara Memasang Ikon Media Sosial di Sidebar Blog. Wasalam. (http://blogromeltea.blogspot.com).*

0 Response to "Cara Memasang Widget Media Umum Di Sidebar Blog"

Subscribe to: Post Comments (Atom)