Membuat Notifikation ala Google Plus ~ F2

Mungkin anda juga sering melihat Notifikasi seperti google plus yang berada di bagian atas blog,dengan membuat Notifikasi Komentar yang berada di atas blog tersebut membuat penampilan blog akan semakin terlihat keren,sehingga para blogger banyak yang menggunakan notifikasi tersebut untuk menghiasi blognya,selain untuk menghiasi blog tersebut,dengan adanya notifikasi tersebut memudahkan para pengunjung melihat bagian postingan mana saja yang sedang di bahas atau di komentari oleh para pengunjung lainnya dengan mengklik Loncengnya tersebut.

Cara membuat Notifikasi Komentar ala Google Plus

Dan bagi anda para blogger yang pengen membuat Notifikasi komentar ala google plus ini,disini saya akan membahas bagaimana cara pembuatannya

Yang pertama silahkan anda masuk ke blogger anda
Kemudian pilih templatenya
Setelah itu silahkan anda Mauk ke Edit Html nya
Kemudian silahkan anda cari kode ]]></b:skin> untuk mempermudah pencarian nada silahkan menggunakan CTRL+F
Setelah kode tersebut ketemu silahkan 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(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj62a5e09rnG18Oyk5puL1CCvMOxK6rMkPpPKlHNGzJOnQDDt8rDUXB5wKViPDChtcYWg9LkDwlFfQGE2tVf8uNcONP6aDeXLyeoi-uDBOKukqJTOeuWBbkQqyHM8_glvrQtERSOmcrNQQ/s1600/arrow-notif.png&#39;);
  position:absolute;
  top:-14px;
  left:5px;
}
#cm-container:after {
  content:&quot;Komentar Terbaru&quot;;
  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(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwbUQ_bPkj-cN_N17OJGda9qXERwHXnuShaEEhGNuT_BBpYEGgsz_ug1k6QlIOlh9MR8hBKZWMI2somVOGtJXD15fM6X287rsRmRD8Jkai98NCkS1v3lXEIrJE92wF_AUzfFoj5s2xkPc/s1600/anon80.png&#39;) 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/AVvXsEi-tESChQ0c4Rn0lmolh8CXBG8EmZGKyGq2E5dpKHQSvjytz5bkk7p-QpGysvFde-2zmt145h8OX4ApQCeLgXVOv8NqgJPmv0x3KIkeV_c4W6C3egYzXbFOsqoTNE_Pq6zabFQu71kYHnE/s80-c/gravatar.png);
}

Langkah selanjutnya silahkan anda letakan kode jQuery berikut sebelum kode </head>

<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/AVvXsEiPqcWJsXOwO29F2WvVfrx6G46nY4ekILNN9D1C1hlGrue06eZ8DJFbgnfiu8vDsdepDaAEwSXX_pKJ7UTTeVZkLnymFJxmBiBtlzSIjV-08F7q04nlo6UxT2J3Y5n5oEJ3SUl3_MhiRF8/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg208YfCNSyunMgmE2a73aw0N7776qvRs4gJkF9YH4frLQUyD47oUjIAlWX8M2JGEDocF_S7WGRI1QUthIozEWwl5V_QKH_AwUzP94vnKYs0gg763le3a9h23g4_Tiz5VOEIachkQFMnMo/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'/>

Dan untuk URL yang berwarna merah silahkan anda ganti dengan alamat Blog anda

Kemudian Save template

Nah itu cara pembuatan Notifikasi Komentar ala Google Plus untuk di tempatkan di blog,semoga artikel ini bisa membantu dan bisa bermanfaat selamat mencoba.

File download Mp3 Full Album kami compres menggunakan rar dan disimpan melalui hosting 4shared.com dan mediafire.com, file rar tidak menggunakan Password. How To Download