$type=ticker$count=12$cols=4$cate=0$show=post$hide=mobile

$type=grid$count=4$tbg=rainbow$meta=0$snip=0$rm=0$show=home$ic=show

Tutorial Pasang Notifikasi Komentar Ala Google Plus Di Blog

Tutorial Pasang Notifikasi Komentar Ala Google Plus Di Blog

Hi Bloggers :)

     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 #Hem.. (yg ini ntr di bahas di artikel selanjut nya :D ) . 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 DTE sudah menjelaskan tentang kerangka Notifikasi Komentar ini namun yah kita ketahui kebanyakan mereka suka nya cari yang instan dan tidak mau berkreasi sendiri alhasil kreasi dari Ki pun di curi (yg punya kan jadi marah :hebat ) Hahaha .... Untuk pembahasan selanjutnya baca di sini
http://www.xkomo.com/2014/05/notifikasi-komentar-ala-kangismet-original-googleplus.html)

     Just Intermezo doank :keren ... Btw Tutorial kali ini saya ambil dari blog Ki. untuk pembahasan modifikasi widget ini nanti akan di bahas Pada Artikel Selanjutnya :) ...

Untuk Demo silahkan lihat di blog saya saja langsung :wee

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'/>


Info : 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 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 untuk jika ingin di tanyakan silahkan bertanya di komentar saja yah :keren
Untuk Memodifikasi Notifikasi Komentar Ala Google plus ini kamu bisa ceck di artikel [Modifikasi] Notifikasi Komentar Ala Kang Ismet Original . Trims :keren
Sumber Kode CSS & HTML : http://blog.kangismet.net/2013/11/notifikasi-komentar-ala-google-plus.html
Resource Website : http://www.dte.web.id/2012/11/recent-comments-widget-for-blogger-with.html

Original Article By Blog X Komo

COMMENTS

BLOGGER: 4
Loading...
Mengingat blog x komo akan pindah platform dari blogger ke wordpress, jika kamu punya pertanyaan atau request update artikel silahkan join ke sini https://blog.xkomo.com/forums.
Silahkan Bookmark blog saya yang baru ya, karna kedepan blog ini akan di hapus.
Name

Accessories,5,All Weapon,4,Android,36,Anime,1,App,8,ASUS,41,ASUS Zenfone,7,Blogger,33,Clash Of Clan,2,Computer,3,CSS,6,Documentary,5,dr. Zen,2,Event,10,Facebook,15,Firmware,23,Game,9,Gemscool,1,Google,6,Google Adsense,2,Hardware,2,Internet,6,Jambi,2,Javascript,1,Komputer,3,Laptop,2,Mouse,3,Mouse Gaming,1,Mouse Macro,6,News,40,Ninja Saga,2,Notebook,4,Padfone S,1,Point Blank,1,Press Release,8,Preview,12,Review,27,Root,13,Script,3,SEO,3,Shotgun,1,Smartphone,18,Template,1,Theme,3,Tips & Tricks,2,Troubleshooting,1,Tutorial,44,Unboxing,4,Video,10,Widget,8,Windows,2,ZenEar,1,Zenfestival,1,Zenflash,1,Zenfone 2,5,Zenfone 2 Deluxe,2,Zenfone 2 Laser,9,Zenfone 3,3,Zenfone 3 Laser,1,Zenfone 3 Max,3,Zenfone 3 Zoom,1,Zenfone 4,2,Zenfone 5,5,Zenfone 6,9,Zenfone Go,1,Zenfone Max,1,Zenfone Selfie,3,Zenfone Zoom,3,ZenHow,1,ZenPad,2,Zenpower,2,Zentalk,2,Zenvestival,3,Zenvolution,1,
ltr
item
BLOG X KOMO: Tutorial Pasang Notifikasi Komentar Ala Google Plus Di Blog
Tutorial Pasang Notifikasi Komentar Ala Google Plus Di Blog
Tutorial Pasang Notifikasi Komentar Ala Google Plus Di Blog
http://1.bp.blogspot.com/-l0cXB9XbTh4/U2P1x49citI/AAAAAAAABec/HdGsggQXP-c/s1600/capture-20140504-024355.png
http://1.bp.blogspot.com/-l0cXB9XbTh4/U2P1x49citI/AAAAAAAABec/HdGsggQXP-c/s72-c/capture-20140504-024355.png
BLOG X KOMO
http://www.xkomo.com/2014/05/tutorial-pasang-notifikasi-komentar-ala-google-plus.html
http://www.xkomo.com/
http://www.xkomo.com/
http://www.xkomo.com/2014/05/tutorial-pasang-notifikasi-komentar-ala-google-plus.html
true
4848727032668058109
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy