-->

Cara Memasang Widget Author Box di Blogger dengan CSS3

February 04, 2017
Advertisemen
via : msdesignbd
Widget Blogger Author box dengan CSS3 - selamat pagi sobat, sudah lumayan lama saya belum update artikel nih, Nah.. pada hari ini saya akan update tutorial cara memasang widget author box untuk platform blogger. Ya! hal ini memang tutorial untuk semua admin blogger.

Khusus pada artikel kali ini saya akan membantu Anda yang mempunyai blog pribadi untuk  memasang sebuah widget yang menampilkan widget author indah dan super responsive hanya untuk Anda.

Pada widget Author box for blogger kali ini Anda harus menyiapkan 4 link yang mengarah ke social media Anda, seperti akun Twitter, Facebook, Dribble, dan Google Plus karena pada widget ini akan tersedia 4 ikon media sosial untuk Anda arahkan ke akun Anda.

Widget ini akan bekerja dengan CSS3 transisi efek hover, jadi ketika Anda mengarahkan mouse/kursor ke hover widget ini maka nanti akan  muncul bagian lain yang tersembunyi yaitu bagian ikon sosial media tadi.

Jika Anda berminat ingin memasang nya, boleh ikuti langkah memasang widget yang sudah saya siapkan berikut ini hanya untuk Anda semua.

Cara Membuat Widget Author Box Responsive dengan CSS3

Oke gak perlu panjang lebar langsung saja kita mulai. Sekarang Anda pergi ke Dashboard Blogger >>Menu Template >>Edit HTML >> dan silahkan pastekan kode CSS dibawah ini sebelum kode  </style>

@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*=&quot;entypo-&quot;]:before {font-family: &#39;entypo&#39;, sans-serif;}
*{ box-sizing: border-box; }
a { text-decoration: none; transition: all .4s; }
.container { margin: 0 auto; }
.container:hover .author-body { height: 70px; }
.author-body a {color:#fff}
.author2 { overflow: auto; padding: 20px; background: #fff; border-radius: 5px 5px 0 0; font-size:12px; color: #b9becd; }
.author2:before { content: &quot;&quot;; display: block; float: left; width: 80px; height: 80px; margin-right: 20px; background: url(&quot;http://i.imgur.com/rppvYgh.jpg&quot;) no-repeat; background-size: 80px; border-radius: 100%; }
.author2  h1 { margin: 15px 0 5px; font-weight: 100; font-size:20px; color: #5e6d81; }
.author-body { height: 0; background: #323a45; color: #fff; vertical-align: middle; transition: all .3s; }
.author-body a { display: inline-block; width: 25%; height: 100%; padding: 20px; border-right: 1px solid rgba(255,255,255,.25); text-align: center; color: #fff; font-size: 2.5em}
.author-body a:hover { background: #515761; }
.author-body a:last-child { border-right: none; }
.foot { /*height: 100px;*/ }
[class^=&quot;footItem&quot;] { display: inline-block; width: 33.333333%; padding: 15px 0; text-align: center; color: rgba(255,255,255,.8); font-size: 1.1em; }
[class^=&quot;footItem&quot;] span { display: block; font-size: 1.6em; margin-bottom: 5px; color: #fff; }
.footItem1 { background: #14b9d6;    color: white!important;}
.footItem1:hover { background: #5bcee2; }
.footItem2 { background: #f27935;    color: white!important; }
.footItem2:hover { background: #f6a172; }
.footItem3 { background: #1fbba6;     color: white!important;}
.footItem3:hover { background: #63d0c1; }
.widget-content {    box-shadow: 0 0 0 1px #D3D3D3;}
.section:first-child .widget:first-child {margin-bottom:15px}
Catatan : Ubah link gambar yang nanti akan ditampilkan dengan link gambar foto profil Anda.
Lalu Save template

Setelah selesai menyimpan template, sekarang Anda pergi ke menu Tata letak >> Tambah Gadget >> HTML/Javascript dan pastekan kode dibawah ini..

<div class="container">
<div class="author2">
        <h1>Bang Didit</h1>
        The Designer
    </div>
    <div class="author-body">
      <a href="#Twitter-LINK"><span class="entypo-twitter"></span></a><a href="#Facebook-LINK"><span class="entypo-facebook"></span></a><a href="#Dribble-LINK"><span class="entypo-dribbble"></span></a><a href="#GooglePlus-LINK><span class="entypo-gplus"></span></a>
    </div>
  <div class="foot">
    <a href="#" class="footItem1"><span class="entypo-heart"></span>102</a><a href="#" class="footItem2"><span class="entypo-user"></span>4,587</a><a href="#" class="footItem3"><span class="entypo-plus"></span>84,023</a>
  </div>
</div>
Catatan : Ubah nama dan link dengan link sosial media Anda. Thats it.
Nah itulah tutorial sederhana mengenai Cara Memasang Widget Author Box di Blogger dengan CSS3, gampang banget kan? mudah-mudahan dapat bermanfaat untuk Anda sekalian.

Jika Anda mengalami kendala saat memasangnya, jangan sungkan untuk memberikan pertanyaan kepada kami di kolom komentar disqus dibawah postingan ini. Selamat mencoba !


Semoga bermanfaat.. (BD/Sn)
Advertisemen

Add Comments

Disqus Comments