Membuat/memasang Kotak pesan admin,atau kotak permalink,atau juga kotak author,atau apa nama yang tepat,pastinya bagaimana membuat sebuah kotak pesan tentang halaman artikel di bawah posting. Saya percaya anda telah sering menjumpainya di blog-blog lain sebuah kotak pesan yang berkaitan dengan artikel yang tertulis. Setelah kemarin saya telah berbagi tentang modif kotak pesan komentar,sekarang saya akan berbagi memasang kode untuk membuat kotak pesan admin/author di bawah post.
Kode script yang akan saya share sudah saya lihat/dipraktekan dan salah satunya (yang saya merasa cocok) yang ada di bawah posting halaman ini. Ada 3 kode yang dapat anda pilih atau anda dapat memodifnya sendiri sesuai dengan selera anda.
Masalah penting dan tidaknya memasang ini tergantung keperluan anda sendiri,tapi memang akan berguna untuk menuli pesan pendek tertentu tentang artikel tersebut. Saya ambilkan beberapa kode dari blog sobat lain dan perhatikan langkahnya sesuai per bagian langkahnya.
Langkahnya Kode pertama:
1. Masuk dashboard > klik template > Klik Edit HTML dan cari kode <div class='post-footer'> lalu kopi kode di bawah dan letakkan tepat di atas kode tadi:
<!-- Kotak Admin -->
<b:if cond='data:blog.pageType ==
"item"'>
<div class='admin-tulisan'>
<h4>Penulis: <a expr:href='data:blog.homepageUrl'><data:post.author/></a>
~ Informasi dan Blogging</h4>
<div class='kontainer'>
<img src='URL FOTO/LOGO ANDA DI SINI'/>
Artikel <a
expr:href='data:post.url'><data:post.title/></a>
ini dipublish oleh <data:post.author/> pada hari
<data:post.dateHeader/>. Semoga artikel ini dapat bermanfaat dan
menambah wawasan kita semua. Terimakasih atas kunjungan Anda serta kesediaan
Anda membaca artikel ini.
<p><span style='float:right;font:italic
10px Arial, Sans-Serif;'><a
href='http://rayhanzhampiet.blogspot.com/2011/11/cara-membuat-kotak-admin-dibawah.html'
target='_blank'>:: Get this widget !
::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->
NB:
- ~ Informasi dan Blogging > Ganti dengan deskripsi singkat blog anda atau judul blog anda.
- Url > Ganti dengan URL gambar anda untuk foto admin atau logo blog anda.
- Yang warna biru ganti dengan bahasa yang anda mau,bila tidak juga tak apa seperti itu.
- Yang warna jambon/merah jambu itu URL di mana saya ambil kode ini,boleh anda hapus atau silahkan ganti dengan UrL anda sendiri.
2. Kemudian anda cari lagi kode ]]></b:skin>. Lalu Copy kode CSS dibawah ini dan paste tepat diatas kode ]]></b:skin>. Jika eror bisa di coba untuk meletakkan kode CSS tadi tepat dibawah kode <data:post.body/>. (sesuaikan yah!).
.admin-tulisan{
display:block;
width:auto;
background:#CFE2E0;
border:2px solid #fff;
box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px
#000;-webkit-box-shadow:0 1px 3px #000;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#222;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#8A9C04;
border:none;
border-bottom:1px solid #699019;
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;
}
Langkah cara yang ke 2:
1. carilah kode seperti yang berikut: <div class='post-footer'> . Jika sudah ditemukan,silahkan anda letakkan kode di bawah ini di atas kode: <div class='post-footer'> yang pertama.
<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == "item"'>
<div class='admin-tulisan'>
<h4>Posted by : <a expr:href='data:blog.homepageUrl'>TULIS NAMA PENULIS BLOG DI SINI </a> ~ / <a href="http://se-cara.blogspot.com/2013/03/cara-pasang-widget-kotak-pesan-admin.html">Widget</a></h4>
<div class='kontainer'>
<img src='URL GAMBAR DI SINI'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> diposting oleh<b> TULIS NAMA PENULIS BLOG DI SINI </b>pada <data:post.dateHeader/>. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan melalui kotak komentar. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog Sobat, hanya saja mohon sertakan link sumbernya dengan tautan link aktif ke postingan ini. Terimakasih. Selamat bersenang-senang.
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin selesai -->
NB:
- Untuk tulisan yang berwarna MERAH,Silahkan anda ganti dengan nama penulis blog atau dengan kode berikut <data:post.author/>.
- Untuk tulisan yang berwarna hijau, anda ganti dengan url gambar.
- Untuk warna biru bisa anda ganti dengan kata-kata mutiara lain.
- Yang warna merah jambu asal kode ini (silahkan boleh anda hapus atau biarkan atau ganti dengan URL post anda)
2. Selanjutnya,cari kode: <data:post.body/>,Biasanya kalau blog anda telah menggunakan/ memakai Read more akan ada terdapat kode itu lebih dari 2 atau 3
3. Kemudian letakkan kode di bawah ini di bawah kode <data:post.body/> pada kode yang nomor 2. Jika terjadi error coba letakkan di atas kode: ]]></b:skin> (sesuaikan).
/*--Mulai Kotak Admin --*/
.admin-tulisan{
display:block;
width:auto;
background:#CFE2E0;
border:2px solid #fff;
box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-
webkit-box-shadow:0 1px 3px #000;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#222;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#8A9C04;
border:none;
border-bottom:1px solid #699019;
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;
}
NB:
untuk ukuran font,jenis warna,letak tulisan bisa anda ganti sesuai keinginan yang sesuai dengan mau anda.
Langkah cara ke 3:
Cari kode berikut ]]></b:skin>,kemudian letakkan kode di bawah ini di atas kode ]]></b:skin>:
.permalink {teks-color:#000000;border: 1px dotted #000000; padding: 5px; background:#eaeaea;-moz-border-radius:5px;} .permalink a {background:none;} img.float-right {margin: 5px 0px 0 10px;} img.float-left {margin: 5px 10px 0 0px;}
Selanjutnya cari kode <div class='post-footer'>, kemudian letakan kode di bawah ini di bawah kode <div class='post-footer'> tadi:
<div class='permalink'>Anda sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> Anda juga dapat menemukan artikel <data:blog.pageName/> ini dengan url <strong><data:post.url/></strong>, juga bisa menyebar luaskannya jika artikel <strong><data:blog.pageName/></strong> ini dianggap bermanfaat bagi teman-teman.</div>
Langkah cara ke 4 :
1. Cari kode <data:post.body/>,Gunakan Ctrl + F untuk mempermudah pencarian kode <data:post.body/>,lalu anda Letakan kode berikut di bawah kode <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div class='vcard' id='hcard-Riki-Junizar' style='margin-top: 30px; padding: 10px; font-size: 12px; font-family: Arial; background: #ffe6a3; line-height: 1.3em; color: #cc0000'>
<span style='color:#cc0000; font-size:18px; margin-top:10px'>Terima Kasih Atas Kunjungan Anda</span><br/>
Judul: <span itemprop='itemreviewed'><data:post.title/></span><br/>
Ditulis Oleh <span class='fn n'><span class='given-name'><span itemprop='reviewer'><data:post.author/></span></span></span><br/>
<span style='text-align: justify'>Jika mengutip harap berikan link yang menuju ke artikel <b><a expr:href='data:post.url'><data:post.title/></a></b> ini. Sesama blogger mari saling menghargai. Terima kasih atas perhatiannya</span>
</div>
</b:if>
2. Klik simpan.
NB:
- Jika kode <data:post.body/> lebih dari satu, Saudara bisa coba pasang salah satunya dulu. Jika tidak tampil segera pindahkan kode ini ke kode yang lainya lagi.
- Kode dengan latar biru adalah kode untuk tampilan kode ini. Anda bisa mengubah warna color dan backgroun sesuai dengan selera. Jangan lupa ganti nama Riki-Junizar dengan nama Saudara.
- Kode dengan latar hijau adalah perintah untuk mengeksekusi kode rich snippet microdata review.
Kode yang tecetak tebal berwarna merah adalah kode yang dibutuhkan untuk menampilkan judul artikel dan URL artikel.
Nah,demikian berbagi kode untuk membuat ktak admin,yang saya ambil dari beberapa sumber,silahkan anda sesuai yang mana yang cocok bagi anda dan mudah di blog anda.
ٱلْحَمْدُ لِلَّهِ رَبِّ
ٱلْعَاٰلَمِين
