Cara Memasang Widget Author Box di Blogger dengan CSS3
 |
| via : msdesignbd |
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*="entypo-"]:before {font-family: 'entypo', 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: ""; display: block; float: left; width: 80px; height: 80px; margin-right: 20px; background: url("http://i.imgur.com/rppvYgh.jpg") 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^="footItem"] { display: inline-block; width: 33.333333%; padding: 15px 0; text-align: center; color: rgba(255,255,255,.8); font-size: 1.1em; }
[class^="footItem"] 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 !
Baca juga :
Semoga bermanfaat.. (BD/Sn)
0 Komentar Untuk "Cara Memasang Widget Author Box di Blogger dengan CSS3"
Posting Komentar