Mitra Bewara Sunda: Cara Ngajieun Auto Scroll di Widget SMS Haratis ngagunakeun CSS3

Auto Scroller Widget SMS Gratis nganggo Lebar/width 240px

KODE WIDGET SMS GRATIS

KODE CSS AUTO SCROLLER (LEBAR WIDGET=210PX)

.wadahsms{
       height:184px;
       width:244px;
       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/mitrabewara/bg/logosms-1.jpg) top center no-repeat;
       background-position:5px 92px;
       background-size:244px auto;        
}
.wadahsms:hover{
       height:395px;
       background:#CC9966 url(https://sites.google.com/site/mitrabewara/bg/mitrabewara-bgcarang.png);
       border-color:#663300;
}
.wadahsms iframe{
       background: url(https://sites.google.com/site/mitrabewara/bg/mitrabewara-bgsms02.jpg);
       border:2px solid #666; 
       border-radius:8px;
}
.wadahsms .boxsmsdalam{
       overflow:hidden;
       opacity:0.5;
       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;
}
.wadahsms: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;
}
.wadahsms 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;
}
.wadahsms a:hover{
       color:blue;background:#999;
       width:150px;
       text-decoration:none;
}

Auto Scroller Widget SMS Gratis nganggo Lebar/width 200px

KODE WIDGET SMS GRATIS (WIDTH=200PX)

KODE CSS AUTO SCROLLER (LEBAR WIDGET=200PX)

.wadahsms2{
       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/mitrabewara/bg/mitrabewara-pinkSMSlogo-H200V94.jpg) top center no-repeat;
       background-position:7px 92px; 
}
.wadahsms2:hover {
       height:380px;
       background:#CC9966 url(https://sites.google.com/site/mitrabewara/bg/mitrabewara-bgRasterBlackTransV8H8.png);
       border-color:#663300;
}
.wadahsms2 iframe {
       background:url(https://sites.google.com/site/mitrabewara/bg/mitrabewara-bgsms02.jpg);
       border:2px solid #666; 
       border-radius:8px;
}
.wadahsms2 .boxsmsdalam2{
       overflow:hidden;
       opacity:0.5;
       fikter:alpha(opacity=50);       
       height:76px;
       margin:0; /* original code by:mitrabewarasunda.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;
}
.wadahsms2:hover .boxsmsdalam2 {
       height:380px;
       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;    
}
.wadahsms2 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;
}
.wadahsms2 a:hover{
       color:blue;
       background:#999;
       width:150px;
       text-decoration:none;
}

Cara Menggunakan Kode

Kanggo anu atos ngagunakeun Widget SMS Haratis,mangga sesuaikan tiheula kode widgetnya kalawan kode Widget anu diajak di luhur! Lihat pada width dan height yang digunakan.
Kanggo anu tacan ngamangpaatkeun widget SMS Haratis,mangga pilih hoyong bantun Widget SMS Haratis nu manten. Aya 3,broer! Mangga comot salah sahiji atawa katilu na. Anu peryogi pilih anu servisnya nu mawi sae!
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.
Kanggo anu tacan ngagunakeun Widget SMS Haratis sarta hoyong masangkeun di blog,mangga simpen oge 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="wadahsms">
<div class="boxsmsdalam">
Letakkan widget di sini!
<a href="http://mitrabewarasunda.blogspot.com/" target="_blank" title="Gratis... tis ... tis ...tis! Silahkan SMS sepuasnya!">mitra bewara</a>
</div>
</div>

CONTOH PELETAKAN WIDGET!

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

xHTML Auto Scroller (lebar widget=200px)

<div class="wadahsms2">
<div class="boxsmsdalam2">
Letakkan widget di sini!
<a href="http://mitrabewarasunda.blogspot.com/" target="_blank" title="Gratis... tis ... tis ...tis! Silahkan SMS sepuasnya!">mitra bewara</a>
</div>
</div>

CONTOH PELETAKAN WIDGET!

<div class="wadahsms2">
<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://mitrabewarasunda.blogspot.com/" target="_blank" title="Gratis... tis ... tis ...tis! Silahkan SMS sepuasnya!">mitra bewara</a>
</div>
</div>

CATATAN/KETERANGAN:

Sateuacan ngalakukeun sadaya proses parobahan di template,sae nambahan kode anyar atawa ngaleungitkeun kode di halaman edit HTML,sasaena pigawe back-up template leuwih tiheula! Kanggo terang kumaha carana mangga buka Special Tutorials si menu sebelah kenca.
Tempo oge 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()'>

Mangga oge buka Tutorial sanes anu metot pisan sarta patut di turutan kumaneh sadaya. Akses ngaliwatan link handap ieu :

Update

Mitra Bewara Sunda

H O M E

My Blog

Kab/Kota di Sulawesi

Kab/Kota di Bali

Sumatera

Kab/Kota di Kalimantan

Senin, 10 Februari 2014

Cara Ngajieun Auto Scroll di Widget SMS Haratis ngagunakeun CSS3

Tidak ada komentar:

Posting Komentar

Blogger - Blogspot

Bule Cantik Menunggu Lamaran

Earthquake Effects on No Right Click

Javascript