Cara Membuat Author Box Dibawah Postingan Blog Ala Igniel - Hallo sobat Blogger, bertemu dengan saya lagi ya di blog ANAZ.BIZ.ID. Pada kesempatan hari ini saya akan membagikan artikel tentang Cara Membuat Author Box dibawah postingan ala igniel.
Widget ini berfungsi untuk menampilkan profil singkat dari penulis artikel. Dan juga terdapat beberapa Widget yang diperlukan untuk menghubungi admin Blog.
Untuk memasangnya di blog, sobat bisa mengikuti tutorial di bawah ini.
Langkah Pertama : Masukan CSS berikut ini sebelum tag ]]></b:skin>
/* Css */
#ignielAuthor {text-align:center;background-color:#eee;color:#000;line-height:20px;padding:15px 10px}
#sidebar-wrapper #ignielAuthor h2, #sidebar-wrapper #ignielAuthor h3 {background:transparent;padding:0 0 10px 0}
#sidebar-wrapper #ignielAuthor h2 {font-size:18px;border-bottom: 2px solid #138be6;}
#sidebar-wrapper #ignielAuthor h2:after {content:'f058';font-family:Fontawesome;color:rgb(17,143,249);background:transparent;display:inline;position:relative;border:0px;font-size:18px;padding-top:10px;width:10px !important;margin-left:10px}
#sidebar-wrapper #ignielAuthor h3 {font-size:15px;font-weight:normal}
#sidebar-wrapper #ignielAuthor h3:after {display:none}
#ignielAuthor hr {border:none; height:1px; background-color:#bdc3c7; width:80%; margin:10px auto}
#ignielAuthor2 {width:100%;;margin-bottom:5px}
#ignielAuthor2 li {list-style:none;background-color:#008c5f;color:#fff;width:50%;display:inline-block}
#ignielAuthor2 li:hover {background-color:#37b185}
#ignielAuthor2 li:nth-child(2) {margin-left:-3.5px;border-left:3px solid #2f303f;float:right}
#ignielAuthor2 li a {color:#fff;padding:5px 32px;line-height:40px}
.simplifymedsos a{display:inline-block;text-align:center;margin-top:10px;margin-right:5px;color:#fff;border-radius:100%;opacity:.9;}
.medsos a{display:inline-block;text-align:center;margin-right:3px;color:#fff;border-radius:100%;opacity:.9;}.medsos a i{font-family:Fontawesome;width:35px;height:35px;line-height:35px;display:block}.medsos a:hover{color:#fff;transform:rotate(360deg);}.medsos .facebook{background:#3a579a}.medsos .twitter{background:#00abf0}.medsos .googleplus{background:#df4a32}.medsos .youtube{background:#cc181e}.medsos .instagram{background:#992ebc}.medsos .pinterest{background:#cd1c1f}.medsos .linkedin{background:#2554BF}.medsos .tumblr{background:#314358}.medsos .rssfeed{background:#ee802f}
a.showcase{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff!important;font-weight:900;font-size:16px!important;margin:0;padding:5px;text-align:center;border-radius:3px;transition:all .4s ease-out}
a.showcase:hover{background:#357ae8;border:1px solid #2f5bb7;}
a.showcase2{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff!important;font-weight:900;font-size:16px!important;margin:0;padding:5px;text-align:center;border-radius:3px;margin:0;padding:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
a.showcase2 svg{width:14px;height:14px;vertical-align:-3px}
a.showcase2 svg path{fill:#fff;}
a.showcase2 {-webkit-animation:rubberBand 1s linear 1s infinite normal;animation:rubberBand 1s linear 1s infinite normal}
@-webkit-keyframes rubberBand{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
}
@keyframes rubberBand{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
}
.hrecipe{display:none;margin:30px 0 30px 0;padding:12px;border:1px solid #e8e8e8;background:#f8f8f8;overflow:hidden;}
#Feed1_feedItemListDisplay a {line-height:20px;}
#Feed1_feedItemListDisplay .item-date, #Feed1_feedItemListDisplay .item-author {font-style:italic;}Langkah Kedua : Buka tata letak dan klik menu "HTML/JAVASCRIPT", lalu tambahkan kode HTML dibawah ini di kolom tersebut. Atau sobat bisa meletakan kode HTML dibawah ini tepat setelah kode <data:post.body/>
Biasanya terdapat lebih dari satu kode tersebut. Pilih yang terakhir atau kalian bisa mencoba menempatkan kode dibawah ini secara berganti untuk melakukan uji coba penempatan.
HTML
<div id="ignielAuthor">
<h2>Penulis: Anas Ikwana</h2>
<br/>
<i>Alamat : Blitar, East Java</i>
<br/>
<i>"Jadilah orang baik, Blogger yang baik"</i>
<hr /><center><a class="showcase2" style="width:80%" href="#" title="Perbaiki Artikel Disini">Hubungi saya<i aria-hidden="true" class="fa fa-paper-plane" style="margin-left:10px;"></i></a></center>
<br/>
<div class="medsos">
<a class="facebook tooltip" data-tooltip="Facebook" href="https://www.facebook.com/#" rel="nofollow" target="_blank"><i class="fa fa-facebook"></i></a>
<a class="twitter tooltip" data-tooltip="Twitter" href="https://twitter.com/#" rel="nofollow" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="googleplus tooltip" data-tooltip="Google Plus" href="https://plus.google.com/u/0/#" rel="nofollow" target="_blank"><i class="fa fa-google-plus"></i></a>
<a class="instagram tooltip" data-tooltip="Instagram" href="https://codepen.io/#/" rel="nofollow" target="_blank"><i class="fa fa-codepen"></i></a>
<a class="rssfeed tooltip" data-tooltip="RSS Feed" href="https://feeds.feedburner.com/#" rel="nofollow" target="_blank"><i class="fa fa-rss"></i></a>
</div>
</div>
<div id="ignielAuthor2">
<li><a href="https://www.blogger.com/follow-blog.g?blogID=4715433630486867004" title="Follow Kincir Pedia" target="_blank"><i class='fa fa-user-plus'></i>Follow</a></li>
<li><a href="https://www.facebook.com/#" title="Send Me On Facebook" target="_blank"><i class='fa fa-paypal></i>Donate</a></li></div>Langkah Ketiga : Simpan dan Selamat kotak Author Box ala igniel sudah jadi.
Demikian artikel dari saya tentang Cara Membuat Author Box Dibawah Postingan Ala Igniel, Semoga artikel yang saya bagikan bisa bermanfaat bagi sobat semua. Terimakasih dan Selamat Mencoba
Posting Komentar