Sedikit Info Seputar
Cara Memasang Widget Author Box di Blogger dengan CSS3
Terbaru 2017
- Hay gaes kali ini team Info Serba Ada, kali ini akan membahas artikel dengan judul Cara Memasang Widget Author Box di Blogger dengan CSS3, kami selaku Team Info Serba Ada telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Info Serba Ada. semoga isi postingan tentang
Artikel Blog,
Artikel Widget, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Cara Memasang Widget Author Box di Blogger dengan CSS3
Terbaru
link: Cara Memasang Widget Author Box di Blogger dengan CSS3
Berbagi Cara Memasang Widget Author Box di Blogger dengan CSS3 Terbaru dan Terlengkap 2017
 |
| 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)
Itulah sedikit Artikel Cara Memasang Widget Author Box di Blogger dengan CSS3 terbaru dari kami
Semoga artikel Cara Memasang Widget Author Box di Blogger dengan CSS3 yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Info Serba Ada. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Cara Memasang Widget Author Box di Blogger dengan CSS3
