Pada Tutorial Blog Sebelumnya Blog Sharing Ilmu Pengetahuan Sudah Menjelaskan Pada Sobat Semua Tentang Bagaimana Cara Membuat Efek Blur Pada Semua Gambar Yang Ada Di Blog Dengan Css. Nah Sekarang Juga Dan Pada Tutorial Yg Sama Juga Saya Akan Menjelaskan Pada Sobat Semua Tentang Bagaimana cara membuat menu slide info di blog dengan css. Nah Mengapa Saya Mmebuat Tutorial Ini..Jawabnya Ialah Karna Banyak .sobat-sobat saya yang Request artikel ini. Nah Sebelum Saya Memulai Langkah langkahnya ..Saya Ingin Melihatkan Demonya atau jadinya..ya..sperti yg sobat lihat yg terletak disebelah kiri blog ini...itu ada slide panelnya.nah nanti jadinya kan seperti itu..satu lagi ..saya mohon 1 klik kan dari sobat semua untuk iklan di blog saya yang ini. Saya Mohon Pada Sobat Semua..Demi Kelangsungan Blog Ini.Ane Mohon 1 KLik saja..ok.Hehehehe.. y Udah Dari Pada Kelamaan Saya Akan Memulai Langkah-langkahnya.. :
- Login Ke Akun Blog Sobat
- Pilih Rancangan --> Kemudian Pilh EDIT HTML Dan Jangan Lupa Untuk Mencentang Kolom Expand Template Widget.
- Copas KOde Berikut Tepat Di Bawh Kode <body>
<style type='text/css'>#info-teja {z-index: 1000;background:-moz-linear-gradient(top, #1F2326, #000);background: -webkit-gradient(linear, left top, left bottom, from(#1F2326), to(#000));box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-moz-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-webkit-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;width:400px;position: fixed;top:50px;left:0;margin-left:-330px;border:1px solid #444;background-position:top right no-repeat;height:35px;font:11px Arial;color:#eee;border-top-right-radius:8px;border-bottom-right-radius:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;}#info-teja{-o-transition: all 1s ease-in;-moz-transition: all 1s ease-in;-webkit-transition: all 1s ease-in;} #info-teja:hover{width:400px;opacity:1.0;margin-left:0;}.Tejainbox {border:1px solid #444;width:290px; margin:0px 90px 10px 10px;background:#000;color:#ffffff; border-radius :20px; padding:5px 0;-moz-border-radius:20px; -webkit-border-radius:20px;-o-transition:all 2s ease-in;-moz-transition:all 2s ease-in;-webkit-transition:all 2s ease-in;opacity:0.2;}.Tejainbox:hover{opacity:1.0;box-shadow:1px 1px 15px #000; -moz-box-shadow: 1px 1px 15px #000; -webkit-box-shadow: 1px 1px 15px #000;background: #000;}.Tejainbox2 {margin:5px 10px;padding:0px 8px 10px;color:#FFFFFF;overflow:hidden;height:410px;}.teja15 {border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;}.Teja2 ul.bom {margin: 0; padding: 0;}.Tejainbox2 li {margin-left:20px;}.Tejainbox2 li a {color: #FFFFF; line-height: 4px; font-size: 11px;font-weight: bold; text-decoration:none;}.Tejainbox2 li a:hover {color: red;text-shadow: 0 1px 1px #000;}.Tejainbox2 h2 { font: 18px Droid Serif;font-weight:bold;padding:0 8px;color: #FF0000;text-shadow: 0px 1px 1px #ddd;border-bottom: 1px solid #FF0000;}.Tejatouch {font-size:22px;font-weight:bold;font-family:Arial Narrow;float:right;margin: 3px 10px 0 0;-o-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;text-decoration:blink;}.Tejatouch:hover{-o-transform: scale(2) rotate(720deg) translate(0px);-moz-transform: scale(2) rotate(720deg) translate(0px);-webkit-transform: scale(2) rotate(720deg) translate(0px);color: red;}</style>
<div id='info-teja'><span class='Tejatouch'>Info</span>
<div class='Tejainbox'><div class='Tejainbox2 teja15'>
<h2>SELAMAT DATANG</h2>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<h2>Sekilas Tentang TEJA HTC</h2>
<img height='130x' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTuGZQz9uds_tOYYYvGbwk2oVVpUnON9_u8zMWMTHnmQj-RNmVj6MGMeVRPdGK_1y16sobOX8V0GyoYZlB1ZiRVbJ7s__plRF4IgnwF3HhSIRdRJiS3piaoM60ghJNo1gLtQQsIEg0ZHXe/s1600/author.png' width='100px'/>
<p style='text-align:justify'>Nama saya Teja HTC, Saya Bukan Seorang Blogger, Desainer atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar dan Ingin Tahu Sesuatu Yang Baru...</p>
</div>
</div></div>
4 . Ubah Kata Atau Judu Yg Berwarna Merah Dengan Judul atau Kata-kata Sobat Sendiri
Dan Yg Terakhir Simpan Templatenya...SELAMAT MENCOBA DAN SEMOGA BERHASIL
cara membuat menu slide info di blog dengan css
Langganan:
Posting Komentar (Atom)
0 komentar:
+ Add Comment