Cara membuat Notifikasi seperti Google Plus

adscblog

Cara mudah membuat Notifikasi lonceng ala google plus - Bagi anda yang mempunyai Google Plus pasti sudah tidak asing lagi dengan tanda lonceng yang berada dekat photo profil di Google Plus tersebut,dan kini bagi anda para blogger anda dapat memasang tanda lonceng tersebut di blog anda yang dimana Notifikasi tersebut sangatlah berguna baik para pengunjung atau pemilik blog

Dengan kita memasang Notifikasi seperti Google Plus ini selain akan membuat tampilan template kita semakin keren juga berguna untuk mengetahui komentar terakhir di salah satu artikel yang terdapat di blog kita,begitu juga dengan para pengunjung dengan ada nya notifikasi ini para pengunjung akan mudah mengetahui dan mengunjungi postingan yang sedang rame di bicarakan

Jadi apasalah nya jika template anda di pasang notifikasi Ala Google Plus ini agar ada pemberitahuan artikel mana yang sedang di komentari oleh para pengunjung,notifikasi ini selain terdapat gambar lonceng di bagian luar juga ada counter atau penghitung banyak nya komentar di blog tersebut yang di pasangi notifikasi ala Google Plus sangat keren bukan

Cara membuat lonceng Notifikasi seperti Google Plus

Jika anda tertarik dengan notifikasi ini anda bisa mengikuti langkah langkah di bawah ini untuk pembuatan nya dan ini sudah di modif oleh saya sendiri namun jika anda kurang menyukai tampilan nya bisa nda modif kembali sendiri

• Silahkan anda masuk ke blogger anda
• Setelah itu silahkan masuk ke bagian peng editan template
• Lalu kemudian silahkan anda cari kode </b:skin> lalu tempatkan kode di bawah ini sebelum kode tersebut untuk memudahkan pencarian anda silahkan anda gunakan tombol CTRL+F tekan bersamaan

/* Notifikasi Komentar
----------------------------------------------- */
#cm-total {
  position:fixed;
  top:16px;
  right:220px;
  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:15px;
  right:350px;
  z-index:9999;
  height:24px;
  width:24px;
  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:2px;
  right:0;
  z-index:9999;
  background-color:#333;
  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 #ccc;
  background-clip:padding-box;
  display:none;
}
#cm-container:before {
  position:absolute;
  top:-29px;
  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: #444;
  margin-bottom:1px;
}
.cm-text {color:#999;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 90px;font-size:11px;font-weight:normal !important;}
.cm-header a {color:#ddd;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/AVvXsEj5-S9zU0vE_VzMILLdPQCZuFUveJ3KfGnhSZqCOGUJpDuOZSXERsnhSgaNmu04zsUtXzfRS2P1qH_uPFAj4YpgYedqWeXsuW7aFhk4HXNgBq5h92Boj8H_Eqe8dnWOUh9mkdSLhdtXTZ8/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:#f1f1f1;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/AVvXsEhAwUGtfzj97akZN4FgoTyKp7UwNn3MVFnPA-au0W0fFJVzXYqyiRq6ayCXUiPRW5Y7s90UrR072XZlunvri8HrEFzdB8JAJKr1GC6-ChIpZ8fseFHHy8OXS8J6RHaCKZCeAB_8vXLkv7A/s80-c/gravatar.png);
}

• Kemudian setelah itu silahkan anda cari kode </body> dan kemudian silahkan anda letakan kode di bawah ini sebelum kode tersebut

<div id='cm-container'/>
<div id='notif'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjblytd6B88lHA6MWlt9khTNCV34kNmHBFBdjt2YtyPWet7Ji6O1h_7O6l7d_AuSu-nxFr1CfYSzu8uGr5VsmLpTIwFje5ZHrpegkv8tinY3Rkd7IDnk6vT7l5fEnjRXUB9LR9r21kgko/s1200/lonceng.png' title='Notifikasi'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6PY9PfKPaByhh4xWaFCUg67YHZgGs2sK9F8zSAcI6F_etxqqdSV4AD0AS6wZw2rZWt_aqKl3EsHY7qGOAyD4EOVBIE46Aqfs2ibM7IYL4UHEhdF7mxjl_KgQfa3ck6qJwNb9RJ4-Qu1M/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://infotrens.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'/>

• Dan kemudian Save template dan lihat hasil nya

 Untuk Url yang berwarna merah di atas http://infotrens.com silahkan anda ganti dengan Url blog anda,dengan begitu selesai dan lihat hasil nya,semoga bermanfaat.

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 12 Oktober and have 0 komentar