Author Info Multi Fungsi

Author Info Multi Fungsi

Author info merupakan kotak pemberitahuan yang biasanya berisi info singkat mengenai pengarang atau blog untuk pemberitahuan sumber artikel kepada pengunjung. Author info ini bisa kita modifikasi untuk membungkus atau memuat beberapa widget sekaligus, sehingga tidak banyak memakan tempat. Oleh karena itulah author box ini di sebut sebagai author info multi fungsi. Adapun beberapa widget yang kita gabung adalah info admin, permanen link (permalink), Subscribe by Email, dan tombol sosial media.Tampilannya masih tetap bagus dan tidak kalah dengan author info lainnya. Disamping itu cara pembuatannya juga cukup mudah, yaitu dengan css3 yang sudah lolos validasi di w3c dan html sederhana sebagai pemanggilnya, sehingga tidak memberatkan loading blog anda. Bailah, sekarang mari kita bahas cara membuat author info multi fungsi di bawah posting. Ikuti langkah berikut.

Cara membuat author info multi fungsi

• Log in ke blog anda
• Klik Template
• Klik Edit HTML
• Masukkan kode css berikut di atas kode ]]></b:skin> atau </style> kalau css anda sudah mengalami perubahan peletakannya.

.bengkelbloggerauthor_info{float:left; width:auto; padding:15px; border:1px solid #ccc; margin-bottom:15px; margin-top:15px; background:#eee; color:#000}
.bengkelbloggerauthor_info:hover{background:#eee; border:1px solid #ccc;box-shadow:0px 0px 10px  rgba(0,0,0,.3)}
.bengkelbloggerauthor_info h3{color:#000; margin-bottom:10px}
.bengkelbloggerauthor_info h3:hover{border:1px solid #EEE;box-shadow:0px 0px 10px  rgba(0,0,0,.3)}
.bengkelbloggerauthor_photo{float:right; margin:0 0 0 10px}
.bengkelbloggerauthor_photo img{border:1px solid #666;transition:transform .15s linear;box-shadow:0 3px 6px rgba(0,0,0,.25); padding:5px 5px 5px 5px;transform:rotate(+2deg); float:left}
.bengkelbloggerauthor_photo img:hover{background:#FFF; border:1px solid #EEE; box-shadow:0px 0px 10px  rgba(0,0,0,.3);transform:rotate(-1deg)}
ul.bengkelbloggersocial{list-style:none; margin:10px; overflow:hidden}
.bengkelbloggersocial li{float:right; background:none !important; padding:0 !important; margin:0 8px}
.bengkelbloggersocial li a{display:block; width:40px; height:40px; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6efafu_49kPcXlQqthUIZHLb47U6nmCcCTDYGExm2y6mBWRPX-fhWcdj8rkHy_f0mVQgSdKHb6VoC-wvTB8rCsrKeb0gDyAvN2bcnAYGiWIkZRwWa7w_ZQt3FM6vuK5lHMLxrnZUspUX3/s1600/social.png") no-repeat transparent; text-indent:-99999em !important}
.bengkelbloggersocial li a:hover{padding:0 !important}
.bengkelbloggersocial li.rssicon a{background-position:0 0}
.bengkelbloggersocial li.twicon a{background-position:-50px 0}
.bengkelbloggersocial li.fbicon a{background-position:-100px 0}
.bengkelbloggersocial li.gicon a{background-position:-150px 0}
.bengkelbloggersocial li.rssicon a:hover{background-position:0 -50px}
.bengkelbloggersocial li.twicon a:hover{background-position:-50px -50px}
.bengkelbloggersocial li.fbicon a:hover{background-position:-100px -50px}
.bengkelbloggersocial li.gicon a:hover{background-position:-150px -50px}
.bengkelbloggerlinediv{margin-top:25px; height:0px; clear:both; display:block; border-top:1px solid #555; border-bottom:1px solid #555}
.bengkelbloggeremailbutton{background:#f7f8f9;border:1px solid #555; border-radius:4px; padding:6px 12px; margin:0;box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4); color:#555; text-shadow:0 1px 0 #eee; line-height:1.2; cursor:pointer; font-size:13px}
.bengkelbloggeremailbutton:hover{background:#f1f1f1; text-decoration:none !important}
.bengkelbloggeremail{clear:both; width:300px; margin:10px 0; float:left}
.bengkelbloggeremailform{position:relative; width:250px; margin:0 auto}
.bengkelbloggeremailinput{width:200px; height:18px; margin:0 auto; padding:8px 40px 8px 10px; border:1px solid #555; border-radius:4px; font-family:georgia; font-style:italic; box-shadow:1px 1px 2px #dfdfdf; font-size:14px; color:#666}
.bengkelbloggeremailbutton{border-top-right-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:0px; border-bottom-left-radius:0px; padding:9px; position:absolute; right:-2px; top:0; display:block; line-height:16px;border:1px solid #555}
.bengkelbloggeremailbutton{padding:8px !important}
.bengkelbloggeremailform, .bengkelbloggeremailinput{width:98% !important;box-sizing:border-box; height:auto}

• Selanjutnya masukkan kode berikut di bawah kode <data:post.body/>. Jika ada beberapa kode tersebut, masukkan saja di bawah kode terakhir.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='bengkelbloggerauthor_info'>
<div class='bengkelbloggerauthor_photo'>
<img alt='author' height='150' src='https://lh3.googleusercontent.com/--SZuP4_p9WA/AAAAAAAAAAI/AAAAAAAAIdk/q2RDEIZFSxo/s120-c/photo.jpg' width='150'/>
</div>
<h2>About <a expr:href='data:blog.homepageUrl'><data:blog.title/></a></h2>
<p><a class='sitename' expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> adalah tempat perbaikan dan modifikasi blog yang berisi trick dan tips blogging untuk optimasi blog pada mesin pencari. Semoga apa yang dibagikan pada blog ini dapat bermanfaat bagi kita semua, amin.</p>
<h2>Lisensi Artikel</h2>
<p>Artikel <a expr:href='data:post.url'><data:post.title/></a> diposting oleh <a expr:href='data:post.authorProfileUrl' rel='author'><data:post.author/></a>. Jika ingin menyebarluaskan atau mengcopy paste artikel <strong><data:blog.pageName/></strong>, harap menyertakan link artikel ini sebagai sumbernya. Tinggalkan kritik dan saran melalui kotak komentar untuk pembelajaran dan perkembangan <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> ke depannya. Terima kasih atas kunjungan anda.</p>
<div class='bengkelbloggerlinediv'/>
<div class='bengkelbloggeremail'>
<small style='text-align:center;'>Get Free <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> Updates to your Inbox!</small>
<form action='http://feedburner.google.com/fb/a/mailverify' class='bengkelbloggeremailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ID_FEEDBURNER&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='ID_FEEDBURNER'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='bengkelbloggeremailinput' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
 <input class='bengkelbloggeremailbutton' title='' type='submit' value='SignUp'/>
</form>
</div>
<ul class='bengkelbloggersocial'>
<li class='rssicon'>
<a href='http://feeds.feedburner.com/BengkelBloggerBlog' rel='nofollow' target='_blank' title='rss feeds'>Rss</a>
</li><li class='twicon'>
<a href='http://twitter.com/mbahdinan' rel='nofollow' target='_blank' title='follow me on twitter'>Twitter</a>
</li><li class='fbicon'>
<a href='http://facebook.com/bengkelblogger.mbahdinan' rel='nofollow' target='_blank' title='follow me on facebook'>FaceBook</a>
</li><li class='gicon'>
<a href='https://plus.google.com/+Mbahdinanbengkelblogger' rel='author nofollow' target='_blank' title='follow me on google+'>Google +</a>
</li>
</ul>
</div>
</b:if>

• Ganti kode biru dengan alamat foto google plus admin
• Ganti kode kuning dengan keterangan singkat mengenai admin atau blog
• Ganti kode hijau sesuai petunjuk
• Ganti kode merah dengan beberapa username media sosial admin
• Selanjutnya klik Simpan Template dan lihat hasilnya

Demikian penjelasan cara membuat author info multi fungsi di blog. Semoga artikel author info multi fungsi ini bisa bermanfaat bagi kita semua, amin. Selamat mencoba dan sukses selalu. Salam sahabat blogger.

Share this post