Cara Membuat Author Box di Blog

Bloging adalah duniaku,Imajinasi adalah kreasiku,Otak atik adalah Kreatifku

Hallo sobat, malam ini sambil nugguin sahur saya akan berbagi untuk anda semua cara membuat sebuah author box seperti gambar dibawah ini :

Tampilan Author Box.

Langsung saja untuk cara membuat sebuah Author Box. Silahkan simak tutorial dibawah ini :

• Login ke blogger.com
• pilh template >> edit html
• cari kode ]]></b:skin> untuk mempermudah gunakan ctrl+f
• copy paste kode dibawah ini tepat diatas ]]></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:#8A9C04;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 */

Cari kode <data:post.body/> untuk mempermudah gunakan ctrl+f , akan muncul lebih dari satu kode <data:post.body/> jadi pilih kode yang kedua kalau masih belum berhasil paste dibawah kode yang pertama. Copy paste kode berikut dibawah <data:post.body/> , Jika belum muncul juga paste kembali di kode yang ketiga  <data:post.body/>.

<!-- 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> | Tempat Tutorial Blogging</h4>
<div class='kontainer'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilAc8biwQc_ftg_qxHz0EzmuL7Wg-K8iBmGpG5Ar434K__JqhtgAMGXaZNM9KYR-sirMWNGbCYWzhxCLFtEMJtBdu7bVGdNIbEoI6d201ylbrb87jANXcPaY69EovTCvLQM7CZESyFDQc/w329-h311-no/Tempat+Blogging.png'/>
Terimah Kasih telah membaca artikel<a expr:href='data:post.url'><data:post.title/></a>. Yang ditulis oleh <data:post.author/> .Pada hari<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 -->

Selesai, Mudah mudahan bisa bermanfaat buat sobat semua.

Berbagi :