Cara Pasang Logo Media Sosial di Sidebar Blog

Baca Juga

MENAMPILKAN atau memasang logo (link) akun media sosial Facebook, Twitter, Google+ dll. di sidebar blog sangat diajurkan para pakar media sosial. Tujuannya, agar menambah follower, member, atau liker.

Lagi pula, akun media sosial biasa kita gunakan juga untuk share posting blog, sehingga pengunjung bisa mengikuti update tulisan blog kita melalui akun media sosial mereka.

Jika Anda ingin memasang logo akun atau link media sosial seperti yang dipasang di blog CB ini (di sidebar kanan), ini dia caranya!

Cara Pasang Logo Media Sosial di Sidebar Blog

1. Login ke Blog Anda
2. Di Dashboard Blog, klik menu "Layout"
3. Klik "Add a Gagdet" > Pilih "Javascript/HTML"
4. Masukkan kode berikut ini setelah Anda ganti tulisan yang berwarna merah (ID Akun Sosmed Anda)

<div class="widget-content">
<style>
    #socialwidget {
   width: 300px;
   margin-left: -7px;
    }
    .TZ-social{
    padding: 10px 5px 10px 5px;
   border-bottom: 1px dotted #EBE2E2;
    }
    .TZ-social img:hover{opacity:0.8}
    .googleplus {
    background: #ffffff;
    border-top: 1px solid white;
    border-bottom: 1px solid #ebebeb;
    font-size: 12px;
    color: #000;
    padding: 9px 11px;
    ine-height: 1px;
    font-family: Verdana, Geneva, sans-serif;
    }

    .TZ {
    background: #ffffff;
    border-top: 1px solid white;
    font-size: 12px;
    color: #000;
    padding: 9px 11px;
    line-height: 1px;
    font-family: Verdana, Geneva, sans-serif;
    }
    .TZ span {
    color: #000;
    font-size: 11px;
    position: absolute;
    margin: -12px 100px;
    width: 310px;
    }
    #widgetbox .author-credit a {
    font-size: 10px;
    font-size: 10px;letter-spacing: 1px;
    color: #1E598E;
    text-decoration: none;
    }
    .TZDefault {border: 0px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
    .TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}
    </style>
    <div id="socialwidget">
    <!-- Begin Widget -->
    <div class="TZ-social">
    <!-- social ico -->
    <center>
    <a style="margin-right: 15px;" href="http://facebook.com/cbblogger" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHif0PFbSFcS8m0oFgwhS2CAipk1YBC6npQU1SdKvCJiQKBPWTC859c_SVy78d-vfp2MFyEqjnBF5LFWTfZ-P20qPxJbajbcbylrMjNPdTmVavVWPhd_XfmSZcJs07rQkuqaWV12N5-hQ/s1600/facebook.png" title="Facebook" /></a>
    <a style="margin-right: 12px;" href="http://twitter.com/contohblog" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuo-UN9RUJlJL48yYX93pl-IduCN-BPdr2WwYtYLaegxiR3tb-ZEHL-2IDIc3usRJYdd5dQxBJk9K5lnS5dskS7gugANk-xAUwCJBDFVLW4Px2hvbGazsJlg7g1BNXJk5JP9uphTSDVHg/s1600/twitter.png" title="Twitter" /></a>
    <a style="margin-right: 12px;" rel="me" href="https://plus.google.com/106869251529186655236/posts" target="_blank">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj43gYosvbRoqnThrAJQcyKogXTg6PfCF_V6RzEnAnr2foftf1D5GbuXB0kEyb_bFn-vIg76516Fy6DBIVOwPmsPRR6LH0ghgqr78xN7a7h8mOh1YJnAuZNBbV__u9LbLYQQj3c7Xz6kA/s1600/gplus.png" title="Google Plus" /></a>
    <a style="margin-right: 12px;" href="http://www.pinterest.com/cbblogger" target="_blank">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8h1N2HecZRWNDoTA9way38lK3Lfti-HRf8uXZXlgXStJptDWMMzf-BUyofYC9Ylm8ElemFMULD46SOycnX4fg9Mfcq2hAYOMM4aDAEhf01JJ3I8lAHXagKxVLBoB5MQrBb13UnTZfz1U/s1600/pinterest.png" title="Pinterest" /></a>
    <a style="margin-right: 12px;" href="http://feeds.feedburner.com/contohblognih" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjeHHpQcRdX_43Upkm9Spbx1gjGzL3ffNPxoxAEjRGsxP6YcHWUcpiQVkp8n-kGjYcCrdPEfpCpCTtWUz2N1BYyQfI6KeaMc8KikbcCJeeSd0xIxzhYDqY7ZNuF5PJ-FgWuMfYJ_RkzTA/s1600/rss.png" title="RSS Feed" /></a>

    <a style="margin-right: 12px;" href="http://www.linkedin.com/in/cbblogger" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMyJLzfn_8t4GBFqK1SeTMDYJ3n8wpFBLZAcQoT016Ykob9CIAVlPVahRens-0evpmo_pNu8LUimoKKOV6YIB2lqLUGlHVUyPnJ7mbobL4bp07ghmnBIe3KL4eZKIVpEQEo1b42mTAlL4/s1600/linkedin.png" title="Linkedin" /></a>
    </center>
    </div>
    <!-- End Widget -->
    </div>
</div>

MENAMBAHKAN KOTAK BERLANGGANAN
Jika Anda ingin menambahkan kotak berlangganan (RSS Subscribe) di bawahnya, seperti pada blog CB ini, maka tambahkan kode berikut ini. Jangan lupa, ganti tulisna berwarna merah dengan ID Feedburner Anda.

<style>
.hl-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguAvWJyURYDuPsWbTx5PuH1oEPCjptL_vEkRkxDHaAfkr6Y48S6m8K5vWvOQGTIK1q0DzemQsikVPiEkImLTsySGn1UjOUSIKhgre_g3Pw4LXh4q70wGZUEuC-AYn-WIvoEHKxFus-K8o/s1600/mail.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.hl-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.hl-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:180px;
color:#666;}
</style>
<div class="hl-email">
Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=contohblognih', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="contohblognih" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="hl-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Nah itu dia Cara Pasang Logo Media Sosial di Sidebar Blog. Kalo mau pasang di bawah postingan, ini caranya: Pasang Kotak Langganan dan Sosial Media di Bawah Posting Blog.

Mau model lainnya? Nih... ada 100 macam widget sosial media untuk blog. Silakan pilih....! Good Luck and Happy Blogging!