Cara Membuat Recent Comment Dengan Tampilan G+

Tampilan Recent Comment

Cara Membuat Recent Comment Dengan Tampilan G+ - Selamat pagi agan² udah pada mandi belom nih? baunya nyampe kesini! yang udah pada mandi yuk langsung kita bahas Cara Membuat Recent Comment Dengan Tampilan G+ tapi yang belom mandi gausah ikutan ya? awkawkawk.. *justkidding | caranya mudah kok jika agan ngikutin cara ini dengan teliti. yuk langsung aja cekidottt... 

1. Masuk ke Blogger

2. Pilih Template Lalu klik Edit HTML

3. Cari kode </head> Gunakan CTRL + F supaya lebih mudah mencarinya Lalu letakkan kode dibawah ini tepat diatas kode </head>

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

NB : Lewati Langkah ini Jika Blog agan sudah Terpasang (ada) kode Tersebut

4. Lalu, Cari kode ]]></b:skin> Letakkan 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/AVvXsEg7yxNlOpwc9o5HwuvpHPFR4HU5Lg24rFXI2bAtSZOMe1jIVocPtsoujcHyqZfJtCtDTc5jNV4bxYwzQ8MnZoRKEOvsxgFN8knXq2y2x2k0G94eaqPnZFLe0BxOgHA36TKWL_1xI9Mv2fw/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/AVvXsEgeC1zH9nogHr5xFRpa-k2X4yOkW8PiWTEBX4iubp107g-oEELqzLA4GqjVEMuaEBsohr4RZWyw21UACYxzNEukUS0jl-_gNPdB0xx1WDQos2Y-4d5eF8YM3JEfKkLJvVrgFXWtk5ppSG0/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/AVvXsEjxKkh2w5Ru2LX_vmokj1QTCzq1ZaZOnwQEInm7Zf7HzKcJ8XwleOksQ8jAbX91SKeM_N3gmFuuqhqPkEP5rTIazXyBXSLlXaVW7eH2_wPfByM9gQDASVlhMWP5M5J_dFtpBgFrGtgqSPk/s80-c/gravatar.png);}

5. Eiits! Jangan disimpan dulu! Cari kode </body> 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/AVvXsEjZ_OzcTe797O8_MGIDck9-wLvvNRYsugJYh6tz1fw_eg44-Q_FdpVBS3qp6YImOdjz22j7uqMh16eJjFu9QigeSxSiFtFK2sa53g1tNsVrX67Qz2CB3dlMjkcJ2sDuuozBNPQwVNr6QJY/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6V2fmg8qwiCugMojuLq_wk42voVI6CGfv-hwed0bjAe5_Ivbznh2SYIINN6snnyyYADrM4Z9pfni2Q0-cX25NPdYU95EsVcmu2Q83UqDjIjqD3J42kq8qPDvG1AjPbkn7FG7Y52b7Npc/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://Billy-Art.blogspot.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'/>

NB : Ganti Warna Biru dengan Link Blog Sobat.

6. Klik Simpan Template dan Lihat hasilnya!

Sekian dulu artikel tentang Cara Membuat Recent Comment Dengan Tampilan G+  semoga bermanfaat ya, buat sobat bloggers semua. see u di next tutorial! :D 

Tweet