Responsive Blogger Templates 2016. Responsive Blog Templates Free Download. Mobile Tablet Friendly Responsive Design Blogger Templates Seo

Notifikasi Komentar Ala Google Plus

Notifikasi Komentar Ala Google Plus

Assalamu'alaikum wr wb selamat malam para blogger Kali ini saya akan share artikel tentang notifikasi komentar, Widget ini selain tampilannya yang simple juga berfungsi untuk pemberitahuan komentar terbaru di blog kita, dengan memasang widget ini kita tidak perlu lagi repot-repot dan notifikasi komentar ini seperti punya abah saja tampil beda hehe..

Cara Membuat Notifikasi Komentar Ala Google Plus
Simpan di atas </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
1. Sobat Masuk ke Template => Edit HTML
2. Cari Kode ]]></b:skin> atau kode </style>
3. Taruh Kode CSS berikut ini tepat di atas ]]></b:skin> atau </style>
/* CSS Notifikasi Komentar */
#show-total {
position:fixed;
top:15px;
right:288px;
z-index:999;
cursor:pointer;
float:right
}
.total-show {
background-color:#f1c40f;
color:#fff;
padding:2px 6px;
font-size:11px;
border-radius:4px;
font-weight:700
}
#notif {
cursor:pointer
}
#notif:before {
content:"\f086";
font-family:FontAwesome;
font-size:22px;
font-style:normal;
font-weight:400;
border:1px solid #b6b5b5;
padding:2px 5px;
display:block;
position:absolute;
top:1px;
right:190px;
opacity:.5;
z-index:999;
transition:all .4s ease-out
}
#notif:hover:before {
opacity:1
}
#notif2 {
cursor:pointer;
display:none
}
#notif2:before {
content:"\f00d";
font-family:FontAwesome;
font-size:22px;
font-style:normal;
font-weight:400;
padding:2px 5px;
border-radius:3px;
display:block;
position:fixed;
top:1px;
right:190px;
opacity:.5;
z-index:9997;
transition:all .4s ease-out
}
#notif2:hover:before {
opacity:1
}
#cm-wrapper {
width:300px;
position:fixed;
top:61px;
right:-381px;
z-index:999;
background-color:#DFDFDF;
padding:15px 13px 25px 15px;
color:#666;
font-family:Arial,Sans-serif;
border-top:8px solid #ff6c60;
transition:.5s ease
}
#cm-wrapper:before {
content:"";
width:0;
height:0;
position:absolute;
top:-24px;
left:119px;
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:0;
right:0;
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:400!important
}
.cm-header a {
color:#168980;
text-decoration:none;
font-size:12px;
font-weight:700
}
.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(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:.3
}

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
}

<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://abahtemplate.blogspot.com/",
    max_result: 20,
    t_w: 40,
    t_h: 40,
    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()
};
//]]>
</script>
<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/notif-komen.js'type='text/javascript'/>
4. Silahkan sobat cari lagi kode </body>
5. Taruh Kode diatas ini tepat diatasnya.

13 komentar

Emang enak kalau ada gambar lonceng itu. Jadi menarik. Tapi kalau di wordpress kayaknya berat jadinya.

iya kang enak dipandang dan sedikit elegan hehe.. bisa jadi kang kayanya hrs sedia hosting

kalau ga dicoba saya bisa penasaran ini bah. izin coba bah

dicoba saja kang daripada teu bisa sare mah hehe.

siaaap abah ini juga lagi dipraktekan. mudah2an saya bisa

Kalau harus edit HTML ngga deh aku nyerah ribet banget jadi iya aku lebih memilih yang sederhana saja B)

jangan atuh teh wida vilih acak - acakkan nantina hehe

bah maaf saya mau tanya tapi diluar artikel ini. template dari abah klau mau label menjadi dua kolom gimn bah.. ^o^

ye ileh akang arool itu kan saya suka posting dari demo template saya. Copy paste kode di bawah dan simpan di atas kode ]]>

#Label1 ul li{
float:left;
width:45%;
}


Sesuaikan ukurannya. hadeuh gusti

wkwk... :) siaap abah langsung dipraktekan. haturnuhun abah

lebih gampang melihat komentar terakhir dan tampilannyapun lebih bagus ya mas. jadi ingat punyanya kang ismet dulu. kelemahannya ketika kita mau menampilkan atau merefresh melalui dashboard blogger, maka tampilan akan dibuka lagi pada tab baru, sedang tab terdahulu tidak terkoneksi lagi walau dalam satu browser yang sama. tapi intinya ini lebih efektif ketimbang recent komen dan lebih gaya juga kang....makasih ya atas infonya.

mbah dinan hayuu ngopi atuh...
betul sekali itu mbah.. o iya kapan main kepandeglang nihh

+ Silahkan Pilih Template disini Sesuka Anda

Newer post Older post Home