• Posted by : David Asc Official Blog Senin, 10 Februari 2014

    Pemberitahuan Komentar Blog Ala Google Plus
    Hallo, kali ini saya akan berbagi tutorial blogspot yaitu "Membuat Pemberitahuan Komentar Blog Ala Google Plus". Bukan hanya Google Plus saja yang punya seperti itu, tetapi sekarang blog juga sudah punya hehee. Caranya cukup mudah, ikuti cara caranya ini :
    • Copy dan simpan kode jQuery ini diatas </head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
    • Simpan CCS ini diatas kode ]]></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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibKXUAU9A8JwMN_VrJzP0ULCUZM_yLhoZ3nKGry6ex1cQ2AZ2T9gcfgA60-Sn5GLuOVo3y1M7IyDePy6iB_ByRUNERnWBTzpw7ofz02NySbM5oYkklzUkqVGVz3PgIGNkfgxzIvXaRGzY/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Mq3ZkM7R55_xOGy6oydpHMVtAvxfuby6UTo5BNRAkY3LO0kNPl_rTJgFqHsDOpIj3kdXTltPLIzGCL3D1b22BLaEMVEQqAAPqy_zjBiJL0lGvGb5XDLl0qrhLYndVAAVI62OKGJIMMk/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);
    }
    • Simpan kode ini diatas </body>
    <div id='cm-container'/>
    <div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWXA6lrO3ba9NubBP4yCCKQsqmhuAnmEaLUh24SdHe5dRgZbHvKk1sXp3aanZ2_hyrSJoJSVArjy5o4_bGyKHJ0UVTNhm_-KhRHp5A3A115aNZtRmZy92VPyEhz-HMsZTlE-SY_nxUUAc/s1600/lonceng.png'/></div>
    <div id='cm-total'/>
    <div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0dQb1r_5migS-gjhypnqrSz1dO_lz8qxVWIe8S33WlKHYopVDeSa0ajMUtlLfEkGjLB3HGLTHSPmOfPHt1VzjcKmHixj17HpGflrev29prHbqTOWNYDZRgl3Jtkz6KxiqptVyzog9rWQ/s1600/delete4.png' title='close'/></div>
    <script>
    //<![CDATA[
    var originalTitle = document.title;
    var cm_config = {
        home_page: "http://d-shilitonga06.blogspot.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'/>
    • Ganti nama home_page: "http://d-shilitonga06.blogspot.com" dengan nama blog kalian
    Sumber

    Leave a Reply

    Subscribe to Posts | Subscribe to Comments

  • Copyright © 2013 - David Asc Official Blog

    Powered by Blogger - Designed by Johanes Djogan

    Scroll to top