Cara Memasang Widget Social Profile di Sidebar Blog

Hallo Sahabat Kang Wira, Artikel kali ini saya buat karena saya mendapat inbox di Facebook yang isinya menanyakan cara memasang Widget Social Profile ini pada sidebar Blog.

Karena saya baru sempat membuat artikelnya beberapa waktu yang lalu, jadi baru bisa saya Publish Sekarang.

Sepertinya sudah terlalu lama saya tidak Update Artikel di blog ini Karena saya sedang mencoba untuk fokus dibidang lain.

Kode yang saya share sudah termasuk simple yah. Jadi kamu tinggal ikuti saja langkah-langkahnya dibawah ini.

Sebelumnya kamu bisa lihat demo tampilan Widget Social Profile ini terlebih dulu ya.

Kamu bisa klik pada tombol dibawah ini untuk melihat demo widget ini. Jika ada kesalahan pada tampilan, tolong dikasih tau ya.

D E M O

Tertarik Memasang Widget ini?

Salin Kode dibawah ini, lalu letakkan sebelum kode ]]></b:skin> atau </style>

/* Social Profile Widget */
#HTML68 .sosmedarl-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}
.sosmedarl-img{position:relative;max-height:140px;overflow:hidden}
.sosmedarl-img img {max-width:100%;width:100%;transition:all .6s;}
.sosmedarl-img:hover img{transform:scale(1.2) rotate(-10deg)}
.sosmedarl-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .3s}
.sosmedarl-img:hover:before{background:rgba(0,0,0,0.6);}
.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;left:22.5%;z-index:3}
.sosmedarl-float{text-align:center;display:table;width:100%;height:100%}
.sosmedarl-float a{background:transparent;color:#fff;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:90%;text-transform:uppercase;vertical-align:middle;border:2px solid #fefefe;border-radius:3px;transition:all .3s}
.sosmedarl-float:hover a{background:#e74c3c;color:#fff;border-color:transparent;}
.sosmedarl-float a i{font-weight:normal;margin:0 5px 0 0}
.sosmedarl-wrpicon{display:block;margin:15px auto;position:relative;}
.sosmedarl-wrpicon .extender{width:100%;display:block;}
.extender{text-align:center;font-size:16px}
.extender .sosmedarl-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;}
.extender .sosmedarl-icon a{background:#ccc;display:inline-block;font-weight:400;color:#fff;padding:0 12px;line-height:32px;border-radius:3px;font-size:12px;width:100%;}
.extender .sosmedarl-icon i{font-family:fontawesome;margin:0 3px 0 0}
.sosmedarl-icon.fbl a{background:#3b5998}
.sosmedarl-icon.twitt a{background:#19bfe5}
.sosmedarl-icon.crcl a{background:#d64136}
.sosmedarl-icon.fbl a:hover,.sosmedarl-icon.twitt a:hover,.sosmedarl-icon.crcl a:hover{background:#404040}
.extender .sosmedarl-icon:hover a,.extender .sosmedarl-icon a:hover{color:#fff;}
.sosmedarl-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.sosmedarl-info p{margin:5px 0}
.sosmedarl-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.sosmedarl-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.sosmedarl-info h4:before,.sosmedarl-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0,0,0,0.08);}
.sosmedarl-info h4:before {margin-left:-50%;text-align:right;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

Lalu kamu salin lagi kode dibawah ini, lalu kamu letakkan kode ini didalam Tag <body>

<b:widget id='HTML68' locked='false' title='Social Profile' type='HTML' visible='true'>
        <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<div class='sidebar_about_author'>
<div class='inner_wrapper'>
<div class='sosmedarl-img'>
<img alt='Judul Blog' class='img-responsive' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgTwP_-HvIORQ94iYjy5JKgGeTHHi_Ok-AYSTgxXagx4gkJlB7DY4FS7tKPHBzHe3AabCcJEQ-RDY_P39I4zUWgSDC3oytvn6ZlLpGfKmU4CfvXR-h3-go2chrksaVLClUEkvH__uuYXQS/s1600/x-theme.png' title='Judul Blog' width='100%'/>
<div class='aboutfloat-img'><span class='sosmedarl-float'><a href='#' rel='nofollow' target='_blank' title='Follow Me'><i class='fa fa-user'/> Follow Me</a></span></div>
</div>
</div>
<div class='sosmedarl-info'>
  <h4><span>Nama Blog Kamu</span></h4>
<p>Deskripsi Blog Kamu Di Tulis Disini Yah</p>
</div>
<div class='sosmedarl-wrpicon'>
<ul class='extender'>
<li class='sosmedarl-icon fbl'><a href='#' target='_blank' title='Follow Our Facebook'><i class='fa fa-facebook fa-fw'/> Like</a></li>
<li class='sosmedarl-icon twitt'><a href='#' target='_blank' title='Follow Our Twitter'><i class='fa fa-twitter fa-fw'/> Follow</a></li>
<li class='sosmedarl-icon crcl'><a href='#' rel='nofollow' target='_blank' title='Follow Our Google+'><i class='fa fa-google-plus fa-fw'/> Circle</a></li>
</ul>
</div>
</div>
</div>
</b:includable>
</b:widget>

Simpan template, lalu lihat hasilnya.

Jika widget tidak muncul, berarti kemungkinan Kamu belum pasang Font-Awesome.

Coba kamu pasang kode Font-Awesome dibawah ini tepat dibawah kode <head>

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

Setelah itu, Coba kamu simpan lagi Template yang sudah kamu tambahkan Kode Font Awesome nya dan Lihat Hasilnya pada Template yang kamu gunakan sekarang ini.

Menurut saya, cara memasang Widget Social Profile ini pada sidebar Blog tidak begitu sulit. Bagaimana Menurut kamu?

Jika merasa kesulitan, atau ada kendala saat menyisipkan kode diatas, silahkan kamu berikan komentar kamu dibawah ini.