Kembali lagi membagikan Tutorial. Tutorial kali ini adalah Cara Membuat Pesan Yang Muncul Dalam Beberapa Detik di Blog atau Membuat Pesan Yang Muncul dalam waktu yang di tentukan, jadi pesan simple ini muncul dalam detik yang kita tentukan misalnya 300 detik atau dapat juga ribuan detik. Pada Pesan ini juga ada pemanis berupa Link "Refresh Halaman" yang bila di klik akan langsung Reload Halaman dengan otomatis tanpa harus Ctrl + R atau klik tombol reload di browser.
Pesan Unik ini tersedia 4 Pilihan Warna di tambah dengan Warna Default total ada 5 Warna.
Fungsi Pesan Unik ini dapat sahabat gunakan untuk Pesan singkat sehabis pengunjung membaca artikel di blog atau pesan berupa "Anda Terlalu Lama di Halaman Ini silahkan Refresh Halaman". Bagi sahabat yang tertarik untuk memasangnya silahkan ikuti tutorial di bawah ini :
Pertama buka Blogger > Template > Edit HTML
Letakan CSS di bawah ini sempurna di atas
Pertama buka Blogger > Template > Edit HTML
Letakan CSS di bawah ini sempurna di atas
]]></b:skin> atau </style>/* CSS Messages */ #messages{position:fixed;bottom:20px;left:20px;z-index:600;display:none} .message{max-width:700px;background:#eee;padding:10px 13px;line-height:1.5em;display:inline-block;margin-top:10px;border-radius:3px;font-size:14px;}.message .control-delete{float:right;margin-left:6px;margin-right:-6px;margin-top:-6px}.message a{color:#000}.message.hasIcon img{float:left;margin:-2px 8px -2px -3px}.messageLink{display:block;float:left;padding:8px 13px;margin:-7px 0 -7px -12px}.messageLink:hover{text-decoration:none;background:rgba(0,0,0,0.1)} .message.warning{background-color:#fde;border:1px solid #ebb;color:#c00} .message.blucol{background-color:#CCE3FF;border:1px solid #AAD5EE;color:#000355} .message.sukses{background-color:#cfd;border:1px solid #aeb;color:#050} .message.notif{background-color:#FFEDCC;border:1px solid #EED3AA;color:#554B00} #messages a{color:#444;}#count-messages{display:none}Selanjutnya Letakan HTML di bawah ini sempurna di bawah
<body>
<div id='messages'><div class='messageWrapper'><div class='message neutral dismissable'> <a class='control-delete dismiss' href='#'><i class='fa fa-remove'></i></a> Anda Terlalu Lama Berada di Halaman Ini. <a href='#' onclick='window.location.reload();return false'>Refresh Halaman</a>. </div></div></div>neutral dengan warning Merah :
warning Hijau :
sukses Biru :
blucol Kuning :
notif Abu-abu :
neutral Jika tidak ingin memakai fungsi Refresh Halaman, Hapus aba-aba
<a href='#' onclick='window.location.reload();return false'>Refresh Halaman</a>Dan langkah Terakhir letakan Javascript di bawah ini sempurna di atas
</body><script type='text/javascript'> //<![CDATA[ var seconds = 300 ; setInterval( function() { if (seconds <= 1) { messages.style.display = "block"; } else { document.getElementById('count-messages').innerHTML = --seconds; } }, 1000 ); document.write('<span id="count-messages">300 </span>'); //]]> $('.dismiss').click(function() { $('#messages').hide(); }); </script>Note : Ganti
Lalu Simpan Template.
Sobat membutuhkan Font Awesome untuk menampilkan Icon Close, bagi yang belum memasang font awesome pada blognya letakan aba-aba di bawah ini sempurna di atas
</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("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"); //]]> </script> Tutorial Terkait : Membuat Blok Catatan Tips dan Peringatan di Blog
Semoga Tutorial ini Bermanfaat.
