Cara Menambahkan Info Slide Di Blog

Ini dia Cara Menambahkan Info Slide Di Blog sebelumnya saya sekali lagi ingin menginformasikan bahwa artikel ini saya ambil dari  Blog Modification oh ya mw tw liat hasilnya saya tidak menyediakan Demonya Disini tapi langsung aja liat di  Blog Saya di bagian atas...

Baik Langsung Saja Kita Liat Cara Membuat Info Slide Di Blog :

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> atau klik aja skin tapi bagian yang kedua 

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> atau head tanpa tanda /

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> atau sama dengtan kode body yang paling bawah

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

<div class='panel'>
<h3>Selamat Datang</h3>
<p style='text-align:justify'>Selamat datang di Kotretan OjelHTC - saya senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan berselancar di sini dan membaca lebih lanjut tentang artikel dunia teknik (Teknologi, Internet, komputer) yang kami susun. Ada banyak hal tentang kami, Anda mungkin akan menemukan sesuatu yang menarik. <a href='http://ojelhtc.blogspot.com/' title='OjelHTC Online'>Selengkapnya tentang kami</a></p>

<h3>Sepintas Tentang Kotretan Ojel HTC </h3>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKLXg96fIweEoDbKhU-5kNCye9b9QUYGPH4yI790UQLsGRTTisC1Q-zPP-i9HNO6AECYrBkoyMgEx4PUl3pZC8zw-ydhlCBqSrZorY4dPjAijJBX4gD3b8tIcwgIlS98i-00Th2lQhke0/s220/eyelashes_mascara.gif' width='73px' height='73px'/>
<p>Nama saya M.Joko Lukito, Saya seorang freelance designer, blogger, teknisi. Spesialisasi pada Blogger blogs, Visual Basic 6.0, Sql Server 2000 </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/ojel88' title='Twitter'>Twitter</a></li>
   <li><a href='http://facebook.com/mjoko.lukito' title='Facebook'>Facebook</a></li>
   <li><a href='http://digg.com/users/ojel' title='Digg'>Digg</a></li>
   <li><a href='http://delicious.com/Ojel88' title='Del.Icio.Us'>Del.Icio.Us</a></li>
   <li><a href='mailto:ojel88@gmail.com' title='Gmail'>Gmail</a></li>
  </ul>
 </div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>

Langkah 10
Simpan Template dan Preview blog...

Keterangan

Lakukan modifikasi kode pada langkah 9 sesuai keinginan anda (yang diblok putih), dari mulai informasi blog, informasi author/penulis, sampai link-link yang akan dimasukan.

Semoga Berhasil Ya...
Saran Dan Kritik Anda Sangat Membantu Saya Dalam Menulis Artikel Selanjutnya Pada Blog Ini...

Cara Membuat Menu Navigasi Slide Jquery

Cara Membuat Menu Navigasi Slide Jquery, Ingin Tahu Cara Membuat Menu Ini Contoh Adalah 

Yang Terdapat Di Menu Blog HTC Ini artikel ini saya ambil langsung dari Blog Modification baiklah hal yang pertama kita harus lakukan adalah Berdoa dan semoga berhasil membuat menu yang unik dan bisa goyang goyang seperti ini Langsung Aja Deh Kita Liat Daripada Berlama Lama yah...

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:

]]></b:skin>



Langkah 5
Masukan (copypaste) kode CSS dibawah ini diatas kode pada langkah 4:

ul#menusisi {

position: fixed;

margin: 0px;

padding: 0px;

top: 50px;

left: 0px;

list-style: none;

z-index:9999;

}

ul#menusisi li {

width: 100px;

}

ul#menusisi li a {

display: block;

margin-left: -50px;

width: 100px;

height: 55px; 

background-color:#141414;

background-repeat:no-repeat;

background-position:48px center;

border:1px solid #cfcfcf;

-moz-border-radius:0px 10px 10px 0px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-top-right-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-top-right-radius: 10px;

/*-moz-box-shadow: 0px 4px 3px #000;

-webkit-box-shadow: 0px 4px 3px #000;

*/

opacity: 0.8;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);

}

ul#menusisi .beranda a{

background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);

}

ul#menusisi .tentang a{

background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S9BJaX0yaqI/AAAAAAAAD_4/GZhfUKvK588/d/nav_info.png);

}

ul#menusisi .cari a{

background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJejnwlAI/AAAAAAAAEAE/B_LZd63vGeI/d/nav_search.png);

}

ul#menusisi .komentar a{

background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png);

}

ul#menusisi .rssfeed a{

background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);

}

ul#menusisi .alat a{

background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJelocqyI/AAAAAAAAEAI/6SmP-UHv-eg/d/nav_tools.png);

}

ul#menusisi .kontak a{

background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);

}

setelah itu
Langkah 6
Cari kode dibawah ini:
</head>

Langkah 7
Masukan (copypaste) kode jQuery dibawah ini diatas kode pada langkah 6:

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type="text/javascript">
$(function() {
$('#menusisi a').stop().animate({'marginLeft':'-50px'},1000);
$('#menusisi > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
});
</script>


Langkah 8
Cari kode dibawah ini:
</body>

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

<ul id='menusisi'>
<li class='beranda'><a href='LINKANDA' title='Beranda'></a></li>
<li class='tentang'><a href='LINKANDA' title='Tentang'></a></li>
<li class='cari'><a href='LINKANDA' title='Cari'></a></li>
<li class='alat'><a href='LINKANDA' title='Alat'></a></li>
<li class='rssfeed'><a href='LINKANDA' title='RSS Feed'></a></li>
<li class='komentar'><a href='LINKANDA' title='Komentar'></a></li>
<li class='kontak'><a href='LINKANDA' title='Kontak'></a></li>
</ul>

[Baca keterangan untuk memodifikasi menu]

Langkah 10
Simpan template dan preview blog anda...

Keterangan:

• Ubahlah LINKANDA sesuai dengan link keinginan anda.
• Ubahlah keterangan didalam tag title (misal; title='Beranda' di ubah menjadi title='Home') sesuai dengan keinginan anda.
• Perhatikan kode pada Langkah 5 baris 5 yaitu top: 50px; ubahlah nilai 50 untuk menentukan jarak antara bagian atas halaman blog dengan menu.
• Perhatikan kode pada Langkah 5 baris 15 yaitu margin-left: -50px; ubahlah nilai -50 untuk mengatur berapa jarak menu yang akan disembunyikan.
• Jika nilai -50 diubah (pada keterangan nomor 4) maka nilai -50 pada Pada Langkah 7 baris 7 dan baris 13 juga harus diubah atau disamakan.
• Perhatikan kode pada Langkah 5 baris 34, 37, 40, 43, 46, 49, 52 ubahlah URL Icon sesuai dengan icon yang telah anda siapkan.

Terima Kasih Semoga Berhasil Ya..

Saran Dan Kritik Anda Sangat Membantu Saya Dalam Menulis Artikel Selanjutnya Pada Blog Ini...