Cara Membuat Widget Join Our Site Responsive Di Blog Ala N Light Tamplate

Saya kali ini akan memberikan tutorial cara membuat widget join our site ala tamplate N Light arlina design. Pasti dari kalian yang pernah menggunakan tamplate N Light dari arlina design pernah melihat widget Joint our site bukan. Apasih kegunaan dari widget tersebut ? widget tersbut beguna untuk mengajak para pengunjung untuk mengikuti perkembangan blog kita.

Menambah widget joint our site membuat blog kita makin keren dan profesional. Tutorial ini cukup mudah di lakukan bagi pemula yang baru belajar script css dan html, ayo kita mulai tutorialnya

Baca juga : Niche Blog Yang Paling Banyak Dicari Di Google Search Engine 2017

Cara membuat widget joint our site responsive ala N Light tamplate.

1. Perta buka menu tamplate/edit html, setelah itu cari kode </style> atau ]]></b:skin> dan paste kode berikut di atasnya

/* Sosial Media Widget */
#HTML68 {margin:0 0 20px 0;}
#HTML68 .lightsosmed-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}
.lightsosmed-img{position:relative;max-height:180px;overflow:hidden}
.lightsosmed-img img {max-width:100%;width:100%;transition:all .6s;}
.lightsosmed-img:hover img{transform:scale(1.2) rotate(-10deg)}
.lightsosmed-img:before{content:&#39;&#39;;background:rgba(0,0,0,0.3);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .3s}
.lightsosmed-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}
.lightsosmed-float{text-align:center;display:table;width:100%;height:100%}
.lightsosmed-float a{background:#fff;color:#000;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:90%;text-transform:uppercase;vertical-align:middle;border-radius:3px;box-shadow:3px 3px 3px rgba(0,0,0,0.05);transition:all .3s}
.lightsosmed-float:hover a{background:#424242;color:#fff;border-color:transparent;}
.lightsosmed-float a i{font-weight:normal;margin:0 5px 0 0}
.lightsosmed-wrpicon{display:block;margin:15px auto;position:relative;}
.lightsosmed-wrpicon .extender{width:100%;display:block;}
.extender{text-align:center;font-size:16px}
.extender .lightsosmed-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;}
.extender .lightsosmed-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 .lightsosmed-icon i{font-family:fontawesome;margin:0 3px 0 0}
.lightsosmed-icon.fbl a{background:#3b5998}
.lightsosmed-icon.twitt a{background:#19bfe5}
.lightsosmed-icon.crcl a{background:#d64136}
.lightsosmed-icon.fbl a:hover,.lightsosmed-icon.twitt a:hover,.lightsosmed-icon.crcl a:hover{background:#404040}
.extender .lightsosmed-icon:hover a,.extender .lightsosmed-icon a:hover{color:#fff;}
.lightsosmed-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.lightsosmed-info p{margin:5px 0}
.lightsosmed-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.lightsosmed-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.lightsosmed-info h4:before,.lightsosmed-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:&#39;\a0&#39;;background-color:rgba(0,0,0,0.08);}

2. Setelah itu kalian cari kode </b:includable>  copy kode di bawah dan taruh di atas kode yang di cari tadi, terserah mau di letakan di widget bagian mana.

<b:widget id='HTML68' locked='false' title='Sosial Media' type='HTML' version='1'>
    <b:widget-settings>
      <b:widget-setting name='content'/>
    </b:widget-settings>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h3 class='title'><data:title/></h3>
  </b:if>
  <div class='widget-content'>
<div class='sidebar_about_author'>
<div class='inner_wrapper'>
<div class='lightsosmed-img'>
<img alt='N Light' class='img-responsive' height='180' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyG0GCWSK5sdKn0A-EnUUWIu23lz-P4CtsSh2jtWnHSkjFP0SnqPEU2BtjUu4TRebh6ICnusguvtSF_r7nGPMR8XnXAXuLBvTN5V97NFsCxnhqoMVEbLHK9rwUusNLt2Jor7tjKVy3RcQ/s320/FB_IMG_14888784945579370-picsay.jpg' title='N Light' width='300'/>
<div class='aboutfloat-img'><span class='lightsosmed-float'><a href='https://www.blogger.com/follow-blog.g?blogID=1944583533354688007' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-user'/> Join Our Site</a></span></div>
</div>
</div>
  <h3/>
<div class='lightsosmed-info'>
  <span>---Cemal Anjello---</span>
<p>Blogger From Madura</p>
  <h3/>
</div>
<div class='lightsosmed-wrpicon'>
<ul class='extender'>
<li class='lightsosmed-icon fbl'><a href='https://www.facebook.com/CemalAnjello' target='_blank' title='Follow Our Facebook'><i class='fa fa-facebook fa-fw'/> Like</a></li>
  <li class='lightsosmed-icon twitt'><a href='https://twitter.com/' target='_blank' title='Follow Our Twitter'><i class='fa fa-twitter fa-fw'/> Follow</a></li>
<li class='lightsosmed-icon crcl'><a href='https://plus.google.com/116740779680627415238' rel='nofollow' target='_blank' title='Follow Our Google+'><i class='fa fa-google-plus fa-fw'/> Circle</a></li>
</ul>
</div>
</div>
</div>

Yang saya kasih warna merah ganti sesuai keinginan kalian. Untuk yang berwarna biru kalian ganti dengan url gambar kalian.

Nah kalian bisa mengedit warnanya sesuai keinginan kalian di bagian script css tadi. Sekian dari tutorial cara membuat widget join our site responsive di blog ala N Light tamplate semoga bermanfaat untuk kalian.

Bagikan di Facebook

Bagikan di Twitter

Bagikan di Google+

Bagikan di LinkedIn