Cara Membuat Recent Comment dengan Notifikasi Pemberitahuan-setelah kemaren saya membuat recent comment di blog , kali ini saya akan share kepada sahabat blogger cara membuat recent comment dengan notifikasi pemberitahuan , apa sih maksudnya ..? maksudnya ialah apabila ada komentar baru di blog kita , maka secara otomatis kita akan mendapatkan pesan pemberitahuan , hampir mirip seperti alarm tapi gak ada nadanya hanya pemberitahuan tex saja . selain itu recent comment ini juga di lengkapi dengan title , jadi akan berdampak baik untuk seo.
Berikut langkah-langkah Cara Membuat Recent Comment dengan Notifikasi Pemberitahuan :
Ada 2 tahap dalam membuat recent post dengan notifikasi pemberitahuan :
A. Tahap yang pertama
1. Login atau masuk terlebih dahulu ke akun Blogger anda
2. Pilih menu " Template " => EDIT HTML
3. Cari kode ]]></b:skin> ( Gunakan CTRL+F untuk mempermudah pencarian )
4. Letakan kode di bawah ini tepat di atas kode ]]></b:skin>
2. Pilih menu " Template " => EDIT HTML
3. Cari kode ]]></b:skin> ( Gunakan CTRL+F untuk mempermudah pencarian )
4. Letakan kode di bawah ini tepat di atas kode ]]></b:skin>
#outer-comment {
Background: none;
margin: 0;
padding: 5px;
width: auto;
height: 300px;
overflow: auto;
border: 0px solid#000;
}
#boxcomment {
border: 0px solid#000;
background: #000;
text-align: left;
color: red;
padding: 5px;
margin-bottom: 5px;
height: 20px;
}
#comments-total {
color: #fff;
text-align: center;
margin-top: -20px;
}
.cm-outer {
margin: 0 auto;
padding: 0 0;
font: normal normal 11px Arial,Sans-Serif;
border: 0px solid;
border-top: none;
}
.cm-outer li {
margin: 0 0;
padding: 7px 10px 12px;
list-style: none;
clear: both;
border-top: 2px dotted;
2px;
}
.cm-outer .cm-header {
margin: 0 0 5px;
}
.cm-outer .cm-content {
overflow: hidden;
}
.cm-outer img {
display: block;
float: left;
margin: 2px 10px 2px 0;
border: 0px solid black;
background: #8fa2cb url('http://img1.blogblog.com/img/anon36.png') no-repeat 50% 50%;
overflow: hidden;
-moz-transform: scaleX(1);
-o-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
.cm-outer img:hover {
display: block;
float: left;
margin: 2px 10px 2px 0;
border: 0px solid black;
background: #8fa2cb url('http://img1.blogblog.com/img/anon36.png') no-repeat 50% 50%;
overflow: hidden;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.accessible-hidden {
position: absolute;
top: -99px;
left: -99px;
width: 1px;
height: 1px;
}
#shadow-widget {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ9y3grXBMlUxeP5fjSHiK-VP478XIZGnRKJUvsT1qi3mob17Js4iq5p5TaIqWXF0bQhyBanWwjixG0VQdw7J1K9cc_dE-BU7IWGtuzs9Z5apE5YHp4GQCTs_VDlfnFcJpJ6yVWjT1ONw/s1600/frame_shadow2+copy.png") no-repeat scroll center center transparent;
height: 20px;
width: 300px;
}
6. Simpan Template , kemudian Log out dari EDIT TEMPLATE
B. Tahap yang kedua
1. Masuk / Login ke akun Blogger anda
2. Pilih Menu Tata Letak
3. Kemudian Tambahkan gadget => HTML/Java Sript
4. Salin dan pastekan kode di bawah ini , di dalam kolom HTML/Java Sript
<div id="outer-comment"><div id="boxcomment"><b>Total Comment:</b>
<div id="comments-total"></div></div>
<div id="comments-container">Loading…</div>
<script type="text/javascript">
var cm_config = {
home_page: "http://ahmadsuyadi.blogspot.com",
max_result: 7,
t_w: 32,
t_h: 32,
new_tab_link: true,
tt_id: "comments-total",
ct_id: "comments-container",
new_cm: " Komentar Baru!",
interval: 30000,
alert: true
};
</script>
<script type="text/javascript" src="http://karina-project.googlecode.com/files/recent-comments-script-with-notification.js"></script></div>
NOTE :
- Ganti
ahmadsuyadi.blogspot.com dengan URL BLOG ANDA
5. Saimpan Template dan Lihat Hasilnya ( demonya seperti recent comment saya )
Itulah panduan Langkah-langkah Cara Membuat Recent Comment dengan Notifikasi Pemberitahuan semoga artikel ini dapat bermanfaat bagi saya dan anda .
No comments: