» » Pasang Auto Scroll di Widget SMS Gratis dengan CSS3
Edit

Pasang Auto Scroll di Widget SMS Gratis dengan CSS3

Pasang Auto Scroll di Widget SMS Gratis dengan CSS3

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.

0 Response to "Pasang Auto Scroll di Widget SMS Gratis dengan CSS3"

Posting Komentar

Langganan: Posting Komentar (Atom)

Welcome to CB Network

Contoh Login Form Blogspot

Ini demo atau contoh Kotak Login dan Register Form. Login Form di samping ini hanya contoh dan tidak dapat digunakan layaknya Login Form FB karena blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member

Tutorial Blog

Untuk membuatnya silakan Pencet Sini

Member Login

Lost your password?

Not a member yet? Sign Up!