Cara Membuat Author Box Dibawah Postingan atau Sidebar Blog Ala Igniel


Cara Membuat Author Box Dibawah Postingan Blog Ala Igniel - Hallo sobat blogger, bertemu dengan saya lagi ya di blog Kincir Pedia. 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 ini juga salah satu widget yang diperlukan untuk suatu blog.

Dan berikut ini cara penerapannya :
Langkah Pertama : masukan CSS berikut ini sebelum tag ]]> </b:skin>

CSS
/* 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. Atau sobat bisa meletakan kode HTML dibawah ini tepat setelah kode <data:post.body/>

Biasanya terdapat lebih dari satu kode tersebut. Pilih hasil pilihan 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-user-plus'></i>Donate</a></li></div>

Langkah Ketiga : Simpan dan Selamat kotak author ala igniel sudah jadi.

Demikian artikel dari saya tentang Cara Membuat Author Box Dibawah Postingan Ala Igniel, Semoga artikel diatas bermanfaat dan selamat mencoba

Post a Comment

0 Comments

close