Widget SMS dengan CSS3

Sebuah trend baru agaknya memang harus diikuti sepanjang bermanfaat bagi pengunjung. Satu lagi yang lagi
banyak penyuka! Widget SMS Gratis! Layanan SMS tanpa bayar yang membuat siapapun boleh kirim SMS sesuka hati tanpa bayar! Hooo ho .... Siapa yang nolak? Sampeyan mau? He... heh ....
Ada satu catatan yang sedikit membuat hati "agak kurang sreg" dengan widget baru ini. Tampilannya yang
terkesan apa adanya sungguh membuat sedikit kekecewaan. Yah widget semenarik ini kenapa nggak dibuat lebihkeren. Yap , stidak-tidaknya klo dipajang di blog nggak justru membuat tampilan tambah amburadul gitu, lhoh!
Heh ... heh ... Tapi nggak usah kuwatir, nggak usah bingung. Nih, ada sebuah auto scroller yang khusus aku
buat untuk mempercantik tampilan si widget SMS gratis. Dengan auto scroller yang menggunakan CSS3

border-radius, CSS3 drop-shadow/box-shadow dan CSS transition serta bebeapa kode CSS lain, tampilan widgetnggak lagi terlihat "ndeso"! Ho .... sampeyan nggak percaya?! He ... eh ... Emang dasar! Klo nggak lihat barangnya pada nggak mo percaya! Nih, buka link demonya! Jangan lupa lihat di bagian bawah sebelah kanan! Oi
.... Cantik, khan?!
Ada dua macam widget yang saat ini digunakan (ukuran tinggi dan lebar), dalam tutorial blogger ini juga akan
aku sertakan dua macam kode CSS. Yang pertama untuk widget SMS Gratis berukuran kecil (lebar hanya 210px) dan yang ke-2 untuk Widget SMS Gratis dengan ukuran lebar 270px.
Auto Scroller Widget SMS Gratis dengan Lebar/width 210px

Kode Widget :

<iframe src="http://s1.gxrg.org/home/index.php?w=yes" marginheight="2" marginwidth="2" allowtransparency="yes" height="355" scrolling="no" width="210"><br /> </iframe>

Kode CSS Auto Scroller (lebar widget=210px)

boxsmsluar {<br /> height:184px;<br /> width:214px;<br /> padding:5px; /* original code by:gubhugreyot.blogspot.com */<br /> overflow:hidden;<br /> border:3px solid #999; <br /> border-radius:8px;<br /> -moz-border-radius:8px;<br /> -webkit-border-radius:8px;<br /> -o-transition:all 1.1s ease-out;<br /> -moz-transition:all 1.1s ease-out;<br /> -webkit-transition:all 1.1s ease-out;<br /> background:#555 <br /> <br /> url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/pinkGRlogoH200V94.jpg) top center <br /> <br /> no-repeat;<br /> background-position: 12px 92px; <br /> }<br /> .boxsmsluar:hover {<br /> height:395px;<br /> background:#CC9966 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/bgjaring.png);<br /> border-color:#663300;<br /> }<br /> .boxsmsluar iframe {<br /> background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/bgsms2.jpg);<br /> border:2px solid #666; <br /> border-radius:8px;<br /> -moz-border-radius:8px;<br /> -webkit-border-radius:8px;<br /> }<br /> .boxsmsluar .boxsmsdalam {<br /> overflow:hidden;<br /> opacity:0.5; /* original code by:gubhugreyot.blogspot.com */<br /> height:76px;<br /> border-radius:8px;<br /> -moz-border-radius:8px;<br /> -webkit-border-radius:8px;<br /> box-shadow:-1px -1px 2px #fff, 1px 1px 6px #fff;<br /> -moz-box-shadow:-1px -1px 2px #fff, 1px 1px 6px #fff;<br /> -webkit-box-shadow:-1px -1px 2px #fff, 1px 1px 6px #fff;<br /> -o-transition:all 1.8s ease-out;<br /> -moz-transition:all 1.8s ease-out;<br /> -webkit-transition:all 1.8s ease-out;<br /> }<br /> .boxsmsluar:hover .boxsmsdalam { <br /> height:390px;opacity:1.0;<br /> -o-transition:all 1.5s ease-in;<br /> -moz-transition:all 1.5s ease-in;<br /> -webkit-transition:all 1.5s ease-in;<br /> }<br /> .boxsmsluar a {padding:2px 8px;margin:0 <br /> <br /> auto;display:block;text-align:center;font-family:Verdana;color:red;font-size:16px;font-weight:normal;text-sha<br /> <br /> dow:1px 1px 1px <br /> <br /> #000;font-weight:bold;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;-o-transition:all <br /> <br /> 1.5s ease-in;-moz-transition:all 1.5s ease-in;-webkit-transition:all 1.5s ease-in;}<br /> .boxsmsluar a:hover <br /> <br /> {color:blue;background:#999;width:150px;text-decoration:none;}

Auto Scroller Widget SMS Gratis dengan Lebar/width 270px

Ada dua buah widget yang sering digunakan:
Kode Widget-1

<iframe name="I2" src="http://divasms.com/widget" width="270" height="320"> not support </iframe>

Kode Widget-2

<iframe name="I2" src="http://sms-online.web.id/widget" width="270" height="350"> not support </iframe>

Kode CSS Auto Scroller (lebar widget=270px)

.boxsmsluar2 {<br /> height:190px;<br /> width:274px;<br /> padding:5px;<br /> overflow:hidden;<br /> border:3px solid #999;<br /> border-radius:8px;<br /> -moz-border-radius:8px;<br /> -webkit-border-radius:8px;<br /> -o-transition:all 1.1s ease-out;<br /> -moz-transition:all 1.1s ease-out;<br /> -webkit-transition:all 1.1s ease-out;<br /> background:#555 <br /> <br /> url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/pinkGRlogoV100H260.jpg) top <br /> <br /> center no-repeat;<br /> background-position: 12px 92px; <br /> }<br /> .boxsmsluar2:hover {<br /> height:380px;<br /> background:#CC9966 <br /> <br /> url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgRasterBlackTransV8H8.png);<br /> border-color:#663300;<br /> }<br /> .boxsmsluar2 iframe {<br /> background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/bgsms2.jpg);<br /> border:2px solid #666; <br /> border-radius:8px;<br /> -moz-border-radius:8px;<br /> -webkit-border-radius:8px;<br /> }<br /> .boxsmsluar2 .boxsmsdalam2{<br /> overflow:hidden;<br /> opacity:0.5;<br /> height:76px;<br /> margin:0; /* original code by:gubhugreyot.blogspot.com */<br /> padding:0;<br /> border-radius:8px;<br /> -moz-border-radius:8px;<br /> -webkit-border-radius:8px;<br /> box-shadow:-1px -1px 2px #fff, 1px 1px 6px #fff;<br /> -moz-box-shadow:-1px -1px 2px #fff, 1px 1px 6px #fff;<br /> -webkit-box-shadow:-1px -1px 2px #fff, 1px 1px 6px #fff; <br /> -o-transition:all 1.8s ease-out;<br /> -moz-transition:all 1.8s ease-out;<br /> -webkit-transition:all 1.8s ease-out;<br /> }<br /> .boxsmsluar2:hover .boxsmsdalam2 {<br /> height:380px;<br /> opacity:1.0; /* original code by:gubhugreyot.blogspot.com */<br /> -o-transition:all 1.5s ease-in;<br /> -moz-transition:all 1.5s ease-in;<br /> -webkit-transition:all 1.5s ease-in; <br /> }<br /> .boxsmsluar2 a {padding:2px 8px;margin:0 <br /> <br /> auto;display:block;text-align:center;font-family:Verdana;color:red;font-size:16px;font-weight:normal;text-sha<br /> <br /> dow:1px 1px 1px #000;font-weight:bold; <br /> <br /> border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;-o-transition:all 1.5s <br /> <br /> ease-in;-moz-transition:all 1.5s ease-in;-webkit-transition:all 1.5s ease-in;}<br /> .boxsmsluar2 a:hover <br /> <br /> {color:blue;background:#999;width:150px;text-decoration:none;}

Cara Menggunakan Kode
Bagi yang sudah menggunakan Widget SMS Gratis, silahkan sesuaikan dulu kode widgetnya dengan kode Widget yang

disertakan di atas! Lihat pada width dan height yang digunakan.
Bagi yang belum memanfaatkan widget SMS Gratis, silahkan pilih mau ambil Widget SMS Gratis yang mana. Ada 3,

broer! Silahkan comot salah satu atau ketiganya. Yang penting pilih yang servisnya paling baik!
1. Login ke Blogger.
2. Masuk ke Dasbor.
3. KLIK "Design/Rancangan".
4. KLIK "Edit HTML".
5. Cari kode ]]>.
6. Letakkan kode CSS (sesuai dengan lebar widget yang digunakan) tepat di atasnya.
7. Lanjutkan dengan KLIK "Page Elements/Elemen Laman".
8. KLIK "Edit" pada Widget SMS Gratis bagi yang sebelumnya sudah menggunakan.
9. Bagi yang belum menggunakan Widget SMS Gratis dan ingin memasang di blog, silahkan simpan juga  widgetnya.
10. Simpan kode Widget di antara xHTMl auto scroller.
11. KLIK SAVE Templates/Simpan Template!
12. Buka blog untuk melihat hasilnya!

xHTML Auto Scroller Widget SMS Gratis

xHTML Auto Scroller (lebar widget=210px)

<div class="boxsmsluar"><div class="boxsmsdalam">Letakkan widget di sini!<br /> <a href="http://gubhugreyot.blogspot.com/" target="_blank" title="Gratis... tis ... tis ...tis! Silahkan SMS sepuasnya!">gubhug reyot</a><br /> </div></div>

xHTML Auto Scroller (lebar widget=270px)

<div class="boxsmsluar2"><div class="boxsmsdalam2">Letakkan widget di sini!<br /> <a href="http://gubhugreyot.blogspot.com/" target="_blank" title="Gratis... tis ... tis ...tis! Silahkan SMS sepuasnya!">gubhug reyot</a><br /> </div></div>

Selesai selamat mencoba

Salam buat sobat blogger ... ...

Aku hanyalah seorang blogger yang kebetulan suka nulis, suka ngenet dan terutama suka uothak-uathik template blogspot. Bila sampeyan menyukai semua yang telah aku coba tulis dan terbitkan, aku hanya berharap bahwa semuanya bisa memberi manfaat dan mungkin juga bisa memberi dorongan untuk terus nglembur, nulis dan selalu memeras otak menuangkan hal-hal baru yang bermanfaat bagi pembaca. O, ....ya ..., Orang-orang atau tetangga sebelah biasa memanggil ku dengan sebutan si gubhug reyo gila, "yang suka melek malam dengan asap lintingan tak pernah telat". Yah ... moga-moga saja sampeyan semua nggak ikutan memanggil ku seperti para tetangga sebelah! Makacih, ya, atas kunjungannya. Maap nggak bisa kasih wedang kopi ma roti bolu!

Silahkan buka link di bawah ini untuk mengikuti tutorial menarik lainnya:
http://Iyan Bjm.blogspot.com