Cara memasang tombol notifikasi di blog

Baca Juga

Button Notifikasi di Blog

Selamat malam sobat blogger kali ini saya akan menjelaskan cara pembuatan Tombol Notifikasi di blog , Ente pasti bertanya tanya apa sih fungsinya ?

Fungsi Tombol Notifikasi : 

-Anda dapat memperganteng Template anda

-Anda dapat mengetahui orang yang berkomentar di blog anda

-Anda dapat melihat komentar terbaru

Tahap-tahap pemasangan :

1.Salin script ini diatas kode </head>

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> 

Kalo anda sudah mempunyai jQuery , Script diatas jangan di gunakan

2.Salin script ini diatas ]]></b:skin> atau </style>

 /* Notifikasi Komentar
----------------------------------------------- */
#cm-total {
  position:fixed;
  top:14px;
  right:0;
  width:188px;
  text-align:left;
  z-index:9999;
  cursor:pointer;
}
.total-counter {
  background-color:#d11919;
  color:white;
  padding:1px 4px;
  font-family:Arial,Sans-serif;
  font-size:11px;
  border-radius:5px;
  font-weight:bold;
}
#notif {
  position:fixed;
  top:20px;
  right:180px;
  z-index:9999;
  height:22px;
  width:19px;
  opacity:.4;
  cursor:pointer;
}
#notif:hover {
  opacity:1;
}
.close-notif {
  position:fixed;
  top:92px;
  right:20px;
  z-index:9999;
  cursor:pointer;
  display:none;
}
#cm-container {
  width:355px;
  position:fixed;
  top:67px;
  right:0;
  z-index:9999;
  background-color:#e5e5e5;
  padding:60px 20px 10px 20px;
  color:#666;
  box-shadow:0 4px 15px -4px rgba(0,0,0,.4) !important;
  text-align:left;
  border:1px solid rgba(0,0,0,.2);
  background-clip:padding-box;
  display:none;
}
#cm-container:before {
  content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR0HJKnQePL5slGuDbP2DJ1pGJybryUG_AfR3j7vJ1I_V2V75Bfx2Mj0d6tPFjBtea-Jb2ilTNd5eWUJJi_zZ_f2YK1ewl5AGIFk54kAs0SvJ3rDJjtZjon4gAFRxxynPEealetR5g8Ng/s1600/arrow-notif.png');
  position:absolute;
  top:-14px;
  left:196px;
}
#cm-container:after {
  content:"Komentar Terbaru";
  position:absolute;
  top:22px;
  left:150px;
  text-align:center;
  font:normal 14px Arial;
  color:#333;
}
.cm-outer {
  margin:0 auto;
  padding:0;
  font-size:11px;
  text-align:left;
  font:normal 12px Arial;
}
.cm-outer ul{
  margin-bottom:5px;
}
.cm-outer li {
  padding:9px 10px 14px;
  list-style:none;
  clear:both;
  position:relative;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  background-color: white;
  margin-bottom:10px;
}
.cm-text {color:#797979;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 90px;font-size:11px;font-weight:normal !important;}
.cm-header a {color:#262626;text-decoration:none;font-size:14px;font-weight:bold}
.cm-header a:hover {color:#74a2c3;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:90px}
.cm-outer img {
  display:block;
  float:left;
  background:#ececec url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht4GU4LuLu9rlQdLU7ILpMw3WKCT9pI1sjyZjypAyYJmgpoaUhhRQfrPLxV_Prqmfjz8UMiqBgMuiOb5Be9TKO5V83-fWWBnzyahLCAFpmgD1uLOrpK0MalEUmJNoBoodcBf97DMrpIqo/s1600/anon80.png') no-repeat 50% 50%;
  overflow:hidden;
  border-radius:3px 0 0 3px;
  position:absolute;
  top:0;
  left:0;
}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#5886a7;text-decoration:none;}
.cm-footer a:hover {color:#74a2c3;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/AVvXsEiqp0GAAoVpAsIFa72JTZ1BwZ64R6Q9Su0n1801_Y1ryTXSACWSZ_Il-ekBIC7899l0-Udz4Vni5KYmBYYlnl8XDYbDTEOPWKBn8w6c1xbZ3N7SWGJFRBApx8CCkiRVWAFrUHg6fogqw6k/s80-c/gravatar.png); 

3.Salin script ini di atas </body>

 <div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMZWCqxIPLcmapeeXQeXKDYH4kQLS33F3Vg2EALiPLjhjQwDAnfSro9z0lluw5O3PSWIL86lG6Izbn5g8aVkdSSRNDVwt07Et6JHxwyW8J-2zdlM6-BpdJh_uzJ2Rj_urUAOf17S7Yktc/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC32E-7VT-BGXVfxQG5inymiS2ZE8HYTyhASP8VS-oPPQUxwIrMD0NspCf_nk5VDFX8aKFEOtxMZ3XlfjR3GPMIht2NPcgE3nvc1ehnHWqEmIJLxLvTpOXieKMJP5BW9j-d7Tss-U8n8s/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://Zano99.blogspot.com",
    max_result: 6,
    t_w: 80,
    t_h: 80,
    summary: 40,
    new_tab_link: true,
    ct_id: "cm-container",
    new_cm: " Komentar Baru!",
    interval: 30000,
    alert: true,
    alert: function(total) {
        document.getElementById("cm-total").innerHTML = '<strong class=\'total-counter\'>'+total+'</strong>';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
$('#notif').click(function(){$('#cm-container, .close-notif').toggle();});$('.close-notif').click(function(){$('#cm-container, .close-notif').hide();});document.getElementById('notif').onclick = function(){document.title = originalTitle;$('#cm-total').hide();};document.getElementById('show-total').onclick = function(){document.title = originalTitle;$('#cm-total').hide();$('#cm-container').show();};
//]]>
</script>
<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/notif-komen.js' type='text/javascript'/> 

NB : Ganti URL yang berwarna merah , Ganti dengan URL anda

Jika anda ingin mengatur posisi nya , Perhatikan cara-cara berikut :
-Buka Dashboard --> Template --> Edit HTML
-Tekan CTRL+F , Lalu cari kode #notif , Kode notif ada 2 Sob ,, Ente edit kode #notif yang pertama aja , Bila kebingungan anda bisa lihat gambar di bawah ini

Kode #notif yang pertama

-Edit top dan right nya ,  Ente kira kirain aja posisinya kayak gimana

Mau cari refrensi lain ? Baca juga artikel di bawah ini

-Cara memasang tools parse HTML di blog
-Suka photoshop ? Mampir aja kesini
-9 Tips dan Trik menulis artikel ala seo

Thanks For Visiting Guys , Jangan lupa tinggalkan komentar yang memebangun ya gan , Kritik dan saran anda sangat saya impikan :D

Share :

Tweet

✚

Related Post