Cara Membuat Notifikasi Komentar seperti Google Plus

adscblog

Cara Membuat Notifikasi Komentar seperti Google Plus | Kali ini tidak hanya Mbah Google yang bisa membuat notifikasi komentar di atas dengan bergambarkan lonceng,kali ini andapun dapat membuat Notifikasi atau pemberitahuan komentar pada blog anda yang menyerupai milik mbah Google ini,banyak sekali para blogger menggunakan cara ini untuk menghiasi blog nya,selain untuk menghiasi blog,Cara ini juga memudahkan para pengunjung untuk mengetahui postingan mana saja yang sedang ramai di bicarakan oleh pengunjung lainnya,jadi cara ini adalah cara yang efisien yang di gunakan oleh para blogger untuk memudahkan dan memanjakan para pengunjung nya,dan jika anda para pengunjung blog ini pengen membuat Nitifikasi ini anda dapat mengikuti cara saya di bawah ini

Notifikasi Komentar ala Google+

• Masuk ke blogger
• Kemudian pilih template nya
• Lalu masuk ke edit html
• Dan silahkan anda cari kode ]]></b:skin> untuk memudahkan anda dalam pencarian silahkan anda mengunakan CTRL+F dan letakan kode berikut sebelum kode tersebut

* Notifikasi Komentar
----------------------------------------------- */
#cm-total {
  position:fixed;
  top:14px;
  right:0;
  width:390px;
  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 {
background:#fff;
display:block;
  position:fixed;
  top:8px;
  right:380px;
  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:350px;
  position:fixed;
  top:40px;
  right:5px;
  z-index:9999;
  background-color:#333;
  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/AVvXsEi9BCByp9Q6KN9b-1JiBTepYHt4yWwFKWG_Xd5aC3TEAnFp8hTzjAhhF3PWcpWwwWJf7c6YSKM2JPKZvzsEro2fMxnlAJJk3AwGx6uzX_qigoIRl4TJ_kEw_WQFNxS_wEsh7RnxUsbv-KA/s1600/arrow-notif.png');
  position:absolute;
  top:-14px;
  left:5px;
}
#cm-container:after {
  content:"Komentar Terbaru";
  position:absolute;
  top:8px;
  left:150px;
  text-align:center;
  font:normal 14px Arial;
  color:#cc0000;
}
.cm-outer {
  margin:0 auto;
  padding:0;
  font-size:11px;
  text-align:left;
  font:normal 12px Arial;
}
.cm-outer ul{
  margin-bottom:3px;
}
.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:3px;
}
.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/AVvXsEjEqT6YWetiPu1_uJ5rgybwMtwpAXAHL1QKCF_FYNmFrEQiVKxtqKKv7gyHEkmhvUQJUz2KWBbaVkJ-j_uwVpn0K-cihNveKxbl4_Ac384_h38Trw35khPcjby95o7r6wion5b9yHlQsMo/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/AVvXsEjfGHm_K5afGTxawWMKNOMJSqP9Td4V4sVwTMMCwnTjwhmSOhibU_OEvutmHGYX1U_-Tbhs7pXxYYqWg6Yj58iV0N55ivvR2VZt1XPACsuHQzTEbLFeNqbEXnlIcZksouQ1Gk1ySuMt0iM/s80-c/gravatar.png);
}

• Setelah itu silahkan anda cari lagi kode </head> dan letakan kode berikut sebelum kode tersebut

 

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

• Langkah selanjutnya silahkan anda cari lagi kode </body> dan letakan kode berikut sebelum kode tersebut

 

<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAUmYLfuXuvas0Y2dEoxZcbWApxWaHHpVawu0J2emKKBxFWKk0yNw60tgbsH5IaqaDuMBWLq-Ym8MAPgI6Z9q4ZzGmSps8QjRe3MKJdHSqvlVG1twlGZwKUD00bIzy-WnlqMueeAkQ-hc/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuElVPw6jUCs9m8mloexPS0oRisss-QbOHEIkI_sGbg1NI1nGT7jaOufYK7HOVwvv-AcfMN4u0AqX6lBVoaOJkDnS9fi6MySd6ovPg0SjLCMk0rWRm4pJZgf8-QUALQmRhWWjfDEY-UtE/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://www.caraonspot.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'/>

Untuk link yang berwarna biru silahkan anda ganti dengan URL blog anda

• Save Template dan lihat hasil nya

Nah itulaha  Cara Membuat Notifikasi Komentar seperti Google Plus semoga artikel ini bisa membantu dan selamat mencoba. adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 11 Juni and have 0 komentar