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)
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('http://2.bp.blogspot.com/-iW9KOBpdaEQ/U7NJFUtfHaI/AAAAAAABpdY/HB_NlYjIRkI/s1600/notif.png');
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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr7qe9r0x8x4gnv-1M86OsbVqu4-U8TQ1qz5-HVQXqIGMZ8Y912_kSdtKbkxfSIzfMGEypUmdI7c3b6MgizoL98yanWJGXSkKbC04HqP_W0B008aA-FS_s_IQGcPFm5HupTOD1Zi7Pd70/s1600/lonceng.png');
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:"";
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('http://img1.blogblog.com/img/anon36.png') 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='http://img1.blogblog.com/img/openid16-rounded.gif'] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibh80jUCVvdxyve-Pze1vTIfn0YSo2uPI9S3bMvYJmVHSyYIdW_5deseuwO4aZlZI3IdLf9F4lUgVgVIzfvbz1WQKBr-y8S5eASUJmvJTBV3nxHLJLX1tHrx-8C3U8nhwQjFCB3ei2Eg0/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 .
1 Komentar:
sip ray sesama kaskuser nih. iya itu code notif di atas