Cara Membuat Kotak Pemberitahuan/Peringatan di Blog

Trik kali ini cara mudah membuat kotak pemberitahuan di blog. Ada banyak cara untuk melakukan trik ini, di mana saya memperkenalkan sebuah aplikasi kecil Jquery dalam menciptakan Kotak Pesan Blog. Sebuah fitur khusus dari kerangka ini adalah bahwa pembaca dapat mematikannya jika diinginkan, sehingga memastikan estetika blog Anda.

Langsung saja langkah-langkahnya:

1. Sign In Ke Akun Blog anda
2. Masuk ke Rancangan
3. Edit HTML
4. Copy Kode dibawah ini. dan pastekan diatas kode </body>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<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/AVvXsEiiOT5NBjouTBZT9f8Gb9yJjJr3zMsUp0arrFm-XHZqKsG8R6lddcm4g2E-2qzdec7JZ6flNsLN2AU45D0T8HrXkztunOiKdTbV0UmHU_wzS3aa8ef60ooOpw-nItEfHOboQYEfXMNHgss/) 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/AVvXsEiVHC9HSc_jqVrOvx6nZsycJqQSbfVeDYDeO2BObTmC-17X4VAERBw4bUb3WnyB4Ghu1_YmrtQSty90DuFtDzI-0WdKgxkhHq5Ev-3q0wKVxYeFMP-PDPMlI8X3aqeBPGaNygZIRmyGNcg/);float:left;margin:15px 15px 0 25px}
.warning strong{color:#e5ac00;margin-right:15px}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<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>Pemberitahuan!</strong>Gunakan Tombol Arah Kiri dan Kanan Pada Keyboard Untuk Melihat Postingan Lama atau Baru di Blog Ini</p></div></b:if>

Ganti tulisan yang berwarna merah dengan kata-kata anda. Simpan template anda dan lihat hasilnya.
Selamat Mencoba...!!!

Artikel Lainnya: