Home » Uncategories » Cara Membuat Recent Comment dengan Notifikasi Pemberitahuan

Cara Membuat Recent Comment dengan Notifikasi Pemberitahuan

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.

Cara Membuat Recent Comment dengan Notifikasi Peberitahuan

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>


#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/AVvXsEiwhQEO7SRlUdThASdkik5QAj8g-_8PTvVWx3JDl-aAv58LQjqD-OAi-77vmL9F99IPjoxZiicWvjELyT_pO5s-dZ79HgdVOTrhyde3riCwadE0_yHFDcLKJ4Z3D7jPsAC5CyoVOzAFRzs/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&hellip;</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 .