Widget Recent Command Terbaru Ala Notifikasi GooglePlus

Widget Recent Command Terbaru Ala Notifikasi GooglePlus

Recent command atau komentarter baru adalah salah satu widget yang semestinya ada pada sebuah blog. Karena dengan adanya widget recent command atau komentar terbaru dapat memudahkan pemilik dan pengunjung untuk mengetahui topik mana yang sedang hangat dibahas atau dibicarakan pada sebuah blog.

Dengan adanya widget recent command atau komentar terbaru ini, dapat pula mendukung terhadap perkembangan suatu blog. Alasannya jelas, karena dengan adanya widget recent command atau komentar terbaru dapat menarik perhatian pengunjung untuk ikut memberikan komentar pada topik yang sedang dibicarakan, dengan demikian pengunjung akan berpindah-pindah page atau halaman blog mengikuti link yang ada pada widget recent command atau komentar terbaru tersebut.

Widget Recent Command Terbaru Ala Notifikasi GooglePlus

Cara Memasang Widget Recent Command Terbaru Ala Notifikasi GooglePlus

  • Login ke blogger
  • Klik menu Template
  • Pilih Edit HTML
  • Cari kode ]]></b:skin>
  • Copy kode berikut dan letakkan tepat di atas kode ]]></b:skin>
    /* Notifikasi Komentar */
    #show-total{position:fixed;top:1px;right:278px;z-index:9999;cursor:pointer;float:right;}
    .total-show{background-color:#2EA9DA;color:white;padding:2px 6px;font-size:11px;border-radius:0px;font-weight:bold;}
    #notif {cursor:pointer;}
    #notif:before {content: url('http://4.bp.blogspot.com/-Hd3B90Kfggg/UpjdHX6iwTI/AAAAAAAABSY/dFE_zIuO8o8/s1600/lonceng.png'); display:block;position:fixed;top:7px;right:285px;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('http://4.bp.blogspot.com/-Hd3B90Kfggg/UpjdHX6iwTI/AAAAAAAABSY/dFE_zIuO8o8/s1600/lonceng.png');display:block;position:fixed;top:7px;right:285px;opacity:.5;z-index:9997;transition:all 0.4s ease-out;}
    #notif2:hover:before{opacity:1;}
    #cm-wrapper {width:305px;position:fixed;top:48px;right:-381px;z-index:9999;background-color:#111;padding:15px 13px 25px 15px;color:#666;font-family: Arial, Sans-serif;border-top:8px solid #2EA9DA;transition:0.5s ease;}
    #cm-wrapper:before{content:"";width:0;height:0;position:absolute;top:-25px;right: 287px;border:10px solid transparent;border-color:transparent transparent #2EA9DA;}
    #cm-scroll{width: 100%;height: 470px;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: red;}
    .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 #E5E5E5;border-bottom:1px solid #E5E5E5;margin-right:10px;}
    .cm-outer code{color:#a6a658;font-size:11px;}
    .cm-outer li.selected{border-left:0px 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:#599b29;text-decoration:none;font-size:12px;font-weight:bold}
    .cm-header a:hover{color:#556C8E;text-decoration:none;}
    .cm-outer .cm-content{overflow:hidden}
    .cm-content{margin-left:60px;}
    .cm-outer img{display:block;float:left;background:#8fa2cb url('http://4.bp.blogspot.com/-JF6712BTA-U/T2Z5ZRTOrOI/AAAAAAAABn4/cXZsvDO8Hzs/s1600/anon5.png') no-repeat 50% 50%;overflow:hidden;border-radius:0px;position:absolute;top:13px;left:0;border:0px solid #3d464f;}
    .cm-footer{margin-top:7px;}
    .cm-footer a{color:#599b29;text-decoration:none;}
    .cm-footer a:hover{color:#556C8E;text-decoration:none;}
    div.cm-header img[src='http://img1.blogblog.com/img/openid16-rounded.gif'] {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;z-index: 100;}
    .comments .thanks-comment{position:relative;margin:10px 0;padding-left:40px;font-style:italic;font-size:16px;quotes:"\201C""\201D""\2018""\2019"}
    .comments .thanks-comment:before{content:open-quote;position:absolute;top:0;left:0;margin-top:15px;font-size:4em;color:#d80556}
  • Kemudian cari kode </body>
  • Copy kode berikut dan letakkan 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://www.blog-guns.com/", max_result: 25, t_w: 60, t_h: 60, 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/0B0gPfP3O6xFIRlVuVzFIMFlwSFE/Notifikasi.txt' type='text/javascript'/>
  • Ganti kode yang berwarna merah dengan url blog Sobat
  • Klik simpan template.
Demikian Cara Memasang Widget RecentCommand Terbaru Ala Notifikasi GooglePlus ini, semoga dapat bermanfaat dan selamat mencoba.

Artikel terkait:

Bagikan: