Jan 28 2009
Pada tulisan saya kemaren bagaimana pentingnya sebuah perubahan dalam semua hal, dan akirnya saya sedikit mengubah style tulisan pada setiap postingan saya dengan 3 style yang berbeda. Tiga style tersebut adalah sub title, drop cap dan pullquote. Tulisan kali ini saya hanya ingin berbagi bagaimana membuat drop cap dan pullquote di blog sampean.
Drop cap
Maaf saya ndak ngerti banyak tentang apa itu css, dalam kesempatan ini saya hanya mengambil dari berbagai sumber salah satunya dari sini dan tentunya sedikit penyesuaian pada hasil akir di blog sampean nantinya. Coba sampean copy code css di bawah ini dan copy pada file atau letak css di blog sampean berada.
.drop_cap {padding: 0.17em 0.08em 0.05em 0;font-size: 3.4em;line-height: 0.6em;color: #000;float: left;}
.post .drop_cap {padding: 0.17em 0.08em 0.05em 0;font-size: 3.4em;line-height: 0.6em;color: #000;float: left;}
Lalu cara untuk memakainya hanya cukup menulis < span class=”drop_cap”>T< /span > disetiap awal postingan atau di mana sampean ingin menempatkan huruf yg ingin di posisikan sbg drop cap.
Pullquote
Nah selanjutnya sebuah elemen yang sering sampean lihat di majalah-majalah ataupun koran. Pullquote, disamping fungsinya sebagai penegas, penjelas, selipan motivasi atau apapun itu, juga bisa membuat pembaca tertarik membaca tulisan kita. Seperti halnya cara drop cap, kali saya juga hanya menambahkan style css berikut ini.
“Keteguhan hati merupakan elemen penting untuk meraih kesuksesan. Jika sampean mengetuk pintu dengan cukup kuat dan keras, sampean akan pasti berhasil membangunkan seseorang”
henry wadsworth lohgfellow
blockquote.left {
width: 200px;
margin: 5px 15px 5px 0;
font-size: 1.4em;
text-align: center;
color: #abafb9;
background: none;
border: none !important;
padding: 0 !important;
float: left;
}
blockquote.right {
width: 200px;
margin: 5px 15px 5px 0;
font-size: 1.4em;
text-align: center;
color: #abafb9;
background: none;
border: none !important;
padding: 0 !important;
float: right;
}
Cara untuk memasukan di setiap postingan hanya dengan menulis code ini di setiap dimana pullquote tsb akan di posisikan, < blockquote class=”left”>tulisan ada di sini< /blockquote >, jika ingin di posisi kanan tinggal ganti left ke right saja. Sumber dr sini
Untuk yang memakai wordpress, sebenarnya sudah ada plugin kusus untuk menangani pullquote ini. plugin bisa di dapatkan di sini. Namun menurut saya, selama manual masih bisa kenapa memakai plugins
kasian blog banyak plugins yg bekerja maka juga akan kecapekan.
Happy blogging kawan.
Ruang ini lepas dr makna hidupku sendiri. Ruang ini bukan sekedar goresan tidak juga harian.Disaat diriku membutuhkan tempat, blog ini menjadi ruang untuk bersuara terkadang juga diam. selengkapnya »
pertamax dan langsung mencoba
andi felanis last blog post..Jembatan Barelang
Reply
weks.. request langsung di paparkan habis habisan.. matur suwun mas geblek.. moga dilimpahkan rejekinya….
hehhehe
Reply
Geblek Reply:
January 29th, 2009 at 7:33:05 am
amin, silahkan di praktekan bos
Reply
tops bgt nih
putragos last blog post..Test Kepribadian
Reply
makin penuh pernak pernik aja nih blog
Lowongan Kerjas last blog post..Hayden Panettiere Exposed!
Reply
bemain main dengan CSS
Reply
Mas Jokko,
Di tunggu jadwal Kopdar lagi!
Sy tuan rumah.
Thanks & Wassalam
Ria
Reply
Nanti di postingan berikutnya saya coba sambil mengutip beberapa kata mutiara
Reply
manteb
nkurniawn83s last blog post..A Mushroom On Bamboo
Reply
Wah, keren banget nih, cobain ah……..
rotyyus last blog post..?????????????????????????? ????
Reply
Mantap banget, thx atas tips-nya yang sangat berguna. Hidup blogger Indonesia
itcs last blog post..Aplikasi Alternatif Open Source Populer
Reply
Thankz Mas Joko For D Visit…
Tutorin Sy Donkz Maz…
Kpn Nich Bisa Jumpa???
Salam
Brian Joes last blog post..Gw lagi Ngoverin Lagu Andra n BB (Lagi dan Lagi…)
Reply
Geblek Reply:
February 1st, 2009 at 6:23:21 pm
tadi kita habis kopdar lumayan rame juga kok
Reply
Good artikel bos.. turut menyimak
moniques last blog post..10 Information of Cancer Need to be Known (Part I)
Reply
thanks atas infonya
joes last blog post..Liem Swie King, King Smash
Reply
Wah, makin mirip majalah style blog kita dgn cara ini. Thx ya sharingnya..
Jiewas last blog post..Sop Konro di Ujung Soerabaja
Reply
huebaat . . . huebaaat blognya, dan perlu di tularkan dan diaplikasikan bagi mereka yang sangat berminat secara riil atau dengan model works shop . . . .. . . lewat kopdar begitu bung.
bestfasts last blog post..Bengawan Solo dan Madiun Meluap Ngawi Banjir!!
Reply
Nanti coba dipraktekkan. Thanks anyway….
Goodbabys last blog post..14 Reasons why Baby crying
Reply
[...] Original post by Geblek [...]
http://www.jokosupriyanto.com – cool sitename man)))
Reply
css tuh apaan ya? maaf saya blogger pemula nih…
arsyil.blogspot.com
Arsyils last blog post..PESAN BUAT ANAK PANGKALAN BUN
Reply
Geblek Reply:
February 24th, 2009 at 8:03:11 pm
coba baca disini bos http://en.wikipedia.org/wiki/Cascading_Style_Sheets
Reply
Wah makasih banget atas infonya…. sangat bermanfaat sekali. saya langsung ke TKP aja ya…
buJaNGs last blog post..Tentang Kompetisi Blog
Reply
sip deh mesti blum dicoba
Reply
mantapp abisssssssssss… makasih mas untuk ilmunya
salam kenal ya
fazas last blog post..fren…(finally…)
Reply
thanx ya tentang ilmunya……………
Reply
Was, tipnya ok nih… bias Artikel di blog tidak monoton/ngebosenin… thx yah mas…
Reply
SA SUKA ARTIKELNYA. NANTI JADI BAHAN PRAKTEKKU THANKS
Reply
wah …mas joko hebat,aku bloger pemula mas trims infonya
tapi minta saran bogku kok belum terindeks di google ya…bagaimana mas trims
Reply
Geblek Reply:
November 18th, 2009 at 7:45:05 am
posting terus mas, rajin blogwalking, daftar manual di search engine bila perlu. semoga membantu dan tetap semangat
Reply
wahh matep gan thnks info ya…
n numpang mapir nie..
.-= finux (info IT)´s last blog ..Linux Basic Command (Perintah Dasar Linux) =-.
Reply