pasang di atas kode ]]></b:skin>
#show-total { position:fixed; top:8px; right:288px; /*Atur Posisi Counter -jumlah- Komen*/ z-index:999; cursor:pointer; float:right;/*posisi counter Right or Left*/ } .total-show { background-color:#f1c40f;color:white;padding:2px 6px;font-size:11px;border-radius:4px;font-weight:bold; } #notif {cursor:pointer;} #notif:before { /*Gambar lonceng pertama*/ content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6jGaqcd4Y2neI7w091Ul5_y_1kOKEXe-qYNIfJGxYy6YfPvakmSegfltcsE-oxqmsA8vH2Kfrvwm09bBkLfWUuNMkJyuQCeHl4UOVaFYP9qX7_2X2K65TYMpR8L9e5QMQ_rzkVBFKJVg/s1600/lonceng2.png'); border:1px solid #b6b5b5; padding:5px 6px 0 6px; border-radius:3px; display:block; position:fixed; top:15px; right:298px; opacity:.5; z-index:999; transition:all 0.4s ease-out; } #notif:hover:before { opacity:1; } #notif2 {cursor:pointer;display:none} #notif2:before { /*Gambar lonceng kedua ketika active or di klik */ content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6jGaqcd4Y2neI7w091Ul5_y_1kOKEXe-qYNIfJGxYy6YfPvakmSegfltcsE-oxqmsA8vH2Kfrvwm09bBkLfWUuNMkJyuQCeHl4UOVaFYP9qX7_2X2K65TYMpR8L9e5QMQ_rzkVBFKJVg/s1600/lonceng2.png'); border:1px solid #b6b5b5;/*garis bawah pada komentar*/ padding:5px 6px 0 6px; border-radius:3px; display:block; position:fixed; top:15px; right:298px;/*atur posisi lonceng (harap atur posisi lonceng pertama juga jika ingin merubah ini dan sblik nya) ubah left untuk di kiri*/ opacity:.5; z-index:9997; 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 { /*posisi segitia di atas notifikasi*/ content:""; width:0; height:0; position:absolute; top:-24px; left:6px;/*ubah right untuk di sebelah kanan*/ 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; } .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/AVvXsEhKb6ZRavhbuR9UxYxJiXaMDBmCXduPZWTPaNccposk-i6Zwa2KfYDNArlFfmiFJuinAs7NXs0fFCdjNpkYdEJWBfmZdsrvBtYOSkoAeQEobvD7ctP-qA7-57Wa0oXuv65b0PDstBDamBU/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;
dan
<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://samsulbahriblog.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://googledrive.com/host/0B8zY82qas755NGNtcURKUXJkYjA' type='text/javascript'/>
Author: - 12.31
test
BalasHapushttp://aslabuat.blogspot.com/2014/08/notifikasi.html
BalasHapus