posted by: irv4n s@ndEr
Cara memBuat
Scroller Bar pada Postingan Blog
Jika blog
anda yang dipenuhi banyak content / isinya atau bahkan mungkin postingan anda
amat terlalu panjang sehingga membuat laman blog menjadi penuh penggunaan scroller
box menjadi salah satu solusinya, Karena
scroller box merupakan salah satu media penampung content atau lainya yang bisa
diatur ketinggiannya dalam ukuran yang sama sesuai keinginan andA.dengan
penggunaan ini anda dapat menghemat / memperkecil ukuran isi atau content pada
blog anda sehingga tidak banyak memakai tempat pada laman blog andA. Pemasangan scroller box ini pada intinya bisA
andA letakkan dimana sajA,di hAl sidebar widget ok,,,,di postingan juga ok,
dimana-manapun juga ok,pokoknya semua
serba ok haaaaa!!!!
Apakah andA
pernAh browsing dan melihat halaman widget blog yang memakai scroller box? nah kali
ini gua postingkAn carA pemasangannyA ,namun
kita pasang/tempatkan di postingan blog…..
samplenya sepErti postingan blog gua tu!!
Jika anda
ingin menampilkan banyak postingan pada halaman utama blog anda namun anda di
hadapi dengan keterbatasan tempat karena postingan anda terlalu panjang. Don’t
worry semua jadi rebeeezzz,ets maksudnya beres….!! Anda tetap akan bisa
menampilkan banyak postingan koq ,asalkan anda memasang scroller bar pada postingan yang akan membuat halaman
posting dapat diatur sama di semua posting blog andA.
Jadi, Apakah
andA tertArik memasAngnya?
Jika iya, ikuti totur saya berikut ini:
Untuk membuat
scroller bar anda Hanya diminta untuk menambahkan sedikit kode CSS yang mudah dan sederhana ajA.
Oh iya kali
ini guA bikin 2 (dua) cara pemasangan dengan style yang berbeda.
#Cara pertama( memasang
scroller box ke seluruh postingan )
Kode CSS yang digunakan untuk membuatnya yaitu:
.post{
max-height:350px;
overflow:auto;
}
max-height:350px;
overflow:auto;
}
Atau pilh code di bawah yang sudah saya lengkapi dengan code CSS
lain yang berfungsi untuk mempercantik tampilanya:
.post{
height: 200px;
overflow: auto;
margin: 20px 4px
10px;
padding: 15px
8px;
background:
#4c1130;
color: #666;
border: 2px solid
#555;
border-radius:
6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
opacity: 0.4;
filter:alpha(opacity=40);
-o-transition: all
ease-in 1.2s;
-moz-transition:
all ease-in 1.2s;
-webkit-transition: all ease-in 1.2s;
}
#Cara kedua( memasang
scroller box hanya dalam artikel postingan tidak termasuk judul )
Kode CSS yang digunakan untuk membuatnya yaitu:
.post-body{
max-height:200px;
overflow:auto;
}
max-height:200px;
overflow:auto;
}
Atau pilih code di bawah yang sudah saya lengkapi dengan code
CSS lain yang berfungsi untuk mempercantik tampilanya
.post-body{
height: 200px;
height: 200px;
overflow: auto;
margin: 20px 4px
10px;
padding: 15px
8px;
background:
#4c1130;
color: #666;
border: 2px solid
#555;
border-radius:
6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
opacity: 0.4;
filter:alpha(opacity=40);
-o-transition: all
ease-in 1.2s;
-moz-transition:
all ease-in 1.2s;
-webkit-transition: all ease-in 1.2s;
}
Keterangan/Catatan
:
Ente bisa mengatur
ketingiannya dengan cara menggAnti kode
yang berwarna kuning sesuai dengan ukUrAn yang entE inginkan.
background: #4c1130; = menganti tampilan warna backroundnya
Truzz gimana
caranya?
Caranya gini
sob..!!
- Yang pastinya entE Login dulU ke BloGGeR Tunggu sampai halaman Dasbornya terbuka..!!!
- Kemudian KLIKL Design/template. Tunggu beberapa saat hingga halaman baru terbuka.
- setelah halaman Design/template terbuka: KLIK Edit HTML
- Cari kode ]]></b:skin>, untuk mencari kode di halaman Edit HTML supaya lebih mudah dan lebih cepat Gunakan Ctrl+F
- kemudian pilih salah satu style code CSS diatas tadi dan tulis/letakkan kode CSS tepat diatas code ]]></b:skin>.
- save tamplate.
Lihatlah contoh di bawah ini supaya entE tidak bingung
:
saya ambil contoh menggunakan code css cara pertama maka posisi penempatan code terlihat seperti dibawah ini.
.post{
height: 200px;
overflow: auto;
margin: 20px 4px 10px;
padding: 15px 8px;
background: #4c1130;
color: #666;
border: 2px solid #555;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
opacity: 0.4;
filter:alpha(opacity=40);
-o-transition: all ease-in 1.2s;
-moz-transition: all ease-in 1.2s;
-webkit-transition: all ease-in 1.2s;
}
]]></b:skin>.
Yang terakhir
KLIK Simpan Template dan lihat hasilnya creng-creng ahaa sudah jadikan,
et tunggu dulu masih ada langkah yang selanjutnya yaitu give me one your like
button and your comment thanks( berikan saya satu tombol like dan tinggalkan
komentar enTe, terima kasih) .
0 komentar:
Posting Komentar