 |
| Notikasi Ala blog.kangismet.net |
Oi gan, udah tau kan notifikasi komentar ala Google+ Plus ???, kalau belum, lebih baik kunjungi link berikut ini > Notifikasi Komentar ala Google+ Plus <.
Buat yang udah tau apa itu notifikasi komentar ala Google+ Plus, ini ada modifikasi keren seperti punya blog KangIsmet. Langsung saja Tutorialnya :
=> 1. Tambahkan kode ini, diatas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
Jika kode diatas sudah ada di blog ente, silahkan lewati langkah pertama :D.
=> 2. Tambahkan kode CSS ini, diatas kode ></b:skin> atau </style>
/*Notifikasi Ala Kang Ismet Publish By Xkomo*/
#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/AVvXsEjnKrmJqTwZ0tNZIB5N0bu1TSJ6dc0uN6BSFOKCZ_bnFsJAO2P0laVv4_1jJl1mjU0c1dXGAECB3wwCkpqfWc-M6ongzu003aaK_h4dNBqXtqVUHG-wpHXSoKaIa48RM8xUbnMmfZFmDrA/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/AVvXsEjnKrmJqTwZ0tNZIB5N0bu1TSJ6dc0uN6BSFOKCZ_bnFsJAO2P0laVv4_1jJl1mjU0c1dXGAECB3wwCkpqfWc-M6ongzu003aaK_h4dNBqXtqVUHG-wpHXSoKaIa48RM8xUbnMmfZFmDrA/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;
}
#cm-scroll::-webkit-scrollbar{margin:2px; padding:1px; width:10px;background:orange}/*ubah ukuran dan warna scroll luar*/
#cm-scroll::-webkit-scrollbar-thumb{margin:2px;padding:1px;background-color:black}/*ubah ukuran dan warna scroll bagian dalam*/
#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/AVvXsEjdxW02ODzJyFn5bajl-JtVKFaGSYQlBlBXSshvXUFYyy7Ibbtkeas90tzv68IL59AfHcXHG7WaOx8Yf-vntGCyILm5zR0CCvlgl5stdc69AGJi60b8VUpU-7Uu82dvcTGN1v4t5BGrUzU/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. Selanjutnya, tambahkan kode berikut, diatas kode </body>
<div id="notif" title="Notifikasi">
<div id="notif2" title="Notifikasi">
<div class="bg_hitam" id="bg">
<div id="cm-wrapper">
<div 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://hentongsekai.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();};
//]]>
</script>
<script src="https://googledrive.com/host/0B77n4VRgB0aJY2F4ZGtIWnVkZTQ" type="text/javascript">
Ganti http://hentongsekai.blogspot.com dengan alamat / URL Blog ente.
=> 4. Untuk modifikasi, ente lihat kode berikut :
/* Background Kotak Notifikasi */
#cm-wrapper {
width: 300px;
position: fixed;
top: 61px;
right: -381px;
z-index: 999;
background-color: rgb(25, 32, 40); /* warna background*/
padding: 15px 13px 25px 15px;
color: rgb(102, 102, 102); /*warna tulisan*/
font-family: Arial, Sans-serif;
border-top: 8px solid rgb(255, 108, 96);/*ganti warna ini orange ini untuk bagian atas */
transition: 0.5s ease;
}
/* background Pada Bagian Komentar Blogger*/
.cm-outer li {
padding: 7px 10px 12px;
list-style: none;
clear: both;
position: relative;
border-top: 1px solid rgb(40, 49, 59);
border-bottom: 1px solid rgb(17, 17, 17);
margin-right: 10px;
}
=> 5. Simpan > Dan lihat hasilnya.
Credits :
http://www.xkomo.com/2014/05/notifikasi-komentar-ala-kangismet-original-googleplus.html
| Judul | Cara Modifikasi Notifikasi Komentar Ala Blog Kang Ismet |
| Deskripsi | Notikasi Ala blog.kangismet.net Oi gan, udah tau kan notifikasi komentar ala Google+ Plus ???, kalau belum, lebih baik kunjun... |
| Author | Unknown |
| Author Rating |
4/5 Suara Dari 777 Ulasan
|
test
ReplyDeletetest
Deletetest
Deletete
Deletet
Deletet
Deletet
Delete