Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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!)

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 «

8 komentar:

  1. Templatnya bagus and kalau boleh tolongdong saya dikirimi template ke email saya. trimakasih
    satriaadv@ymail.com

    BalasHapus
  2. knjungi blog aku jg esco1011.blogspot.com

    BalasHapus
  3. terimah kasih gubhug reyot atas pemberitahaunnya...................

    BalasHapus
  4. Salam Kenal, saya terilang Amatiran di dunia Blog panduan-panduanya sangat saya harap., smoga makin keren. tris

    BalasHapus
  5. Wah... blognya keren. Mantapp... salut gan.

    BalasHapus
  6. keren abis, thank's bisa menambah inpirasi

    BalasHapus
  7. Jangan Lupa Mampir Ke Blog Ane Gan..
    http://eddaygokil.blogspot.com/

    BalasHapus
  8. kirim sms bisa tapi ngk nyampe-nyampe mas..!!

    BalasHapus

 
GR | Edited by | gubhug reyot