Cara Membuat Widget Author Box Keren pada Sidebar Blog - Hallo sahabat blogger, sudah lama saya tidak update artikel lagi mengenai tutorial, karena banyak kesibukan saya di dunia nyata, hehe. nah, pada kesempatan kali ini saya akan membuat tutorial mengenai cara membuat widget author box keren pada sidebar blog. saya membuat tutorial ini juga atas request dari sahabat blogger yang menghubungi saya lewat email Contact Us.
Baca Juga : Cara Memasang Tombol Load More Post Ringan di Blogger
Baca Juga : Cara Memasang Tombol Load More Post Ringan di Blogger
Widget Author Box merupakan suatu widget blog yang berisi identitas atau profil penulis/pembuat konten blog tersebut. tak hanya profile saja, widget author box ini juga biasa di isi dekripsi atau kata-kata si penulis konten berserta tombol link sosialnya.
 |
| Cara Membuat Widget Author Box Keren pada Sidebar Blog |
Widget Author Box ini terletak di bagian sidebar dan ada juga yang di bawah postingan, tapi pada tutorial kali ini saya hanya akan buat widget author box di bagian sidebar saja, untuk di bawah postingannya anda bisa lihat di artikel cara membuat multi author box keren di bawah postingan.
Widget Author Box ini juga berfungsi untuk memberitahukan informasi mengenai si penulis atau si pembuat konten blog itu sendiri kepada pengunjung yang sedang mengunjungi blog anda.
Sebelum kita memasang widget author boxnya, anda di haruskan memasang font awesome pada blog anda agar widget author boxnya bisa muncul dengan maksimal. silahkan anda copy script di bawah ini dan letakan di atas kode </head> , setelah itu simpan.
<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.7.2/css/all.css' integrity='sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr' rel='stylesheet'/>
Gunakan tombol CTRL dan F untuk memudahkan anda mencari kode tersebut pada template blogSetelah kita memasang font awesome pada blog, selanjutnya tinggal memasang widget author box, oke kita langsung saja ke tutorialnya.
Berikut adalah Cara Membuat Widget Author Box Keren pada Sidebar Blog :
- Masuk terlebih dahulu ke akun Blogger.com
- Pilih Edit Tema atau Template > Edit HTML
- Selanjutnya copy script CSS di bawah ini dan letakan di atas kode ]]></b:skin>
/* CSS AUTHOR BOX KEREN */
.card{padding-top:20px;margin:10px 0 20px 0;background-color:rgba(214,224,226,0.2);border-top-width:0;border-bottom-width:2px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.card .card-heading{padding:0 20px;margin:0;}
.card .card-heading.simple{font-size:20px;font-weight:300;color:#777;border-bottom:1px solid #e5e5e5;}
.card .card-heading.image img{display:inline-block;width:46px;height:46px;margin-right:15px;vertical-align:top;border:0;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}
.card .card-heading.image .card-heading-header{display:inline-block;vertical-align:top;}
.card .card-heading.image .card-heading-header h3{margin:0;font-size:14px;line-height:16px;color:#262626;}
.card .card-heading.image .card-heading-header span{font-size:12px;color:#999999;}
.card .card-body{padding:0 20px;margin-top:20px;}
.card .card-media{padding:0 20px;margin:0 -14px;}
.card .card-media img{max-width:100%;max-height:100%;}
.card .card-actions{min-height:30px;padding:0 20px 20px 20px;margin:20px 0 0 0;}
.card .card-comments{padding:20px;margin:0;background-color:#f8f8f8;}
.card .card-comments .comments-collapse-toggle{padding:0;margin:0 20px 12px 20px;}
.card .card-comments .comments-collapse-toggle a,.card .card-comments .comments-collapse-toggle span{padding-right:5px;overflow:hidden;font-size:12px;color:#999;text-overflow:ellipsis;white-space:nowrap;}
.card-comments .media-heading{font-size:13px;font-weight:bold;}
.card.people{position:relative;display:inline-block;width:170px;height:300px;padding-top:0;margin-left:20px;overflow:hidden;vertical-align:top;}
.card.people:first-child{margin-left:0;}
.card.people .card-top{position:absolute;top:0;left:0;display:inline-block;width:170px;height:150px;background-color:#ffffff;}
.card.people .card-top.green{background-color:#53a93f;}
.card.people .card-top.blue{background-color:#427fed;}
.card.people .card-info{position:absolute;top:150px;display:inline-block;width:100%;height:101px;overflow:hidden;background:#ffffff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.card.people .card-info .title{display:block;margin:8px 14px 0 14px;overflow:hidden;font-size:16px;font-weight:bold;line-height:18px;color:#404040;}
.card.people .card-info .desc{display:block;margin:8px 14px 0 14px;overflow:hidden;font-size:12px;line-height:16px;color:#737373;text-overflow:ellipsis;}
.card.people .card-bottom{position:absolute;bottom:0;left:0;display:inline-block;width:100%;padding:10px 20px;line-height:29px;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.card.hovercard{position:relative;padding-top:0;overflow:hidden;text-align:center;background-color:#fff;Border-radius: 30px;}
.card.hovercard .cardheader{background:url("ISI DENGAN URL BACKGROUND BLOG ANDA");background-size:cover;height:135px;}
.card.hovercard .avatar{position:relative;top:-50px;margin-bottom:-50px;}
.card.hovercard .avatar img{width:100px;height:100px;max-width:100px;max-height:100px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;border:5px solid rgba(255,255,255,0.5);}
.card.hovercard .info{padding:4px 8px 10px;margin-bottom:5px;}
.card.hovercard .info .title{margin-bottom:4px;font-size:24px;line-height:1;color:#262626;vertical-align:middle;}
.card.hovercard .info .desc{overflow:hidden;font-size:12px;line-height:20px;color:#737373;text-overflow:ellipsis;margin:0 25px;}
.card.hovercard .bottom{padding:0 20px;margin-bottom:17px;}
.btn{color:#fff;padding:6px 6px 6px 10px;border-radius:3px;margin-right:5px;}
.card .btn-facebook{background:#E9E4F0;}
.card .btn-twitter{background:#E9E4F0;}
.card .btn-pinterest{background:#E9E4F0;}
.card .btn-ig{background:#E9E4F0;padding-right: 10px;}
- Setelah itu simpan tema atau template
- Kemudian pergi ke Dashboard Blogger dan pilih Tata Letak > Tambah Gadget > HTML/JavaScript
- Selanjutnya anda copy script di bawah ini dan letakan kode tersebut
<div class='card hovercard'> <div class='cardheader'> </div> <div class='avatar'> <img alt='display picture' src='https://lh3.googleusercontent.com/-fSIpqJh1Rio/XAUwXRapjpI/AAAAAAAAAAs/kHRVjcXQXkAqPRCPWtz8wX5RDn3C_Au4wCEwYBhgL/w140-h140-p/LogoChannel.jpg' title='Kurniawan'/> </div> <div class='info'> <div class='title'> <a href='https://web.facebook.com/SeriesWans-289539498428038/?ref=bookmarks' rel='author' target='_blank'>Kurniawan</a> </div> <div class='desc'>Admin dari <a href='' rel='author' target='_blank'>serieswans.com</a></div> <div class='desc'>" Tidak ada kata Tapi dan Tidak ada kata Nanti jika anda ingin Sukses "</div> </div> <div class='bottom'> <a class='btn btn-primary btn-facebook btn-sm' href='https://facebook.com/' rel='nofollow' target='_blank'> <i class="fab fa-facebook-square"></i></a> <a class='btn btn-primary btn-twitter btn-sm' href='https://twitter.com/' rel='nofollow' target='_blank'> <i class="fab fa-twitter-square"></i></a> <a class='btn btn-danger btn-pinterest btn-sm' href='https://pinterest.com/' rel='nofollow' target='_blank'> <i class="fab fa-pinterest-square"></i></a> <a class='btn btn-ig' href='https://instagram.com/' rel='nofollow' target='_blank'><i class="fab fa-instagram"></i></a> </div> </div>
- Setelah itu Simpan dan lihat hasilnya.
Jangan lupa ganti url gambarnya dengan url milik anda, tinggal anda sesuaikan kata-kata pada deskripsi, link sosial milik anda dan yang lainnya. silahkan anda kreasikan sendiri ya, jika anda kesuliatan dalam pengeditannya, silahkan berkomentar di bawah.Baca Juga : Cara Mempercepat Loading Gambar di Blog dengan mudah (Work 100%)
Nah, Mungkin itu saja tutorial kali ini mengenai Cara Membuat Widget Author Box Keren pada Sidebar Blog. jika anda memiliki pertanyaan terkait postingan ini, silahkan berkomentar di bawah dan jangan lupa share ke teman-teman atau media sosial anda. semoga bermanfaat teman.
1 komentar