Ads Banner

Membuat Widget Notifikasi Komentar Terbaru

Membuat Widget Notifikasi Komentar Terbaru
Membuat Widget Notifikasi Komentar Terbaru
Pada dasarnya komentar blog adalah berupa tanggapan terhadap artikel yang telah kita tulis oleh pengunjung blog. Tanggapan pengunjung lewat komentar bisa bermacam-macam, bisa setuju atau menolak isi artikel, mengkritik atau meralat tulisan, bertanya karena kurang mengerti isi tulisan, bahkan menulis komentar sampah (spam) yang tidak ada kaitan dengan isi tulisan. Komentar juga dapat dijadikan indikasi kepopuleran sebuah blog karena dengan banyaknya komentar dapat dijadikan tolak ukur kuatnya interaksi pengunjung dengan blog tersebut. Pengunjung bisa langsung bertegur sapa dengan pemilik blog. Hubungan yang kuat antara pengunjung dan pemilik blog ini yang menjadi dasar kesuksesan blog yang kita bangun.
Berlanjut pada topik posting kali ini tentang bagaimana cara membuat widget komentar terbaru dengan notifikasi yang dibuat oleh Taupik Nurrohman salah satu jagoan blogger Indonesia pemilik Blog DTE. Salah satu manfaat widget recent comment diantaranya dapat membantu pemilik blog atau pengunjung untuk mengetahui komentar terbaru di blognya sehingga bisa langsung membalas komentar tersebut. So menurut saya apa salahnya kita memasang widget komentar terbaru dengan notifikasi ini.

Cara Membuat Widget Notifikasi Komentar Terbaru

1. Tambahkan Kode CSS ini sebelum ]]></b:skin>
#popup {
    width:100%;
    height:100%;
    position:fixed;
    background:rgba(0, 0, 0, .7);
    top:0;
    left:0;
    z-index:9999;
    visibility:hidden
}
#popup:target {
    visibility:visible
}
.window, #comments-container {
background: #292929;
}

.window {
    width: 300px;
    position: relative;
    padding: 10px;
    margin: 0px 1px;
}
#comments-container {
    width: 300px;
    position: fixed;
    top: 36px;
    left: 0px;
    z-index: 9999;
    padding: 10px 10px 15px 10px;
    color: #666;
    display: none;
    text-align: left;
    border: 1px solid rgba(0, 0, 0, .16);
    background-clip: padding-box;
}

.cm-outer img {
    box-shadow:inset 1px 1px #1a1a1a;
    -webkit-box-shadow:inset 1px 1px #1a1a1a;
    background:#292929;
    background-size:35px;
    margin:0 0 10px 0;
    vertical-align:middle;
    border:1px solid #292929;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    padding:4px;
    width:35px !important;
    height:35px !important;
    max-width:100%;
    max-height:100%;
    float:none
}
.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:1px solid #292929
}
.cm-outer {
    max-height:535px;
    margin:0 auto;
    padding:0;
    font:inherit;
    border:1px solid #333;
    border-top:0;
    color:#bbb;
    overflow-y:scroll;
    overflow-x:hidden
}
.cm-outer li {
    margin:0;
    padding:7px 10px 12px;
    list-style:none;
    clear:both;
    border-top:1px solid #363636;
    border-bottom:1px solid #202020
}

#show-total {
    cursor:pointer;
    position:fixed;
    float:left;
    top:10px;
    left:10px
}
.total-show {
    background-color:#383838;
    top:10px;
    left:10px;
    z-index:9999;
    border:1px solid #474747;
    color:#00FF14;
    padding:1px 4px;
    font-weight:bolder;
    font-size:9px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    position:fixed;
}

2. Simpan Kode Di bawah ini tepat di atas tag </body>
<a href='#popup' id='show-total' />
<div id='popup'>
    <div class='window'><a class='close-button no-print' href='#' title='Close'>Close</a>
        <div id='comments-container'>Loading....</div>
    </div>
</div>
<script type='text/javascript'>//<![CDATA[
var originalTitle=document.title;
var cm_config = {
    home_page: "http://info-kmu.blogspot.com",
    max_result: 15,
    t_w: 32,
    t_h: 32,
    summary: 40,
    new_tab_link: true,
    ct_id: "comments-container",
    new_cm: " Komentar Baru!",
    interval: 30000,
    alert: true,
    alert: function (total) {
        document.getElementById("show-total").innerHTML = "<strong class='total-show'>" + total + "</strong>";
        document.title = "(" + total + ") " + originalTitle
    }
};
document.getElementById("show-total").onclick = function () {
    document.title = originalTitle;
    $("#show-total").hide();
    $("#comments-container").show()
}; 
//]]></script><script src='https://googledrive.com/host/0B3p31o3sU30FU3FKc3dPTWlYUHc' type='text/javascript'></script>
3. Untuk mengubah atau mengatur tampilan notifikasi komentar, silahkan anda bereksplorasi sendiri dengan mengubah CSS nya saja.
http://www.dte.web.id/2012/11/recent-comments-widget-for-blogger-with.html

Print/Save

Blok kemudian tekan tombol Ctrl dan huruf C pada keyboard secara bersamaan untuk copy artikel di atas. Bagi pengguna Google Chrome bisa menyimpan halaman ini dalam bentuk *pdf melalui tombol print/save di atas.!
Share This :

Jika Anda menyukai , Share melalui social media di atas (satu suka dari anda sangat berarti bagi kami. Tuliskan kritik dan saran anda pada form komentar di bawah! Ketikan email dan klik subcribe untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Info [K-Moe].

Artikel relevan lainnya
Beri Komentar