Cara Membuat Author Box Keren di Bawah Postingan Blog

Cara Memasang Author Box keren di bawah Postingan Blog - Author Box merupakan salah satu kotak yang berada di bagian bawah postingan blog,yang dimana kotak tersebut terdapat Profil si penulis di suatu blog

Dan di kotak tersebut tidak hanya tedapat Photo profil si penulis artikel di suatu blog tetapi juga terdapat keterangan yang sengaja di tulis oleh si Penulis atau si pemilik blog tersebut,Selain itu juga di box Author tersebut sudah di lengkapi dengan icon media social seperti Facebook atau juga twitter dan juga Google+ Follow

Sengaja di simpan Media Social tersebut di box Author selain mempercantik Author Box tesebut,juga agar memudahkan si pengujung blog untuk berbagi artikel yang mereka sukai ke salah satu akun media social yang mereka miliki

Atau bahkan bisa saja ke 3 media social mereka berbagi artikel tersebut,karena ketiga media social tersebut seperti Facebook,Twitter dan Google+ tersebut dalah yang dimana media social tersebut sudah tidak asing lagi dan juga banyak pengguna nya

Cara Memasang Author Box keren di bawah Postingan Blog

Pada Umum nya Author Box tesebut terdapat di bawah Postingan blog dengan berbagai pareasi yang menaik,bahkan  baru-baru ini banyak sekali para blogger yang sengaja memasang Author Box tersebut di blog-blog mereka

Nah untuk anda yang Juga ingin memasang Author Box tersebut,disini saya akan berbagi Author Box tersebut dengan Style yang mungkin menarik untuk anda pasang di blog anda,dan tidak kalah menarik dengan Author lain nya

Untuk Pemasangan Author Box tersebut,bisa anda ikuti langkah-langkah penerapan nya di bawah ini

• Seperti Biasa masuk ke bagian Dashboard Blogger
• Lalu kemudian klik Template
• Kemudian Edit Html
• Setelah anda berada di bagain edit Html silahkan anda letakan kode CSS berikut

#Author-box-outer{background:#fff;  border-top:10px solid #05A0FF;  padding:16px 10px 16px 10px; overflow:hidden; margin:20px 0px 15px; box-shadow:0px 7px 14px -12px #000}
.author-box{float:left; overflow:hidden; padding:0px 15px 5px 0px; font-weight:100; width:54%; display:block; border-right:1px solid #ddd;margin-top:-19px}
.author-box img{background:#05A0FF; float:left; margin:25px 10px 10px 10px; border-radius:150px; height:70px; width:70px; padding:2px}
.author-box p{margin:0; padding:0px 0px 0px 0px; color:#3F3F3F; font-size:15px; text-shadow:none}
.author-box span{border-bottom:2px solid #F9FF00}
.author-box-social{float:right; text-align:left; width:40%; overflow:hidden; padding:0px}
.intro-style{text-align:left; font-family:sans-serif; color:#333; font-size:13px !important; margin-top:-15px; margin-left:0px}

• Langkah selanjut nya,silahkan anda cari kode <data:post.body/>  dan untuk memudahkan pencarian anda,silahkan anda tekan tombol Ctrl+F secara bersamaan,jika kode tersebut lebih dari 3,maka silahkan letakan kode berikut di bawah kode <data:post.body/> yang kedua,untuk mendapatkan kode tersebut silahkan klik link di bawah

• Get Code

atau kode berikut

<div id='Author-box-outer'>
<div class='author-box'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='#' rel='author'><data:post.author/></a></h4>
<p>
<data:post.authorAboutMe/>     
</p>
<div class='intro-style'>
I manage this blog and post tutorials related to Blogger, SEO, Software Tools, Windows, CSS and Social Media. Did you find this blog helpful? Please socialize with us !!
</div>
</div>
</div>
<div class='author-box-social'>
<div style='padding-bottom:0px !important; font-size: 11px !important;'><a class='twitter-follow-button' data-lang='en' data-show-count='true' href='https://twitter.com/infotrens' rel='nofollow'>
Follow @Infotrens
</a></div>
<script>window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src=&quot;https://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,&quot;script&quot;,&quot;twitter-wjs&quot;));</script>
<br/>
<div style='padding-bottom:0px !important;'>
<div class='fb-like' data-action='like' data-href='https://www.facebook.com/infotrens' data-layout='button_count' data-share='false' data-show-faces='false' rel='nofollow'>
</div>
</div>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<br/>
<div style='padding-bottom:0px !important;'>
<!-- Place this tag where you want the widget to render. -->
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='//plus.google.com/u/0/100095255626977212629' data-rel='author'/>
</div>
</div>
</div>

Kemudian Save template dan lihat hasil nya,
Nah itulah cara Membuat Author Box di bawah postingan blog,semoga artikel nya bisa membantu dan salam blogger

ads

• SHARES
• Share
• Tweet
• Share
• Share

Previous

Newer Post

Next

Older Post

Posted by Dede Ubed, Published at 06 October and have 0 komentar