Blogspot yang membahas tentang Tutorial Blogger, Animasi Blogger, Google Adsense, Game Blogger, Seo Blogger, Template Blogger, TV Online, Dan Tools Blogger

Tuesday, 14 January 2014

Cara Membuat Notifikasi Komentar Di Blogger Seperti Google Plus

Cara Membuat Notifikasi Komentar Di Blogger Seperti Google Plus - Blogger Update. Notifikasi atau pemberitahuan bukannya hanya ada difacebook atau google plus, tetapi ada juga ada di blog sekarang. Kegunaan anda memasang notifikasi komentar di blog sudah pasti karena mempermudah untuk melihat siapa yang berkomentar di blog kita. Contohnya kayak yang ada di blog ini yang berlambang lonceng. Tampilahnnya seperti ini : 
Cara Membuat Notifikasi Komentar Di Blogger Seperti Google Plus
Langkah-Langkah Membuat Notifikasi Komentar Di Blogger Seperti Google Plus
1. Buka Blog Anda >> Edit Tempalate.
2. Cari kode </head>, lalu masukan kode dibawah ini diatas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

3. Lalu masukan kode dibawah 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('http://3.bp.blogspot.com/-wlYmBEpUtGE/UoVyl3GpUZI/AAAAAAAAGEQ/LDeklWh3CNI/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('http://4.bp.blogspot.com/-G-9yhzSt2Mw/UoWcB4bdn4I/AAAAAAAAGE4/tzIixYewCsU/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(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s80-c/gravatar.png);
}
4. Lalu masukan lagi kode dibawah ini tepat diatas kode </body>
<div id='cm-container'/> <div id='notif' title='Notifikasi'><img alt='notifikasi' src='http://1.bp.blogspot.com/-wrJzEwB1V3U/UoQktvRDCxI/AAAAAAAAGEA/jYcRiXTyOFg/s1600/lonceng.png'/></div> <div id='cm-total'/> <div class='close-notif'><img alt='close' src='http://2.bp.blogspot.com/-d-5BS0YCkho/UOKe2UIw0rI/AAAAAAAAC4w/md_iYNVHaHk/s1600/delete4.png' title='close'/></div> <script> //<![CDATA[ var originalTitle = document.title; var cm_config = { home_page: "http://seo-powers.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'/>
5. Simpan Template

Jika ada pertanyaan langsung saja komentar dibawah ini. Sekian dari saya Mochammad Fikri yang menuliskan artikel tentang Cara Membuat Notifikasi Komentar Di Blogger Seperti Google Plus. Simak juga artikel saya Cara Pasang WIdget Lintas.me atau Cara Setting Robot.txt atau Apa Itu Google Adsense? atau Cara Membuat Link Sumber Otomatis Ketika Artikel Di Copy Paste


Dilarang untuk meng-copas artikel ini kecuali menuliskan sumbernya
DMCA.com

Cara Membuat Notifikasi Komentar Di Blogger Seperti Google Plus Rating: 4.5 Diposkan Oleh: Mochammad Fikri

41 komentar:

  1. bolleh di coba tuuhh
    thanks info ya gan

    ReplyDelete
  2. wah keliatannya keren tuh kalo dipasang... dicoba ah :D

    ReplyDelete
    Replies
    1. Emang keren, sama kayak penulisnya yang keren :D

      Delete
  3. izin nyimak gan, saya udah pasnag :D

    ReplyDelete
    Replies
    1. Yaudah simak aja kalau sudah pasang :p

      Delete
  4. Wah Mantap nie tutorialnya ane coba gan

    ReplyDelete
  5. keren nih tp psti berat loadingnya ya??

    ReplyDelete
  6. patut di coba ni
    Ditunggu Follow, Comment dan+1 nya
    http://dwirandyherdinanto.blogspot.com

    ReplyDelete
  7. Mantep patut dicoba :) semgat gan :)

    ReplyDelete
  8. Mantab :D thanks infonya gan :D
    patut dicoba ini !!

    Blogwalking Hibban07

    ReplyDelete
  9. Patut dicoba tutornya gan.

    thanks for share. HFR-XP

    ReplyDelete
  10. kira kira nambah loading blog gak gan???

    ReplyDelete
  11. wiieeewww keren bang pas ni ijin nyobak aja :D

    ReplyDelete
  12. keren gan tutornya, kapan2 saya coba deh :D

    ReplyDelete
  13. anda bilang di larang copas tanpa mencantumkan sumber nya tapi anda sendiri tidak mencantumkan sumber asli nya -_-

    ReplyDelete
    Replies
    1. Maaf mas memang saya mengcopas script tersebut, tapi saya membuat artikelnya sendiri !

      Delete
  14. keren gan, patut di coba. di tunggu kunjungan balik dan join nya gan www.bantoel.com

    ReplyDelete
  15. cara memberi tahu admin blog jika ada yang komentar di blog gmna gan ?

    ReplyDelete
  16. ijin prakteknya gan.. mampir jg ke blog ane y.. http://mycomputer-1.blogspot.com/

    ReplyDelete
  17. sip gan!
    coba mampir ke blog ane follow + komentar yah ^^
    http://aru-anime.blogspot.com/

    ReplyDelete
  18. oke deh bos saya coba deh pasang notifikasi komentar di blog ku

    ReplyDelete
  19. wisss mantap gan ..
    tapi itu ngeberat kan loading ga gan?
    http://cecepdotcom.blogspot.com

    ReplyDelete

 
notifikasi
close