Cara Membuat Kotak Admin Dibawah Postingan Dengan Thumbnail

Kali ini saya akan share cara Membuat Kotak Admin Dibawah Postingan Dengan Thumbnail. Ingat tutor ini untuk membuat bukan untuk mengedit yang ada pada template sobat sebelumnya. Baiklah ini screenshort yang saya maksud ini :

 Nyusul

Langkah Ke-1

1.  Login ke dashboard blogger sobat.

2.  Masuk ke menu Rancangan / Template >> Edit HTML.

3.  Jangan lupa Unduh Template Lengkap, buat jaga-jaga ketika anda gagal mempraktekannya 

      jadi anda bisa membackupnya.

4.  Setelah itu jangan lupa centang pada Expand Template Widget.

5.  Kalau sudah, sobat cari kode ini <div class='post-footer'> Pada template. Pakai Ctrl+F

     untuk mencari kode di atas agar lebih mudah.

6.  Kalau sudah ketemu copy kode dibawah ini, dan pastekan / letakkan tepat di atas <div class='post-footer'>

<!-- Kotak Admin -->
    <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>Deskripsi Blog sobat</h4>
    <div class='kontainer'>
    <img src='http://3.bp.blogspot.com/-FMUCJ0MUryU/UVqu74grIuI/AAAAAAAABPI/ayRPA5E4qOE/s1600/2f5840d5b5dccb94_m.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 <blink><strong>sumber link asli.</strong></blink> Kritik dan saran dapat anda sampaikan melalui kotak komentar. Trimakasih
    <p>
<textarea cols='57' 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><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='

http://rahman-ciblog.blogspot.com/2013/04/cara-membuatmemasang-kotak-pesan-admin.html

/' target='_blank'>:: Get this widget ! ::</a></span></p>
    <div style='clear:both;'/>
    </div>
    </div>
    </b:if>
    <!-- Kotak Admin -->

 Keterangan:
Code di atas akan membuat kotak Admin yang akan tercantum link posting anda secara otomatis, dan sobat bisa mengganti yang saya tulis di bawah ini.

• Ganti tulisan yang berwarna BIRU : Ganti dengan deskripsi blog sobat sendiri.
• Ganti tulisan yang berwarna MERAH : Itu merupakan alamat url dari foto. Silakan ganti dengan alamat url sobat yang ingin sobat pasang.
• Ganti tulisan yang berwarna Hijau : Itu adalah tulisan isi dari pesan sobat. Sobat bisa ganti dengan selera sobat sendiri.

Langkah Ke-2

1.  Kemudian cari code ]]></b:skin> Pada template sobat.

2.  Kalau sudah ketemu, silahkan Copy Code CSS dibawah ini, dan pastekan/letakan  tepat di 

     atas code ]]></b:skin>

3.  Jika sobat gagal, ini hanya masalah peletakan code CSS ini. Kalau ternyata gagal, coba 

     sobat letakan code CSS ini dibawah kode <data:post.body/> .

4.  Kalau di Template sobat code <data:post.body/> ada 2, maka pilihlah yang atas. Kalau 

     punyaku sih untuk code CSS ini terletak di atas code ]]></b:skin> .

5.  Simpan Template.

Ini code scriptnya sob.

.admin-tulisan{
    display:block;
    width:auto;
    background:#666666;
    border:2px solid #000000;
    box-shadow:0 1px 3px #000000;-moz-box-shadow:0 1px 3px #000000;-webkit-box-shadow:0 1px 3px #000000;
    padding:0;
    margin:30px 0 10px 0;
    font:normal 12px Arial, Sans-Serif;
    color:#ffffff;
    }
    .admin-tulisan .kontainer{padding:5px;}
    .admin-tulisan h4{
    background:#ff0000;
    border:none;
    border-bottom:1px solid #ffffff;
    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;
    }

 Keterangan: 

• Untuk code yang berwarna MERAH : Itu Merupakan code warna untuk bagian HEADER kotak admin.
• Untuk code yang berwarna BIRU : Itu merupakan code warna untuk bagian garis tepi kotak admin.
• Untuk code yang berwarna UNGU : Itu merupakan code warna untuk beckground badan kotak admin.
• Untuk code yang berwarna ORANGE : itu merupakan kode warna untuk beckground badan kotak admin.

Silahkan sobat ubah sesuai keinginan sobat kalau dirasa itu belum pas, Dan semoga bermanfaat..!!

Sumber