Friday, July 4, 2014

Notifikasi Komentar Blogger Google Plus Modified

Halo guys mungkin agan tau kalau tampilan notifikasi google plus itu menarik. tetapi kalau notifikasi itu untuk blog akan lebih menarik lagi kan, oh ya cara kerjanya adalah menampilkan komentar yang masuk dalam blog kedalam sebuah notifikasi. jadi semacam pemberitahuan kalau ada komentar masuk. hapir sama di facebook sih.

Jika mengalami kendala dalam menginstall silahkan bertanya di kolom komentar ,walaupun banyak kodenya tapi kan hasilnya bagus jadi ada angkanya kalau komentar masuk. seperti pemberitahuan layaknya di sosmed gitu.

Tak seperti yang lain kali ini saya akan tambahkan flexscroll atau scroll yang di pakai dalam notifikasi ini. bentuknya kan kecil scrrollnya jadi ngak sama dengan scroll di browser ahaha.

Monggo dilihat-lihat  hasil jadinya. (Klik Gambarnya)

Notifikasi Komentar Blogger Google Plus



Instalasi Notifikasinya


1 . Pertama tambahkan JQuery di atas </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

2.Tambahkan CSS ini di atas ]]></b:skin> atau </style>
/* Notifikasi Komentar*/
#show-total {
position:absolute;
top:5px;
right:285px;
z-index:9999;
cursor:pointer;
float:right;
}
.total-show {
background-color:#FF0000;
color:white;
padding:1px 5px;
font-size:11px;
border-radius:4px;
font-weight:bold;
}
#notif {cursor:pointer;}
#notif:before {
content: url(&#39;http://2.bp.blogspot.com/-iW9KOBpdaEQ/U7NJFUtfHaI/AAAAAAABpdY/HB_NlYjIRkI/s1600/notif.png&#39;);
display:block;
position:absolute;
top:12px;
right:300px;
opacity:.5;
z-index:999;
transition:all 0.4s ease-out;
}
#notif:hover:before {
opacity:1;
}
#notif2 {cursor:pointer;display:none}
#notif2:before {
content: url(&#39;http://4.bp.blogspot.com/-Hd3B90Kfggg/UpjdHX6iwTI/AAAAAAAABSY/dFE_zIuO8o8/s1600/lonceng.png&#39;);
display:block;
position:absolute;
top:12px;
right:300px;
opacity:.5;
z-index:999;
transition:all 0.4s ease-out;
}
#notif2:hover:before {
opacity:1;
}
#cm-wrapper {
  width:300px;
  position:fixed;
  top:61px;
  right:-381px;
  z-index:999;
  background-color:#192028;
  padding:15px 13px 25px 15px;
  color:#666;
  font-family: Arial, Sans-serif;
  border-top:8px solid #ff6c60;
  transition:0.5s ease;
}
#cm-wrapper:before {
content:&quot;&quot;;
width:0;
height:0;
position:absolute;
top:-24px;
left:6px;
border:8px solid transparent;
border-color:transparent transparent #ff6c60;
}
#cm-scroll {
width: 100%;
height: 560px;
overflow: auto;
position: relative;
}
#comments-container {
  color:#666;
  font-family: Arial, Sans-serif;
}

#comments-container.cm-active {
position:fixed;
right:0;
top:61px;
}

.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}

.vscrollerbase {
width: 7px;
    background-color: #111;border-radius:3px;
}
.vscrollerbar {
width: 7px;
background-color: #444;border-radius:3px;
}
.hscrollerbase {
height: 10px;
background-color: #111;border-radius:3px;
}
.hscrollerbar {
height: 10px;
background-color: #444;border-radius:3px;
}

.scrollerjogbox {
width: 10px;
height: 10px;
top: auto; left: auto;
bottom: 0px; right: 0px;
background-color: gray;
}
.cm-outer {
  margin:0 auto;
  padding:0;
  font-size:11px;
  text-align:left;
}
  .cm-outer pre {background-color:#141414;font-size:11px;color:#7c7c7c}
.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 code {
 color:#a6a658;
    font-size:11px;
}

  .cm-outer li.selected {
    border-left:4px solid #fffe8c;
}
  .cm-outer li:first-child {
  border-top:none;
}
  .cm-outer li:last-child {
  border-bottom:none;
}
.cm-text {color:#999;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 50px;font-size:12px;font-weight:normal !important;}
.cm-header a {color:#168980;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:50px}
.cm-outer img {
  display:block;
  float:left;
  background:#8fa2cb url(&#39;http://img1.blogblog.com/img/anon36.png&#39;) no-repeat 50% 50%;
  overflow:hidden;
  border-radius:100px;
  position:absolute;
  top:10px;
  left:0;
  border:3px solid #3d464f;
}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#168980;text-decoration:none;}
.cm-footer a:hover {color:#e6e6e6;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);
}

.bg_hitam{
        display: none;
        position: absolute;
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: #000;
        z-index:99;
        opacity:.30;
}
img.cm-smiley  {
  float:none;
  position:relative;
  display:inline-block;
    width:12px !important;
    height:12px !important;
    top:2px;
    border:none;
    border-radius:2px;
background:none;
}

3. Simpan kode dibawah ini tepat di atas </body>
<script src='https://cdn.rawgit.com/januriawan/javascript/master/flexcroll.fjr.js' type='text/javascript'/>
<div id='notif' title='Notifikasi'/>
<div id='notif2' title='Notifikasi'/>
<div class='bg_hitam' id='bg'/>
<div id='cm-wrapper'>
<div class='flexcroll' id='cm-scroll'>
<div id='comments-container'/>
</div>
</div>
<div id='show-total'/>
<script type='text/javascript'>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://januriawan.blogspot.com",
    max_result: 18,
    t_w: 50,
    t_h: 50,
    summary: 9999,
    new_tab_link: false,
    ct_id: "comments-container",
    new_cm: " Komentar Baru!",
    interval: 30000,
    alert: true,
    alert: function(total) {
        document.getElementById("show-total").innerHTML = '<strong class=\'total-show\'>'+total+'</strong>';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
$('#notif').click(function(){$("#cm-wrapper").css({right: "0px"});$("#bg, #notif2").show();$("#notif").hide();});$('#notif2').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});$('#bg').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#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({right: "0px"});$("#bg").show();};setTimeout(function() {$('.myframe').each(function() {$(this).replaceWith('<iframe class="myframe" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');});}, 5000);$(document).ready(function() {
var stickyNavTop = $('#HTML7').offset().top; var stickyNav = function(){var scrollTop = $(window).scrollTop();     if (scrollTop > stickyNavTop) { $('#HTML7').addClass('sticky');} else {$('#HTML7').removeClass('sticky'); }};stickyNav();$(window).scroll(function() {stickyNav();});});
setTimeout(function() {
        $('.jsfiddle-demo').each(function() {
        $(this).replaceWith('<iframe class="jsfiddle-demo loader" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');
    });
}, 5000);
//]]>
</script>
<script src='https://cdn.rawgit.com/januriawan/javascript/master/Notifi.js' type='text/javascript'/>

nb: ganti dgn url agan

4. Simpan templatenya dan lihat hasilnya .

2 Komentar:

Halo gan, salam kaskuser! Raymondicy disini.
Mampir baca-baca sama comment disini yah gan.
Ini itu code untuk notifikasi yang diatas itu yah gan?

Anyway mampir juga donk gan ke blog ane,
Moga aja bisa bantu agan dengan informasi-informasi yang ane tulis. Itung-itung bantu sesama kaskuser lah. :D
http://blog.jakartawebhosting.com/tips-2/tips-agar-pengunjung-betah-berlama-lama-di-situs-anda/

sip ray sesama kaskuser nih. iya itu code notif di atas

1. Silahkan berkomentar sesuai topik bahasan dan jangan spam, iklan, live link !
2. Jangan lupa untuk memberi tanda centang pada Beri tahu saya atau Notify me Supaya pemberitahuan balasan melalui e-mail.

Konversi KodeEmoticon


Terima kasih atas komentar sobat