Pages

▼

Selasa, 01 November 2011

Cara Membuat Slide Profil di Blog

Beberapa waktu yang lalu saya sempat membaca cara membuat slide show beritan seperti detik.com, saat mau mencoba, terganjal dengan design template yang saya pakai, ketika mencari kode <div id='main-wrapper'> ternyata tidak ada, yeah.... belum dapat ditampilkan, sementara itu ada artikel lain yang mengharuskan menitipkan gambar ke pihak ketiga.... kok belum tertarik, ya sudahlah, untuk sementara waktu membuat slide show beritanya seperti detik.com belum dipakai di blog ini.

Mumpung di depan komputer, browsing... :) ndilalah ketemu artikel cara baru membuat slide profil di blog dengan css, tertarik ingin mencoba.... akhirnya sedikit uthek-uthek jadilah slide profil, dan selanjutnya seperti biasa, saatnya berbagi pengalaman untuk sesama tukang ngeblog :)

Artikel ini saya dapatkan dari Blognya kang Teja Htc, sudah saya praktekan, dengan sedikit uthek-uthek untuk mendapatkan hasil yang diinginkan. :)

Untuk membuatnya ikuti langkah langkah berikut ini :
  1. Buka Blogger
  2. Klik Rancangan/Tata Letak.
  3. Klik Tambah Gadget
  4. Pada Tambahan Gadget, cari dan Klik tanda Plus (+) di samping tulisan HTML/JavaScript.
  5. Copy Paste Script di bawah ini

<style>.tejaslide a { display: block; height: 130px; margin:0px; background: rgba(215,215,215,0.6);border: 1px solid #ccc; height: 130px; overflow: hidden;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;-khtml-border-radius: 10px;}.tejaslide img{float:left;} .tejaslide h5 { color: #333; text-align: center;height: 80px;margin-top:30px;font: italic 18px/65px Georgia, Serif;opacity: 1;-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;-khtml-border-radius: 10px;} .tejaslide a:hover h5 { margin-top: -150px; opacity: 0; } .tejaslide div { position: relative; color: white; font: 12px/15px Georgia, Serif;height: 130px; padding: 10px; opacity: 0; -webkit-transform: rotate(180deg); -webkit-transition: all 0.8s linear; -moz-transform: rotate(180deg); -moz-transition: all 0.8s linear; -o-transform: rotate(180deg); -o-transition: all 0.8s linear;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; -khtml-border-radius: 10px;}.tejaslide a:hover div {background:-moz-linear-gradient(top,#ddd,#444);background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#444));color:#000;opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); -moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; -khtml-border-radius: 10px}</style>
<section class="tejaslide">
<a href="http://prolingkungan.blogspot.com/">
<h5>
About The Author</h5>
<div>
<img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 65px; height: 75px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX7cEBboWKTVrhGZuxNHIWseB3K9lnV7Eyk6cOW0pyO-KNwpujCquQPpXjEXDxSaZlyMlB3EOp8c1wPRxDCrW1ISF2nasP2XhYl2iiS0xdNswSkZLm1MOI2Qf7XgVTS9KZCMJTOpR0Wcc/s320/sakuntolo.JPG" alt="" id="BLOGGER_PHOTO_ID_5675849584663936994" border="0" />Blog ini dibuat bukan oleh orang yang ahli membuat blog, juga bukan ahli hukum, apalagi ahli lingkungan hidup. Blog ini dibuat oleh orang yang ingin memahami lingkungan hidup lebih baik...</div>
</a>
</section>


6. Selesai, jangan lupa disimpan dan lihat hasilnya :)

Catatan : Anda dapat merubah ukuran foto gambar, Url dan tulisan sesuai yang anda inginkan.


Sumber : http://tejahtc.blogspot.com/2011/11/cara-baru-membuat-slide-profil-di-blog.html



Selamat Mencoba

Mungkin tulisan ini yang anda cari :
at

1 komentar: