Cara Membuat Author Box Keren Untuk Blog - Di tutorial kali ini saya akan membahas mengenai tentang membuat author box keren untuk blog terbaru. setelah sebelumnya kita membahas mengenai tutorial download anime di samehadaku dan oploverz.
Cara ini saya terinspirasi dari blog pribadi saya aldiripani.com. silahkan lihat demonya disini
jika kalian sudah melihat demonya maka saya kira kalian sudah siap untuk menyimak tutorialnya.
Cara Membuat Author Box keren untuk Blog
Pertama, kalian Copy code dibawah ini dan paste-kan tepat diatas ]]></b:skin>
Kedua, kalian Copy code ini lagi di widget kalian,
Silahkan masuk blogger > tata letak > tambahkan widget di sedebar seperti gambar dibawah ini :
Dan pastekan kode diatas didalamnya dan klik simpan.
Ketiga, tinggal kalian edit code yang berwarna kuning {foto profile kalian} dan kalian ganti link-link sosial media diatas sesuai selera kalian. setelah itu simpan dan lihat hasilnya diberanda blog kalian. Baca juga : 20 Popular Post Keren Untuk Blogger
Nah semoga tutorial singkat diatas bisa memberikan pencerahan dan desain menarik untuk blog kamu, ingat code ini ringan dan tidak memperngaruhi kecepatan blog kamu. semoga bermanfaat.
Cara ini saya terinspirasi dari blog pribadi saya aldiripani.com. silahkan lihat demonya disini
jika kalian sudah melihat demonya maka saya kira kalian sudah siap untuk menyimak tutorialnya.
Cara Membuat Author Box keren untuk Blog
Pertama, kalian Copy code dibawah ini dan paste-kan tepat diatas ]]></b:skin>
/* Author Box Sirclob.com */
.sosmed-author li,.sosmed-author ul,ol,ul{list-style:none}.sosmed-author,a.authorname,a.authorname-url,h2.author-title{display:block;text-align:center}.authorbox{width:autopx;background:url() top center no-repeat #dedede;border:1px solid #dedede;border-radius:3px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding:16px 0 0;margin:0 auto}h2.author-title{font-weight:700;text-decoration:none;margin:0 auto 10px;font-size:22px;color:#fff!important}.authorbox img{margin:55px auto 0;border-radius:100%;display:block}a.authorname{margin:10px auto;font-weight:400;font-size:20px!important;text-decoration:none}a.authorname-url,a.button-author{font-size:16px!important;text-decoration:none}a.authorname-url{margin:0 auto 10px;font-weight:400}.sosmed-author ul{margin:0!important;padding:0!important}.sosmed-author{margin:0 auto!important}.sosmed-author li{display:inline-block;margin-right:10px}.sosmed-author li:last-child{margin-right:0}.sosmed-author li a{color:#555!important;transition:all .4s ease-out}a.authorname,a.authorname-url{color:#2a2a2a;background:#dedede;text-shadow:10px 10px 10px #fff}a.button-author,a.button-author:hover{background:#4b4d63}.sosmed-author li a:hover,a.authorname-url:hover,a.authorname:hover{color:#111!important}a.button-author{display:block;border:1px solid #2f303f;color:#fff!important;font-weight:700;margin:10px 10px 0;padding:5px;text-align:center;border-radius:3px;transition:all .4s ease-out}.card,.card.people .card-info{-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.card .card-heading.image .card-heading-header,.card .card-heading.image img,.card.people{vertical-align:top;display:inline-block}.card{padding-top:20px;margin:10px 0 20px;background-color:#252632;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;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{width:46px;height:46px;margin-right:15px;border:0;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}.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:#999}.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;margin:20px 0 0}.card .card-comments{padding:20px;margin:0;background-color:#f8f8f8}.card .card-comments .comments-collapse-toggle{padding:0;margin:0 20px 12px}.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:700}.card.people{position:relative;width:170px;height:300px;padding-top:0;margin-left:20px;overflow:hidden}.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:#fff}.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:#fff;box-sizing:border-box}.card.people .card-info .title{display:block;margin:8px 14px 0;overflow:hidden;font-size:16px;font-weight:700;line-height:18px;color:#404040}.card.people .card-info .desc{display:block;margin:8px 14px 0;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:rgba(4,15,27,.8)}.card.hovercard .cardheader{background:#252632;background-size:cover;height:100px}.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,.5)}.card.hovercard .info{padding:4px 8px 10px}.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;padding-top:10px;padding-right:10px;padding-left:10px}.card.hovercard .bottom{padding:0 20px;margin-bottom:17px}.crepictsosmed a{display:inline-block;text-align:center;margin-top:10px;margin-right:5px;color:#fff;border-radius:100%;opacity:.9}.crepictsosmed a i{font-family:Fontawesome;width:32px;height:32px;line-height:32px;display:block}.crepictsosmed a:hover{color:#fff;opacity:1;transform:rotate(360deg)}.crepictsosmed .facebook{background:#3b5998}.crepictsosmed .twitter{background:#00aced}.crepictsosmed .googleplus{background:#dd4b39}.crepictsosmed .rssfeed{background:#ee802f}
/* Author Box Sirclob.com */
Kedua, kalian Copy code ini lagi di widget kalian,
<!-- Sirclob.com Author Profile + Sosmed -->
<div class='container'>
<div class='row'>
<div class='col-lg-3 col-sm-6'>
<div class='card hovercard'>
<div class='cardheader'>
</div>
<div class='avatar'>
<img alt='' src='https://goo.gl/BphJBk'/>
</div>
<div class='info'>
<div class='title'>
<span style="color: #FFffff;">SIRCLOB</span>
</div>
<a class="button-author" href="http://www.blogger.com/follow-blog.g?blogID=5402094413579537302" target="_blank" title="Follow This Blog">Follow This Blog <i class='fa fa-check-circle' style='color:#3498db;font-size:16px;margin:0 0 0 3px'></i></a>
<div class='desc'><span style="color: #FFffff;">Pemuda yang akan akan terus Berusaha yang Terbaik untuk Maju di Hadapan Allah Azza wa Jalla Kelak.</span></div>
</div>
<div class='bottom'>
<div class="sosmed-author">
<ul>
<li><a href="https://web.facebook.com/aldiripani" target="_blank" title="Facebook" rel="nofollow"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://twitter.com/aldiripani" target="_blank" title="Twitter" rel="nofollow"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://instagram.com/aldiripani" target="_blank" title="Instagram" rel="nofollow"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://plus.google.com/+AldiRipani" target="_blank" title="Google+" rel="nofollow"><i class="fa fa-google-plus-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://www.youtube.com/channel/UCPizl7FL_OO82LZRV1CeKVg" target="_blank" title="Youtube" rel="nofollow"><i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://web.facebook.com/aldiripani" target="_blank" title="Jika Mau Lapor" rel="nofollow"><i class="fa fa-cog fa-spin fa-2x fa-fw" aria-hidden="true"></i></a></li>
</ul>
<div class="clear"></div>
<a class="button-author" href="http://www.aldiripani.com/p/jadwal-shalat-untuk-daerah-di-indonesia.html" rel="nofollow" target="_blank" title="Jadwal Shalat">Jadwal Shalat <i aria-hidden="true" class='fa fa-clock-o' style='color:#fff;font-size:16px;margin:0 0 0 3px' title='Jadwal Shalat'></i></a>
<a class="button-author" href="http://www.aldiripani.com/p/membaca-al-quran-dan-terjemahan.html" rel="nofollow" target="_blank" title="Al-Qur'an Online">Al-Qur'an Online <i aria-hidden="true" class='fa fa-book' style='color:#fff;font-size:16px;margin:0 0 0 3px' title='Al-Qur'an online'></i></a>
<a class="button-author" href="http://www.aldiripani.com/p/download-ebook-islam-terbaru-lengkap.html" rel="nofollow" target="_blank" title="Ebook Islam">Ebook Islam <i aria-hidden="true" class='fa fa-file-pdf-o' style='color:#fff;font-size:16px;margin:0 0 0 3px' title='Ebook Islam'></i></a>
<a class="button-author" href='http://www.aldiripani.com/p/contact-personal.html' target="_blank" title='Hubungi'>Contact Personal <i aria-hidden="true" class="fa fa-mobile"></i></a>
<a class="button-author" href="http://www.aldiripani.com/p/tukar-link-aldi-ripani.html" rel="nofollow" target="_blank" title="Partner">Partner <i aria-hidden="true" class='fa fa-link' style='color:#fff;font-size:16px;margin:0 0 0 3px' title='Partner'></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
Silahkan masuk blogger > tata letak > tambahkan widget di sedebar seperti gambar dibawah ini :
Dan pastekan kode diatas didalamnya dan klik simpan.
Ketiga, tinggal kalian edit code yang berwarna kuning {foto profile kalian} dan kalian ganti link-link sosial media diatas sesuai selera kalian. setelah itu simpan dan lihat hasilnya diberanda blog kalian. Baca juga : 20 Popular Post Keren Untuk Blogger
Nah semoga tutorial singkat diatas bisa memberikan pencerahan dan desain menarik untuk blog kamu, ingat code ini ringan dan tidak memperngaruhi kecepatan blog kamu. semoga bermanfaat.