Cara Membuat Kotak "Author" di Bawah Posting Blog

Apa yang dimaksud kotak "author" ? yaitu kotak khusus yang berisikan pesan author (*penulis) blog kepada pembaca dan biasanya diletakkan dibawah postingan blog.
Contoh Kotak "Author"
Sebenarnya bentuk author box ini banyak sekali, akan saya buat post sendiri untuk bentuk author box yang lain. Nah..sekarang akan saya share tentang cara membuat kotak author standart seperti dalam blog saya.

1. Login ke blog kamu
2. Pilih Template dan edit Html
3. Cari kode "]]></b:skin>" untuk mempermudah gunakan CTRL+F dan search
   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 */ 

4. Cari kode "<data:post.body/>" untuk mempermudah gunakan CTRL+F dan search
   Copy paste kode berikut dibawah <data:post.body/> yaitu pada kode pertama

<!-- 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> | Rara Blog's </h4>
    <div class='kontainer'>
    <img src='http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/3/005/018/05a/18c58e0.jpg'/>
    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 -->

Keterangan : 
ganti tulisan berwarna MERAH dengan nama blog kamu
ganti tulisan berwarna BIRU dengan link foto profil kamu
kata-kata bisa dirubah sesuai selera masing-masing :)

5. Simpan Template

Lihat blog kamu and taraaaa...... \^.^/ Author box sudah nampang di blog kamu ^o^
Selamat Mencoba :)

2 comments:
Write komentar
  1. Ka Rara suka ngotak-ngatik CSS HTML juga toh! Aku juga suka, pingin bikin tutorial di blog tp susah ya...

    ReplyDelete
    Replies
    1. wah ada erika.. hai cantik ^o^/ ,
      iyah, ini buat blog juga otodidak utak atik sendiri say..hehee, untuk buat tutorialnya memang rada ribet dan harus di bagi dr yang tutorial yang sederhana dulu..
      makasih yah uda mampir :*

      Delete