Membuat Vertical Sliding

Welcome to My Blog Bang Udin  
 
Oke langsung saja berikut ini :

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode di bawah ini:
]]></skin>
Langkah 5
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 4:

.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}
 
Langkah 6
Cari kode dibawah ini:
</head>

Langkah 7
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6:
 
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
 $(".panel").toggle("fast");
 $(this).toggleClass("active");
 return false;
});
});
</script>
Langkah 8
Cari kode dibawah ini: 
</body>

Langkah 9
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 8: 

<div class='panel'>
<h3>Selamat Datang Di OKTRI BLOG</h3>

<p style='text-align:justify'>Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...
</p>
<h3>Sekilas tentang penulis</h3>
<img height='73px' src='http://i634.photobucket.com/albums/uu66/oktri_2009/o-3Jqh3BlhR3srjirD0J-A.jpg' width='73px'/>
<p>Nama saya Oktri darmadi,saya seorang Mahsiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='http://www.wisatainformasi.co.cc/' title='home'>Home</a></li>
<li><a href='#' title='about'>About</a></li>

<li><a href='#' title='portfolio'>Portfolio</a></li>
<li><a href='#' title='contact'>Contact</a></li>
<li><a href='#' title='blog'>Blog</a></li>
</ul>
</div>
<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='http://twitter.com/oktridarmadi' title='twitter'>Twitter</a></li>
<li><a href='http://facebook.com//oktri.darmadi' title='facebook'>Facebook</a></li>
<li><a href='http://friendster.com/ok3darmadi' title='friendster'>Friendster</a></li>

<li><a href='http://wisatainformasi.co.cc/' title='plurk'>My Blog 1</a></li>
<li><a href='http://www.wisatainformasi.co.cc/' title='myspace'>My Blog 2</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Oktri</a>
Catatan: script langkah 9,tinggal diedit sesuai dengan blog anda

Langkah 10
Simpan Template dan Preview blog... 
By : Bang Udin

Prcantik belok anda di bawah ini

di
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Followers

Pengikut

ALL TUTORIAL BLOG

Informasi Baru
Cara Membuat Scroll Bar. Tulisan Berjalan di Addressbar.
Menghilangkan Angka Label.
Cara Hack Chip Zynga.
Membuat GIF Untuk Banner.
Membuat Read more Otomatis.
SEO Blogger/Blogspot Template. Curi Password Flash disk. Cara Buat Title Header Bergerak. Cara Membuat Letak Background Di Kotak Comment. Cara Membuat Menambah Jumlah Yang Di Batasi. Cara Membuat Memasang Widget Sms Gratis. Cara Membuat cursor Pada Blog. Membuat Domain Gratis di CO.CC. Membuat Next Page judul Postingan. Next Page Hanya Judul Postingan. Cara Membuat Efek Heart(Hati). Cara Memasang Meta tag. Cara Membuat meta tag di blog. Cara Membuat Icon,GIF, Flash. Cara Membuat Flash. Cara Membuat Menu Melayang. Cara Membuat Label Berputar. Cara Mengganti Icon Bloger. Cara Membuat Template. Menambah dua kolom dibawah/diatas post body. Cara Membuat Menu Tab View. Safware Pengelola Blog.

Archives