Hari ini saya akan menunjukkan bagaimana Anda dapat menambahkan penulis keren bio widget di bawah setiap posting blog blogger Anda. Widget ini terdiri dari CSS dan HTML. Tidak JavaScript digunakan.
Dalam widget ini Anda dapat menambahkan Google+, Twitter, Facebook dan Feedburners ID sehingga pengunjung blog Anda dapat menghubungi Anda dengan mudah. Juga memiliki email bar berlangganan samping ikon sosial.
Menambahkan CSS
Tambahkan kode di bawah ini tepat di bawah <head>
<link href='https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-author-box.css' rel='stylesheet' type='text/css'/>
Menambahkan HTML
Tambahkan kode di bawah ini tepat di bawah <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div class='abt-author_info'>
<div class='abt-author_photo'>
<img alt='author' height='150' src='YOUR PIC URL' width='150'/>
</div>
<h2 style='color:#444;font-family:verdana;text-shadow: 3px 3px 3px 3px #ABABAB;'>This Post Was Written By :</h2>
<p>Add information about you here.</p>
<div class='abt-linediv'/>
<div class='abt-email'>
<small style='text-align:center;'>Get Free Email Updates to your Inbox!</small>
<form action='http://feedburner.google.com/fb/a/mailverify' class='abt-emailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=FeedUsername', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='FeedUsername'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='abt-emailinput' 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='abt-emailbutton' title='' type='submit' value='SignUp'/>
</form>
</div>
<ul class='abt-social'>
<li class='rssicon'>
<a href='http://feeds.feedburner.com/FeedUsername'>Rss</a>
</li><li class='twicon'>
<a href='http://twitter.com/TwitterUsername'>Twitter</a>
</li><li class='fbicon'>
<a href='http://facebook.com/FBUsername'>Facebook</a>
</li><li class='gicon'>
<a href='https://plus.google.com/GplusID'>Google +</a>
</li>
</ul>
</div>
</b:if>
Setelah Anda telah menambahkan teks di atas perubahan kode di HIJAU dengan Teks / URL yang Anda inginkan. Simpan template. Anda telah selesai sekarang. Anda dan pengunjung Anda dapat melihat kotak widget keren penulis di bawah setiap posting blog Anda sekarang.
SEMOGA BERMANFAAT ^_^
Post a Comment