Pernahkah agan berkunjung ke blognya bang adhy suryadi (kompi ajaib). Buka postingannya kemudian scroll kebawah. kita akan menemukan kotak pengumuman disana. Berikut penampakan kotak pengumumannya :
Nah pada kesempatan kali ini saya akan mencoba berbagi pengalaman bagaimana cara membuat kotak pengumuman tersebut.
1. Pada kotak komentar ada gambar speaker/ toa. Nah untuk memunculkan itu blog kita harus sudah terpasang font awesome. Jika blog agan belum terpasang font awesome silakan tambahkan kode berikut diatas </head>
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>
2. Setelah menambahkan code tersebut otomatis blog agan sudah terpasang font awesome. Langkah selanjutnya yaitu tambahkan CSS berikut di bawah <style> atau <b:skin>
.kotak_info:before,.kotak_info:before{padding-right:.5em;position:absolute;font-weight:400}
.kotak_info{font-family:'Open Sans',sans-serif}
.kotak_info{line-height:1.5em;position:relative}
.kotak_infobox{margin:20px 0;padding:4px 0;background:#FF8000;display:block}
.kotak_info{margin:0 4px;padding:10px 10px 10px 60px;color:#fff;border:2px dashed #efefef}
.kotak_info:before,.kotak_info:before{font-size:40px;font-family:FontAwesome;margin-top:-13px}
.kotak_info:before{content:"f0a1";color:#000;top:50%;left:10px}
.kotak_info a {color:#000;font-weight:600;position:relative;padding-right:20px;display:inline-block}
.kotak_info a:before{content:"f08e";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;color:#000;position:absolute;bottom:0;right:0}
3. Langkah terakhir adalah menempatkan code HTML berikut :
<div class="kotak_infobox">
<div class="kotak_info">
Isi Pesanmu
</div>
</div>
Untuk penempatan kotak pengumumannya : jika mau diletakkan di atas postingan letakkan code html tersebut di atas <data:post.body/> dan berlaku sebaliknya jika ingin dibawah postingan tinggal taruh code htmlnya dibawah <data:post.body/>. Ganti tulisan isi pesanmu dengan pengumuman yang akan kamu berikan kepada pembaca.
4. Untuk yang menggunakan costum readmore biasanya pengumuman tersebut sudah otomatis akan muncul di halaman item. Namun jika pengumuman tersebut muncul di homepage juga, kita tinggal menambahkan tag conditional berikut :
<b:if cond='data:blog.pageType == "item"'> Kode html disini..... </b:if>
Cukup sekian share cara membuat kotak pengumuman di bawah postingan. Jika ada salah silakan dikoreksi. Terimakasih.