Cara Cepat Membuat Lonceng Notifikasi Pada Blog Hanya 5 Menit Langsung Jadi 100% Work

Selamat Datang diblog pribadi saya, blog ini sepenuhnya sebagai media pembelajaran dan tempat saya berbagi informasi. Pada kesempatan kali ini saya akan memberikan trik kepada anda Bagaimana Cara Membuat Lonceng Notifikasi Pada Blog. Cara ini sudah terbukti berhasil karena pada dasarnya blog saya juga sudah memakai lonceng notifikasi yang bisa anda lihat dibagian kanan atas jika anda membuka blog saya lewat desktop dan jika anda membuka blog ini menggunakan smartphone anda bisa menggesernya kekanan.

Karena sudah saya praktekan dan berhasil dipasang pada blog saya yang kira hanya butuh 5 menit untuk membuat lonceng notifikasinya. Karena pentingnya sebuah notifikasi agar kita bisa mengetahui komentar yang masuk. Baiklah baca dan simak tutorialnya dibawah ini.

1. Buka akun blog anda kemudian pilih Tema => Edit Html

2. Gunakan tombol Ctrl + F untuk menemukan kode script </head> kemudian copy dan paste kode script dibawah ini tepat diatas kode </head> untuk memasang jQuery

3. Sekarang memasang CSS, copy dan paste kode script dibawah ini tepat diatas kode script ]]></b:skin>

Baca Juga : Cara Menampilkan Widget Lainnya Versi Mobile

Baca Juga : Cara Membuat Kotak Scroll Untuk Kode Script Pada Postingan Blog

/* Notifikasi Komentar Tips Trick */
#show-total {
position:fixed;
top:1px;
right:180px;
z-index:9999;
cursor:pointer;
float:right;
}
.total-show {
background-color:#FF0000;
color:white;
padding:2px 6px;
font-size:11px;
border-radius:4px;
font-weight:bold;
}
#notif {cursor:pointer;}
#notif:before {
content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpWeg4yK9k8n3cHFo5u7xjob_CBW191LNxpOzNvBdP7qpN6PK4og5vgQfUKeJNPKf3YOCItf527dQENwOF77XQ_aAPPtozTTbXwFdrBKBM9bGUlik0dVAkv8RMt57qdtrbbOf1HSIw/s1600/lonceng.png');
display:block;
position:fixed;
top:12px;
right:160px;
opacity:.5;
z-index:9997;
transition:all 0.4s ease-out;
}
#notif:hover:before {
opacity:1;
}
#notif2 {cursor:pointer;display:none}
#notif2:before {
content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpWeg4yK9k8n3cHFo5u7xjob_CBW191LNxpOzNvBdP7qpN6PK4og5vgQfUKeJNPKf3YOCItf527dQENwOF77XQ_aAPPtozTTbXwFdrBKBM9bGUlik0dVAkv8RMt57qdtrbbOf1HSIw/s1600/lonceng.png');
display:block;
position:fixed;
top:12px;
right:160px;
opacity:.5;
z-index:9997;
transition:all 0.4s ease-out;
}
#notif2:hover:before {
opacity:1;
}
#cm-wrapper {
width:310px;
position:fixed;
top:48px;
right:-381px;
z-index:9999;
background-color:#222;
padding:15px 13px 25px 15px;
color:#666;
font-family: Arial, Sans-serif;
border-top:8px solid #444;
transition:0.5s ease;
}
#cm-wrapper:before {
content:"";
width:0;
height:0;
position:absolute;
top:-24px;
right: 163px;
border:8px solid transparent;
border-color:transparent transparent #444;
}
#cm-scroll {
width: 100%;
height: 600px;
overflow: auto;
position: relative;
}
#comments-container {
color:#666;
font-family: Arial, Sans-serif;
}
#comments-container.cm-active {
position:fixed;
right:0;
top:61px;
}
.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}
.vscrollerbase {
width: 5px;
background-color: #111;border-radius:2px;
}
.vscrollerbar {
width: 5px;
background-color: #599b29;border-radius:2px;
}
.hscrollerbase {
height: 10px;
background-color: #111;border-radius:2px;
}
.hscrollerbar {
height: 10px;
background-color: #444;border-radius:2px;
}
.scrollerjogbox {
width: 10px;
height: 10px;
top: auto; left: auto;
bottom: 0px; right: 0px;
background-color: gray;
}
.cm-outer {
margin:0 auto;
padding:0;
font-size:11px;
text-align:left;
}
.cm-outer pre {background-color:#141414;font-size:11px;color:#7c7c7c}
.cm-outer li {
padding:7px 10px 12px;
list-style:none;
clear:both;
position:relative;
border-top:1px solid #333;
border-bottom:1px solid #111;
margin-right:10px;
}
.cm-outer code {
color:#a6a658;
font-size:11px;
}

.cm-outer li.selected {
border-left:4px solid #fffe8c;
}
.cm-outer li:first-child {
border-top:none;
}
.cm-outer li:last-child {
border-bottom:none;
}
.cm-text {color:#999;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 60px;font-size:12px;font-weight:normal !important;}
.cm-header a {color:#599b29;text-decoration:none;font-size:12px;font-weight:bold}
.cm-header a:hover {color:#e6e6e6;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:60px}
.cm-outer img {
display:block;
float:left;
background:#8fa2cb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLptPx1MjS4qPbQGfyJjjdtjDB5Y_zHA88bg5Jyen-8CjGC1R1HljuaGF1sy5E35bdpEDaj44xsytt0aDnlqNyHdPPvWVFUpNLOBR-IhFg6d0ry5CL0CTRUq657L-aimsEN8jRc1ce/s1600/anon5.png') no-repeat 50% 50%;
overflow:hidden;
border-radius:100px;
position:absolute;
top:10px;
left:0;
border:3px solid #3d464f;
}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#599b29;text-decoration:none;}
.cm-footer a:hover {color:#e6e6e6;text-decoration:none;}
div.cm-header img[src='http://img1.blogblog.com/img/openid16-rounded.gif'] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoVQE1MwSGsCIFwLo1DIewYpY98k_mnq5eLNZnJ2dXekk-pRBn1qeM0c2uEtpXtXxr11FjFXOvvDxgKP0QKmlwhWb-Z6fQNwiHMSKGX5VSZvqEm7eXHgBqwbNU1T7gyvOzRxFPv1vt/s80-c/gravatar.png);
}
.bg_hitam{
display: none;
position: absolute;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
z-index:99;
opacity:.30;
}
.sticky {
position:fixed;
top:42px;
z-index: 100;
}
.comments
.thanks-comment{
position:relative;
margin:10px 0;
padding-left:40px;
font-style:italic;
font-size:16px;
quotes:"\201C""\201D""\2018""\2019"
}
.comments
.thanks-comment:before{
content:open-quote;
position:absolute;
top:0;
left:0;
margin-top:15px;font-size:4em;color:#d80556}

4. Selanjutnya copy dan paste kode script dibawah ini tepat diatas kode script </body>

<div id='notif' title='Notifikasi'/>
<div id='notif2' title='Notifikasi'/>
<div class='bg_hitam' id='bg'/>
<div id='cm-wrapper'>
<div class='flexcroll' id='cm-scroll'>
<div id='comments-container'/>
</div>
</div>
<div id='show-total'/>
<script type='text/javascript'>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://komputerarena.blogspot.com",
    max_result: 20,
    t_w: 50,
    t_h: 50,
    summary: 9999,
    new_tab_link: false,
    ct_id: "comments-container",
    new_cm: " Komentar Baru!",
    interval: 30000,
    alert: true,
    alert: function(total) {
        document.getElementById("show-total").innerHTML = '<strong class=\'total-show\'>'+total+'</strong>';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
$('#notif').click(function(){$("#cm-wrapper").css({right: "0px"});$("#bg, #notif2").show();$("#notif").hide();});$('#notif2').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});$('#bg').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});document.getElementById('notif').onclick = function() {document.title = originalTitle;$('#show-total').hide();};document.getElementById('show-total').onclick = function() {document.title = originalTitle;$('#show-total').hide();$("#cm-wrapper").css({right: "0px"});$("#bg").show();};setTimeout(function() {$('.myframe').each(function() {$(this).replaceWith('<iframe class="myframe" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');});}, 5000);$(document).ready(function() {
var stickyNavTop = $('#HTML7').offset().top; var stickyNav = function(){var scrollTop = $(window).scrollTop();     if (scrollTop > stickyNavTop) { $('#HTML7').addClass('sticky');} else {$('#HTML7').removeClass('sticky'); }};stickyNav();$(window).scroll(function() {stickyNav();});});
setTimeout(function() {
        $('.jsfiddle-demo').each(function() {
        $(this).replaceWith('<iframe class="jsfiddle-demo loader" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');
    });
}, 5000);
//]]>
</script>
<script src='https://googledrive.com/host/0B_VKL1yJ5C2uUnNSVjhIaHZiUWs' type='text/javascript'/>

Catatan : Kode Script diatas jangan lupa diganti "http://komputerarena.blogspot.com" dengan alamat blog anda.

5. Langka terakhirnya adalah simpan template anda dan lihat blog anda pada bagian kanan akan muncul gambar lonceng notifikasinya.

Sekian artikel tutorial Cara Membuat Lonceng Notifikasi Pada Blog 100% Work. Jika ada pertanyaan silahkan berkomentar dibawah dan jangan lupa di share artikel ini jika anda merasa artikel ini bermanfaat. Jangan lupa like fan page facebook saya ya :D

Baca Juga : Cara Menampilkan Widget Lainnya Versi Mobile

Baca Juga : Cara Membuat Kotak Scroll Untuk Kode Script Pada Postingan Blog

Cara Cepat Membuat Lonceng Notifikasi Pada Blog Hanya 5 Menit Langsung Jadi 100% Work

Posted by Pandi Ahaya on February 24, 2018

2 komentar:

Gabung Bersama Kami Para Trader Bitcoin & Investasi Terbesar di Asia

Labels