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.
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
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.
.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.
Ukey, Semoga berhasil yaa sob..
Salam dari Laskar Awan Putih ( AMIGOS ™ ).
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..
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'>
<!-- 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://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'><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://afa-amigos-net.blogspot.com/' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- 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://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'><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://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.
- 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.
.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.
Ukey, Semoga berhasil yaa sob..
Salam dari Laskar Awan Putih ( AMIGOS ™ ).
