Cara Membuat Blockquote Scroll Otomatis Dengan Css

62 Komentar


Cara Membuat Blockquote Scroll Otomatis. Yup, kali ini Mas Yusa akan sharing post yang di kategorikan Tips Ngeblog. Anda para blogger pasti sudah tidak asing lagi dengan Blockquote. Karena hampir semua blogger kalau ingin membagikan kode HTML maupun CSS atau lainya pakai blockquote, ada juga yang pakek Text area, malah ada yang gak pakek apa2.....(Waduh,bisa panjang tuh post).

Membuat blockquote scroll otomatis memiliki fungsi, yaitu menghemat tempat. Wah...bermanfaat sekalikan bagi blogger. Maka dari itu, kita langsung saja ke isi post. Karena jika dibahas lebih detail post ini akan panjang seperti ular seperti ular yang sangat berbisa sangat berbisa (Ups). Perhatikan cara di bawah :
  • Masuk ke akun blogger anda.
  • Pilih menu Rancangan->Edit HTML->Expand Template Widget
  • Ingat!!!jangan lupa Backup dulu bang templatenya.
  • Kemudian cari kode berikut (Ctrl + F) :
.blockquote {Bla..bla..bla...
  • Ganti isi kode yang didalam kurung kurawa / Bla...bla...bla dengan kode dibawah ini :
 background: #F2F2F2;
  margin: 0 25px 15px;
    padding: 10px 20px 10px 15px;
        border: dotted 2px #D8D8D8;
overflow:auto;
max-height:250px;
-webkit-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
-moz-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
  • Maka kode blockquote anda akan jadi seperti ini :
.blockquote {
    background: #F2F2F2;
    margin: 0 25px 15px;
    padding: 10px 20px 10px 15px;
        border: dotted 2px #D8D8D8;
overflow:auto;
max-height:250px;
-webkit-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
-moz-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
}
  •  Untuk yang tidak mempunyai kode :
.blockquote {bla...bla...bla
  • Maka langsung aja copy kode yang berada di bawah  "Maka kode blockquote anda akan jadi seperti ini" lalu taruh di atas ]]></b:skin>
  • Dan Simpan Template.
Dan lihat hasilnya. This is it..Cara Membuat Blockquote Scroll Otomatis ala Mas Yusa Blog.
Mari berkomentar.
Baca Peraturan Copy Paste !

Anda sedang membaca artikel tentang Cara Membuat Blockquote Scroll Otomatis Dengan Css dan anda bisa menemukan artikel Cara Membuat Blockquote Scroll Otomatis Dengan Css ini dengan url http://masyusa.blogspot.com/2012/07/cara-membuat-blockquote-scroll-otomatis.html, Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Blockquote Scroll Otomatis Dengan Css ini sangat bermanfaat bagi teman-teman Anda, namun jangan lupa untuk meletakkan link postingan Cara Membuat Blockquote Scroll Otomatis Dengan Css sebagai sumbernya. Jika tidak saya akan laporkan Google ! Yusa Syihab Akbar


62 comments

July 10, 2012 at 6:57 PM

blockquote keren ni kayanya sob, boleh coba..

July 10, 2012 at 7:26 PM

@cpakankBoleh sob.... :)

July 10, 2012 at 7:46 PM

mantapz nih, mau coba deh,,

July 10, 2012 at 7:49 PM

Masih newbie sob, contoh blovkquote nya mana ya sob..

harap di maklumin sob, asih newbie sob
hehehehe

July 10, 2012 at 8:15 PM

wahhh mantap nih.... bertambah lagi nih.... kumpulan code2 blog saya... terima kasih mas yusa....


kembali komentar ya mas...

July 10, 2012 at 8:22 PM

Wah, kalau blockquote swara belum pake mas...Ntar dicoba. Makasih infonya...

July 10, 2012 at 8:23 PM

@tmm999Silahkan sob... :)

July 10, 2012 at 8:23 PM

makasih ya, kongsi...

July 10, 2012 at 8:27 PM

@Ragil | SimpleCoba lihat kode kode html diatas..kode html diatas saya beri kurungan kotak,nah itu blockquote :)

July 10, 2012 at 8:27 PM

@Ehwansah JailaniOke sob.... :)

July 10, 2012 at 8:27 PM

@Edy SamsulSama sama sob... :)

July 10, 2012 at 8:28 PM

@sedutzoneSam sama sob... :)

July 10, 2012 at 10:21 PM

tips dari mas yusa memang selalu keren. :)

July 11, 2012 at 12:42 AM

numpang coba sob...

July 11, 2012 at 1:17 AM

@Saeful RahmanTerimakasih sob dah mampir n berceloteh di sini... :)

July 11, 2012 at 1:18 AM

@Shaq DerriSilahkan so... :)

July 11, 2012 at 1:47 AM

Mantep sob,tapi saya pake yang standard bawaan template aja,..hehe..
nice share :)

July 11, 2012 at 2:10 AM

ikutan nyoba ah Mas ... :)

July 11, 2012 at 2:27 AM

mantep dah...
nyoba ah..

July 11, 2012 at 2:54 AM

Wahhh...mantef tuh bang Yusa,sikat abizzzzzzz...ahhahahyyyy

July 11, 2012 at 5:12 AM

contohnya itu yang seperti di atas ya.. ?

July 11, 2012 at 6:52 AM

wah , mantap ada jga yg kayak ini :D

July 11, 2012 at 7:50 AM

Wah... harus dicoba nich... langsung praktek... :D

July 11, 2012 at 8:10 AM

@MisbahudinIya sob...bawaan template pasti sudah mecing dengan layout template itu sendiri... :)

July 11, 2012 at 8:11 AM

@EKA IKHSANUDINSilahkan sob... :)

July 11, 2012 at 8:11 AM

@tovaSilahkan sobat tova... :) Hati hati ya... :D

July 11, 2012 at 8:11 AM

@ICAH BANJARMASINWkwkwkw.... :D alay tuh... hehee

July 11, 2012 at 8:12 AM

@Ikhbal GusriIya sob...makasih dah berkunjung,.. :)

July 11, 2012 at 8:12 AM

@Dunia-Ku Dunia Penuh CintaOke sob... :) silahkan

July 11, 2012 at 8:58 AM

Thx share infonya sob...keren :)
Mav telat ksih coretan di sini hehe...

July 11, 2012 at 9:03 AM

@budi os 19Gpp sob... :) Thanks ya dah mampir... :)

July 11, 2012 at 3:27 PM

Klaw ane lebih senang yang pake text area sob :D
ane mae praktekin ini aja di blog percobaan :D

July 11, 2012 at 4:53 PM

Senang brknjung diblog mas yusa selalu dapt ilmu baru yang menarik..nice info..thanks sdah share..

July 11, 2012 at 6:54 PM

@MaxHahaha... :) Silahkan sob

July 11, 2012 at 6:54 PM

@MansyurSama sama sob... :) Makasih aja dah mampir.

July 11, 2012 at 11:15 PM

Infonya sangat menarik Mas Yusa, terima kasih sudah berkunjung...pada kesempatan ini saya tercatat sebagai follower ke-183 blog ini...Salam sukses

July 11, 2012 at 11:20 PM

wahh... ilmu baru nieh..
salam kenal ya..

July 11, 2012 at 11:42 PM

@ImronOke sob... :) Meluncur ke blog sobat untuk follow :)

July 11, 2012 at 11:42 PM

@Alul | al-ste |Iya sob... :)

July 12, 2012 at 12:25 AM

mantap sob.....
komen balik ea hehe :D

July 12, 2012 at 12:29 AM

nice info gan.. boleh deh kapan-kapan ane coba.. kebetulan templete ane yg sekarang yg ada di www.maruco27.com udah otomatis ^_^

July 12, 2012 at 12:46 AM

@Pondok MeranaOke... :)

July 12, 2012 at 12:46 AM

@Akmal JPwah... :) Begitu ya gan... :)

July 12, 2012 at 1:29 AM

cuba dolo ahh

July 12, 2012 at 6:26 AM

intinya hanya tambah kode seperti ini sob
overflow:auto;
max-height:250px;
:D
Nice share :)

July 12, 2012 at 7:51 AM

@tik tokSilahkan sob... :)

July 12, 2012 at 7:52 AM

@MisbahudinBener sob... :) Tapi disini ada bonusan style CSS shadow... :D

July 12, 2012 at 8:00 AM

@affanibnuIya sob... :) Bener

July 13, 2012 at 12:08 AM

Thanks Tricknya Bro Kunjungi Balik Gw...

July 13, 2012 at 12:29 AM

@Miki MaruSudah sob. :)

July 13, 2012 at 1:01 AM

nah ini dia ketemu mas , terima kasih tipsnya sangat terbantu dengan postingannya

July 13, 2012 at 2:24 AM

saya coba dulu ach.. kayak gimana ya jadinya.. :D

July 13, 2012 at 4:13 AM

@batik murahsam sama.. :)

July 13, 2012 at 4:13 AM

@Jelajah Dunia InformasiJadinya kayak blockquote ane bang. :D

July 15, 2012 at 7:03 PM

butuh demonya heeeheeeeeeeee

July 17, 2012 at 4:57 AM

nice info gan :)

July 21, 2012 at 9:42 AM

Matep sekali kang,,,,tutornya,,,,

August 4, 2012 at 9:51 PM

Widieeee Keren tuhhh

February 24, 2013 at 4:36 AM

mantab tutorialnya bung....
trima kasih...
ane sudah coba...
salam sukses selalu

January 1, 2014 at 1:55 AM

keren keren mau coba dulu ahh mas dan salam kenal :)

March 17, 2014 at 10:23 PM

@Yusa Syihab

betul apa yang anda katakan keren sekali .. :D

April 16, 2014 at 1:27 AM

nice info sobat :D

Post a Comment

Silahkan kalian berkomentar,namun tetap jaga kesopanan dengan tidak melakukan komentar spam (•͡˘˛˘ •͡)┌П┐ .
Untuk yang tidak mempunyai akun apapun,anda bisa gunakan Anonim (✿◠‿◠)...
Untuk membalas komentar/reply akan keluar Pop Up, jangan hapus kode yang ada di kotak komentar
\\▼▼▼| |▼▼▼| |▼▼▼| |▼▼▼| |▼▼▼| |▼▼▼| |▼▼▼//

Welcome to: Mas Yusa Blog | Twitter: Yusa_Syihab & Google+: Yusa Syihab
 
Follow Me

English
Japanese
Korean
Arabic
Chinese Simplified

Kembali Ke Atas Copyright © 2012 | Template Platinum Theme Modified by Mas Yusa