Cara Membuat Scrolling

Sebagian besar postingan pada blog ini merupakan jawaban saya kepada sahabat blogger yang bertanya tentang tutorial blog khususnya. Seperti kemarin pada salah satu komentar pada Cara Membuat Related Post ada sahabat blogger yang bertanya kepada saya...berikut saya publish dengan image dibawa ini:

                           

dan ini jawaban saya:

Baiklah, saya tidak akan banyak berbasa-basi.. berikut saya bahas tentang cara membuat scrolling pada related post dan saya harap tutorial berikut juga akan bermanfaat buat anda semua. Oya.. seperti biasa, saya akan memberikan bonus berupa uang $50000 disini yang artinya bukan scrolling pada related post saja yang akan saya bahas tetapi juga tentang scrolling pada komentar dan cara membuat menu scrolling.. Penasaran dengan scrolling yang akan saya bahas? berikut saya share semuanya dan sekali lagi semoga bermanfaat dan membantu sahabat blogger semua dalam aktifitas bloggingnya.. :)

Cara Membuat Menu Scroll

Scroll memang menghemat space pada blog anda, seperti halnya pada daftar isi atau menu blog anda. Hal ini banyak dipakai oleh blogger yang memiliki daftar isi berupa panduan-panduan dan lain sebagainya dan kurang lebih seperti pada contoh berikut ini. 

• Cara Membuat Blog
• Cara Setting Blog
• Cara Setting Dan Download Template
• Bikin Readmore Otomatis
• Bikin Readmore Dengan Icon Image
• Cara Membuat Floating Image (Gambar Melayang)
• Cara Membuat Label Blogumus (Berputar)
• Cara Merubah Background Postingan
• Cara Pasang Signature otomatis Disetiap Postingan
• Cara Menapilkan Hanya Judul Posting Ketika Label Diklik
• Cara Membuat Background Pada Judul Posting Ketika label Diklik
• Cara Membuat Huruf Besar Pada Postinga (Style Koran)
• Cara Membuat Menu DTree
• Cara Membuat Tabel Warna
• Cara Membuat Kode Script Pada Postingan
• Cara Membuat Menu Tab View
• Cara Membuat Kode Script Pada Postingan
• Cara Pasang Sexy Social Bookmark
• JQuery Pada Menu Tab View
• JQuery Pada Multi Kolom Footer
• Mempercantik blockquote
• Mempercantik Icon Pada Kotak Komentar
• Recent Post Thumbnail Spy
• Macam-macam Related Post

So, bagaimana cara membuat sob? Untuk membuatnya sangat mudah, Anda hanya perlu Copas (Copy-paste) enak ya.. :).

• Login ke Blogger.com
• Kemudian Tata Letak
• Pilih Add Gadget/ Tambah Elemen Halaman
• Pilih HTML/JavaScript dan copas kode berikut pada konten

<div style="padding-right: 10px; padding-left: 10px; padding-bottom: 10px; overflow: auto; width: 255px; padding-top: 10px; height: 141px" 1px="1px" solid="solid">
<ul>
<li><a href="http://rasiqzonetwork.blogspot.com/2009/08/bikin-blog-di-blogger.html">Cara Membuat Blog</a></li>
<li><a href="http://rasiqzonetwork.blogspot.com/2010/01/cara-setting-blog-di-blogger.html">Cara Setting Blog</a></li>
<li><a href="http://rasiqzonetwork.blogspot.com/2010/01/cara-memilih-dan-download-template.html">Cara Setting Dan Download Template</a></li>
</ul>
</div>

• Kode berwarna merah ganti dengan URL daftar menu anda
• Jangan lupa di SAVE dan hasilnya akan seperti contoh diatas.

Scrolling Pada Related Post
Jika pada blog anda yang kaya akan konten dan mungkin kontennya saling berhubungan misalnya pas membuka salah satu artikel, related postnya banyak banget dan panjang sekali maka tutorial berikut akan membantu anda memperpendek related post yang panjang tadi tanpa mengurangi isi yang akan ditampilkan. Kurang lebih nanti hasilnya akan seperti gambar berikut:

• Dalam keadaan login
• Pada Tata Letak Pilih Edit HTML
• Centang Expand Widget 
• Copas kode berikut dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Artikel Terkait:</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 listEntries10undefinedjson) {
var ul = document.createElementundefined&#39;ul&#39;);
var maxPosts = undefinedjson.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for undefinedvar i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for undefinedvar k = 0; k &lt; entry.link.length; k++) {
if undefinedentry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElementundefined&#39;li&#39;);
var a = document.createElementundefined&#39;a&#39;);
a.href = alturl;
ifundefineda.href!=location.href) {
var txt = document.createTextNodeundefinedentry.title.$t);
a.appendChildundefinedtxt);
li.appendChildundefineda);
ul.appendChildundefinedli);
}
}
for undefinedvar l = 0; l &lt; json.feed.link.length; l++) {
if undefinedjson.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substrundefinedhomeUrl3.length+13);
var k;
for undefinedk=0; k&lt;20; k++) label = label.replaceundefined&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNodeundefinedlabel);
var h = document.createElementundefined&#39;b&#39;);
h.appendChildundefinedtxt);
var div1 = document.createElementundefined&#39;div&#39;);
div1.appendChildundefinedh);
div1.appendChildundefinedul);
document.getElementByIdundefined&#39;albri&#39;).appendChildundefineddiv1);
}
}
}
function search10undefinedquery, label) {
var script = document.createElementundefined&#39;script&#39;);
script.setAttributeundefined&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttributeundefined&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChildundefinedscript);
}
var labelArray = new Arrayundefined);
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 undefinedvar i = 0; i &lt; labelArray.length; i++)
if undefinedlabelArray[i] == textLabel) test = 1;
if undefinedtest == 0) {
labelArray.pushundefinedtextLabel);
var maxLabels = undefinedlabelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if undefinednumLabel &lt; maxLabels) {
search10undefinedhomeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPostundefined);</script>
</div>
</b:if>

• Selanjutnya Copas kode berikut diatas kode ]]></b:skin> 

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

• Terakhir Save Template

Scrolling Pada Komentar
Tutorial berikut cocok banget buat blogger yang blognya kebanjiran komen tiap hari atau yang memiliki komentar pada tiap artikel sampai 200an lebih. Kapan ya..blog ini seperti itu.. :)

 
Baiklah, berikut tutorialnya...

• Langkah-langkahnya seperti pada Scrolling related post diatas
• Sisipkan kode 1 sebelum dan setelah kode 2:

KodePertama:

<div style='overflow:auto; width:ancho; height:300px;'>
.......
</div>

Kode Kedua:

<dl 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'>
            <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>
          <b:if cond='data:comment.author == data:post.author'>
<dd class='owner-Body'>
<p><data:comment.body/></p>
</dd>
<b:else/>
          <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>
</b:if>
          <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> 

Kurang lebih akan seperti ini:

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

<dl 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'>
            <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>
          <b:if cond='data:comment.author == data:post.author'>
<dd class='owner-Body'>
<p><data:comment.body/></p>
</dd>
<b:else/>
          <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>
</b:if>
          <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>

• Selanjutnya Save Template

Note:

• Kode berwarna merah adalah kode yang disisipkan
• Pada width dan heigth silahkan diganti sesuai selera anda
• Semoga bermanfaat..!!!

Share on Google Plus

About Admin

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.