Pages

DonkeyMails.com: No Minimum Payout
Server : Channel :
Use List | DalNet Commands (Open) | Help

Saturday, August 17, 2013

Cara Memasang TOPBar Menu


TOPBar Menu - merupakan dekorasi tampilan blog untuk menempatkan daftar postingan (recent post) terbaru dan daftar komentar terbaru (recent comments) dari blog sobat dengan warna biru eksotis dan tampilan yang minimalis. Dekorasi tampilan blog ini sangat cocok untuk semua tema blog dan juga bisa menambah daya tarik blog sobat. Dekorasi tampilan blog ini juga bisa memberikan efek dinamis dan terlihat uptodate... Oke sob buat yang tertarik... langsung aja menuju TKP.... untuk contoh bisa lihat demo disini.

Cara Pemasangan :
  • Login ke blog sobat...

  • Klik "More Options" selector box kemudian klik "Template" setelah itu pilih "Edit HTML".

  • Cari kode </Head> kemudian letakan kode berikut ini tepat diatas kode </Head>.

  • Apabila anda sudah pernah memasang kode JQuery silakan anda lewati pemasangan script JQuery ini.
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

  • Setelah itu copy-paste kode berikut ini setelah kode JQuery. Ingat !!! pastikan sobat hanya memasang satu JQuery.
    <link type='text/css' rel='stylesheet' href='http://sites.google.com/site/monozcore/home/TOPBarMenu.css'/>

  • Cari kode <Body> kemudian letakan kode berikut ini tepat setelah kode <Body>.
    <script>
    var rpTOPBar ="http://monozcore.freetzi.com/Recent%20Post%20MonozCore.html";
    var cmTOPBar = "http://monozcore.freetzi.com/Recent%20Comment%20MonozCore.html";
    </script>
    <script src="http://sites.google.com/site/monozcore/home/TOPBarMenu.js"></script>
    • Kode yang berwarna biru merupakan URL Link iFrame dari Recent Post.
    • Kode yang berwarna merah merupakan URL Link iFrame dari Recent Comments.

  • Buat halaman web untuk recent post dengan kode HTML di bawah ini. Ganti URL Link yang berwarna biru pada kode di bawah [ var rp_homePage    = "http://monozcore.blogspot.com", ] dengan URL Link blog sobat. Simpan dan upload halaman web tersebut ke web hosting sobat.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>http://monozcore.blogspot.com | Artikel</title>
    </head>
    <body>
    <style type='text/css'>
    #dte_recent-post {
      margin:0 0;
      padding:0 0;
      font:normal 11px Arial,Sans-Serif;
      color:#999;
      margin:0 auto;
      min-height:100px;
    width:300px;
    text-align:left;
    }

    #dte_recent-post li {
      list-style:none;
      margin:0 0;
      padding:7px 7px;
      background-color:#222;
      border-bottom:1px dotted #999;
    }
    #dte_recent-post li:hover{background:#333}

    #dte_recent-post li a img {
      float:left;
      margin:0 10px 0 0;
      padding:0 0;
      border:none;
      background:transparent;
      outline:none;
    }

    #dte_recent-post li a.title {
      display:block;
      font-size:12px;
      text-decoration:none;
      color:rgb(27, 116, 185);
    font-weight:bold;
    font-size:11px;
    }

    #dte_recent-post li a.title:hover {
      text-decoration:underline;
    }

    #dte_recent-post li span.foot {
      clear:both;
      color:#999;
      margin-top:7px;
      font-size:10px;
    }
    </style>
    <ul id='dte_recent-post'/>
    <script type='text/javascript'>
    //<![CDATA[
    var rp_homePage    = "http://monozcore.blogspot.com",
        rp_numPosts    = 5,
        rp_thumbWidth  = 42,
        rp_numChars    = 0,
        rp_sortByLabel = false,
        rp_noImage     = "http://3.bp.blogspot.com/-MzMilqmiIbQ/UUPfgxyHP5I/AAAAAAAACRc/w-HMiiF_LuY/s42/faceblogSM-nogambar.jpg",
        rp_monthNames  = [
            "Januari",
            "Februari",
            "Maret",
            "April",
            "Mei",
            "Juni",
            "Juli",
            "Agustus",
            "September",
            "Oktober",
            "November",
            "Desember"
        ],
        rp_newTabLink  = true,
        rp_loadTimer   = "onload";

    function showRecentPosts(json) {

        for (var i = 0; i < rp_numPosts; i++) {
            if (i == json.feed.entry.length) break;
            var entry = json.feed.entry[i],
                postTitle = entry.title.$t,
                postAuthor = entry.author[0].name.$t,
                postDate = entry.published.$t.substring(0, 10),
                postUrl,
                linkTarget,
                postContent,
                postImage,
                skeleton = "";

            var dy = postDate.substring(0, 4),
                dm = postDate.substring(5, 7),
                dd = postDate.substring(8, 10);

            for (var j = 0; j < entry.link.length; j++) {
                if (entry.link[j].rel == 'alternate') {
                    postUrl = entry.link[j].href;
                    break;
                }
            }

            for (var k = 0; k < entry.link.length; k++) {
                if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                    commentNum = entry.link[k].title.split(" ")[0];
                    commentLabel = entry.link[k].title.split(" ")[1];
                    break;
                }
            }

            if ("content" in entry) {
                postContent = entry.content.$t;
            } else if ("summary" in entry) {
                postContent = entry.summary.$t;
            } else {
                postContent = '';
            }

            if (rp_thumbWidth !== 0 || rp_thumbWidth !== false) {
                if ("media$thumbnail" in entry) {
                    postImage = '<img style="width:' + rp_thumbWidth + 'px;height:' + rp_thumbWidth + 'px;" src="' + entry.media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "\/s" + rp_thumbWidth + "-c") + '" alt="Loading..." />';
                } else {
                    postImage = '<img style="width:' + rp_thumbWidth + 'px;height:' + rp_thumbWidth + 'px;" src="' + rp_noImage + '" alt="Loading..."/>';
                }
            } else {
                postImage = "";
            }

            postContent = postContent.replace(/<br ?\/?>/ig, " ");
            postContent = postContent.replace(/<(.*?)>/g, "");

            if (postContent.length > rp_numChars || rp_numChars !== false) {
                if (rp_numChars !== 0) {
                    postContent = postContent.substring(0, rp_numChars) + '&hellip;';
                } else {
                    postContent = '';
                }
            } else {
                postContent = '';
            }

            linkTarget = (rp_newTabLink) ? ' target="_blank"' : '';

            skeleton = '<li>';
            skeleton += '<a href="' + postUrl + '"' + linkTarget + '>' + postImage + '</a>';
            skeleton += '<a class="title" href="' + postUrl + '"' + linkTarget + '>' + postTitle + '</a>';
            skeleton += '<span class="foot"><span class="dt">' + dd + ' ' + rp_monthNames[parseInt(dm, 10) - 1] + ' ' + dy + '</span> <span class="cm">(' + commentNum + ' ' + commentLabel + ')</span></span>';
            skeleton += '<br style="clear:both;"/>';
            skeleton += '</li>';
            document.getElementById('dte_recent-post').innerHTML += skeleton;
        }

    }

    var labelName = (rp_sortByLabel !== false) ? '-/' + rp_sortByLabel : "";
    var rp_script = document.createElement('script');
    rp_script.src = rp_homePage + '/feeds/posts/summary/' + labelName + '?alt=json-in-script&callback=showRecentPosts';

    if (rp_loadTimer === "onload") {
        window.onload = function() {
            document.getElementsByTagName('head')[0].appendChild(rp_script);
        };
    } else {
        setTimeout(function() {
            document.getElementsByTagName('head')[0].appendChild(rp_script);
        }, rp_loadTimer);
    }
    </script>
    </body>
    </html>

    Untuk contoh klik Recent post demo

  • Buat halaman web untuk recent comments dengan kode HTML di bawah ini. Ganti URL Link yang berwarna biru pada kode di bawah [ home_page   = "http://monozcore.blogspot.com"; ] dengan URL Link blog sobat. Simpan dan upload halaman web tersebut ke web hosting sobat.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>http://monozcore.blogspot.com | Komentar</title>
    </head>
    <body>
    <style type="text/css">
    #komentar {
      font:normal 11px Tahoma,Verdana,Arial,Sans-Serif;
      background-color:#222;
      margin:0px auto;
      color:#999;
    width:300px;
    text-align:left;
      -webkit-box-shadow:inset 0px 0px 2px #000;
      -moz-box-shadow:inset 0px 0px 2px #000;
      box-shadow:inset 0px 0px 2px #000;
    }

    #komentar ul {
      margin:0px 0px;
      padding:0px 0px;
      border-top:1px solid #333;
      border-bottom:1px solid #444;
    }

    #komentar ul li {
      border-top:1px solid #444;
      border-bottom:1px solid #333;
      padding:3px 5px;
      list-style:none;
    }
    #komentar ul li:hover{background:#333}
    #komentar ul li b a,
    #komentar ul li b a:link,
    #komentar ul li b a:visited,
    #komentar ul li b {
      color:rgb(27, 116, 185);
      text-shadow:0 1px 1px rgba(0,0,0,0.4);
    }
    #komentar ul li b a:hover{text-decoration:underline}
    #komentar ul li b:before {
      content:url(http://1.bp.blogspot.com/-abTiDALn6h0/TpJYHn1AmoI/AAAAAAAAA8I/hRAhFSBZhlY/s1600/feed-icon-green.png);
      margin:0px 4px 0px 0px;
      display:inline-block;
      *display:inline;
      vertical-align:middle;
    }
    </style>
    <script type="text/javascript">
    var jmlkomentar = 10,
        jmlkarakter = 200,
        home_page   = "http://monozcore.blogspot.com";
    </script>
    <script>
    function tampilkankomentar(json) {
     document.write('<div id="komentar"><ul>');
     var entry, urlkomentar, isikomentar, lihatkomentar;
     for (var i = 0; i < jmlkomentar; i++) {
      entry = json.feed.entry[i];
     if (i == json.feed.entry.length) break;
      for (var k = 0; k < entry.link.length; k++) {
       if (entry.link[k].rel == 'alternate') {
        urlkomentar = entry.link[k].href;
        break
       }
      }

      urlkomentar = urlkomentar.replace("#", "#comment-");
      if ("content" in entry) {
       isikomentar = entry.content.$t
      } else if ("summary" in entry) {
       isikomentar = entry.summary.$t
      } else {
       isikomentar = ""
      }

      var re = /<\S[^>]*>/g;
      isikomentar = isikomentar.replace(re, "");
      if (isikomentar.length > jmlkarakter) {
       isikomentar = isikomentar.substring(0, jmlkarakter) + "...";
      }

      document.write('<li>');
      document.write('<b><a rel="nofollow" href="' + urlkomentar + '" target="_blank">' + entry.author[0].name.$t + '</a>: </b>');
      document.write('<span class="isi">' + isikomentar + '</span>');
      document.write('</li>');
     }
     document.write('</ul></div>');
    }

    document.write('<scr' + 'ipt src="' + home_page + '/feeds/comments/default?redirect=false&alt=json-in-script&callback=tampilkankomentar"><\/script>');
    </script>
    </body>
    </html>

    Untuk contoh klik Recent comments demo

  • Untuk mempermudah silakan copy-paste contoh halaman web recent post dan recent comments kemudian edit halaman web tersebut dan ganti URL Link http://monozcore.blogspot.com dengan URL Link blog sobat. Simpan halaman web tersebut dan upload ke dropbox.com atau tempat hosting web sobat.

    Beberapa Tempat Hosting Web Gratis :
Oke sobat monozcore jangan lupa meninggalkan jejak dan komentarnya yaa... biar postingan berikutnya semakin unik dan menarik.. have a nice day...

.: Semoga Bermanfaat :.
DMCAProtected by CopyscapeMyFreeCopyright.com Registered & Protected
Share :
Comments
Tweets
1 Comments

1 comment: