Cara Membuat menu slide info di blog

Pada kesempatan ini tutorwidget akan berbagi tips cara membuat menu slide info di blog dengan css. Pada tutorial ini kita tanpa harus klik terlebih dahulu cukup hanya dengan menyorot atau mendekatkan kursor kita maka menu slide info pun akan terlihat!. akan lebih menarik jika didesign sebagus mungkin untuk menarik perhatian pengunjung.
Slide Info ini sangat berguna untuk menunjukan author dari sebuah blog. Tapi kali ini tidak sekedar slide info biasa tapi dibalut dengan paduan CSS sehingga terlihat lebih cantik.

Dan dalam pembuatanya pun tergolong cukup mudah dan sederhana, anda hanya cukup memasangnya di gadget jadi tidak perlu edit html.
Untuk bereksperiman sobat blogger bisa mencobanya di sini untuk mendapatkan hasil yang sempurna sesuai dengan keinginan sobat.

ScreenShoot
Membuat menu slide info di blog dengan mudah
Sebelum Di Sorot

Membuat menu slide info tanpa edit html
Sesudah Di Sorot

Bagaimana cara membuatnya? Oke, langsung saja dimulai tutorialnya.
  • Login ke akun blogger sobat
  • Tambahkan Gadget Pilih HTML/JavaScript lalu CopyPastekan kode berikut :
<style type='text/css'>#tutorwidget{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;}#tutorwidget{-o-transition: all 1s ease-in;-moz-transition: all 1s ease-in;-webkit-transition: all 1s ease-in;} #tutorwidget:hover{width:400px;opacity:1.0;margin-left:0;}.tutorinbox {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;}.tutorinbox: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;}.tutorinbox2 {margin:5px 10px;padding:0px 8px 10px;color:#FFFFFF;overflow:hidden;height:410px;}.tes1 {border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;}.tes2 ul.bom {margin: 0; padding: 0;}.tutorinbox2 li {margin-left:20px;}.tutorinbox2 li a {color: #FFFFF; line-height: 4px; font-size: 11px;font-weight: bold; text-decoration:none;}.tutorinbox2 li a:hover {color: red;text-shadow: 0 1px 1px #000;}.tutorinbox2 h2 { font: 18px Droid Serif;font-weight:bold;padding:0 8px;color: #FF0000;text-shadow: 0px 1px 1px #ddd;border-bottom: 1px solid #FF0000;}.tutortouch {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;}.tutortouch: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='tutorwidget'><span class='tutortouch'>Info</span>
<div class='tutorinbox'><div class='tutorinbox2 tes1'>
<h2>SELAMAT DATANG</h2>
<p style='text-align:justify'>Selamat datang di Tutorwidget, saya harap anda senang berada diblog sederhana ini. Blog ini saya tulis dengan komputer yang sederhana dan koneksi internet yang juga sederhana. Saya berharap Anda sering datang kembali. Silahkan anda mencari hal-hal yang baru di blog saya ini</p>
<h2>Sekilas Tentang Author Blog</h2>
<img height='130x' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitDCCEPrk_AoeYeWft422LAHtCJmQ33A-DefEWRdyyqEPZD1gdQ78ZH99yumXbM6isZ4Z7mG_8By4K51UbbLYfJrtN5zKD4A-NogbiJ_Re9DBlNwxNlLLJiajhGSFmqxWZwFLBgKUZ2NI4/s1600/author.png’ width='100px'/>
<p style='text-align:justify'>Saya Bukan Seorang Blogger profesional, Hanya Seseorang Yang Ingin Selalu Belajar dan Ingin Tahu Sesuatu Yang Baru...</p>
</div>
</div></div>
  • Ganti kode yang berwarna MERAH dengan kata-kata sobat sendiri dan yang berwarna BIRU dengan gambar author sobat
  • Setelah dimodif sesuai keinginan sobat, tinggal tekan save dan lihat hasilnya.

Comments

Post a Comment

Popular posts from this blog

Contact Form diHalaman Statis

Image
 Widget Contact Form Blogger pada Halaman Statis.  Sudahkah anda memasang fasilitas menu "contact form/ contact me/ contact us" di blog, Fitur ini biasanya berupa widget/gadget. Jika belum ada baiknya kamu membuatnya sekarang juga soalnya manfaat dari menu ini cukup penting untuk kita pasang di blog, gunanya untuk memfasilitasi pengujung blog yang ingin mengirimkan pesan kepada kita melalui email sebagai sharing secara personal antara pembaca dan pemilik blog, jika ada yang mau ditanyakan oleh pengunjung kepada pemilik blog atau ada perlu sesuatu lain, maka keberadaan menu contact form ini, keberadaan nya sangat penting dalam suatu blog. Untuk membuatnya sangatlah mudah, karena blogger sendiri sudah menyediakan fasilitas tersebut akan tetapi penempatan Contact Form pada widget ini kayaknya kurang disukai, dan lebih memilih menempatkan contact form pada halaman statis atau halaman posting. Nah dalam kesempatan ini, saya ingin memberikan sedikit trik agar widget Contact For
Read more

Membuat Profil Blogger keren Seperti Google+

Image
Membuat Profil Blogger keren Seperti Google+ - Widget yang saya maksud adalah sebuah Widget yang menampilkan Foto Profil Google+, Memudahkan seseorang untuk Melingkari Akun anda atau menjadi teman anda, dan juga menampilkan jumlah lingkaran yang anda miliki saat ini. Selain itu google plus merupakan sarana jaringan yang dapat menghubungkan anda dengan beberapa orang untuk mendapatkan info perkembangan terbaru mengenai apa saja yang anda butuhkan sehingga optimasi blog dapat meningkatkan trafik pengunjung. Modifikasi ini terinspirasi dari profil Google yang berada di pojok kanan atas ketika kita login ke akun Google kita. Di pojok kanan atas akan tampak sebuah photo kita yang kecil dan bulat yang apabila di klik akan keluar sebuah kotak yang berisi profil kita. Cara memasang widget profile ala google+ supaya tampil di blogger ini cukup gampang hanya Dengan menambahkan sedikit custom style CSS dan HTML maka widget Google+ pun siap terpasang dan mempercantik blog, penasaran de
Read more

Mengapa harus ngeblog dari sekarang

Image
Selama ini kita beranggapan bahwa ngeblog hanya sebagai tempat curahan atau sekedar berbagi pengalaman saja. Padahal dalam perkembangan jaman yang semakin pesat blog ini bisa dimanfaatkan sebagi ladang bisnis. Bahkan ada juga yang beranggapan blog adalah investasi yang menjajikan dengan catatan memang benar-benar terurus dan terawat  bukan cuma sekedar pajangan. Ini info sekilas jika dipandang dari segi materi dengan memanfaatkan sebuah blog, dapat dikatakan sangat menguntungkan, karena tidak mengeluarkan modal yang banyak, cukup dengan modal koneksi internet. Dengan membuat blog banyak manfaat yang bisa kita dapatkan, itulah mengapa kita harus mulai ngeblog dari sekarang. Lalu apa saja manfaat dari ngeblog berikut ini akan saya jelaskan: Dapat menambah dan berbagi ilmu pengetahuan Pada dasarnya jika kita ingin mencari info sesuatu dari internet seperti materi pelajaran, berita, gosip,lamaran kerja dan sebagainya maka kita akan diarahkan ketempat halaman website dan salah s
Read more