Membuat Widget Pemberitahuan di Blog



Membuat Widget Pemberitahuan di Blog, Anaktimor17 Blog - Sobat blogger kembali saya share tips blogger cara pasang widget pemberitahuan di blog.  Sobat, dengan widget ini Anda bisa melakukan pemberitahuan/pengumuman di dalam blog Anda masing-masing. Kelebihan dari widget ini adalah dilengkapinya dengan tombol close
 agar tidak menggangu para pengunjung karena posisi widget ini melayang di sebelah kiri bawah blog :)

Langsung saja ke cara pemasangannya :

1. Masuk ke akun blogger Anda.
2. Klik Edit HTML.
3. Letakkan kode dibawah ini diatas </body>


<b:if cond="data:blog.url == data:blog.homepageUrl">
<style type="text/css">
 .lintasnotif{height:70px;width:480px;display:block;position:fixed;bottom:10px;left:10px;border-radius:5px;box-shadow:2px 2px 2px #cfcfcf}
.lintasnotif span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbgy8QKAYGAF5ZESvO5lOvAyAWfjmQWzFSnT4mCUviMUfI74QRdQkXqlMNFp9_0lzcDtspYWA2j7EKx_f-hcm_DsrQg9U7F2LPMjbxMKFPmWxWff2VC9NVCjTrQI3SEuZvl3FO_p65MFc/) no-repeat right top;cursor:pointer;display:block;width:19px;height:19px;position:absolute;top:-9px;right:-8px}
.lintasnotif p{width:400px;font-family:Skranji;color:#323232;font-size:18px;line-height:21px;text-align:left;float:right;margin:10px 15px 0 0;margin-top:15px;padding:0;text-shadow:0 0 1px #f9f9f9}
.warning{border-top:1px solid #fefbcd;border-bottom:1px solid #e6e837;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/AVvXsEjzNUoWtYUzpnZfUziCM6X-WSpvG9a5xdK55VtCXhBMNAIAKHDSD1lgpaXgdB0rekbWVB2eaJ8sxLb1gKfOWGyM1Plx05NA27qABagQefWxq3YkgWJ2dt1HOFjFtdbvjRG4ekxoDdDZeVNn/s1600/Firefox.png);float:left;margin:15px 15px 0 9px}
.warning strong{color:#FF0000;margin-right:15px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"> 
<script type='text/javascript'>
$(document).ready(function(){$(&#39;.lintasnotif&#39;).hover(function(){$(this).css(&#39;cursor&#39;,&#39;auto&#39;);});$(&#39;.lintasnotif span&#39;).click(function(){$(this).parent().fadeOut(800);});});</script>
<div class="lintasnotif warning">
<b>Saran!</b>Isi pemberitahuan Anda atau apa saja disini..
</div>
</b:if>



4. Ganti tulisan yang berwarna biru dengan kata-kata yang Anda inginkan.
5. Ganti tulisan yang berwarna merah dengan gambar Anda, ingat ukuran gambarnya 40x40 px.

NB :
Kode
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"> 
yang bercetak tebal adalah JQuery terbaru, jika di template Anda sudah ada kode JQuery silahkah dihapus.

CATATAN:
Kode diatas untuk menampilkan hanya di home page saja, jika ingin menampilkan di semua halaman hapus kode paling atas "<b:if cond='data:blog.url == data:blog.homepageUrl'>" dan kode paling akhir "</b:if>" (tanpa tanda kutip).

sekian tips blogger tentang Membuat Widget Pemberitahuan di Blog . Selamat mencoba :) semoga berhasil . Jangan lupa komentarnya ya :)

2 comments
  1. wongcrewchild
    met mlm sob, banyak titorial mantep disini, wah siip
  2. Putra Kefa
    mat malam juga, thanks buat kunjunganya :) salam blogwalking......