Cara Membuat Slide INFO Blog Muncul Otomatis Keren

Hai Bro-bro .Sebelumnya TS telah membahas tentang BagaiMana  Cara Membuat Menu Horizontal Di Blog . Kini KHO akan membahas tentang Bagaimana Cara Membuat Slide INFO Blog Muncul Otomatis 

Tidak ada preview, Namun jamin Keren dah, 
Langsung Saja langkah-langkahnya :

1. Pada Edit HTML Letakkan Kode di Bawah ini Di atas Kode   ]]></b:skin>  :

.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}

2.  Letakkan Kode di Bawah ini Di atas Kode  </head>

<script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'  type='text/javascript'/>  

1. <script type="text/javascript">  
2. $(document).ready(function(){  
3. $(".trigger").click(function(){  
4. $(".panel").toggle("fast");  
5. $(this).toggleClass("active");  
6. return false;  
7. });  
8. });  
9. </script>  

 3. Letakkan Kode di Bawah ini Di atas Kode  </body>

<div class='panel'>
<h3>Selamat Datang bahasa inggrisnya welcome</h3>
<p style='text-align:justify'>Selamat datang di blog Kabar hoax, 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 <a href='http://bram-tobing.blogspot.com/' title='Kabar Hoax Official'>Selengkapnya tentang blog ini</a></p>

<h3>Sekilas tentang KHO</h3>
<img height='73px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_hnhtIaKbvb4A1dL-C_M-0Y4HUlzE4_23Uasqx9gsoQa4JKwZKvDEv9WDqdAE1Ar2BZ-xv2QenqIysmcPvzabUu0fYJWj_Pmz6kbUbTP5jbkqHJS0VIipjKCdHBhMOhcOFpSlkicH9ig/s1600/kho.jpeg' width='73px'/>
<p>ini adalah Foto sang ts Ganteng Bukan ? TS gitu Loh</p>

<div style='clear:both;'/>

<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='#' 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/@LocoAbink' title='Twitter'>Twitter</a></li>
<li><a href='http://www.blogger.com/profile/7451154271722067224' title='About Me'>About Me</a></li>
<li><a href='mailto:bramrz93@yahoo.co.id' title='Gmail'>Gmail</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>

• Semua Tulisan Berwarna Merah Bro ganti dengan tulisan Yang Bro ingin Kan

   4 . Pratinjau Temple Dulu

   5 . Save Temple

   6 . Finis