Cara Membuat Sticky Post di blogger/blogspot

Cara Membuat Sticky Post di blogger/blogspot

Sticky post adalah satu tool yang berguna menempatkan sebuah artikel/posting tetap di urutan teratas meski posting/artikel ini terlebih dahulu di publikasikan sebelum artikel yang lain. manfaatnya adalah membedakan artikel/posting penting, pemberitahuan event, atau juga dengan tujuan lain.
Trik ini Menggunakan script untuk mengambil posting yang akan menjadi posting teratas/sticky post dari feed blog, sehingga feed blog harus di aktifkan terlebih dahulu. Dan juga karena memerlukan feed blog, sticky post ini tidak bekerja dalam blog pribadi.

Dengan trik ini Anda dapat menentukan mana posting yang akan di tampilkan di atas hanya dengan memberikan label "sticky", secara default label adalah "sticky" tetapi Anda dapat mengubahnya sesuai yang di ingin. Anda dapat mengatur berapa banyak posting yang akan dipilih, dan jika lebih dari jumlah label "sticky" yang ditemukan dari jumlah ini, maka posting dengan label "sticky" terbaru yang akan ditampilkan.

Cara memasang trik ini, Buka Edit Template Letakkan kode ini tepat sebelum tag </ body>.

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style type='text/css'>
    .sticky-post { background-color: #F0F0F0; padding: 8px;}
    .stickies-container { background-color: #E4E4E4; padding: 4px; margin-bottom: 2em;}
    .stickymore { display: none; }
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    // Sticky posts blogger defandaky 2011. See demo http://yabtb.blogspot.com/
    // Configuration:
    var stickyLabel = "sticky"
    var maxStickies = 2;  // 1-20
    var showDate = true;
    var showTitle = true;
    var showFooter = true;
    var showPostedBy = true;
    var showCommentLink = true;
    var showLabels = true;
    var showStickyLabel = false;
    var showEmailPost = false;
    var showShareButtons = true;
    var showShareEmail = true;
    var showShareBlog = true;
    var showShareTwitter = true;
    var showShareFacebook = true;
    var showSharePlusone = true;
    var widthPlusone = 300;
    var txtComment = "comment";
    var txtComments = "comments";
    var txtPostedBy = "Posted by [user] at [time]";
    var txtLabels = "Labels:";
    var txtMore = "Read more &raquo;";
    var dynamicMore = true;
    var txtHideMore = "&laquo; <small>Hide</small>";
    // config end
    function findQuickEdit() {
      var elements = document.getElementsByTagName("*");
      var expr = /(^| )quickedit( |$)/;
      for(var i=0 ; i<elements.length ; i++)
        if(expr.test(elements[i].className))
          return (elements[i].offsetWidth != 0);
      return false;
    }
    function toggleStickyMore(id) {
      if(document.getElementById(id)) {
        if(document.getElementById(id+'-morelink').style.display != 'none') {
          document.getElementById(id).style.display = 'block';
          document.getElementById(id+'-morelink').style.display = 'none';
        } else {
          document.getElementById(id).style.display = 'none';
          document.getElementById(id+'-morelink').style.display = 'inline';
        }
      }
      var elm=document.getElementById(id+'-buttons');
      if(elm) {
        var old=elm.style.display;
        elm.style.display = 'none';
        elm.style.display = old; // because of IE...
      }
    }
    function renderStickies(result) {
        if(!result || !result.feed || !result.feed.entry || !result.feed.entry.length) return;
        var divSticky = document.createElement('div');
        divSticky.className = "stickies-container";
        var elm = document.getElementById("Blog1");
        elm.insertBefore(divSticky, elm.firstChild);
        if(!showLabels && !showPostedBy && !showCommentLink)
          showFooter = false;
        var strBuffer="";
        var isQuickEdit = findQuickEdit();
        for(var i = 0 ; i < result.feed.entry.length && i < maxStickies ; i++) {
            if(strBuffer != "")
              strBuffer += "<br />";
            var entry = result.feed.entry[i];
            strBuffer += "<div class=\"sticky-post\">";
            var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
            postDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
            if(showDate)
              strBuffer += "<h2 class=\"date-header\">" + postDate.toLocaleDateString() + "</h2>";
            var link="";
            for(var k = 0; k < entry.link.length; k++ ) {
              if(entry.link[k].rel == 'alternate') {
                link = entry.link[k].href;
                break;
              }
            }
            var blogid = entry.id.$t.split('-')[1].split('.')[0];
            var postid = entry.id.$t.split('-')[2];
            if(postid != "") {
              var elepost=document.getElementsByName(postid);
              if(elepost && elepost[0]) {
                elepost = elepost[0].parentNode;
                while(elepost && !/(^| )date-outer( |$)/.test(elepost.className))
                  elepost = elepost.parentNode;
                if(elepost && elepost.parentNode) elepost.parentNode.removeChild(elepost);
              }
            }
            if(showTitle)
              strBuffer += "<h3 class=\"post-title entry-title\"><a href=\"" + link + "\">"+ entry.title.$t + "</a></h3><br />";
            var content = entry.content.$t;
            if(content.indexOf("<a name='more'")!=-1) {
              if(!dynamicMore) {
                content = content.replace(/\n/g, " ");
                content = content.replace(/<a name='more'.*$/, "<div style='clear: both;'></div><div class='jump-link'><a href='"+link+"#more' title='"+entry.title.$t+"'>"+txtMore+"</a></div>");
              } else {
                var morelink = '<a href="javascript:void(0);" id="sticky'+postid+'-morelink" onclick="toggleStickyMore(\'sticky'+postid+'\');return false;" title="'+entry.title.$t+'">';
                morelink += txtMore+'</a><div class="stickymore" id="sticky'+postid+'">';
                morelink += '<a style="float:right;margin-left:1em;" href="javascript:void(0);" onclick="toggleStickyMore(\'sticky'+postid+'\');return false;" title="Hide text">' + txtHideMore + '</a>';
                content = content.replace(/\n/g, " ").replace(/<a name='more'.*?<\/a>/, morelink) + "</div>";
              }
            }
            strBuffer += content;
            if(showFooter) {
              var strComments = "";
              if(showCommentLink)
                strComments = "<a class=\"comment-link\" href=\"" + link + "#comments\">" + entry.thr$total.$t + " " + ((entry.thr$total.$t==1) ? txtComment : txtComments) + "</a>";
              strBuffer += "<div class=\"post-footer-line post-footer-line-1\"><div class=\"post-footer\">";
              if(showPostedBy) {
                var strPostedBy = txtPostedBy.replace('[user]', entry.author[0].name.$t);
                strPostedBy = strPostedBy.replace('[time]', '<a class="timestamp-link" href="'+link+'">'+postDate.getHours() + ":" + String("0"+postDate.getMinutes()).slice(-2)+'</a>');
                strBuffer += strPostedBy;
                if(showCommentLink)
                  strBuffer += " &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ";
              }
              if(showCommentLink && (showShareButtons || showEmailPost)) {
                strBuffer += strComments + " &nbsp; &nbsp; ";
                strComments = "";
              }
              if(isQuickEdit) {
                strBuffer += "<a href='http://www.blogger.com/post-edit.g?blogID="+blogid+"&postID="+postid+"&from=pencil' title='Edit Post'><img class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/></a> &nbsp; ";
              }
              if(showEmailPost) {
                emailPostUrl = "http://www.blogger.com/email-post.g?blogID="+blogid+"&postID="+postid;
                strBuffer += '<span class="item-action"><a href="'+emailPostUrl+'" title="Email Post"><img class="icon-action" height="13" src="http://img1.blogblog.com/img/icon18_email.gif" width="18"/></a></span> &nbsp; &nbsp; ';
              }
              if(showShareButtons) {
                strBuffer += "<div id='sticky"+postid+"-buttons' class='post-share-buttons goog-inline-block'>";
                sharePostUrl = "http://www.blogger.com/share-post.g?blogID="+blogid+"&postID="+postid;
                if(showShareEmail)
                  strBuffer += '<a class="goog-inline-block share-button sb-email" href="'+sharePostUrl+'&target=email" title="Email This" target="_blank"><span class="share-button-link-text">Email This</span></a>';
                if(showShareBlog)
                  strBuffer += '<a class="goog-inline-block share-button sb-blog" href="'+sharePostUrl+'&target=blog" onclick="\'window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;\' title="BlogThis!" target="_blank"><span class="share-button-link-text">BlogThis!</span></a>';
                if(showShareTwitter)
                  strBuffer += '<a class="goog-inline-block share-button sb-twitter" href="'+sharePostUrl+'&target=twitter" title="Share to Twitter" target="_blank"><span class="share-button-link-text">Share to Twitter</span></a>';
                if(showShareFacebook)
                  strBuffer += '<a class="goog-inline-block share-button sb-facebook" href="'+sharePostUrl+'&target=facebook" onclick="\'window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;\' title="Share to Facebook" target="_blank"><span class="share-button-link-text">Share to Facebook</span></a>';
                if(showSharePlusone)
                  strBuffer += '&nbsp;<div class="goog-inline-block dummy-container"><div class="g-plusone" data-size="medium" data-href="'+link+'" data-width="'+widthPlusone+'" data-annotation="inline"></div></div>';
                strBuffer += "</div>";
              }
              if(showLabels && (showPostedBy || showShareButtons))
                strBuffer += "<br />";
              if(showLabels) {
                if((entry.category.length > 1 && !showStickyLabel) || (entry.category.length > 0 && showStickyLabel)) {
                  strBuffer += txtLabels + " ";
                  for(var z = 0 ; z < entry.category.length ; z++) {
                    if(entry.category[z].term == stickyLabel && !showStickyLabel)
                      continue;
                    if(z) strBuffer += ", ";
                    strBuffer += "<a href=\"/search/label/" + encodeURIComponent(entry.category[z].term) + "\">" + entry.category[z].term + "</a>";
                  }
                }
                if(strComments != "")
                  strBuffer += " &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ";
              }
              strBuffer += strComments;
              strBuffer += "</div></div>";
            }
            strBuffer += "</div>";
        }
        strBuffer = strBuffer.replace(/<img width=.1. height=.1. [^>]+>/g, "");
        divSticky.innerHTML = strBuffer;
    }
    feedURI = "/feeds/posts/default/-/" + stickyLabel + "?max-results=25&redirect=false";
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+feedURI+'&alt=json-in-script&callback=renderStickies"></'+'script>');
    //]]>
    </script>
    </b:if>
    </b:if>

konfigurasi

Anda dapat mengedit gaya CSS untuk stickies-container dan sticky-post, dan mengkonfigurasi variabel javascript berikut:

stickyLabel: label untuk posting
maxStickies: jumlah maksimum posting yang ditampilkan sebagai sticky, 1-20 (jangan berlebihan)
showDate: Tanggal, Anda mungkin ingin menyembunyikannya
showTitle: menunjukkan judul posting atau tidak
showFooter: Anda mungkin ingin menyembunyikan seluruh footer
showPostedBy: Acara Posted By teks dalam footer
showCommentLink: menunjukkan link ke komentar di footer
showLabels: menunjukkan label pos di footer
showStickyLabel: juga menunjukkan label sticky dalam daftar label, atau menyembunyikannya
showEmailPost: Email tombol Posting
showShareButtons: menunjukkan kelompok sharebuttons atau tidak
showShareEmail: Tombol email show sharebuttons
showShareBlog: Tombol blog show sharebuttons
showShareTwitter: menunjukkan tombol twitter sharebuttons
showShareFacebook: menunjukkan tombol facebook sharebuttons
showSharePlusone: google plus tombol sharebuttons
widthPlusone: mengatur ukuran tombol google plus
txtComment: bentuk tunggal, yang digunakan dalam kalimat "1 komentar", hanya teks, tanpa nomor
txtComments: bentuk jamak, digunakan dalam kalimat "# comments", hanya teks, tanpa nomor
txtPostedBy: teks Diposkan oleh, memiliki variabel [user] dan [waktu]
txtLabels: teks sebelum daftar label
txtMore: "Read more» "teks untuk pemotong posting.
dynamicMore: melompat teks istirahat (setelah "more link") terbuka secara dinamis
txtHideMore: teks link untuk menyembunyikan "lebih banyak teks", jika dynamicMore digunakan (true)

Menggunakan jump break dalam posting sticky mungkin ide yang baik, sehingga posting sticky tidak menjadi terlalu tinggi. Dengan variabel pengaturan dynamicMore = true sisa posting sticky akan terbuka secara dinamis.

Anda dapat memindahkan deklarasi CSS style untuk bagian badan template jika Anda ingin, dan menambahkan lebih banyak gaya pada sticky post ini.

Semoga berguna...

Cara Membuat Sticky Post di blogger/blogspot


Cara Membuat Sticky Post di blogger/blogspot

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Blog Hatsaka. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Blog Hatsaka dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Columbia Mary pada tanggal Saturday, July 13, 2013