Membuat Pesan yang Muncul Dalam Beberapa Detik di Blog
19 September 2015
Kembali lagi Dunia Blanter 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 contohnya 300 detik atau bisa juga ribuan detik. Pada Pesan ini juga ada tambahan berupa Link "Refresh Halaman" yang jika 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 bisa sobat gunakan untuk Pesan singkat setelah pengunjung membaca artikel di blog atau pesan berupa "Anda Terlalu Lama di Halaman Ini silahkan Refresh Halaman".
Bagi sobat yang tertarik untuk memasangnya silahkan ikuti tutorial di bawah ini :
Pertama buka Blogger > Template > Edit HTML
Letakan CSS di bawah ini tepat di atas
Pertama buka Blogger > Template > Edit HTML
Letakan CSS di bawah ini tepat 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 tepat 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 menggunakan fungsi Refresh Halaman, Hapus kode
<a href='#' onclick='window.location.reload();return false'>Refresh Halaman</a>Dan langkah Terakhir letakan Javascript di bawah ini tepat 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 kode di bawah ini tepat 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.