Membuat Author Box Dengan Tombol Follow Di Blog

Cara Membuat Author Box Dengan Tombol Follow Di Bawah Postingan Blog adalah hasil dari saya berkunjung ke blognya mas Arie Adie, di sana saya liat artikel yang menarik mata dan perhatian saya. Ternyata benar, artikel Cara Membuat Author Box Dengan Tombol Follow Di Bawah Postingan Blog sangat keren. Permainan CSS nya membuat saya kagum karena saya sendiri tak pernah terfikirkan kode-kode yang rumit seperti itu.

Mungkin anda pernah mengunjungi suatu blog dan terdapat kotak dibawah posting blog yang berisi tentang informasi atau biodata penulis atau bisa juga tentang peringatan kecil mengenai artikel yang di publikasikan, kotak itulah yang biasa disebut-sebut author box. Bahwa biasanya pada author box juga disisipi sejumlah link yang berkaitan dengan artikel posting blog dengan menaruh judul posting yang sudah tersetting secara otomatis agar setiap author box tersebut muncul di setiap akhir posting blog bisa memunculkan judul posting yang tidak lain hal tersebut biasa disebut sebagai permalink.

Selain yang sudah saya terangkan di atas, pada author box agar lebih lengkap bisa juga kita custom agar disitu sekalian terdapat form email subscriber dan tombol social share. Untuk membuat author box muncul di setiap posting blog juga penerapannya tidak sulit, hanya dengan sedikit menambahkan kode yang terdapat dibawah kedalam edit HTML template blog maka author box sudah terpasang. Untuk langkah-langkah penerapannya, berikut tutorial cara Cara Membuat Author Box Dengan Tombol Follow Di Bawah Postingan Blog.

Cara Membuat Author Box Dengan Tombol Follow Di Bawah Postingan Blog

1. Masuk ke dashboard blogger sobat.

2. Klik Template lalu Edit Html.

3. Cari kode ]]></b:skin>, letakkan kode CSS berikut di atasnya;

/* Author Box */
.azhalleablogspotcom-boxauthor{ position: relative; margin: 25px auto; width:505px; padding:10px 10px 5px 10px; border:2px solid #52e052; background:#e9fbe9; color:#000; }
.titlebox h3{ padding: 10px 0px 10px 25px; color:#fff; font:bold 14px Georgia; background: #00008b; margin:0px 0px 0px -22px; width:524px; }
.titlebox h3 a {color:#fff;} .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:8px 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; }
.azhallea-social{ overflow: hidden; float: right; }
.azhallea-social a{ display: block; color: #FFFFFF !important; font: bold 13px Tahoma; text-decoration: none; transition: border-radius 0.50s; border-radius: 10px 0px; }
.azhallea-social a:hover{ border-radius: 0px; }
.azhallea-social div{ float: left; margin: 5px 5px 0 0; width: 70px; }
.azhallea-social .azhalleafacebook a{ padding: 9px 0px; text-align: center; background: #3B5999; }
.azhallea-social .azhalleafacebook a:hover{ background: #52e052; }
.azhallea-social .azhalleagoogleplus a{ padding: 9px 0px; text-align: center; background: #D54135; }
.azhallea-social .azhalleagoogleplus a:hover{ background: #52e052; }
.azhallea-social .azhallearss a{ padding: 9px 0px; text-align: center; background: #fb8938; }
.azhallea-social .azhallearss a:hover{ background: #52e052; }

4. Jika sudah menaruhkan kode CSS tersebut lalu cari kode <data:post.body/>, pastekan kode berikut di bawah kode <data:post.body/>;

<b:if cond='data:blog.pageType == "item"'>
<div class='azhalleablogspotcom-boxauthor'>
<div class='boxauthor_photo'>
<img src='http://lh4.googleusercontent.com/-GmR-gMwB3Hc/AAAAAAAAAAI/AAAAAAAAAXI/NGQoiLnnIrs/s512-c/photo.jpg'/>
</div>
<div class='titlebox'>
<h3>Author : <b:if cond='data:top.showAuthor'>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn'>
<a expr:href='data:post.authorProfileUrl' expr:title='data:post.author' rel='author'>
<data:post.author/>
</a>
</span>
<b:else/>
<span class='fn'><data:post.author/></span>
</b:if>
</b:if>
</h3></div>
<div class='boxcontent'>
Setelah anda membaca artikel berjudul <b><a expr:href='data:post.url' expr:title='data:post.title'><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 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=blogspot/GulgY', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='blogspot/GulgY'/>
<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='azhallea-social'>
<div class='azhalleafacebook'>
<a href='https://www.facebook.com/Ex.Pray.Beadboys' target='_blank' title='Join on Facebook'>Facebook</a>
</div>
<div class='azhalleagoogleplus'>
<a href='https://plus.google.com/111919785834589879854' target='_blank' title='Join on Google+'>Google+</a>
</div>
<div class='azhalleasrss'>
<a href='http://feeds.feedburner.com/blogspot/GulgY' target='_blank' title='Join on RSS'>RSS</a>
</div>
</div></br><span style='font:10px arial;float:right;padding-top:5px;'><a href='http://azhallea.blogspot.com/2014/05/membuat-author-box-dengan-tombol-follow.html' target='_blank'><b>[ Get This Widget ]</b></a></span>
<div style='clear:both;'></div>
</div>
</b:if>

5. Save template sobat, lalu lihat postingan sobat apakah sudah muncul atau belum.

DEMO

Tolong jangan hapus link creditnya jika sobat menghargai usaha saya. Demikianlah artikel Cara Membuat Author Box Dengan Tombol Follow Di Bawah Postingan Blog. Semoga bermanfaat buat sobat semua, khususnya pengunjung blog ini. Source: Mas Arie adie