Cara memasang/Membuat Kotak Pesan Admin Dibawah Postingan Blog.
- Seperti ini niii contohnya..
Okey, Langsung sajaa. Cekidot.
Langkah Pertama, ke-1
- Seperti biasa sob, Login ke dashboard blogger sobat.
- Masuk ke menu Rancangan / Template >> Edit HTML.
- 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.
- Setelah itu jangan lupa centang pada Expand Template Widget.
- Kalau sudah, sobat cari kode ini <div class='post-footer'> pada template.. Pakai Ctrl+F untuk mencari kode di atas, biyar lebih mudah
- Kalu sudah ketemu, Copy kode dibawah ini, dan pastekan / letakkan tepat di atas kode <div class='post-footer'>
<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://lh5.googleusercontent.com/-y-EKnH13Fqs/AAAAAAAAAAI/AAAAAAAAAC0/5vbIB9H8H_A/s512-c/photo.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'><a href="<data:post.url/>" target="_blank"><data:blog.pageName/></a></textarea><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://famagulz.blogspot.com/' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<h4>Creatif By : <a expr:href='data:blog.homepageUrl'><data:post.author/></a>Deskripsi Blog sobat</h4>
<div class='kontainer'>
<img src='http://lh5.googleusercontent.com/-y-EKnH13Fqs/AAAAAAAAAAI/AAAAAAAAAC0/5vbIB9H8H_A/s512-c/photo.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'><a href="<data:post.url/>" target="_blank"><data:blog.pageName/></a></textarea><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://famagulz.blogspot.com/' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
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.
Kemudian Cari code ]]></b:skin> Pada template sobat.
Kalau sudah ketemu, silakan Copy Code CSS dibawah ini, dan pastekan/letakkan tepat di atas code ]]></b:skin>
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/> .
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> .
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;
}
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.
Ukey, Semoga berhasil yaa sob.
+ komentar + 2 komentar
jangan bilang tidak bisa sebelum mencoba...
mantaps..................
Thenkz sobbb...?
Post a Comment
Admin