Posted by Evan SuhandA

.



evan Blog

memasang scroll bar pada postingan blogs

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.
 lihat dibawah ini:



#Cara pertama( memasang scroller box ke seluruh postingan )

Kode CSS  yang digunakan untuk membuatnya yaitu:
.post{       
     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;
     }

Atau pilih code di bawah yang sudah saya lengkapi dengan code CSS lain yang berfungsi untuk mempercantik tampilanya

.post-body{
       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.

  height: 200px;                   = untuk mengatur ketinggiannya
  background: #4c1130;     = menganti tampilan warna backroundnya


Truzz gimana caranya?
Caranya gini sob..!!

  1. Yang pastinya entE Login dulU ke BloGGeR Tunggu sampai halaman Dasbornya terbuka..!!!
  2. Kemudian KLIKL  Design/template. Tunggu beberapa saat hingga halaman baru terbuka.
  3. setelah halaman Design/template terbuka: KLIK Edit HTML
  4. Cari kode ]]></b:skin>, untuk mencari kode di halaman Edit HTML supaya lebih mudah dan lebih cepat Gunakan Ctrl+F 
  5. kemudian pilih salah satu style code CSS diatas tadi dan  tulis/letakkan kode CSS  tepat diatas code ]]></b:skin>.
  6. 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:

twiter follow

tulisan cursor cycle

black

Thanks To Visit mY BlogS