Menyembunyikan Scroll Archive dengan CSS

May 21, 2012

Menyembunyikan Scroll dengan CSS - Jarang posting membuat kepala pusing namun kali ini saya masih diberikan kesempatan luang waktu untuk mengisi sedikit postingan diblog simple ini, nah pada posting ini saya akan membahas tentang Bagaimana Cara Menyembunyikan Scroll dengan CSS seperti yang saya gunakan pada blog ini, scriptnya bukan buatan sendiri sih cuma ngambil dari blog tetangga hompimpaalaihumgambreng.blogspot.com.
Sedikit pegguna namun banyak manfaatnya, memang Archive Blog jarang yang menggunakan dikarenakan tidak disukai oleh Om Google karena dapat membuat dobel post, namun tenang saja saya punya trik agar dampak dari Archive Blog tidak membuat dobel post.

Gunakan kode dibawah ini dan letakkan diatas kode <b:skin>

<b:if cond='data:blog.pageType == "archive"'>

</b:if>

Kembali membahas pada judul diatas nah untuk lengkapnya bisa dilihat pada blog ini atau bisa dilihat pada gambar dibawah ini.

Cara Membuat Menyembunyikan Scroll dengan CSS

Langkah 1

Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Cheklist "Expand Template Widget"
Langkah 2
Gunakan ctrl F untuk mencari kode ]]></b:skin>
setelah ketemu lalu letakkan kode dibawah ini diatasnya

/* Scroll Archive

----------------------------------------------- */

.hidden-scrollbar {

background-color:transparent;

color:white;

overflow:hidden;

text-align:justify;

}

.hidden-scrollbar .inner {

height:250px;

overflow:auto;

margin:-9px -320px 0px 0px;

padding-right:300px;

}

Langkah 3
Lalu cari kode dibawah ini, kode dibawah adalah kode Arsip Blog

<b:includable id='main'>

<b:if cond='data:title'>

</b:if>

<b:if cond='data:style == "HIERARCHY"'>

<b:include data='data' name='interval'/>

</b:if>

<b:if cond='data:style == "FLAT"'>

<b:include data='data' name='flat'/>

</b:if>

<b:if cond='data:style == "MENU"'>

<b:include data='data' name='menu'/>

</b:if>

</div>

<b:include name='quickedit'/>

</div>

</b:includable>

Setelah ketemu lalu ganti dengan kode ini

<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content hidden-scrollbar'>
<div id='ArchiveList' class='inner'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>

Langkah terakhir
Klik simpan template dan lihat hasilnya

Cukup saja dari saya trimakasih untuk blog hompimpaalaihumgambreng, semoga bermanfaat.

Labels: Blog Design