Cara Membuat / Memasang Kotak Pesan Admin Dibawah Postingan Blog

Selamat Apa Aja ya soob... Semua pasti Sehat sehat aja kan...
okey, gak usah panjang lebar, hehehehehee... Kali ini aku mau kasih tau tentang bagai mana
Cara memasang/Membuat Kotak Pesan Admin Dibawah Postingan Blog.

• Seperti ini niii contohnya..

Menurut aku, kotak pesan admin/pesan kita sendiri pada blog kita itu sangat penting adanya, karena tercantum pesan khusus dari kita kepada pengunjung blog kita. Selain itu tampilan kotak/kolomnya yang unik,bisa dapat nilai tersindiri,selain itu juga bisa mempercantik tampilan blog kita.

Okey, Langsung sajaa. Cekidot.

Langkah Pertama, ke-1

1. Seperti biasa sob, Login ke dashboard blogger sobat.
2. Masuk ke menu Rancangan / Template >> Edit HTML.
3. Jangan lupa Copy dulu semua code HTML blog sobat, buat jaga jaga, siapa tahu kode yang kita masukkan ini memiliki kecacatan.. Tapi kemungkinan enggak lah, soalnya aku juga pakek... hehehee.
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, biyar lebih mudah
6. Kalu sudah ketemu, Copy kode dibawah ini, dan pastekan / letakkan tepat di atas kode <div class='post-footer'>    

Ini code scriptnya sob...

<!-- 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimHZbGPoeago1Waf6z20No8TmBsaVlN904ljDr7PyDKt42HXckX0OJkbWNGB1cpHi-Na7SFQG9yShBe0NwXrHena6vQ7D-mxw6rbh_EepJHE4JQ-0l_mkbM0NsItztL_DVWAtd80YS8DjY/s1600/w_afa+technicyzone.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://afa-amigos-net.blogspot.com/' 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     tanggal posting anda secara otomatis.
Sobat bisa mengganti yang saya tulis di bawah ini. 

• Ganti tulisan yang berwarna BIRU ; Ganti dengan deskripsi blog sobat sendiri.
• Ganti tulisan yang bewarna MERAH ; Itu merupakn almat url dari foto. Silakan ganti dengan alamat url foto sobat yang ingin sobat pasang.
• Ganti tulisan yang berwarna KUNING ; Itu merupakan tulisan isi dari pesan sobat. Ganti dengan selera sobat sendiri.

Langkah Ke-2

1. Kemudian Cari code ]]></b:skin> Pada template sobat.
2. Kalau sudah ketemu, silakan Copy Code CSS dibawah ini, dan pastekan/letakkan tepat di atas code ]]></b:skin>
3. Jika sobat gagal, ini hanya masalah pada peletakn code CSS ini. kalau ternyata gagal, coba sobat letakkan code CSS ini dibawah kode <data:post.body/> .
4. Kalu di Template sobat code <data:post.body/> ada 2, maka pilihlah yang atas.. kalu 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 HIJAU ; Itu merupakan code werna tulisan yang tampil di badan kotak admin.
• Untuk code yang berwarna ORANGE ; itu merupakn kode warna untuk beckground badan kotak admin.

Silakan sobat ber xperimen sendiri kalau dirasa itu belum pas, tapi menurut saya, itu sudah pas... hahahahahaay...

Ukey, Semoga berhasil yaa sob..
Salam dari Laskar Awan Putih ( AMIGOS ™ ).

Mungkin Anda Juga Minat Untuk Membaca Ini :