Home » , » Cara Membuat Recent Komentar Dengan Tampilan Google Plus

Cara Membuat Recent Komentar Dengan Tampilan Google Plus

Pagi sobat Bloger, ada yang baru nih, hehe, gak banyak bacot lagi langsung ke TKP



Langsung Aja Disimak Gan :
1. Buka Blogger Agan
2. Pilih Template, Lalu Pilih Edit HTML
3. Cari Kode </head> Gunakan Ctrl+F Agar Memudahkan Pencarian, Lalu Masukkan Kode jQuery Dibawah Ini Tepat Diatas Kode </head>


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

*Lewati Langkah Ini Jika Di Blog Anda Sudah Ada Kode jQuerynya!


4. Cari Kode ]]></b:skin> , Lalu Masukkan Kode Dibawah Ini Tepat Diatas Kode ]]></b:skin>

/* 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqsxluDpW9xyVG58yCT2dXYZVLJlwlvFFUu7Ink1IwoSBTczCEBWJg6teBn95dqdUQT3xaiS2pWLyZnENnCMkBlQqCsGRZ_jER6MCq3I8TXGCy8D1mDk9JPy0g0kRyt_9_RL8-0-M3Ixg/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLYNmIFbuJNOmX5DrRWDtU4SI_-jEIx4sUqxqByS5-6UFCrquum6w6M_Z2maieCVzCd2LYdWld_9FIC0wqVeYzvSJjwM7NpziDQQjnCz_TI44G-TJlhfY9ArhaR85dbdOMooU1fHZVT5U/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXV1Bo_1Vuwg7nFzei-DRrgZR5NHseSI8-UBKTBlCWl9_o8GJ_X9yToBYhqB-rE5eWzCRLdEkBX2skT2KDmg_lkZGCLCHMOeS_JaICbX4WD3FCXG1-KC0JQIMwK4FZz8ICRfJ4O0oqqyw/s80-c/gravatar.png);
}

5. Sekarang Cari Kode </body> , Lalu Letakkan Kode Dibawah Ini Tepat Diatas Kode</body>

<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrgtGRaGxwr9umQGcXgS0yUhQYi-uxsEATd_na3WOfMOBqa8SppmaJKqrYDXeo1LU87ffZgPBbKAMDA02yw4_INN2uEwMKRDwmjwhAqV2RBUhcY5fsV5u5aDbzsC8I82nwLV4lQzI_JRY/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgApmiPBJj6TORY43Z1MzvSW0S9v3adoHXowwC0nLSJ9ojW6j66ltSAOL1i06uduGp4G6v75HYaQG9gbzqKbl5xVuYoboA1JuM6ypkRmDBJGW-S5aCEM-xGSMCwxLFTCO68LuPzEtBFx9A/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://www.hakim.juraganinformatika.com/",
    max_result: 6,
    t_w: 80,
    t_h: 80,
    summary: 40,
    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'/>

6. Simpan Template Anda, Dan Lihat Perubahannya Di Blog Anda

Sekian. Terimakasih

Keterangan : Ganti Huruf Yang Berwarna Biru Dengan URL Blog Agan

source : http://safryan-art.blogspot.com/


Sebagian konten dari Blog hakim.juraganinformatika dari Blogger yang saya ikuti, dengan saya cantumkan link sumbernya pada setiap postingan. Boleh Copas asal mencatumkan link sumber dari konten blog ini.Blog ini diproteksi oleh DMCA. Do Not Plagiat. Tinggalkan komentar anda secara sopan

0 komentar:

Add me on Facebook
Follow us on Twitter
Recommend us on Google Plus
Subscribe me on RSS
notifikasi
close