Membuat Scoll Box di Komentar

Yeah, Sekarang 4idoru akan membagi cara membuat scroll box pada komentar. Kegunaannya untuk mempersingkat atau menghemat  halaman yang ada di blog.

Nah caranya cukup mudah sekali . ikuti langkah-langkah berikut ini:

·         Silahkan Login ke blogger.

·         Masuk ke dasbord blog dan pilih Template -> Edit HTML

Kode yang berwarna merah di bawah ini adalah kode yang anda tambahkan pada kode template anda.

<div class=scrollbox style="overflow:auto; height:400px; width:650px;">

.............................................

.............................................

.............................................

</div>

Cari kode yang mirip dengan kode yang berwarna Biru di bawah kemudian Tambahkan kode di atas dengan kode di bawah ini. sehingga seperti di bawah ini.

<div class="scrollbox" style="overflow:auto; height:400px; width:650px;">

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

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

<dt expr:class='"comment-author " + 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>

·         Bila sudah di pasang silahkan klik simpan.

Note :

height:400px : silahkan ganti angkanya untuk mengatur tinggi pada scroll box.

width:650px : silahkan ganti angkanya untuk mengatur lebar pada scroll box.

Selesai deh mudah kan ? dan Terima kasih telah membaca atau berkunjung di 4idoru dan sampai ketemu lagi di posting selanjutnya…

Read more »

Cara Membuat Box Scoll pada Archive di Blogger

Selamat Datang di 4idoru.

Kali ini 4idoru. membagikan cara membuat box scoll pada archive di blog. Box Scoll agar archive/arsip tidak menghabiskan tempas di home page nah langsung saja ke pembuatannya 

• Silahkan login 
• pada halaman dasbor, pilih template
• kemudian pilih Edit
• cari code berikut : <div id='ArchiveList'>  agar cepat gunakan Ctrl + F
• Bila ketemu taruh code ini <div style='overflow:auto; width:ancho; height:200px;'>  tepat di atas code <div id='ArchiveList'> 
• Kemudian tambahkan code </div>   sebelum kode  <b:include name='quickedit'/> 
• Dan silahkan di Simpan 
• Catatan : Anda harus memliki Widget Archive/Arsip pada blog anda. untuk menambahkan menu archive pilih Tata Letak klik tambah gadget pilih gadget Archive/arsip lalu klik oke.

• Bila masih binggung dengan tutorial di atas anda bisa lihat lebih jelas seperti ini : 

<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div></div>
  <b:include name='quickedit'/>
  </div>
</b:includable>

• width:ancho (Auto) : Panjang bisa anda ganti sesuai keinginan. Contoh width:200px
  height:200px          :Tingginya bisa anda ganti sesuai keinginan anda.
  
  
  
  
  Sekian dari posting kali ini tentang membuat box scoll di archive dan sampai bertemu di posting selanjutnya  Terimahkasih
  
  

Read more »

Cara Membagi Kolom Posting di Blogger

Selamat Datang di 4idoru.

Nah sekarang 4idoru akan men-sharing tentang Cara Membagi Kolom Posting di Blogger. Biasanya membagi kolom pada posting blogger di gunakan untuk membuat Daftar Isi pada blog biar terlihat lebih menarik atau lebih simple saja.

Langkah Cara Membagi Kolom Posting di Blogger:

• Login ke akun blogger masing-masing.
• Silahkan pilih Entri atau pilih Posting  yang di inginkan.
• saat di dalam Entri/Post terdapat 2 type Compose / HTML yang berada di atas kiri dan pilih HTML 
• Copas [Copy Paste] code berikut ini:

[Membagi kolom jadi 2]

<table cellpadding="10" cellspacing="10">

<tbody>

<tr>

<td align="justify" valign="top" width="250">Isi Posting </td>

<td align="justify" valign="top" width="250">Isi Posting </td>

</tr>

</tbody></table>

• Cellpadding : untuk mengatur tep tulisan.
• Cellspascing: untuk mengatur jarak kolom.
• Width : untuk mengatur lebar kolom posting.
• bila anda mau menambah kolomnya cukup mudah silahkan copy code berikut :

<td align="justify" valign="top" width="250">Isi Posting </td>

• dan paste di atas / di bawah code : <td align="justify" valign="top" width="250">Isi Posting </td>
• Maka akan tampilan codenya seperti ini:

[Membagi Kolom jadi 3]

<table cellpadding="10" cellspacing="10">

<tbody>

<tr>

<td align="justify" valign="top" width="250">Isi Posting </td>

<td align="justify" valign="top" width="250">Isi Posting </td>

<td align="justify" valign="top" width="250">Isi Posting </td>

</tr>

</tbody></table>

• Dan seterus seperti itu untuk menambahnya.

Nah, sangat mudah 'kan tutorial di atas ini !! dan sampai bertemu lagi di posting selanjutnya.

Terima kasih atas kunjungan anda di 4idoru.

Read more »

Membuat Auto Readmore pada Blogger

Selamat Datang di 4idoru.

Saya akan mem-sharing tentang Membuat Auto Readmore sebelum ke topik kita harus tau apa manfaat dari auto readmore ?

• Manfaat auto readmore juga untuk mempersingkat atau merapihkan artikel yang panjang, jadi postingan artikel anda akan tersusun rapi dengan hanya menampilkan gambar dan beberapa kalimat saja.

Nah sekarang anda sudah tau apa itu manfaat auto readmore bagi blogger. sekarang lanjut ke topik pembahasan Membuat Auto Readmore.

Langkah - Langkah Membuat Auto Readmore :

• Login ke akun blogger masing-masing.
• Silahkan pilih TEMPLATE >> EDIT.
• Cari code </Head> [Gunakan Ctrl + F untuk mempercepat pencarian]
• Bila sudah ketemu silahkan copy code di bawah ini dan paste tepat di atas code </head>

<!--ReadMore http://4idoru.blogspot.com-->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<style>

.post-body{text-align:justify;}

.post-body img{max-width:none;width:auto;}

.read-more{float:left; padding-top: 10px;}

.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}

.read-more a:hover{text-decoration:none;background:#666;}

.pic{border: 10px solid #fff;float:left;height:165px;width:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}

.grow img{height:165px;width:250px;transition: all 2s ease;}

.grow img:hover{width:400px;height:250px;}

</style>

<script type='text/javascript'>

var thumbnail_mode = &quot;yes&quot;; //yes

summary_noimg = 300; // Ganti angkanya sesuai keinginan

summary_img = 250; // Ganti angkanya sesuai keinginan

img_thumb_height = 165; Ganti angkanya sesuai keinginan

img_thumb_width = 250; Ganti angkanya sesuai keinginan

</script>

<script type='text/javascript'>//<![CDATA[

function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx =  s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}

//]]></script>

</b:if>

</b:if>

<!--Auto Read More Akhir-->

• Kemudian cari seperti di bawah ini :

<data:post.body/>

• Setelah ketemu hapus code diatas [ganti] lalu paster code di bawah ini: 

<!-- Auto read more Mulai -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
      <div class='read-more'>
      <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>
      </div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->

• Klik Simpan dan silahkan di lihat hasilnya ^.^

nah mudah 'kan membuat auto read morenya ? demikian dari 4idoru sampai bertemu lagi di kesempatan lain waktu. 

Terima kasih telah berkunjung di 4idoru.

Read more »