Sesuai dengan judul kita pada hari ini yakni Cara Membuat Author Box Dibawah Posting Blog , maka saya akan membagikannya bagaimana sih caranya membuat author box dibawah posting, dan gampang tidak sih membuat box itu? dan apakah manfaat dari author box tersebut ? akan saya jelaskan di bawah ini secara rinci.
Cara membuat author box ini anda cukup memahami dan menuruti langkah-langkah yang saya berikan di bawah ini, seratus persen memasang author box itu berhasil , dan gampang tidak sih cara masangnya? menurut saya sih gampang banget malahan, anda cukup mengandalkan control + c dan control v saja untuk melakukan hal tersebut.
Manfaat dari Memasang Author Box dibawah posting apa sih? Menurut saya, manfaatnya adalah yakni pengunjung akan tahu lebih dalam lagi tentang anda, dan juga semakin dekat dengan anda sehingga pengunjung tersebut akan betah di dalam mengakses blog anda.
Selain dari Author Box yang berisikan deskripsi tentang diri anda, author box yang saya bagikan kepada anda ini ada juga tombol untuk membagikan artikel anda ke sosial media seperti facebook, twitter bahkan mensubscribe dengan email. Cara atau langkah ini saya kutip dari mas-andes.blogspot.com
Cara Membuat Author Box dibawah Posting Blog :
Login ke akun blogger anda.Kemudian ke Template > Edit HTML
Copy code dibawah ini lalu pastekan di bawah code ]]><
.evolutions-boxauthor{ position: relative; margin: 15px auto; width:505px; padding:10px 10px 5px 10px; border:2px solid #52e052; background:#e9fbe9; color:#000; } .titlebox h3{ padding: 10px 0px 10px 25px; color:#000; font:bold 14px Georgia; background: #52e052; margin:0px 0px 0px -22px; width:524px; } .titlebox h3 a {color:#000;} .titlebox h3:before { content: ' '; position: absolute; top: 47px; left: -12px; width: 0; height: 0; border-style: solid; border-width: 10px 0 0 10px; border-color: #55B05A transparent transparent transparent; } .titlebox h3:after { content: ' '; position: absolute; top: 47px; right: -12px; width: 0;height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent transparent #55B05A; } .boxcontent { font:12px Trebuchet MS; text-align:justify; color:#000; float: left; margin: -95px 160px 5px 0; display: block; } .boxcontent a { color: #000; text-decoration: none; } .boxauthor_photo{ float:right; margin:-22px 0 0 10px; padding:30px 5px 5px 5px; background: #52e052; } .boxauthor_photo:before { content: ' '; position: absolute; top: -12px; right: 144px; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent #52A435 transparent; } .boxauthor_photo:after { content: ' '; position: absolute; top: -12px; right: 0; width: 0; height: 0; border-style: solid; border-width: 0px 10px 10px 0; border-color: transparent transparent #52A435 transparent; } .boxauthor_photo img{ width:120px; height:120px; border:2px solid #000; } .linediv{ height:0px; clear:both; display:block; border-top:1px solid #00ff00; border-bottom:1px solid #52e052; } .email-button{ background:#52e052; border:1px solid #52e055; margin:0; color:#000; cursor:pointer; font: bold 13px Tahoma; padding:6px 10px; position:absolute; right:-20px; top:0; display:block; } .email-button:hover{ background:#00ff00; text-decoration:none !important; } .wrap-email{ clear:both; width:230px; margin:5px 0 0 0; float:left; } .email-form{ position:relative; margin:0 auto; width:98% !important; box-sizing:border-box; height:auto; } .email-input{ width:150px; height:15px; margin:0 auto; padding:8px 10px; border:1px solid #52e052; font:14px georgia; font-style:italic; color:#666; } .evolutions-social{ overflow: hidden; float: right; } .evolutions-social a{ display: block; color: #FFFFFF !important; font: bold 13px Tahoma; text-decoration: none; transition: border-radius 0.50s; border-radius: 10px 0px; } .evolutions-social a:hover{ border-radius: 0px; } .evolutions-social div{ float: left; margin: 5px 5px 0 0; width: 70px; } .evolutions-social .evolutionsfacebook a{ padding: 7px 0px; text-align: center; background: #3B5999; } .evolutions-social .evolutionsfacebook a:hover{ background: #52e052; } .evolutions-social .evolutionsgoogleplus a{ padding: 7px 0px; text-align: center; background: #D54135; } .evolutions-social .evolutionsgoogleplus a:hover{ background: #52e052; } .evolutions-social .evolutionsrss a{ padding: 7px 0px; text-align: center; background: #fb8938; } .evolutions-social .evolutionsrss a:hover{ background: #52e052; }
Selanjutnya copy code dibawah ini lalu pastekan dibawah
<b:if cond='data:blog.pageType == "item"'>
<div class='evolutions-boxauthor'>
<div class='boxauthor_photo'>
<img alt='mas andes' src='http://lh3.googleusercontent.com/-DHMRnvuMJfo/AAAAAAAAAAI/AAAAAAAAAAA/6f7Kf2lfwCE/s96-c/photo.jpg'/>
</div>
<div class='titlebox'>
<h3>Author : <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a></h3></div>
<div class='boxcontent'>
Setelah anda membaca artikel berjudul <b><a expr:href='data:post.url'><data:post.title/></a></b> jika ingin menyalin (copy-paste) artikel ini, sertakan <b><i>link dibawah ini sebagai sumbernya :</i></b>
<textarea cols='42' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'><a href="<data:post.url/>" target="_blank"><data:blog.pageName/></a></textarea>
</div>
<div class='linediv'></div>
<div class='wrap-email'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='email-form' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=masandes', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='masandes'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='email-input' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input class='email-button' title='' type='submit' value='Submit'/>
</form>
</div>
<div class='evolutions-social'>
<div class='evolutionsfacebook'>
<a href='https://www.facebook.com/dtevenz' target='_blank' title='Join on Facebook'>Facebook</a>
</div>
<div class='evolutionsgoogleplus'>
<a href='https://plus.google.com/+StevenWaynee' target='_blank' title='Join on Google+'>Google+</a>
</div>
<div class='evolutionsrss'>
<a href='http://feeds.feedburner.com/zetronews' target='_blank' title='Join on RSS'>RSS</a>
</div>
</div></br>
<span style='font:10px arial;float:right;padding-top:5px;'><a href='http://mas-andes.blogspot.com/2013/09/membuat-author-box-dibawah-posting-blog.html' target='_blank'>[ Get This Widget ]</a></span>
<div style='clear:both;'></div>
</div>
</b:if>
Keterangan:
Ganti teks warna biru dengan URL foto anda.
Ganti teks warna merah dengan ID feedburner anda.
Ganti teks warna hijau dengan ID masing-masing.
5. Langkah terakhir klik Simpan Template.
Lebar maupun warna dari widget author box ini saya sesuaikan dengan warna template blog ini, jadi apabila lebar maupun warna yang kurang sesuai silahkan bisa anda sesuaikan sendiri.
Demikian ulasan saya tentang Cara Membuat Author Box Dibawah Posting Blog semoga bermanfaat.
Referensi : mas-andes