Cara Membuat Widget Message Di Blog

Assalamualaikum Wr. Wb kali ini saya akan kasih membuat Widget Message di Blog berguna untuk memberitahu bila mungkin blog sedang dalam perbaikan / untuk menyapa para pengunjung di blog.
Berikut Langkah - Langkah Untuk Membuat nya >>

 ✓ Letakkan kode di bawah tepat di atas kode </body>

<style type='text/css'>

.notification{height:70px;width:480px;display:block;position:fixed;Bottom:10px;left:10px;/*Border Radius*/border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;/*Box Shadow*/-moz-box-shadow:2px 2px 2px #cfcfcf;-webkit-box-shadow:2px 2px 4px #cfcfcf;box-shadow:2px 2px 2px #cfcfcf}

.notification span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHC5sALsDeOMWvggHn15NkjTeNDRcDU3Azg7pOG3lBzFFbymOSOk51a9k622d-Z8sTxqcgNevjcbaggegijrLVvdSFzlYKoD5C4w7dkkY440rZ0XnQzXeCp9YwueElWefOD1HYMSnmeHM/) no-repeat right top;cursor:pointer;display:block;width:19px;height:19px;position:absolute;top:-9px;right:-8px}

.notification p{width:400px;font-family:Arial,Helvetica,sans-serif;color:#323232;font-size:14px;line-height:21px;text-align:left;float:right;margin:10px 15px 0 0;*margin-top:15px;/*for lt IE8*/padding:0;/* TEXT SHADOW */ text-shadow:0 0 1px #f9f9f9}

.warning{border-top:1px solid #fefbcd;border-bottom:1px solid #e6e837;/*Background Gradients*/background:#feffb1;background:-moz-linear-gradient(top,#feffb1,#f0f17f);background:-webkit-gradient(linear,left top,left bottom,from(#feffb1),to(#f0f17f))}

.warning:before{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXUy6pik70ZMFsToDm8evZ8Dl-5ZEDEa94l8wuD5xNkZFpRW6XTjdhHKfUjBJyQbDHheSvaS0drh_COOCmOEzaS0-FD3SyIcgTekWM1m_g5xpNADFLsyKlQ7yLCQgQ0KDta7fsjMcjJMs/);float:left;margin:15px 15px 0 25px}

.warning strong{color:#e5ac00;margin-right:15px}

</style>

✓ Tambahkan kode di bawah ini (letakkan dibawah kode yang di atas tadi)

<script type='text/javascript'>

$(document).ready(function(){$(&#39;.notification&#39;).hover(function(){$(this).css(&#39;cursor&#39;,&#39;auto&#39;);});$(&#39;.notification span&#39;).click(function(){$(this).parent().fadeOut(800);});});</script>

<div class='notification warning'><span/>

 <p><strong>Message :</strong>Selamat Datang Di Index Assembly  Tutorial Widget Blog</p></div></b:if>

✓ Jangan lupa selimuti kode di atas.

 1. Untuk menampilkan Message hanya di Halaman Utama saja

<b:if cond='data:blog.url == data:blog.homepageUrl'>

KODE DI ATAS........

</b:if>

2. Muncul di halaman Posting

<b:if cond='data:blog.pageType == "item"'>

KODE DI ATAS........

</b:if>

➜


Demo


Note:
› Tulisan bottom yang Berwarna kuning dan left tulisan berwarna merah bisa di ganti dengan keinginan
›Tulisan berwarna pink silahkan diganti dengan kata-kata kalian sendiri.

Sekian dari saya, semoga bermanfaat Wassalamualaikum Wr. Wb