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 :

• Cara Menghilangkan Garis Bawah Pada Link
• Cara Pasang Icon Smile Pada Blogspot
• Mengapa Blog/web dikunjungi oleh Pengunjung
• Cara Menghilangkan Tampilan Tulisan "LIHAT PROFIL LENGKAPKU" Pada Blog
• Cara Pasang Gambar Pada Header (Judul Blog)
  
• Cara Mengoptimalkan Judul Artikel Mudah Dicari Oleh Mesin Pencari
• Cara Melihat Jumlah Pengunjung Online Blog (cara pasang amung.us)
• Analisa Statistik Pengunjung Blog (Cara Pasang Hitats)