Cara Membuat Notifikasi Komentar Mirip Google Plus di Blog

Hai Sahabat blogger kali ini admin akan share bagaimana Cara Membuat Notifikasi Komentar Mirip Google Plus .

Nah kelebihan dari widget ini adalah loading blog lebih ringan di banding dengan Notifikasi Komentar Avatar atau Recent Coment Avatar ,

Disamping kelebihan loading yang ringan kelebihan lain nya adalah tampilan blog menjadi lebih simple dan keren ,

nah langsung saja , simak baik-baik cara nya

pertama anda masuk ke Dasbord Blog => Template => Edit Html

kedua cari cari kode ]]></b:skin> atau kode </style> untuk mempermudah pencarian bisa tekan ctrl+f setelah itu copy kode ]]></b:skin> atau kode </style> .

ketiga copy kode di bawah ini setelah itu paste di atas ]]></b:skin> atau kode </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:25px;
  right:126px;
  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:300px;
  position:fixed;
  top:62px;
  right:0;
  z-index:9999;
  background-color:#422929;
  padding:60px 20px 10px 20px;
  color:#0D8A80;
  box-shadow:0 4px 15px -4px rgba(0,0,0,.4) !important;
  text-align:left;
  border:5px solid #580606;
  background-clip:padding-box;
  display:none;
}
#cm-container:before {
  content:url('

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpJLeBHJLD_MFaVnyVi5GELM5kwfYljfUPjqCUFwRFjet6nW0YSWVDUaKEJ68GAAr-RN3lYcdh-0lSH6U71GHuzyTpuEtjfHgAVHoZ_DCHram_WfigX0ifoudfpHlyXYEE4NdG-RuNUjU/s1600/arrow-notif.png');
  position:absolute;
  top:-19px;
  left:200px;
}
#cm-container:after {
  content:"Komentar Terbaru";
  position:absolute;
  top:22px;
  left:150px;
  text-align:center;
  font:normal 14px Arial;
  color:#fff;
}
.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: #422929;
  margin-bottom:10px;
}
.cm-text {color:#E61919;}
.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/AVvXsEgWKNeF3wy3M4jDtrZA7qZrb2uZatx6SngU8YUQNfCa_ectl6ed7_ENG0JOoU8NvHwoLCPY6WZ_MbBMYA6LEOVZ9hk9DVg4kmtsaj8JpK7rkjmf7FliPv1oLaZYFxqmvwyeA_KbWLXxBEc/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=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] {

content:

url(

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbzyswxwp_qbDvxqyeGepi_ltfB3R0HmiKyDKQ5oTHtqW5WH9f6zIHhi_C0vVBUE9Ja7zZ5M523jgYhGk0QdQC90pKdj1UMv9jE0wwzsMflaiFFRXX-Bf1I9POX0atgXmovMm7O3KH3ng/s80-c/gravatar.png);
}

ke empat cari kode </body> dan paste kode di bawah ini di atas </body>

<div id='cm-container'/>
<div id='notif'><img alt='notifikasi'

src='

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiMQ-NnFUZ7gOVJtexvuBRQEiTtXfWw2HWOwHV7uHgYJ5lXq59BO6bGxQcQjmsjNWeaXXVISapcfS-5benf1QhEoz7MTH5DH06WXgzYcnEkqAXGSKHmLE9jgMXhHFvmlw7O6HHD936TBs/s1600/lonceng.png'

title='Notifikasi'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close'

src='

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjH30bfmPK4M6qMm73NNO8RNWFFQu3H5Z07SToAB-39ZZOXr2spiqPSyYtWXSBejR-HHsUvDVB3S5_5c6OEsWYBEOMzx_TH-oFottuEgKcFLSmF_LVWp9NwfqWlirg2YSGQyN3hqMUc_k/s1600/delete4.png'

title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "https://sepilnyepil.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='http://yourjavascript.com/1858374111/aab-notif-koment.js'

type='text/javascript'/>

NB : ganti https://sepilnyepil.blogspot.com/ dengan url blog anda

Setelah itu klik simpan dan lihat hasil nya

oke sekian dulu tutorial dari Cara Membuat Notifikasi Komentar Mirip Google Plus .

semoga bermanfaat , kalo ada yag ingin ditanyakan bisa tanya di komentar . .

Tentang: bikin blog

Cara Membuat Notifikasi Komentar Mirip Google Plus di Blog

Share:

Artikel Terkait

Tidak ada komentar:

Posting Komentar