Memasang Widget Sosial Media Di Sidebar Blog

Tutorial Master

Memasang Widget Sosial Media Di Sidebar Blog | Pada kesempatan kali ini saya akan membagika widget sosial media untuk menghiasi tampilan pada blog anda, anda dapat menyisipkan link dari sosial media maupun following langsung ke blog kamu dengan tampilan yang menarik.

baiklah bagi yang ingin: Memasang Widget Sosial Media Di Sidebar Blog, silahkan langsung ikuti tutorialnya di bawah ini
Memasang Widget Sosial Media Di Sidebar Blog

Untuk Memasang Widget Ini Pastikan Blog Kamu Sudah Terpasang Link Css Awesome 

1. Silahkan Login Ke Blogger>Template>Edit Html lalu salin kode di bawah ini tepat sebelum kode ]]> Atau , untuk mempercepat pencarian silahkan anda klik tombol CTRL + F
pada keyboard kamu

/* Sosial Media 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;}

Jika widget tidak tertata rapi silahkan anda tambahkan kode ini juga

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

kemudian tambahkan kode di bawah ini tepat sesudah kode  misalkan pada bagian sidebar Lalu pastekan kode di bawah tepat sesudah kode

Download KODE 

selanjutnya silahkan kamu ganti kode yang di tandai di atas (link gambar, sosial media, judul blog, deskripsi blog kamu).
Demikin dari saya semoga bermanfaat terimakasi

Bagikan di Facebook

Bagikan di Twitter

Bagikan di Google+

Bagikan di LinkedIn