Cara Membuat Kotak Pesan Admin Di bawah Postingan Blog
Kali ini cilegeh blog kembali membuat artikel tips blogging
untuk membahas cara membuat kotak pesan admin yang berada di bawah postingan
blog.. kira kira seperti ini contohnya
Dengan Kotak pesan admin sobat bisa menyampaikan pesan
khusus kepada para pengunjung blog kita. Selain itu tampilan kotaknya bisa
sobat sesuaikan warnanya dengan template yang sobat gunakan dan tentunya bisa
mempercantik tampilan blog kita.
Berikut Tutorialnya Cara Membuat Kotak pesan
admin di bawah postingan blog :
Langkah Pertama
Seperti biasa login ke 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 /
letakkantepat di atas kode <div class='post-footer'>
Silahakan cope paste script di bawah in :
<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == "item"'>
<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://lh5.googleusercontent.com/-BS3CHl4fSXU/AAAAAAAAAAI/AAAAAAAAATc/5argVUCPSEI/s120-c/photo.jpg'/>
Anda sedang 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://cilegehcity.blogspot.com/2013/03/template-blog-wordpress-gratis.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 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 Kedua
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.
dan ini scriptnya :
.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 background untuk bagian 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 header kotak admin
Kali ini cilegeh blog kembali membuat artikel tips blogging
untuk membahas cara membuat kotak pesan admin yang berada di bawah postingan
blog.. kira kira seperti ini contohnya
Dengan Kotak pesan admin sobat bisa menyampaikan pesan
khusus kepada para pengunjung blog kita. Selain itu tampilan kotaknya bisa
sobat sesuaikan warnanya dengan template yang sobat gunakan dan tentunya bisa
mempercantik tampilan blog kita.
Berikut Tutorialnya Cara Membuat Kotak pesan
admin di bawah postingan blog :
Langkah Pertama
Seperti biasa login ke 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 /
letakkantepat di atas kode <div class='post-footer'>
Silahakan cope paste script di bawah in :
<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == "item"'>
<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://lh5.googleusercontent.com/-BS3CHl4fSXU/AAAAAAAAAAI/AAAAAAAAATc/5argVUCPSEI/s120-c/photo.jpg'/>
Anda sedang 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://cilegehcity.blogspot.com/2013/03/template-blog-wordpress-gratis.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 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 Kedua
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.
dan ini scriptnya :
.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 background untuk bagian 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 header kotak admin
Comments
Post a Comment