Membuat Notifikasi Komentar seperti Google Plus di Blog

Membuat Notifikasi Komentar seperti Google Plus di Blog

Cara Membuat Pesan Notifikasi Komentar Google Plus di Blog - Kali ini pembahasan yang akan saya berikan berkaitan tentang memperindah tampilan blogger anda terutama pada komentar dengan memasang notifikasi yang hampir serupa dengan Google+.

Ini sangat disarankan untuk teman blogger yang sering disinggahi pengunjung dengan meninggalkan komentar Dikarenakkan dengan memasang notifikasi seperti google Plus ini akan mempermudah untuk mengetahui jika ada pemberitahuan Komentar yang baru masuk di blog anda.
Membuat Notifikasi Komentar seperti Google Plus di Blog

Memasang Notifikasi Komentar Ala Google Plus

1. Masuk akun Blogger Anda
2. Buka menu Template dan pilih edit HTML
3. Cari kode </head> untuk cara cepatnya gunakkan ctrl+f untuk mempermudah pencarian
4. Simpan kode Jquery Library dibawah ini tepat diatas </head> tetapi jika anda sudah memilikinya pada template anda silahkan lewati bagian ini.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
5. Copy Kode CSS ini dan simpan tepat pada bagian atas kode ]]></b:skin> atau </style>
    /* Komentar Notif */
    #show-total {
    position:fixed;
    top:1px; /* jarak dari atas */
    right:280px; /* jika ingin kesebelah kiri tukar right menjadi left */
    z-index:9999; /*pengaturan always top*/
    cursor:pointer;
    float:right;
    }
    .total-show {
    background-color:#FF0000; /*warna total komentar*/
    color:white;
    padding:2px 6px;
    font-size:11px;
    border-radius:4px;
    font-weight:bold;
    }
    #notif {cursor:pointer;}
    #notif:before {
    content: url(&#39;http://4.bp.blogspot.com/-Hd3B90Kfggg/UpjdHX6iwTI/AAAAAAAABSY/dFE_zIuO8o8/s1600/lonceng.png&#39;);
    display:block;
    position:fixed;
    top:12px;
    right:300px;
    opacity:.5;
    z-index:9997;
    transition:all 0.4s ease-out;
    }
    #notif:hover:before {
    opacity:1;
    }
    #notif2 {cursor:pointer;display:none}
    #notif2:before {
    content: url(&#39;http://4.bp.blogspot.com/-Hd3B90Kfggg/UpjdHX6iwTI/AAAAAAAABSY/dFE_zIuO8o8/s1600/lonceng.png&#39;);
    display:block;
    position:fixed;
    top:12px;
    right:300px;
    opacity:.5;
    z-index:9997;
    transition:all 0.4s ease-out;
    }
    #notif2:hover:before {
    opacity:1;
    }
    #cm-wrapper {
    width:310px;
    position:fixed;
    top:50px;
    right:-381px;
    z-index:9999;
    background-color:#222;
    padding:15px 13px 25px 15px;
    color:#d35400;
    font-family: Arial, Sans-serif;
    border-top:8px solid #d35400;
    transition:0.5s ease;
    }
    #cm-wrapper:before {
    content:&quot;&quot;;
    width:0;
    height:0;
    position:absolute;
    top:-24px;
    right: 303px;
    border:8px solid transparent;
    border-color:transparent transparent #d35400;
    }
    #cm-scroll {
    width: 100%;
    height: 600px;
    overflow: auto;
    position: relative;
    }
    #comments-container {
    color:#666;
    font-family: Arial, Sans-serif;
    }
    #comments-container.cm-active {
    position:fixed;
    right:0;
    top:61px;
    }
    .scrollgeneric {
    line-height: 1px;
    font-size: 1px;
    position: absolute;
    top: 0; left: 0;
    }
    .vscrollerbase {
    width: 5px;
    background-color: #111;border-radius:2px;
    }
    .vscrollerbar {
    width: 5px;
    background-color: #599b29;border-radius:2px;
    }
    .hscrollerbase {
    height: 10px;
    background-color: #111;border-radius:2px;
    }
    .hscrollerbar {
    height: 10px;
    background-color: #444;border-radius:2px;
    }
    .scrollerjogbox {
    width: 10px;
    height: 10px;
    top: auto; left: auto;
    bottom: 0px; right: 0px;
    background-color: gray;
    }
    .cm-outer {
    margin:0 auto;
    padding:0;
    font-size:11px;
    text-align:left;
    }
    .cm-outer pre {background-color:#141414;font-size:11px;color:#7c7c7c}
    .cm-outer li {
    padding:7px 10px 12px;
    list-style:none;
    clear:both;
    position:relative;
    border-top:1px solid #333;
    border-bottom:1px solid #111;
    margin-right:10px;
    }
    .cm-outer code {
    color:#a6a658;
    font-size:11px;
    }
    .cm-outer li.selected {
    border-left:4px solid #fffe8c;
    }
    .cm-outer li:first-child {
    border-top:none;
    }
    .cm-outer li:last-child {
    border-bottom:none;
    }
    .cm-text {color:#999;}
    .cm-outer {margin:0 0 5px}
    .cm-header {margin: 4px 0 8px 60px;font-size:12px;font-weight:normal !important;}
    .cm-header a {color:#d35400;text-decoration:none;font-size:12px;font-weight:bold}
    .cm-header a:hover {color:#e6e6e6;text-decoration:none;}
    .cm-outer .cm-content {overflow:hidden}
    .cm-content {margin-left:60px}
    .cm-outer img {
    display:block;
    float:left;
    background:#8fa2cb url(&#39;http://4.bp.blogspot.com/-JF6712BTA-U/T2Z5ZRTOrOI/AAAAAAAABn4/cXZsvDO8Hzs/s1600/anon5.png&#39;) no-repeat 50% 50%;
    overflow:hidden;
    border-radius:100px;
    position:absolute;
    top:10px;
    left:0;
    border:3px solid #3d464f;
    }
    .cm-footer {margin-top:7px;}
    .cm-footer a {color:#d35400;text-decoration:none;}
    .cm-footer a:hover {color:#e6e6e6;text-decoration:none;}
    div.cm-header img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] {
    content: url(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s80-c/gravatar.png);
    }
    .bg_hitam{
    display: none;
    position: absolute;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index:99;
    opacity:.30;
    }
    .sticky {
    position:fixed;
    top:42px;/* jarak dari atas*/
    z-index: 100;
    }
    .comments
    .thanks-comment{
    position:relative;
    margin:10px 0;
    padding-left:40px;
    font-style:italic;
    font-size:16px;
    quotes:&quot;\201C&quot;&quot;\201D&quot;&quot;\2018&quot;&quot;\2019&quot;
    }
    .comments
    .thanks-comment:before{
    content:open-quote;
    position:absolute;
    top:0;
    left:0;
    margin-top:15px;font-size:4em;color:#d80556}
6. Selanjutnya silahkan anda Letakan kode dibawah ini tepat di atas kode </body>
    <div id='notif' title='Notifikasi'/>
    <div id='notif2' title='Notifikasi'/>
    <div class='bg_hitam' id='bg'/>
    <div id='cm-wrapper'>
    <div class='flexcroll' id='cm-scroll'>
    <div id='comments-container'/>
    </div>
    </div>
      <div id='show-total'/>
    <script type='text/javascript'>
    //<![CDATA[
    var originalTitle = document.title;
    var cm_config = {
        home_page: "http://kabarlangit.com",
        max_result: 18,
        t_w: 50,
        t_h: 50,
        summary: 9999,
        new_tab_link: false,
        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;
        }
    };
    $('#notif').click(function(){$("#cm-wrapper").css({right: "0px"});$("#bg, #notif2").show();$("#notif").hide();});$('#notif2').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});$('#bg').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});document.getElementById('notif').onclick = function() {document.title = originalTitle;$('#show-total').hide();};document.getElementById('show-total').onclick = function() {document.title = originalTitle;$('#show-total').hide();$("#cm-wrapper").css({right: "0px"});$("#bg").show();};setTimeout(function() {$('.myframe').each(function() {$(this).replaceWith('<iframe class="myframe" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');});}, 5000);$(document).ready(function() {
    var stickyNavTop = $('#HTML7').offset().top; var stickyNav = function(){var scrollTop = $(window).scrollTop();     if (scrollTop > stickyNavTop) { $('#HTML7').addClass('sticky');} else {$('#HTML7').removeClass('sticky'); }};stickyNav();$(window).scroll(function() {stickyNav();});});
    setTimeout(function() {
            $('.jsfiddle-demo').each(function() {
            $(this).replaceWith('<iframe class="jsfiddle-demo loader" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');
        });
    }, 5000);
    //]]>
    </script>
    <script src='https://googledrive.com/host/0B8zY82qas755NGNtcURKUXJkYjA' type='text/javascript'/>
8. Ganti lamat http://kabarlangit.com dengan url blog anda
9. Simpan perubahan template anda.

Demikianlah artikel saya mengenai Tutorial membikin Notifikasi seperti Google Plus di Blog anda dan jika anda tertarik, silahkan anda masuk ke postingan saya sebelumnya tentang Membuat Widget Recent Comments Keren Di Blog

Saya merupakan anak ke 8 dari 8 bersaudara, berwatak keras kepala dan sangat mencintai dunia blogging serta desain.
"Love My Mom"

Previous
Next Post »