Ada yang tau cara membuat notifikasi komentar dengan lonceng seperti Google+ ?

Tadi lagi searchcing terus nemuin gambar lonceng kayak bell notifikasi yang berada di atas blog dibagian header. Bagaimana mereka membuat seperti itu,.? tolong dong yang tau source notifikasi tersbut.

SMA Ditanyakan on 4 Juni 2016 pada Blog/Web.
Tambah Komentar
  • Loading...
    1 Jawaban

    Berikut cara membuat notifikasi komentar yang tersemat di bagian atas blog dengan icon bell/lonceng :

    RE: Ada yang tau cara membuat notifikasi komentar dengan lonceng seperti Google+ ?

    • Simpan kode di bawah ini diatas </head>
    
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
    
    
    • Simpan lagi kode dibawah ini diatas ]]></b:skin> atau </style>
    
    /* Notifikasi Komentar
    
    ----------------------------------------------- */
    
    #cm-total {
    
    position:fixed;
    
    top:14px;
    
    right:0;
    
    width:188px;
    
    text-align:left;
    
    z-index:9999;
    
    cursor:pointer;
    
    }
    
    .total-counter {
    
    background-color:#d11919;
    
    color:white;
    
    padding:1px 4px;
    
    font-family:Arial,Sans-serif;
    
    font-size:11px;
    
    border-radius:5px;
    
    font-weight:bold;
    
    }
    
    #notif {
    
    position:fixed;
    
    top:20px;
    
    right:180px;
    
    z-index:9999;
    
    height:22px;
    
    width:19px;
    
    opacity:.4;
    
    cursor:pointer;
    
    }
    
    #notif:hover {
    
    opacity:1;
    
    }
    
    .close-notif {
    
    position:fixed;
    
    top:92px;
    
    right:20px;
    
    z-index:9999;
    
    cursor:pointer;
    
    display:none;
    
    }
    
    #cm-container {
    
    width:355px;
    
    position:fixed;
    
    top:67px;
    
    right:0;
    
    z-index:9999;
    
    background-color:#e5e5e5;
    
    padding:60px 20px 10px 20px;
    
    color:#666;
    
    box-shadow:0 4px 15px -4px rgba(0,0,0,.4) !important;
    
    text-align:left;
    
    border:1px solid rgba(0,0,0,.2);
    
    background-clip:padding-box;
    
    display:none;
    
    }
    
    #cm-container:before {
    
    content:url('http://3.bp.blogspot.com/-wlYmBEpUtGE/UoVyl3GpUZI/AAAAAAAAGEQ/LDeklWh3CNI/s1600/arrow-notif.png');
    
    position:absolute;
    
    top:-14px;
    
    left:196px;
    
    }
    
    #cm-container:after {
    
    content:"Komentar Terbaru";
    
    position:absolute;
    
    top:22px;
    
    left:150px;
    
    text-align:center;
    
    font:normal 14px Arial;
    
    color:#333;
    
    }
    
    .cm-outer {
    
    margin:0 auto;
    
    padding:0;
    
    font-size:11px;
    
    text-align:left;
    
    font:normal 12px Arial;
    
    }
    
    .cm-outer ul{
    
    margin-bottom:5px;
    
    }
    
    .cm-outer li {
    
    padding:9px 10px 14px;
    
    list-style:none;
    
    clear:both;
    
    position:relative;
    
    border-radius: 3px;
    
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    
    background-color: white;
    
    margin-bottom:10px;
    
    }
    
    .cm-text {color:#797979;}
    
    .cm-outer {margin:0 0 5px}
    
    .cm-header {margin: 4px 0 8px 90px;font-size:11px;font-weight:normal !important;}
    
    .cm-header a {color:#262626;text-decoration:none;font-size:14px;font-weight:bold}
    
    .cm-header a:hover {color:#74a2c3;text-decoration:none;}
    
    .cm-outer .cm-content {overflow:hidden}
    
    .cm-content {margin-left:90px}
    
    .cm-outer img {
    
    display:block;
    
    float:left;
    
    background:#ececec url('http://4.bp.blogspot.com/-G-9yhzSt2Mw/UoWcB4bdn4I/AAAAAAAAGE4/tzIixYewCsU/s1600/anon80.png') no-repeat 50% 50%;
    
    overflow:hidden;
    
    border-radius:3px 0 0 3px;
    
    position:absolute;
    
    top:0;
    
    left:0;
    
    }
    
    .cm-footer {margin-top:7px;}
    
    .cm-footer a {color:#5886a7;text-decoration:none;}
    
    .cm-footer a:hover {color:#74a2c3;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);
    
    }
    
    
    • Terakhir simpan kode dibawah ini diatas </body>
    
    <div id='cm-container'/>
    
    <div id='notif' title='Notifikasi'><img alt='notifikasi' src='http://1.bp.blogspot.com/-wrJzEwB1V3U/UoQktvRDCxI/AAAAAAAAGEA/jYcRiXTyOFg/s1600/lonceng.png'/></div>
    
    <div id='cm-total'/>
    
    <div class='close-notif'><img alt='close' src='http://2.bp.blogspot.com/-d-5BS0YCkho/UOKe2UIw0rI/AAAAAAAAC4w/md_iYNVHaHk/s1600/delete4.png' title='close'/></div>
    
    <script>
    
    //<![CDATA[
    
    var originalTitle = document.title;
    
    var cm_config = {
    
    home_page: "https://pertanyaanku.com",
    
    max_result: 6,
    
    t_w: 80,
    
    t_h: 80,
    
    summary: 40,
    
    new_tab_link: true,
    
    ct_id: "cm-container",
    
    new_cm: " Komentar Baru!",
    
    interval: 30000,
    
    alert: true,
    
    alert: function(total) {
    
    document.getElementById("cm-total").innerHTML = '<strong class=\'total-counter\'>'+total+'</strong>';
    
    document.title = '(' + total + ') ' + originalTitle;
    
    }
    
    };
    
    $('#notif').click(function(){$('#cm-container, .close-notif').toggle();});$('.close-notif').click(function(){$('#cm-container, .close-notif').hide();});document.getElementById('notif').onclick = function(){document.title = originalTitle;$('#cm-total').hide();};document.getElementById('show-total').onclick = function(){document.title = originalTitle;$('#cm-total').hide();$('#cm-container').show();};
    
    //]]>
    
    </script>
    
    <script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/notif-komen.js' type='text/javascript'/>
    
    

    Note: ubah link https://pertanyaanku.com ke link situs anda

    Sarjana Terjawab on 4 Juni 2016

    Terima kasih min :D berhasil

    on 4 Juni 2016.
    Tambah Komentar

    Smilies Kaskus

    Dengan memposting jawaban, anda setuju dengan Kebijakan Privasi dan ketentuan layanan.