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.

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/AVvXsEh7gPqRby-NL3eNiK5gXR8BzFOEgIrz_BEna8ahO8VjpNHBEoyAZEhKTxnGFWrBwiWvwzj5180zilAslhHeuEauk-Su18X0tVmhIw9WZoNt34bJj3lxUHFpMlvOkNW8A7uOuMoV9EXn4EA/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 .