Menawan Dengan Tab View Menu

Memperindah tampilan blog selalu menjadi prioritas para blogger di samping membuat tulisan-tulisan yang bermutu dan berkualitas. Salah satu cara yang ditempuh adalah dengan memasang widget tab view menu pada sidebar. Selain tampilan yang memukau, dengan menggunakan tab view menu, juga dapat menghemat space pada sidebar sehingga dapat digunakan dengan berbagai widget lain sesuai kebutuhan blog.

Membuat tab view menu tidak sesulit yang dibayangkan. Saya akan memberikan beberapa langkah jitu untuk membuat tab view menu yang diambil dari dynamicdrive.com.

1. Login ke Blogger > Design > Edit HTML
2. Cari kode </b:skin> dan masukkan kode CSS berikut ini tepat di atasnya.

/* CSS for Shade Tabs */
.shadetabs{padding:3px 0; margin-left:0; margin-top:1px; margin-bottom:0; font:bold 12px Verdana; list-style-type:none; text-align:left; /*set to left, center, or right to align the menu as desired*/}
.shadetabs li{display:inline; margin:0;}
.shadetabs li a{text-decoration:none; position:relative; z-index:1; padding:3px 7px; margin-right:3px; border:1px solid #778; color:#2d2b2b; background:white url(https://sites.google.com/site/situsbeus/lomari/shade.gif) top left repeat-x;}
.shadetabs li a:visited{color:#2d2b2b;}
.shadetabs li a:hover{text-decoration:none; color:#2d2b2b;}
.shadetabs li a.selected{/*selected main tab style */position:relative; top:1px;}
.shadetabs li a.selected{/*selected main tab style */background-image:url(https://sites.google.com/site/situsbeus/lomari/shadeactive.gif); border-bottom-color:white;}
.shadetabs li a.selected:hover{/*selected main tab style */text-decoration:none;}
.tabcontent{display:none;}
@media print{.tabcontent{display:block !important;}}

3. Cari kode </head> dan masukkan kode berikut tepat di atasnya.

<script src='https://sites.google.com/site/situsbeus/lomari/tab_content.txt' type='text/javascript'/>

4. Cari kode <div class='column-right-inner'> dan letakkan kode berikut tepat di bawahnya.

<div class='tabview'>
  <ul class='shadetabs' id='countrytabs'>
  <li><a class='selected' href=&#039;http://catetan-karuhun.blogspot.com/' rel='country1'>Tab1</a></li>
  <li><a href='http://catetan-karuhun.blogspot.com/' rel='country2'>Tab2</a></li>
  <li><a href='http://catetan-karuhun.blogspot.com/' rel='country3'>Tab3</a></li>
  </ul>
  <div style='border:1px solid gray; width:93%; margin-bottom:1em; padding:10px; height:200px; overflow:auto;'>
  <div class='tabcontent' id='country1'>
    <b:section class='sidebar-tab' id='sidebar-tabs-1' preferred='yes'></b:section>
  </div>
  <div class='tabcontent' id='country2'>
    <b:section class='sidebar-tab' id='sidebar-tabs-2' preferred='yes'></b:section>
  </div>
  <div class='tabcontent' id='country3'>
    <b:section class='sidebar-tab' id='sidebar-tabs-3' preferred='yes'></b:section>
  </div>
<script type='text/javascript'>
var countries=new ddtabcontent(&quot;countrytabs&quot;)
countries.setpersist(true)
countries.setselectedClassTarget(&quot;link&quot;) //&quot;link&quot; or &quot;linkparent&quot;
countries.init()
</script>
<hr/>
</div>
</div>

5. Edit tampilan tab view yang telah dibuat sesuai dengan blog Anda.
6. Save template dan lihat hasilnya.

Catatan:
> Sebaiknya lakukan download template dahulu sebelum melakukan perubahan pada template.
> Template yang saya gunakan adalah Simple Template milik Josh Peterson.
> Link blog serta link gambar silahkan ganti dengan milik Anda.

Sumber: dynamicdrive.com

Click for more...

Tampil Cantik Dengan Page Peel

Salah satu cara untuk membuat halaman blog menjadi cantik adalah dengan memberikan efek lipatan kertas yang biasanya berada di pojok halaman. Efek lipatan kertas seperti ini dikenal juga dengan nama Page Peel atau Page Flip. Membuat efek Page Peel pada blogspot sangat mudah. Berikut ini cara membuat efek tersebut sebagaimana dijelaskan oleh drraman:

1. Login ke blogspot
2. Masuk ke dashboard > Design > Edit HTML.
3. Letakkan kode di bawah ini sebelum kode </head>

<style type="text/css">
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWknUdi76PAgcBsTkk9S6zZA-DLySDdVL4hb0MYKUmjp5281nxSOdnxubXkTAJVunO54Ck_Bh46ED39vAs10SXCj4iTpPNMtLBYnHvwRQba6fFaHMxjV5ckZ9tGMQ0_8A_ksmRVzIV3WsB/s1600/page+peel.JPG) no-repeat right top;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});
});
</script>

Untuk gambar, bisa diganti dengan link gambar milik Anda.

4. Letakkan kode di bawah ini setelah kode <body>

<div id='pageflip'>
<a href='http://contoh-blog.blogspot.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJzN6v4ulS15foVePrO33WmtLhrkNlgHZhl4ufL-Y_A1C9nA1yaK3g-RfdDquzTmfZEKy4HCX_8nAdiW34zrWxgB2hwXitsOTO7mGd5jL0AsiIu_h6oLoWS53WD8n3BFPPUazWHBxi3gv/s1600/page_flip.png'/></a>
<div class='msg_block'></div>
</div>

5. Save template dan lihat hasilnya.

Selamat mencoba!

Catatan:
1. Sebaiknya backup template dulu sebelum melakukan perubahan pada template.
2. Link yang dicetak tebal dapat diganti dengan link milik Anda.


Sumber: Blogger Help

Click for more...