Pada sesi kali ini saya akan melanjutkan penjelasan tentang cara membuat speech bubbles di CSS3 seperti twitter part-2. Dan pada pejelasan di sini saya akan langsung lanjutkan dari sesi sebelumnya. Sampai di sini, teman-teman perlu untuk membuat panah kecil, dan dapat memodifikasi CSS tersebut untuk mengubah posisi / bentuk panah .
Berikut Kode nya :
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.twitter:after { content:" "; position:absolute; top:180px; left:135px; border-top-color:#efefef; border:20px solid transparent; } .twtr-hd, .twtr-ft {display: none;} .twtr-bd {font-family: arial;font-size:27px} .twtr-tweet {width: 700px; padding: 10px 10px 0px} |
Sekarang teman-teman sudah selesai dengan CSS nya ! sekarang teman-teman pindah ke bagian HTML yang agak pendek, berikut kode nya :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<div id="content"> <blockquote class="twitter"> <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: 'profile', rpp: 1, interval: 30000, width: 700, height: 100, theme: { shell: { background: 'none', color: '#ffffff' }, tweets: { background: 'transparent', color: 'rgb(30,30,30)', links: 'rgb(140,140,140)' } }, features: { scrollbar: false, loop: false, live: false, avatars: false, behavior: 'all' } }).render().setUser('User').start(); </script> </blockquote> </div> |
Jadi untuk memodifikasi nya supaya ini bekerja, berikut beberapa hal yang perlu teman-teman diketahui:
– Teman-teman harus memperhatikan tinggi dan lebar di dekat bagian atas, dan akan lebih baik mengaturnya sesuai dengan ukuran yang akan di gunakan.
– Untuk mengubah warna tweets, teman-teman dapat memodifikasi (color: rgb (30,30,30); ), teman-teman tidak perlu menggunakan nilai rgb untuk ini, bisa menggunakan nilai hex seperti #00ee22 jika mau. Seperti contoh di bawah ini :
1 2 3 4 5 6 7 8 |
tweets: { background: 'transparent', color: '#00ee22', links: 'rgb(140,140,140)' } }).render().setUser('Google').start(); }).render().setUser('Firefox').start(); |
Untuk kode akhirnya yang lengkap seperti kode di bawah ini :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<html> <head> <style type="text/css"> #content{ width: 700px; height: 150px; position:relative } .twitter { background:#efefef; padding:15px; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; width: 700px; height: 150px } .twitter:before { content:url(twitter.png); position:absolute; top:220px; left: 90px; } .twitter:after { content:""; position:absolute; top:180px; left:135px; border:20px solid transparent; border-top-color:#efefef; } .twtr-hd, .twtr-ft{display: none;} .twtr-bd {font-family: arial;font-size:27px} .twtr-tweet {width: 700px; padding: 10px 10px 0px} </style> </head> <body> <div id="content"> <blockquote class="twitter"> <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: 'profile', rpp: 1, interval: 30000, width: 700, height: 100, theme: { shell: { background: 'none', color: 'transparent' }, tweets: { background: 'transparent', color: 'rgb(30,30,30)', links: 'rgb(140,140,140)' } }, features: { scrollbar: false, loop: false, live: false, avatars: false, behavior: 'all' } }).render().setUser('User').start(); </script> </blockquote> </div> </body> </html> |
Sampai di sini penjelasan saya mengenai cara membuat speech bubbles di CSS3 seperti twitter, semoga bermanfaat.