Pada Tutorial Blog Sebelumnya Blog Sharing Ilmu Pengetahuan Sudah Menjelaskan Pada Sobat Semua Tentang Bagaimana Cara Membuat Menu Slide Info Di Blog Dengan Css. Dan Pada Tutorial Blog Kali Ini .Blog Sharing Ilmu Pengetahuan Akan Menjelaskan Pada Sobat Semua Tentang Bagimana cara membuat widget tersembunyi dengan css3.Nah cara membuat widget tersembunyi dengan css3 Cukuplah Mudah , coz sobat hanya tinggal menambahkan gadget saja.. Saya Mendapatkan Ini Dari Salah Satu Blog Sobat saya..yg kemudian saya perbaharui lagi dan saya persingkat dan saya Buat Pemakaiannya lebih mudah lagi..nah Contoh Widget Tersembunyi yg saya maksud adalah.Widget yg Bernama Connect Me And Friend HTC,nah nanti akan jadi sperti itu..y udah jika sobat menginginkan Sperti itu saya akan mulai langsung tutorial blog saya kali ini.
Perhatikan Langkah -langkah berikut ini :
- login ke akun Blogger sobat
- Pilih Rancanngan --> Tambah gadget dan pilih HTML/JAVASCRIPT
- Masukan KOde Berikut didalamnya
<style type='text/css'>.tejahide {z-index: 1000;height: 15px;width: 280px;border: 2px solid #666666;background: #D11717 -moz-linear-gradient(top,#000,#D11717);background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#D11717));border-radius: 12px;-moz-border-radius: 12px;-webkit-border-radius: 12px;-o-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;padding: 5px 5px;margin: 15px auto;font: 11px Arial;color: #003366;overflow: hidden;box-shadow: 0 1px 8px #000;-moz-box-shadow: 0 1px 8px #000;-webkit-box-shadow: 0 1px 8px #000;}.tejahide:hover {min-height: 270px;border: 2px solid #333333;background: #111;box-shadow: 0 1px 15px #000;-moz-box-shadow: 0 1px 15px #000;-webkit-box-shadow: 0 1px 15px #000;color: #000; text-shadow: 0 1px 1px #888;}.tejahide h3, .isiteja h3 {font-size: 14px;font-family: Droid Serif;font-weight: bold;color: #ffffff;text-align: center;text-shadow: 0px 1px 1px #fff; margin: 3px 5px;background: #000;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border: 1px solid #999;-o-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;}.tejahide h3:hover {box-shadow: 0 1px 8px #000;-moz-box-shadow: 0 1px 8px #000;-webkit-box-shadow: 0 1px 8px #000;}.tejahide img.mini, .tejahide img.minianima {width: 70px;border: 4px solid #666;padding: 3px;border-radius: 6px;-moz-border-radius: 6px;-webkit-border-radius: 6px;float: left; margin: 0 10px 5px 0;background: #222;-o-transition: all 1.5s;-moz-transition: all 1.5s;-webkit-transition: all 1.5s;}.tejahide img.mini:hover, .tejahide img.minianima:hover {box-shadow: 1px 1px 15px #000;-moz-box-shadow: 1px 1px 15px #000;-webkit-box-shadow: 1px 1px 15px #000;border: 4px solid #CCCCCC;background :#666;-o-transform: scale(1.4);-moz-transform: scale(1.4);-webkit-transform: scale(1.4);margin-top: 20px;margin-left: 15px;}.tejahide img.minianima:hover {-o-transform: scale(1.4) rotate(360deg) translate(0px);-moz-transform: scale(1.4) rotate(360deg) translate(0px);-webkit-transform: scale(1.4) rotate(360deg) translate(0px);}.isiteja {margin-top: 15px;height:225px;overflow: auto;padding: 0 5px;-o-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out; background:#ddd -moz-linear-gradient(top,#ddd,#000);background:-webkit-gradient(linear, left top, left bottom, from(#ddd), to(#000));}.isiteja:hover {background: #333;color: #eee;text-shadow: 0 0px 1px #fe0303;}.isiteja h3 {margin: 20px 0;max-width: 224px;margin-left:10px;background: #000;box-shadow: 0 1px 12px #eee;-moz-box-shadow: 0 1px 12px #eee;-webkit-box-shadow: 0 1px 12px #eee;}.columns{clear:both;line-height:22px;padding:0 0 20px;width:250px}.colleft{float:left;line-height:22px;width:120px}.colright{float:right;line-height:22px;width:120px}.isiteja h3:hover {background: #888;border: 1px solid #666;box-shadow: 0 1px 12px #fff;-moz-box-shadow: 0 1px 12px #fff;-webkit-box-shadow: 0 1px 12px #fff;}.isiteja ul {padding: 0;margin: 0;list-style: none;}.isiteja li {padding: 0;margin: 0;list-style: none;border-bottom:1px dotted #777;}.isiteja li a{color: #FF0000;padding: 0;margin: 0;text-decoration:none;font-size: 12px;-o-transition: all 1.5s;-moz-transition: all 1.5s;-webkit-transition: all 1.5s;}.isiteja li a:hover {-o-transform: scale(1.1);-moz-transform: scale(1.1);-webkit-transform: scale(1.1);color: red;text-shadow: 0 1px 1px #000;margin-left: 20px;}.tejahide {height: 17px; float:right ;margin-top:0px;z-index: 10000;position: fixed;top:0px;margin-left:690px;} .tejahide h3, .isiteja {font-size: 13px;}</style>
<div class='tejahide'>
<h3>Connect Me And Friend HTC</h3>
<div class='isiteja'>
<h3>Welcome</h3>Selamat datang di Coretan Teja HTC - saya senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan Berlama - Lama di sini dan membaca lebih lanjut tentang artikel dunia teknik (Blogging, HTC, Pantun, Trik" handphone Dan Lain Lain) yang Kami susun. Ada banyak hal tentang kami, Anda mungkin akan menemukan sesuatu yang menarik.<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='http://tejahtc.blogspot.com/' title='home'>Beranda</a></li>
<li><a href='disiniurlnya' title='about'>Daftar Isi</a></li>
</ul>
</div>
<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='http://twitter.com/muhammadsuteja' target='_blank' title='Twitter'>Twitter</a></li>
<li><a href='http://www.facebook.com/tejahtc' target='_blank' title='Facebook'>Facebook</a></li>
</ul>
</div>
</div>
</div>
</div>
Keterangan :
- warna Kuning Adalah Judulnya
- Warna Merah adalah isinya
- warna HIjau Adalah Tempat menaruhkan URL Sobat
Semua KOde Yg Berwarna Merah Kuning Dan Hijau Bisa Sobat Ganti dengan apapun yg sobat inginkan..
Misalkan sobat ingin mengantinya dengan buku tamu..bisa..atau lain-lain sesuai selera sobat..dan klo sobat mengerti Css .sobat bisa mengedit cssnya sesuka hati sobat..~SELAMAT MENCOBA DAN SEMOGA BERHASIL~
Artikel Terkait :
Tips Mempercantik Blog
- Karakter guru galak dan guru baik hati dibutuhkan di setiap sekolah
- Cara Mudah Memasang Kotak Komentar Facebook Di Blog
- Mengganti Kata SAID Yang Ada Pada Komentar blog
- Cara Membuat Foto/gambar Efek Memutar-mutar Dan Membesar Saat Disorot Mouse
- Cara Membuat Balon Tooltip Otomatis Ke semua Title Yg Ada Di Blog
- Cara Membuat Kotak Area Dengan Efek Membesar Saat Disorot Mouse
- Cara Membuat Widget Update Status twitter di blog
- Membuat Widget Menghilang Dan Berpindah Di Blog
- Membuat Menu Slide melayang di bagian kiri blog dengan css
- Cara Baru Membuat Slide Profil Di Blog Dengan Css
- Cara membuat menu warna-warni saat mouse menyorotnya Dengan Css
- cara membuat menu slide info di blog dengan css
- Cara Membuat Efek Blur Pada Semua Gambar Yang Ada Di Blog Dengan Css
- Cara Membuat Screensaver Dengan Css
- Cara Membuat Link Bergoyang Dengan Javascript
- Cara membuat form komentar klasik di atas kotak komentar Blog
- Cara Membuat Post Hover di Blog Dengan CSS
- Cara Membuat Menu Drop Down Horizontal Melayang Di Blog
- Rounded Corner | Membuat Sudut menjadi Tumpul
- Menghilangkan Garis Bintik-bintik Jejak Link
- Membuat Efek Animasi Blur Otomatis Di Blog
- Cara Membuat Link Blog Mengeluarkan Cahaya Kuning
- Cara Baru Membuat Daftar Isi Jquery Accordion Di Blog
- Cara Membuat Toolbar Atau Navbar Melayang Di Blog
0 komentar:
+ Add Comment