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='http://img1.blogblog.com/img/openid16-rounded.gif'] {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
0 Response to "Cara Membuat Recent Comment Dengan Tampilan G+"
Post a Comment