Cara Membuat Kotak Tulisan Di Tuliskan Oleh Di bawah Posting Di Blog | Tutorial Blog

Di hari yang indah ini. ARMIFA-BLOG akan berbagi lagi sebuah Tips dan Trik Tutorial blog tentang "Cara Membuat Kotak Tulisan Di Tuliskan Oleh Di bawah Posting Di Blog". Jika sobat memasang cara ini di blog sobat. Blog sobat tidak hanya terlihat terkesan dan menarik , tetapi juga supaya pengunjung blog sobat bisa tahu Pesan yang sobat lampirkan dalam Artikel ini. Baiklah untuk semua pengunjung blog, bagi yang mau mencoba Tutorial blog ini,langsung aja deh ke langkah-langkahnya :

1. Pertama Sobat log-in dulu ke blog

2. kalau udah sobat buka menu Template , lalu pilih Edit HTML

3. Sobat jangan lupa Centang Expand Template Widget.

4. lalu sobat Cari kode ini <div class='post-footer-line post-footer-line-1'>

                                                                        atau

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>

      </div>

    </b:if>

Kalau sobat udah menemui salah satu kode di atas , lau sobat Copa kode di bawah ini di bawah kode

                                          <div class='post-footer-line post-footer-line-1'>

                                                                        atau

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>

      </div>

    </b:if>

<!-- Kotak Admin -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='admin-tulisan'>

<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a>::ARMIFA-BLOG:: </h4>

<div class='kontainer'>

<a href='https://www.facebook.com/ade.miftah1' target='_blank'><img border='0' height='200' src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/211774_100001278143037_1354790858_n.jpg' width='200'/></a>

Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terimakasih atas kunjungan Anda yang telah membaca artikel ini,tinggalkanlah komentar anda baik itu kritik ataupun saran karena komentar anda sangat berarti bagi penulis dan perkembangan blog ini.Pengunjung diperbolehkan meng-copy-paste artikel dengan syarat <b>menyertakan link sumber aktif postingan dibawah ini</b>.Semoga artikel diatas bermanfaat untuk kita semua.Terima kasih.<center><br><textarea cols='50' id='autoblog' name='autoblog' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea></br></center>

<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://armifa-blog.blogspot.com/2012/11/cara-membuat-kotak-tulisan-di-tuliskan.html' target='_blank'>::get this widget::</a></span></p>

<div style='clear:both;'/>

</div>

</div>

</b:if>

<!-- Kotak Admin -->

Catatan :
kode yang saya kasih warna merah sobat ganti dengan URL gambar sobat dan link sobat
dan kode yang saya kasih warna biru ganti dengan kata-kata sobat
Satu lagi Kode yang saya kasih warna ungu ganti dengan Judul blog sobat

5. Nah sekarang sobat cari Kode ini ]]></b:skin>

6. Kalau sobat sudah menemui kode di atas. sekarang sobat tinggal Copas kode di bawah ini di atas kode ]]></b:skin>

.admin-tulisan{
    display:block;
    width:auto;
    background:#9999cc;
    border:2px Double #fff;
    box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 4px #000;-webkit-box-shadow:0 1px 4px #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:#330000;
    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:ff9999;}
    .admin-tulisan img{
    width:70px;
    height:70px;
    margin:0 10px 0 0;
    float:left;
    border:2px Dotted #ff0000;
    padding:1px;
    background:#ffffff;
    box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none; 
    }

Catatan :
Pada kode yang saya kasih warna hijau sobat bisa menggantinya dengan warna kesukaan sobat

7. Alhamdulillah sudah selesai juga sampai tahap terkahir ini. sobat tinggal Simpan Template dan lihat hasilnya.

Ini lah contoh yang sudah jadi :

Sekian dulu Artikel saya ini  Semoga bisa bermanfaat dan juga semoga berhasil.