Cara Membuat Artikel Terkait Dengan Scroll

Cara Membuat Artikel Terkait Dengan Scroll,artikel terkait atau leleated post banyak yang sudah menggunakannya,namun ga ada salahnya kalau saya posting kembali walaupun dengan kata kunci ini sangat banyak yang memakainya,nah untuk itu siapa tau saya share ulang bisa mengikuti jejak-jejak blog yang lain yang sangat banyak itu siapa tau saja saya juga ada di urutan mereka.
Yuk kita langsung saja ke cara pembuatannya.


1.  Masuk Blog .
2.  Edit HTML dan centang Exspand Template
3.  Cari Kode ]]></b:skin> supaya gampang ketemu pake Ctrl "F"
4.  Pasang Kode dibawah ini dan letakkan persis diatas ]]></b:skin>.


.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}



Langkah selanjutnya :
1.  Cari kode <data:post.body/>.
2.  Paste Kode dibawah ini, dan pasang persis dibawah kode <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<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 = 10;
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>

Setelah itu save saja,dan lihat hasilnya.Semoga bermanfaat.

Cara Membuat Show Hide Komentar Dengan Javascrift

Cara Membuat Show Hide Komentar Dengan Javascrift,show hide dalam istilah blogger pasti sudah tidak asing lagi.namun kebanyakannya komentar show hide ini banyak di dominasi dengan kode scrift jqury.nah bagi sobat yang kepingin membuat kotak komentar show hide nya nggak pakai jquery ikutilah langkah-langkah di bawah. Pertama,masuk ke Dashboard, lalu Tata Letak, kemudian pilih tab Edit HTML.
Lalu contreng check box tulisan Expand Widget Templates, setelah itu cari kode:.

</head>

Setelah ketemu letakkan kode di bawah ini tepat di atas </head>

<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Show Comments";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide Comments";
}
}
</script>

Setelah itu cari kode berikut:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
        <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
          <b:if cond='data:comment.favicon'>
            <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
          </b:if>
          <a expr:name='data:comment.anchorName'/>
          <b:if cond='data:blog.enabledCommentProfileImages'>
            <data:comment.authorAvatarImage/>
          </b:if>
          <b:if cond='data:comment.authorUrl'>
            <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
          <b:else/>
            <data:comment.author/>
          </b:if>
          <data:commentPostedByMsg/>
        </dt>
        <dd class='comment-body'>
          <b:if cond='data:comment.isDeleted'>
            <span class='deleted-comment'><data:comment.body/></span>
          <b:else/>
            <p><data:comment.body/></p>
          </b:if>
        </dd>
        <dd class='comment-footer'>
          <span class='comment-timestamp'>
            <a expr:href='data:comment.url' title='comment permalink'>
              <data:comment.timestamp/>
            </a>
            <b:include data='comment' name='commentDeleteIcon'/>
          </span>
        </dd>
      </b:loop>
</dl>


Untuk mempermudah pencarian kode gunakan Ctrl+F pada keyboard sobat.
Jika sudah ketemu, gantilah kode di atas dengan kode dibawah ini :


<a href='javascript:toggle();' id='displayText'>Show/Hide Comments</a>
<div id='toggleText' style='display: none;'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
 <b:if cond='data:comment.favicon'>
   <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
 </b:if>
 <a expr:name='data:comment.anchorName'/>
 <b:if cond='data:blog.enabledCommentProfileImages'>
   <data:comment.authorAvatarImage/>
 </b:if>
 <b:if cond='data:comment.authorUrl'>
   <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
 <b:else/>
   <data:comment.author/>
 </b:if>
 <data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
 <b:if cond='data:comment.isDeleted'>
   <span class='deleted-comment'><data:comment.body/></span>
 <b:else/>
   <p><data:comment.body/></p>
 </b:if>
</dd>
<dd class='comment-footer'>
 <span class='comment-timestamp'>
   <a expr:href='data:comment.url' title='comment permalink'>
     <data:comment.timestamp/>
   </a>
   <b:include data='comment' name='commentDeleteIcon'/>
 </span>
</dd>
</b:loop>
</dl>
</div>

Nah sudah selesai,tapi sebelum melihat hasilnya di preview dulu kalau sudah tidak ada erorr silahkan anda save.sekian dulu deh tutorial cara membuat Cara Membuat Show Hide Komentar Dengan Javascrift kali ini semoga bermanfaat dan selamat mencoba dan semoga berhasil.