Excalibur
Info
Selamat datang di blog Roy Lichtenstein- saya senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan Berlama - Lama di sini dan membaca lebih lanjut tentang artikel yang saya susun. Ada banyak hal dapat anda pelajari, Anda mungkin akan menemukan sesuatu yang menarik

Nama saya Roy Lichtenstein, Saya Bukan Seorang Blogger, Desainer atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar dan Ingin Tahu Sesuatu Yang Baru...

Pages

Subscribe:

Ads 468x60px

Social Icons

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!

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>

0 comments:

Post a Comment

Berikan Komentar Anda Dibawah Sini Jika Belum Punya Akun Google/Blogger Anda Bisa Pilih Anonymous

Subscribe to: Post Comments (Atom)