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 :

1. Login ke blogger
2. Setelah masuk ke dasboard  silahkan pilih Template Lalu pilih Edit HTML 
3. Cari Kode ]]></b:skin> Lalu taruh kode berikut tepat di atas nya

#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/AVvXsEiesYxC2D67MNYPRYcTfEO4SGYWi-uLuhkAkNfph_SfR9jMlNvzhkXTVzoYWsk0ETtmMEwYDSMq-zAMiZtxlBFhkYdhygWdFC6BSgm0GncWQC3lx_lHXj4T90wJjS6-x8KH5ZvhFAa2X8g/s1600/frame_shadow2+copy.png") no-repeat scroll center center transparent;
    height: 20px;
    width: 300px;
}

4. Save Template
5. Selanjutnya untuk pasang widget Recent Comment Dengan Notifikasi Pemberitahuan nya silahkan pilih tata letak >> tambah gadget >> pilih Html Java Script >> Lalu masukkan kode berikut 

<div id="outer-comment"><div id="boxcomment"><b>Total Comment:</b>
    <div id="comments-total"></div></div>
<div id="comments-container">Loading&hellip;</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>

6. Lalu Save / Demo Bisa dilihat Pada blog ini Setiap ada Komentar Masuk

NB:Untuk mengetahui Fungsi dari Recent Comment Dengan Notifikasi Pemberitahuan ini setidak ada 1 komentar yang masuk silahkan rubah kode di atas sesuai kebutuhan jika ada kesulitan silahkan bertanya langsung pada admin di kotak komentar pada Artikel Terkait.
Untuk kode yang berwarna merah silahkan ganti dengan Nama blog/website sobat

Judul Artikel :Recent Comment Dengan Notifikasi Pemberitahuan

Terima Kasih Sobat sudah membaca Artikel saya Tentang Recent Comment Dengan Notifikasi Pemberitahuan Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih