Cara Membuat Kotak Admin Di bawah Postingan di Blog | Tutorial Blog

Hello. kawan..

Sudah lama banget Nihh.!! saya belum posting di blog ini. karena banyak sekali kegiatan yang saya kerjakan di tambah sebentar lagi saya akan melaksanakan UN Sekolah.
Pada kesempatan kali ini, saya akan berbagi tutorial blog tentang "Cara Membuat Kotak Admin Di bawah Postingan di Blog | Tutorial Blog". Mungkin diantara sobat blogger pasti sudah tau tentang Tutorial blog yang satu ini. 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-sphotos-h-a.akamaihd.net/hphotos-ak-snc7/312325_486462081406392_382581849_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://de-armifa.blogspot.com/2013/02/cara-membuat-kotak-admin-di-bawah.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 :

::Selamat Mencoba::