Jumat, 25 Maret 2011

Membuat Related post fungsi scrolling


Barangkali kebanyakan master-master blogger tidak asing lagi dengan article ini. dan pasti udah banyak yang memakai dan mempostingnya juga. walaupun begitu saya tetap memposting cara membuat related post fungi scrolling. Dengan mengaktifkan fungsi scrolling pada widget related posts maka pembaca tidak lagi merasa terganggu dengan artikel-artikel terkait yang terlalu kepanjangan ke bawah. nah ada yang tertarik dengan related post yang satu ini? ikuti langkah-langkah di bawah ini. Untuk lebih jelas nya lihat contoh di bawah ini :
  • Log ini dulu ke blogger
  • Tata letak kemudian Edit HTML
  • Centang kotak kecil "Expand Template Widget"
  • Cari kode ]]></b:skin>
  • Kemudian letakkan kode di bawah ini persis di atas ]]></b:skin>
    /* Related post J_Putra
    ----------------------------------- */
    .rbbox{border: 1px solid #D8D8D8;
    padding: 5px;
    background-color: #E0F8E0;
    -moz-border-radius:5px;
    margin:5px;}
    .rbbox:hover{background-color: #EFFBEF;}
  • Setelah itu cari kode<p><data:post.body/></p>
  • Copy paste kode di bawah ini setelah kode <p><data:post.body/></p>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <H2>Related Post:</H2>
    <div class='rbbox'>
    <div style='margin:0;
    padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
    <div id='albri'/><script type='text/javascript'>var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;var maxNumberOfPostsPerLabel = 4;var maxNumberOfLabels = 10;maxNumberOfPostsPerLabel = 50;maxNumberOfLabels = 3;function listEntries10(json) {var ul = document.createElement(&#39;ul&#39;);var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;for (var i = 0; i &lt; maxPosts; i++) {var entry = json.feed.entry[i];var alturl;for (var k = 0; k &lt; entry.link.length; k++) {if (entry.link[k].rel == &#39;alternate&#39;) {alturl = entry.link[k].href;break;}}var li = document.createElement(&#39;li&#39;);var a = document.createElement(&#39;a&#39;);a.href = alturl;if(a.href!=location.href) {var txt = document.createTextNode(entry.title.$t);a.appendChild(txt);li.appendChild(a);ul.appendChild(li);}}for (var l = 0; l &lt; json.feed.link.length; l++) {if (json.feed.link[l].rel == &#39;alternate&#39;) {var raw = json.feed.link[l].href;var label = raw.substr(homeUrl3.length+13);var k;for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);var txt = document.createTextNode(label);var h = document.createElement(&#39;b&#39;);h.appendChild(txt);var div1 = document.createElement(&#39;div&#39;);div1.appendChild(h);div1.appendChild(ul);document.getElementById(&#39;albri&#39;).appendChild(div1);}}}function search10(query, label) {var script = document.createElement(&#39;script&#39;);script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);document.documentElement.firstChild.appendChild(script);}var labelArray = new Array();var numLabel = 0;<b:loop values='data:posts' var='post'><b:loop values='data:post.labels' var='label'>textLabel = &quot;<data:label.name/>&quot;;var test = 0;for (var i = 0; i &lt; labelArray.length; i++)if (labelArray[i] == textLabel) test = 1;if (test == 0) {labelArray.push(textLabel);var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?labelArray.length : maxNumberOfLabels;if (numLabel &lt; maxLabels) {search10(homeUrl3, textLabel);numLabel++;}}</b:loop></b:loop></script></div><script type='text/javascript'>RelPost();</script>
    </div>
    </b:if>
    <span style="gt;Powered by <a href="http://jayaputrasbloq.blogspot.com/2009/08/membuat-related-post-fungsi-scrolling.html">J_Putra Widgets </a></span>
  • Rubah tulisan berwarnah merah dengan kata yang anda inginkan
  • Setelah itu simpan template anda dan lihat hasilnya
Selamat mencoba.......

cara membuat Related post fungsi scrolling, Related post fungsi scrolling, memasang Related post fungsi scrolling, langkah menambah Related post fungsi scrolling di blog, tutorial membuat Related post fungsi scrolling di blogspot.

Tidak ada komentar:

Posting Komentar