XKOMODOTCOM
  • TECH
    • Apps
    • Computer
    • Laptop
    • Peripheral
    • Smartphone
  • REVIEW
  • TUTORIAL
  • UNBOXING
  • Profile
No Result
View All Result
XKOMODOTCOM
  • TECH
    • Apps
    • Computer
    • Laptop
    • Peripheral
    • Smartphone
  • REVIEW
  • TUTORIAL
  • UNBOXING
No Result
View All Result
  • Profile
XKOMODOTCOM
Tutorial Membuat Notifikasi Komentar Ala Google Plus

Tutorial Pasang Notifikasi Komentar Ala Google Plus Di Blog

Febri Tri Harmoko by Febri Tri Harmoko
May 3, 2014
in Blogger, Tutorial
1
0
0
SHARES
80
VIEWS
ShareTweet

BACAJUGA

Cara Setting Private / Public DNS di Android / PC / Laptop (Provider Hostname Terlengkap)

Solusi Tidak Bisa Main Game Online dengan Internet IndiHome

Tutorial Membuat Notifikasi Komentar Ala Google Plus Di Blog – Halo sahabat blogger Indonesia, Kali ini saya hadir dengan memberikan Tutorial Memasang Notifikasi Komentar Ala Google Plus Di Blog.

Notifikasi Komentar ala google plus ini merupakan widget yang sangat di gemari oleh para blogger bahkan ada yang sempat nyolong kode HTML sama CSS Orang lain (yg ini ntr di bahas pada artikel selanjut nya 😀 ).

Karna kode HTML sama CSS yang di curi itulah akhirnya penulis dari blog Ki pun membuat tutorial cara menambahkan Notifikasi Komentar Ala Google Plus.

Padahal dalam artikel Blog DTE sudah menjelaskan tentang kerangka Notifikasi Komentar ini namun, Yah kita ketahui kebanyakan dari mereka sukanya cari yang instan dan tidak mau berkreasi sendiri alhasil kreasi dari Ki pun di curi (yg punya kan jadi marah).

Untuk demo bisa lihat gambar berikut:
Tutorial Pasang Notifikasi Komentar Ala Google Plus Di Blog

Tutorial Pasang Notifikasi Komentar Ala Google Plus Di Blog

Langkah Pertama untuk memasang Notifikasi Komentar Ala Goolge Plus adalah simpan kode ini di atas </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
Perhatian :
Lewati Langkah Pertama jika Pada blog kamu sudah memiliki Script JQuery 1.10.2
Langkah Ke Dua, simpan kode CSS ini di atas ]]></b:skin> atau </style>
/* Notifikasi Komentar
----------------------------------------------- */
#cm-total {
  position:fixed;
  top:14px;
  right:0;
  width:188px;
  text-align:left;
  z-index:9999;
  cursor:pointer;
}
.total-counter {
  background-color:#d11919;
  color:white;
  padding:1px 4px;
  font-family:Arial,Sans-serif;
  font-size:11px;
  border-radius:5px;
  font-weight:bold;
}
#notif {
  position:fixed;
  top:20px;
  right:180px;
  z-index:9999;
  height:22px;
  width:19px;
  opacity:.4;
  cursor:pointer;
}
#notif:hover {
  opacity:1;
}
.close-notif {
  position:fixed;
  top:92px;
  right:20px;
  z-index:9999;
  cursor:pointer;
  display:none;
}
#cm-container {
  width:355px;
  position:fixed;
  top:67px;
  right:0;
  z-index:9999;
  background-color:#e5e5e5;
  padding:60px 20px 10px 20px;
  color:#666;
  box-shadow:0 4px 15px -4px rgba(0,0,0,.4) !important;
  text-align:left;
  border:1px solid rgba(0,0,0,.2);
  background-clip:padding-box;
  display:none;
}
#cm-container:before {
  content:url('http://3.bp.blogspot.com/-wlYmBEpUtGE/UoVyl3GpUZI/AAAAAAAAGEQ/LDeklWh3CNI/s1600/arrow-notif.png');
  position:absolute;
  top:-14px;
  left:196px;
}
#cm-container:after {
  content:"Komentar Terbaru";
  position:absolute;
  top:22px;
  left:150px;
  text-align:center;
  font:normal 14px Arial;
  color:#333;
}
.cm-outer {
  margin:0 auto;
  padding:0;
  font-size:11px;
  text-align:left;
  font:normal 12px Arial;
}
.cm-outer ul{
  margin-bottom:5px;
}
.cm-outer li {
  padding:9px 10px 14px;
  list-style:none;
  clear:both;
  position:relative;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  background-color: white;
  margin-bottom:10px;
}
.cm-text {color:#797979;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 90px;font-size:11px;font-weight:normal !important;}
.cm-header a {color:#262626;text-decoration:none;font-size:14px;font-weight:bold}
.cm-header a:hover {color:#74a2c3;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:90px}
.cm-outer img {
  display:block;
  float:left;
  background:#ececec url('http://4.bp.blogspot.com/-G-9yhzSt2Mw/UoWcB4bdn4I/AAAAAAAAGE4/tzIixYewCsU/s1600/anon80.png') no-repeat 50% 50%;
  overflow:hidden;
  border-radius:3px 0 0 3px;
  position:absolute;
  top:0;
  left:0;
}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#5886a7;text-decoration:none;}
.cm-footer a:hover {color:#74a2c3;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);
}

 

Langkah Ke Tiga, Silahkan simpan kode html ini di atas </body>

<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='http://1.bp.blogspot.com/-wrJzEwB1V3U/UoQktvRDCxI/AAAAAAAAGEA/jYcRiXTyOFg/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='http://2.bp.blogspot.com/-d-5BS0YCkho/UOKe2UIw0rI/AAAAAAAAC4w/md_iYNVHaHk/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://xkomo.com",/*Ganti dengan URL Blog kamu*/
    max_result: 6,/* jumlah komentar yang tampil*/
    t_w: 80,/*lebar gambar*/
    t_h: 80,/*tinggi gambar*/
    summary: 40,/*jumlah tulisan pada komentar */
    new_tab_link: true,
    ct_id: "cm-container",
    new_cm: " Komentar Baru!",
    interval: 30000,
    alert: true,
    alert: function(total) {
        document.getElementById("cm-total").innerHTML = '<strong class='total-counter'>'+total+'</strong>';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
$('#notif').click(function(){$('#cm-container, .close-notif').toggle();});$('.close-notif').click(function(){$('#cm-container, .close-notif').hide();});document.getElementById('notif').onclick = function(){document.title = originalTitle;$('#cm-total').hide();};document.getElementById('show-total').onclick = function(){document.title = originalTitle;$('#cm-total').hide();$('#cm-container').show();};
//]]>
</script>
<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/notif-komen.js' type='text/javascript'/>
Perhatian:
Silahkan Duplicate js ini untuk menghindari jika suatu saat link mati.
<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/notif-komen.js' type='text/javascript'/>

Nah sekian dulu Tutorial Pasang Notifikasi Komentar Ala Google Plus Di Blog Semoga bermanfaat.

Source CSS & HTML CODE : http://blog.kangismet.net/2013/11/notifikasi-komentar-ala-google-plus.html
Reference: http://www.dte.web.id/2012/11/recent-comments-widget-for-blogger-with.html
Tags: BlogCodingCSSHTMLWidget
ShareTweet
Previous Post

Cara Membuat Show / Hide Widget Shoutbox / Shoutmix di Blog

Next Post

[Modifikasi] Tutorial Notifikasi Komentar Ala Kang Ismet Original

Febri Tri Harmoko

Febri Tri Harmoko

Hanya pemuda tersesat yang gemar menulis dan berbagi informasi di internet dan juga gemar membaca komik, nonton anime dan pencinta kucing sejati pastinya.

Related Posts

Cara Setting Private atau Public DNS di Android - PC - Laptop
Internet

Cara Setting Private / Public DNS di Android / PC / Laptop (Provider Hostname Terlengkap)

3 weeks ago
272
Solusi Tidak Bisa Main Game Online Dengan Internet Indihome
Tips

Solusi Tidak Bisa Main Game Online dengan Internet IndiHome

3 weeks ago
24.5k
Cara Login Akun Admin Modem IndiHome Huawei HG8245H
Tutorial

Cara Login Akun Admin Modem IndiHome HUAWEI HG8245H / HG8245A

1 month ago
196.2k
Cara Login Modem IndiHome ZTE F609 Terbaru
Tutorial

Cara Login Modem IndiHome ZTE F609 / F660 (Username & Password)

1 month ago
271.8k
Cara Mengatasi Warna Background Putih Menjadi Kuning di Windows
Windows

Cara Mengatasi Warna Background Putih Menjadi Kuning di Windows

1 month ago
12
Cara Mengganti DNS Google - Cloudflare di Windows PC atau Laptop
Windows

Cara Mengganti DNS Google / Cloudflare di Windows (PC/Laptop)

2 months ago
176
Load More
Next Post
TUTORIAL MODIFIKASI TAMPILAN NOTIFIKASI KOMENTAR ALA KANG ISMET

[Modifikasi] Tutorial Notifikasi Komentar Ala Kang Ismet Original

Download Complete Script Mouse Macro X7 a4tech AWP SG AW GB

Download Complete Script Mouse Macro X7 a4tech No Recoil QuickScope QuickChange Auto Move / Ready (AWP SG AW GB)

Cara Earn Token Ninja Saga Lewat SupersonicAds dan TokenAds

Cara Earn Token Ninja Saga Lewat SupersonicAds dan TokenAds

Please login to join discussion
  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Terms & Conditions
Advertise with us

© 2014 - 2022 XKOMODOTCOM — Made With in Indonesia

No Result
View All Result
  • Profile
  • TECH
    • Apps
    • Computer
    • Laptop
    • Peripheral
    • Smartphone
  • REVIEW
  • TUTORIAL
  • UNBOXING

© 2014 - 2022 XKOMODOTCOM — Made With in Indonesia

Welcome Back!

Sign In with Facebook
Sign In with Google
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.