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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKiQLHGxvZtn1lWz560ENnU2OuWYmf0kLZaC-Ai9wozf51pN-qg5nRTMUekEu_gxauBCqqlM_0dmIAqy0crd6p8S2gF-dJ1TluR5BgMeLv8D8oRAuCj6CD139gCJ1bESSqGwJApYse9iM/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5-0RGwA3IgqC3i9sIsMMzmUP_rl2tiNtw786Z4Pa7Dg6d1SpxbHFBG3WuHhGBEhVR8oyWHnsnvJzyFuvvhSfXQV5f38q3GX_lU5V-X38njgB90drV_idgwc25GRTJG0mJxhCR2I6ip14/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWZkFteFcbjBitR8CtEVvgHrOfOfxArbGzMPH0aA0E4vjTyY3WyaMOSWQ2rO8qukgsxXZSNJsjG_Ny51bJD65gpdPlS2wkWTzmWUKI7q-L2beshKZT0dNgGCCnB_KE5Ehn6rf6LRnasdI/s1600/lonceng.png'/></div> <div id='cm-total'/> <div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5uCByUFR_ztOPYkw_ldTrj4JGiWH2jUOeLBF7b-vM4qy9OqdqReVVeUrRSl9Bu1ZjzC5H8a8b56xLHRD-GJm5dQRs2xlGjShAtld2Tb2KcOa0yy80AVkNvc6HLQpU8n0x2u0Wk7SKwic/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: Fikri

43 komentar:

  1. Mantaaap kang nice inpo

    ReplyDelete
  2. bolleh di coba tuuhh
    thanks info ya gan

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

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

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

    ReplyDelete
  5. Wah Mantap nie tutorialnya ane coba gan

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

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

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

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

    Blogwalking Hibban07

    ReplyDelete
  10. Patut dicoba tutornya gan.

    thanks for share. HFR-XP

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

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

    ReplyDelete
  13. kunjungan malam,, visit back

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

    ReplyDelete
  15. 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
  16. keren gan, patut di coba. di tunggu kunjungan balik dan join nya gan www.bantoel.com

    ReplyDelete
  17. mantap gan ane coba gan dulu

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

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

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

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

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

    ReplyDelete
  23. ko kalo ada yg komentar tetep gan muncul notif nya ya gan

    kenapa?

    ReplyDelete

 
notifikasi
close