Cara Memberi Scroll Box pada Artikel Terkait di Blogger

S

ebelumnya di blog ini telah dibahas mengenai cara memasang artikel terkait di blog. Bila kita sudah mempunyai artikel dengan label yang sama sebanyak lebih dari 25 buah misalnya, maka artikel-artikel yang ditampilkan akan terlihat panjang ke bawah sehingga terkesan memakan tempat. Nah, untuk menghemat ruangan pada area di bawah posting tersebut, kita dapat memberi atau membuatkan scroll box atau kotak berpenggulung pada widget artikel terkait tersebut.

Untuk membuat scroll box yang dimaksud, kita perlu menyisipkan kode tertentu dalam kode script widget artikel terkait tersebut. Kode yang dimaksud adalah <div style=margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;> dan </div>.

• height:200px merupakan tinggi scroll box sebesar 200 piksel, Anda dapat menggantinya sesuai selera Anda.
• overflow:auto jika banyaknya artikel terkait telah melebihi tinggi scroll box, maka akan terbentuk scroll atau penggulung secara otomatis.
• border:1px solid #ccc merupakan atribut untuk kotak atau box yang terbentuk dengan tebal 1 piksel bergaya solid dan berwarna #ccc, silakan disesuaikan bila Anda menginginkannya.

Bila kode tersebut disisipkan pada script artikel terkait maka hasilnya akan seperti di bawah ini.

<b:if cond=data:blog.pageType == &quot;item&quot;>
<div class=similar>
<!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** -->
<div class=widget-content related-by-cat>
<h3>Related Posts / Artikel Terkait :</h3>

<div style=margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;>
<div id=data2007/><br/><br/>
<div id=hoctro style=display:none;>
Widget by <u><a href=http://hoctro.blogspot.com>Hoctro</a></u> | <u><a href=http://www.jackbook.com/ title=Related Posts on Blogger Modified by JackBook.Com. Read More?>Jack Book</a></u>
</div>
<script type=text/javascript>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 50;
var maxNumberOfLabels = 40;

maxNumberOfPostsPerLabel = 40;
maxNumberOfLabels = 40;


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;data2007&#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>
</div>

</div>
</b:if>

Read More..

Cara Membuat Fungsi Scroll pada Daftar Komentar Blog

B

ila komentar-komentar yang telah diberikan oleh para pengunjung blog sudah cukup banyak, tentunya hal ini akan membuat daftar komentar menjadi memanjang ke bawah. Belum lagi ditambah komentar-komentar dari sang pemilik blog karena merespon komentar-komentar dari pengunjung tersebut. Hal ini membuat halaman blog menjadi sangat panjang karena sudah banyaknya komentar sehingga terkesan memakan tempat.

Untuk mengatasinya kita dapat menggunakan fungsi scroll pada daftar komentar tersebut seperti yang terlihat pada gambar di atas. Caranya adalah dengan menambahkan kode CSS pada HTML template blog kita. Berikut ini adalah langkah-langkah membuatnya. Cara di bawah ini masih menggunakan antarmuka Blogger yang lama.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat backup template. Gunanya untuk berjaga-jaga kalau nanti terjadi kesalahan dalam pengeditan, kita dapat dengan mudah mengembalikan template seperti semula.

4. Beri tanda centang pada Expand Template Widget.

5. Cari kode yang mirip-mirip dengan kode di bawah ini.

#comments h4 {

color:#666666;

font-weight:normal;

letter-spacing:0.2em;

line-height:1.4em;

margin:1em 0;

font-size:14px;

text-transform:none;

}

6. Kemudian letakkan kode berikut di atas kode tersebut.

#comments {

height:400px;

overflow:auto;

}

Sehingga susunan kodenya menjadi seperti di bawah ini.

#comments {

height:400px;

overflow:auto;

}

#comments h4 {

color:#666666;

font-weight:normal;

letter-spacing:0.2em;

line-height:1.4em;

margin:1em 0;

font-size:14px;

text-transform:none;

}

• height:400px; menunjukkan tinggi scroll sebesar 400 piksel. Anda dapat mengubahnya sesuai keinginan Anda.

7. Selanjutnya cari kode yang mirip dengan kode di bawah ini. Intinya cari kode yang ada id=comments-block-nya.

<b:if cond=data:post.numBacklinks != 0>

     <dl class=comments-block id=comments-block>

        <b:loop values=data:post.comments var=comment>

          <dt class=comment-author id=comment-author>

            <a expr_name=data:comment.anchorName/>

            <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>

                <i><data:comment.timestamp/></i>

              <b:include data=comment name=commentDeleteIcon/>

                </span>

          </dd>

        </b:loop>

      </dl>

  </b:if>

8. Lalu tambahkan kode <div style=overflow:auto; width:ancho; height:400px;> di atas kode <dl class=comments-block id=comments-block> dan tambahkan kode penutup </div> di bawah kode </dl> sehingga hasilnya akan menjadi seperti di bawah ini.

<b:if cond=data:post.numBacklinks != 0>

<div style=overflow:auto; width:ancho; height:400px;>

     <dl class=comments-block id=comments-block>

        <b:loop values=data:post.comments var=comment>

          <dt class=comment-author id=comment-author>

            <a expr_name=data:comment.anchorName/>

            <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>

                <i><data:comment.timestamp/></i>

              <b:include data=comment name=commentDeleteIcon/>

                </span>

          </dd>

        </b:loop>

      </dl>

</div>

  </b:if>

9. Klik tombol SIMPAN TEMPLATE.

10. Selesai dan lihat blog Anda.

Bila Anda ingin menambahkan border atau garis tepi pada fungsi scroll seperti yang terlihat pada screenshot di atas, maka tambahkan kode border:1px solid #ccc; setelah kode overflow:auto; sehingga susunan kodenya akan menjadi seperti di bawah ini.

#comments {

height:400px;

overflow:auto;

border:1px solid #ccc;

}

• border:1px solid #ccc; merupakan garis tepi atau border dengan ketebalan 1 piksel bergaya solid berwarna #ccc;

Read More..

Cara Mudah Menambahkan Scroll pada Komentar Blog

Jumlah komentar pada suatu artikel blog yang telah mencapai puluhan membuat tampilan memanjang ke bawah. Hal ini dapat membuat pengunjung berikutnya yang ingin memberikan komentar harus menggulung deretan komentar tersebut terlebih dahulu untuk menemukan kotak komentar. Bila tersedia link yang langsung mengantarkan pengunjung ke kotak komentar maka hal ini tidak begitu menjadi masalah. Namun, bila tidak tersedia link tersebut kita dapat menambahkan scroll atau penggulung pada kolom komentar tersebut. Selain dapat memudahkan pengunjung, adanya scroll ini juga bisa membuat blog terlihat simpel.

Kolom komentar dengan scroll.

Untuk menambahkan scroll pada komentar, kita dapat menggunakan kode CSS tertentu. Langkah-langkahnya dapat disimak di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template.

4. Cari kode untuk komentar yang biasanya ditandai dengan #comments-block{. Gunakan tombol Ctrl + F untuk memudahkan pencarian. Contoh kode lengkapnya seperti di bawah ini:

#comments-block{border:0px dotted #ccc;width:569px;margin:1.3em 0 1.5em;line-height:1.6em}

5. Kemudian hapus kode border:0px dotted #ccc; dan tambahkan kode max-height:300px;border:1px solid #eee;overflow:auto; sehingga hasilnya seperti di bawah ini:

#comments-block{max-height:300px;border:1px solid #eee;overflow:auto;width:569px;margin:1.3em 0 1.5em;line-height:1.6em}

Tinggi scroll adalah 300 px, tebal border 1 px, gaya border solid dan warna border #eee, poin-poin ini dapat diganti sesuai selera Anda.

6. Klik tombol SIMPAN TEMPLATE.

Read More..