Slide Info ini sangat berguna untuk menunjukan author dari sebuah blog, dan sebagai sarana narsis authornya hehehe… Tapi kali ini tidak sekedar slide info biasa tapi dibalut dengan paduan CSS sehingga terlihat lebih cantik dan apik.
Oke, langsung saja dimulai tutorialnya.
1. Logi ke aku blogger sobat
2. Masuk ke Template dan pilih edit HTML
3. Cari kode <body> dan letakkan kode dibawah ini di bawah kode <body>
<style type='text/css'>#info-techno{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-techno{-o-transition: all 1s ease-in;-moz-transition: all 1s ease-in;-webkit-transition: all 1s ease-in;} #info-techno:hover{width:400px;opacity:1.0;margin-left:0;}.Technoinbox {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;}.Technoinbox: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;}.Technoinbox2 {margin:5px 10px;padding:0px 8px 10px;color:#FFFFFF;overflow:hidden;height:410px;}.techno15 {border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;}.Techno2 ul.bom {margin: 0; padding: 0;}.Technoinbox2 li {margin-left:20px;}.Technoinbox2 li a {color: #FFFFF; line-height: 4px; font-size: 11px;font-weight: bold; text-decoration:none;}.Technoinbox2 li a:hover {color: red;text-shadow: 0 1px 1px #000;}.Technoinbox2 h2 { font: 18px Droid Serif;font-weight:bold;padding:0 8px;color: #FF0000;text-shadow: 0px 1px 1px #ddd;border-bottom: 1px solid #FF0000;}.Technotouch {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;}.Technotouch: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>4. Ganti kode yang berwarna MERAH dengan kata-kata sobat sendiri dan yang berwarna BIRU dengan gambar author sobat
<div id='info-techno'><span class='Technotouch'>Info</span>
<div class='Technoinbox'><div class='Technoinbox2 techno15'>
<h2>SELAMAT DATANG</h2>
Selamat datang di Coretan My-Techno - 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 Author Blog</h2>
<img height='130x' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTlxPt6pwfHXSXo4tZHuj73WYZkhSXdNsHTAjKZrFHAwdJ6TbKs9bRfR-kSGCkw7Q851NHFtPYs0aobhbxopZhTnoRe_PNvdDcOsvQ58pPmsH7JUq91zlvPPuZsYmXlZKWX-GdFDw9Ub1O/s1600/author.png’ width='100px'/>
<p style='text-align:justify'>Nama saya Fajar Bahari, 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>
5. Setelah sudah sobat modif tinggal tekan save dan lihat hasilnya
0 comments:
Post a Comment