Notifikasi Komentar Ala Tutorial Blogspot

Pertamanya saya minta maaf, karena sudah dua hari tidak posting artikel yang bermanfaat untuk sobat bloggerjateng, karena sementara ini fokus belajar dulu untuk meraih nilai yang terbaik dikelas. Langsung saja kali ini saya akan membagikan artikel yang berjudul Cara Membuat Notifikasi Komentar Ala Blogger Jateng. Sebelumnya cara ini sudah di share oleh blog.kangismet.net dengan bentuk seperti notifikasi google , namun

LANGKAH PEMBUATAN :

Langkah 1 : Simpan jQuery di atas </head>

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

Lewati langkah ini apabila sudah terdapat jQuery pada template sobat.

Langkah 2 : Simpan CSS ini di atas ]]></b:skin> atau </style>

/* Notifikasi Komentar ala bloggerjateng.com
----------------------------------------------- */
#show-total {
 position: fixed;
 top: 0px;
 right: 148px;
 z-index: 999;
 cursor: pointer;
 float: right;
 font: bold 12px Arial;
 color: #9a9fff }
 
.total-counter {
 background-color: #bfc2ff;
 color: white;
 padding: 2px 6px;
 font-size: 11px;
 border-radius: 4px;
 font-weight: bold }
 
#notif { cursor: pointer }
 
 #notif:before {
  content:url('http: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDLgNuLDc8-dp4TgC3_ZJAVx4npY8D4Wdb8JNm28oC2kniGVxmVKsh6qAoT_bPIQRQSbJUS4bP9HIrOnmzE7LLuWHoxiARBOmAE0c7GA49ffDhh0AYQhtxVYst8WFW5-P4EPwxrxeM95o/s1600/lonceng2.png');
  border: 1px solid #b6b5b5;
  padding: 5px 6px 6px 6px;
  border-radius: 3px;
  display: block;
  position: fixed;
  top: 0px;
  right: 150px;
  opacity: .5;
  z-index: 999;
  transition: all .4s ease-out }
 
 #notif:hover:before { opacity: 1 }
 
#notif2 {
 cursor: pointer;
 display: none;
 position: fixed }
 
 #notif2:before {
  content:url('http: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDLgNuLDc8-dp4TgC3_ZJAVx4npY8D4Wdb8JNm28oC2kniGVxmVKsh6qAoT_bPIQRQSbJUS4bP9HIrOnmzE7LLuWHoxiARBOmAE0c7GA49ffDhh0AYQhtxVYst8WFW5-P4EPwxrxeM95o/s1600/lonceng2.png');
  border: 1px solid #b6b5b5;
  padding: 5px 6px 6px 6px;
  border-radius: 3px;
  display: block;
  position: fixed;
  top: 0px;
  right: 150px;
  opacity: .5;
  z-index: 9997;
  transition: all .4s ease-out }
 
 #notif2:hover:before { opacity: 1 }
 
#cm-wrapper {
 width: 300px;
 position: fixed;
 top: 50px;
 right: -381px;
 z-index: 999;
 background-color: #192028;
 padding: 15px 13px 25px 15px;
 color: #666;
 font-family: Arial,Sans-serif;
 border-top: 8px solid #9a9fff;
 transition: .5s ease }
 
 #cm-wrapper:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: -24px;
  right: 157px;
  border: 8px solid transparent;
  border-color: transparent transparent #9a9fff }
 
#scroll {
 width: 293px;
 height: 567px;
 overflow: hidden;
 z-index: 999999 }
 
.cm-outer {
 margin: 0 auto;
 padding: 0;
 font-size: 11px;
 text-align: left;
 height: 567px;
 overflow: auto }
 
pre,.cm-outer pre,i[rel="pre"] {
 padding: .8em 1em;
 margin: .5em 0;
 height: 50px;
 background-color: #2f3741;
 border-left: 4px solid #0094fc;
 font-size: 13px;
 color: #fff;
 font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
 line-height: 1.4em;
 white-space: pre;
 word-wrap: normal;
 white-space: pre;
 overflow: auto;
 border: 1px solid #222 }
 
.post pre {
 height: 200px;
 border-left: 5px solid #0094fc; }
 
.post code {
 color: #a9f0ff;
 background: #1c1e2e;
 font-family: Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
 line-height: 14px;
 font-size: 14px;
 padding: 3px 5px;
 margin: 5px;
 border: 1px solid #000;
 border-radius: 2px;
 border-left: 5px solid #0320f7 }
 
.cm-outer code {
 color: #fdffd3;
 font-size: 10px;
 font-style: italic }
 
.cm-text .cm-image {
 width: 160px;
 margin: 0 10px 40px 0;
 position: relative;
 border-radius: 0;
 border: 4px solid #000 }
 
#comment_block .cm-image {
 cursor: pointer;
 display: block;
 max-width: 400px;
 margin: 10px auto;
 box-shadow: 0 0 1px #000 }
 
.cm-outer li {
 padding: 7px 10px 12px;
 list-style: none;
 clear: both;
 position: relative;
 border-top: 1px solid #28313b;
 border-bottom: 1px solid #111;
 margin-right: 10px }
 
 .cm-outer li.selected { border-left: 4px solid #fffe8c }
 
 .cm-outer li:first-child { border-top: 0 }
 
 .cm-outer li:last-child { border-bottom: 0 }
 
.cm-text { color: #fff }
 
.cm-outer { margin:0 0 5px;line-height: 14px }
 
.cm-header {
 margin: 4px 0 20px 80px;
 font-size: 12px;
 font-weight: normal;
 !important }
 
 .cm-header a {
  color: #c1c1ff;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold }
 
  .cm-header a:hover { color:#e6e6e6;text-decoration: none }
 
.cm-outer .cm-content { overflow: hidden }
 
.cm-content { margin-left: 80px }
 
.cm-outer img {
 display: block;
 float: left;
 background:#8fa2cb url('http: //img1.blogblog.com/img/anon36.png') no-repeat 50% 50%;
 overflow: hidden;
 border-radius: 0 15px 0 15px;
 position: absolute;
 top: 12px;
 left: 0;
 border: 3px solid #3d464f }
 
.cm-footer { margin-top:30px;font-size: 10px }
 
 .cm-footer a { color:#ccc;text-decoration: none }
 
  .cm-footer a:hover { color:#c1c1ff;text-decoration: none }
 
div.cm-header img[src='http://img1.blogblog.com/img/openid16-rounded.gif'] { content:url(http: //2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s80-c/gravatar.png) }
 
.bg_hitam {
 display: none;
 position: absolute;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #000;
 z-index: 99;
 opacity: .7 }
 
img.cm-smiley {
 float: none;
 position: relative;
 display: inline-block;
 width: 12px !important;
 height: 12px !important;
 top: 2px;
 border: 0;
 border-radius: 2px;
 background: 0 }

Langkah 3 : Simpan kode ini di atas </body>

<div id='cm-wrapper'></div>
<div id='notif' title='Notifikasi'></div>
<div class='bg_hitam' id='bg'></div>
<div id='notif2' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb3NGmO914H6gSFUcz01jSb6VvnWxi47gmCRAhyphenhyphenDnic6NW0px2g2dStID6ZCMOhyphenhyphenVJQfJZIL9lFqUCicrRoAyaCTN-IbMOKgSKNorMjsJUFHVwRDoOIPRN0pkSA7uuLhRtggEVhyphenhyphenE5iks/s1600/lonceng.png' title='notifikasi'/></div>
<div id='show-total'>
<script>
//<![CDATA[
var originalTitle=document.title;var cm_config= { home_page:\"http://www.bloggerjateng.com\",max_result:20,t_w:60,t_h:60,summary:9999,new_tab_link:true,ct_id:\"cm-wrapper\",new_cm:\" komentar baru!\",interval:30000,alert:true,alert: function(total) }
 
{  }
 
;$("#notif").click(function() { $("#cm-wrapper").css( }
 
);$("#bg, #notif2").show();$("#notif").hide() {  }
 
);$("#notif2").click(function() { $("#cm-wrapper").css( }
 
);$("#bg, #notif2").hide();$("#notif").show() {  }
 
);$("#bg").click(function() { $("#cm-wrapper").css( }
 
);$("#bg, #notif2").hide();$("#notif").show() {  }
 
);document.getElementById("notif").onclick=function() { document.title=originalTitle;$("#show-total").hide() }
 
;document.getElementById("show-total").onclick=function() {
 document.title=originalTitle;
 $("#show-total").hide();
 $("#cm-wrapper").css( }
 
);$("#bg").show() {  }
;
//]]>
</script>
<script src='http://yourjavascript.com/41111221385/bloggerjateng.js' type='text/javascript'></script></div>

Jangan lupa ganti http://bloggerjateng.com dengan link blog kamu.

Gimana ? gampangkan cara membuat notifikasi komentar ala bloggerjatengnya, silahkan mencoba ingat jangan pernah menghapus credit kalau mau copast artikelnya ya.

Seorang Blogger Sejati tidak akan menghilangkan sumber aktif saat dia mencopy paste artikel orang lain.

Refrensi : blog.kangismet.net

Suka Artikel ini? Bagikan Ke:

Tweet

✚

Buka Artikel Terkait

Tentang Saya
Saya hanya seorang blogger biasa yang ingin berbagi dengan Anda menurut pengalaman saya. Silahkan ikuti Media Social saya ya.
Ikuti : | +Google | Facebook | Twitter

Ikuti Blog ini dengan memasukan Email Anda dibawah ini