Pasang Auto Scroll di Widget SMS Gratis 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 lebih keren. 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 widget nggak 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?! (Eit .... blom buka demonya kok nanya! Dasar, gubhug derita!)

D E M O

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 (lebar 240px) dan yang ke-2 untuk Widget SMS Gratis dengan ukuran lebar 270px.

Auto Scroller Widget SMS Gratis dengan Lebar/width 240px

Kode Widget SMS Gratis

<iframe src="http://sms600.com/wg1" frameborder="0" width="240" height="290" scrolling="no">
</iframe>

Kode CSS Auto Scroller (lebar widget=210px)

.boxsmsluar{
       height:184px;
       width:244px;
       padding:5px; /* original code by:gubhugreyot.blogspot.com */
       overflow:hidden;
       border:3px solid #999;        
       border-radius:8px;
       -o-transition:all 1.1s ease-out;
       -moz-transition:all 1.1s ease-out;
       -webkit-transition:all 1.1s ease-out;
       background:#555 url(https://sites.google.com/site/gubhugreyotprojects/okt-2010/images/gubhugreyot-pinkGRlogoV100H260.jpg) top center no-repeat;
       background-position:5px 92px;
       background-size:244px auto;        
}
.boxsmsluar:hover{
       height:395px;
       background:#CC9966 url(https://sites.google.com/site/gubhugreyotprojects/okt-2010/images/gubhugreyot-bgjaring.png);
       border-color:#663300;
}
.boxsmsluar iframe{
       background: url(https://sites.google.com/site/gubhugreyotprojects/okt-2010/images/gubhugreyot-bgsms2.jpg);
       border:2px solid #666; 
       border-radius:8px;
}
.boxsmsluar .boxsmsdalam{
       overflow:hidden;
       opacity:0.5; /* original code by:gubhugreyot.blogspot.com */
       filter:alpha(opacity=50);
       height:76px;
       border-radius:8px;
       box-shadow:-1px -1px 2px #fff, 1px 1px 6px #fff;
       -o-transition:all 1.8s ease-out;
       -moz-transition:all 1.8s ease-out;
       -webkit-transition:all 1.8s ease-out;
}
.boxsmsluar:hover .boxsmsdalam{ 
       height:390px;
       opacity:1.0;
       filter:alpha(opacity=100);
       -o-transition:all 1.5s ease-in;
       -moz-transition:all 1.5s ease-in;
       -webkit-transition:all 1.5s ease-in;
}
.boxsmsluar a{
       padding:2px 8px;
       margin:0 auto;
       display:block;
       text-align:center;
       font-family:Verdana;
       color:red;
       font-size:16px;
       text-shadow:1px 1px 1px #000;
       font-weight:bold;
       border-radius:4px;
       -o-transition:all 1.5s ease-in;
       -moz-transition:all 1.5s ease-in;
       -webkit-transition:all 1.5s ease-in;
}
.boxsmsluar a:hover{
       color:blue;background:#999;
       width:150px;
       text-decoration:none;
}

Auto Scroller Widget SMS Gratis dengan Lebar/width 200px

Kode Widget SMS Gratis (width=200px)

<iframe name="I2" src="http://sms-online.web.id/widget" width="200" height="215" scrolling="no"> not support </iframe>

Kode CSS Auto Scroller (lebar widget=200px)

.boxsmsluar2{
       height:190px;
       width:204px;
       padding:5px;
       overflow:hidden;
       border:3px solid #999;
       border-radius:8px;
       -o-transition:all 1.1s ease-out;
       -moz-transition:all 1.1s ease-out;
       -webkit-transition:all 1.1s ease-out;
       background:#555 url(https://sites.google.com/site/gubhugreyotprojects/okt-2010/images/gubhugreyot-pinkGRlogoH200V94.jpg) top center no-repeat;
       background-position:7px 92px; 
}
.boxsmsluar2:hover {
       height:380px;
       background:#CC9966 url(https://sites.google.com/site/gubhugreyotprojects/okt-2010/images/gubhugreyot-bgRasterBlackTransV8H8.png);
       border-color:#663300;
}
.boxsmsluar2 iframe {
       background:url(https://sites.google.com/site/gubhugreyotprojects/okt-2010/images/gubhugreyot-bgsms2.jpg);
       border:2px solid #666; 
       border-radius:8px;
}
.boxsmsluar2 .boxsmsdalam2{
       overflow:hidden;
       opacity:0.5;
       fikter:alpha(opacity=50);       
       height:76px;
       margin:0; /* original code by:gubhugreyot.blogspot.com */
       padding:0;
       border-radius:8px;
       box-shadow:-1px -1px 2px #fff, 1px 1px 6px #fff;     
       -o-transition:all 1.8s ease-out;
       -moz-transition:all 1.8s ease-out;
       -webkit-transition:all 1.8s ease-out;
}
.boxsmsluar2:hover .boxsmsdalam2 {
       height:380px;
       opacity:1.0; /* original code by:gubhugreyot.blogspot.com */
       filter:alpha(opacity=100);       
       -o-transition:all 1.5s ease-in;
       -moz-transition:all 1.5s ease-in;
       -webkit-transition:all 1.5s ease-in;    
}
.boxsmsluar2 a{
       padding:2px 8px;
       margin:0 auto;
       display:block;
       text-align:center;
       font-family:Verdana;
       color:red;
       font-size:16px;
       text-shadow:1px 1px 1px #000;
       font-weight:bold;
       border-radius:4px;
       -o-transition:all 1.5s ease-in;
       -moz-transition:all 1.5s ease-in;
       -webkit-transition:all 1.5s ease-in;
}
.boxsmsluar2 a:hover{
       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!
• Login ke Blogger.
• Masuk ke Dasbor.
• KLIK "Design/Rancangan".
• KLIK "Edit HTML".
• Cari kode ]]></b:skin>.
• Letakkan kode CSS (sesuai dengan lebar widget yang digunakan) tepat di atasnya.
• Lanjutkan dengan KLIK "Page Elements/Elemen Laman".
• KLIK "Edit" pada Widget SMS Gratis bagi yang sebelumnya sudah menggunakan.
• Bagi yang belum menggunakan Widget SMS Gratis dan ingin memasang di blog, silahkan simpan juga widgetnya.
• Simpan kode Widget di antara xHTMl auto scroller.
• KLIK SAVE Templates/Simpan Template!
• Buka blog untuk melihat hasilnya!

xHTML Auto Scroller Widget SMS Gratis

xHTML Auto Scroller (lebar widget=240px)

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

Contoh Peletakan widget!

<div class="boxsmsluar">
<div class="boxsmsdalam">
<iframe name="wg1" src="http://sms600.com/wg1" frameborder="0" width="240" height="290"></iframe>
<a href="http://gubhugreyot.blogspot.com/" target="_blank" title="Gratis... tis ... tis ...tis! Silahkan SMS sepuasnya!">gubhug reyot</a>
</div>
</div>

xHTML Auto Scroller (lebar widget=200px)

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

Contoh Peletakan widget!

<div class="boxsmsluar2">
<div class="boxsmsdalam2">
<iframe name="I2" src="http://sms-online.web.id/widget" width="200" height="215" scrolling="no"> not support </iframe>
<a href="http://gubhugreyot.blogspot.com/" target="_blank" title="Gratis... tis ... tis ...tis! Silahkan SMS sepuasnya!">gubhug reyot</a>
</div>
</div>

Catatan/Keterangan:

• Sebelum melakukan semua proses perubahan di template, baik menambahkan kode baru atau menghilangkan kode di halaman edit HTML, sebaiknya lakukan back-up template terlebih dahulu! Untuk mengetahui bagaimana caranya silahkan buka Special Tutorials si menu sebelah kiri.
• Lihat juga Cara Cepat Cari Kode HTML menggunakan Ctrl+F.
• Tentang bagaimana cara menyimpan widget bisa juga dilihat di sana.

<body expr:class='&quot;loading&quot; + data:blog.mobileClass' onLoad='goforit()'>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » January, 09, 2012

» Happy Blogging - gubhugreyot «