Cari Artikelmu | Cara Membuat Author Box di akhir Postingan Blog


Halo, Sobat! Terkait dengan postingan sebelumnya yaitu Cara Membuat Artikel Terkait di Setiap Postingan Pada Blog. Pada kali ini saya akan membagikan tutorial tentang Cara Membuat Author Box di Akhir Postingan Blog.

Menjelaskan sedikit bahwa Author Box adalah Kotak Penulis. Artinya kotak yang berisi tulisan-tulisan dari penulis blog itu sendiri. Tulisan-tulisannya biasa berisi ucapan terima kasih yang di ungkapkan oleh si penulis dan hal lainnya biasa ada foto penulis, nama penulis.

Nah, itulah sedikit ulasan arti dari author box menurut saya. Untuk langkah-langkah cara memasang di blog sobat, Simak Berikut ini:

1. Buka, Dashboard=> Template=> Edit HTML
2. kemudian, CTRL+F untuk percepat pencarian. dan ketikkan ]]</b:skin> dan tekan ENTER
    Jika kodenya sudah di temukan, Copy kode CSS di bawah ini dan tempelkan di atas kode ]]</b:skin>



/* kotak author tempat blogging */
.admin-tulisan{display:block;width:auto;background:#CFE2E0;border:2px solid #fff;box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;padding:0;margin:30px 0 10px 0;font:normal 12px Arial, Sans-Serif;color:#222;}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{background color:orange;border:none;border-bottom:1px solid #699019;color:#fff;text-transform:normal;text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);font:bold 12px Arial,Sans-Serif;padding:5px 10px;margin:0 0 0 0;display:block;}
.admin-tulisan h4 a{color:#FEEA83;}
.admin-tulisan img{width:70px;height:70px;margin:0 10px 0 0;float:left;border:1px solid #954B02;padding:2px;background:#C36702;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;margin: 0px;border: 5px solid #eee;-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);box-shadow: 4px 4px 4px rgba(0,0,0,0.2);-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);}
/* kotak author tempat blogging */ - See more at: http://cafeilmu-yangyang.blogspot.co.id/2014/02/cara-membuat-author-box-di-bagian-akhir.html#sthash.y1R1eQjL.dpuf

Untuk lebih jelasnya gambarnya seperti ini

3. Kalau sudah selesai kita lanjut, ke kode HTMLnya. Copy Kode dibawah ini dan tempelkan di bawah kode <data:post.body/>. Sebelumnya kode tersebut ada banyak, mulailah dari atas dan Tempelkan kodenya di bawah kode <data:post.body/> yang ke tiga dari atas.

<!-- Kotak Admin Tempat Blogging -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='admin-tulisan'>
    <h4>Creatif By : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> | Ilmu Bloggers</h4>
    <div class='kontainer'>
    <img src='https://lh3.googleusercontent.com/-7tta9otVDxo/U09_AyJrTAI/AAAAAAAAAJw/TA61pAiZHd0/w140-h105-p/1797348_482679158509208_1659403722_n.jpg'/>
    Terimah Kasih telah membaca artikel --&gt; <a expr:href='data:post.url'><data:post.title/></a>. Yang ditulis oleh  <data:post.author/> .Pada hari  --&gt; <data:post.dateHeader/>. Jika anda ingin sebarluaskan artikel ini, mohon sertakan <strong>sumber link asli.</strong> Kritik dan saran dapat anda sampaikan melalui kotak komentar. Trimakasih
    <p>
<textarea cols='75' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea></p>
    <div style='clear:both;'/>
    </div>
    </div>
    </b:if>
    <!-- Kotak Admin Tempat Blogging -->

Gambarnya seperti ini untuk lebih jelasnya

5. Klik Save, selesai.. Buka, blog anda dan lihat di akhir konten yang sudah anda posting.

Hasilnya akan seperti ini

Ok, Sobat sampai disini untuk tutorial Cara Membuat Author Box di akhir Postingan Blog. Silahkan berkomentar jika kurang mengerti..

Baca juga: Cara Menambah Artikel Terkait Bergambar di Setiap Postingan Pada Blog klik disini