Judul : Recent Comment Dengan Notifikasi Pemberitahuan
link : Recent Comment Dengan Notifikasi Pemberitahuan
Recent Comment Dengan Notifikasi Pemberitahuan
T
erus terang sob recent comment yang akan saya share pada pertemuan kali ini adalah hasil kunjungan saya ke blog nya kang taufik seorang master blogger jika sobat akan berkunjung silahkan menuju ke http://www.dte.web.id ,tentunya hasilnya tidak akan sama karena sudah sedikit saya rubah pada kode css nya ,untuk lebih jelasnya silahkan lihat screenshot nya disamping postingan ini .Keuntungan yang kita dapat dari Recent Comment ini adalah di tambahnya Notifikasi Pemberitahuan jadi kita bisa tahu jika ada commentar baru di blog kita,keuntungan lain yang bisa kita dapat dari widget Recent Comment ini adalah kita juga bisa tahu berapa jumlah Comentar yang ada di blog kita , oke untuk cara membuat nya silahkan sobat ikuti seperti di bawah ini :- Login ke blogger
- Setelah masuk ke dasboard silahkan pilih Template Lalu pilih Edit HTML
- Cari Kode ]]></b:skin> Lalu taruh kode berikut tepat di atas nya
- Save Template
- Selanjutnya untuk pasang widget Recent Comment Dengan Notifikasi Pemberitahuan nya silahkan pilih tata letak >> tambah gadget >> pilih Html Java Script >> Lalu masukkan kode berikut
- Lalu Save / Demo Bisa dilihat Pada blog ini Setiap ada Komentar Masuk
#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/AVvXsEivNQUJjyasWr-VgPhtHlzzlJrYF2Is2buEKb-ibC158lDBRb1bVlnaS77xaUpFVggAhHOl2kT622OGgromOzj0WDiVuC2hGIOiLYKQAcGSx8vypNYDG67SJhNBXKvWNnIV57RTVUjeQB4/s1600/frame_shadow2+copy.png") no-repeat scroll center center transparent;
height: 20px;
width: 300px;
}
<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://karinafotocollection.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>
Untuk kode yang berwarna merah silahkan ganti dengan Nama blog/website sobat
Demikianlah Artikel Recent Comment Dengan Notifikasi Pemberitahuan
Sekian Recent Comment Dengan Notifikasi Pemberitahuan, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.