Guna menghemat space blog seperti yang sudah saya tekankan tadi diatas, kita juga bisa menggunakan widget yang namanya tab view, widget ini salah satu fungsi utamanya adalah untuk mempercantik penampilan dan menghemat tempat yang tersedia di blog, jadi anda dapat langsung menempatkan 3 widget dalam 1 widget tab view ini, tentu hal ini akan sangat berguna bagi anda yang ingin "bersih-bersih dan merapikan blog".
Mengangkat tema minimalis seperti judul diatas, tentunya tab view kali ini juga didesain sedemikian rupa berdasarkan judul yang dianugrahkanya, jadi tidak hanya dapat menghemat space, namun anda juga dapat sekedar "menambah" pernak-pernik blog guna menarik perhatian para pengunjung.
Cara Membuat Tab View Minimalis di Blog
1. Login ke Blogger.
2. Pilih Template.
3. Klik Edit HTML.
4. Klik tanda panah hitam disebelah <b:skin>...</b:skin> (untuk membuka seluruh kode css).
5. Cari kode ]]></b:skin> (gunakan CTRL+F), letakkan kode dibawah ini tepat diatas-nya.
/* The CSS Code for the tab view menu */
#btabcontainer{
margin:0 auto;
width:300px;
margin-top:4%;
}
.btab-container {
position: relative;
width: 100%;
z-index:0;
}
.btab-container > div {
display: inline;
}
.btab-container > div > a {
position: relative !important;
text-decoration: none;
color: #D7D7D7;
display: inline-block;
padding: 4px 14px;
font-size:15px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
margin:2px;
background: #4C4648; /* old browsers */
background: -moz-linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%);
background: linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%);
-pie-background: linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4C4648), color-stop(52%,#474344), color-stop(100%,#2F2D2E));
border:dashed 2px #CFA840;
padding: 4px 14px;
-moz-border-radius: 3px;
-webkit-border-radius: 0px;
border-radius: 3px;
text-shadow: 0 -1px 0 #000000;
-moz-box-shadow: 0 4px 10px -5px #000000;
box-shadow: 0 4px 10px -5px #000000;
-webkit-box-shadow: 0 4px 10px -5px #000000;
}
.btab-container > div:not(:target) > a {
}
.btab-container > div:target > a {
background: none repeat scroll 0 0 #948a81;
text-shadow: 0 1px 0 #4C4648;
}
.btab-container > div > div {
background: #4C4648;
background: -moz-linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%);
background: linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%);
-pie-background: linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4C4648), color-stop(84%,#474344), color-stop(100%,#2F2D2E));
-moz-box-shadow: 0 0 12px 1px #000000 inset;
-webkit-box-shadow: 0 0 12px 1px #000000 inset;
box-shadow: 0 0 12px 1px #000000 inset;
z-index: -2;
top: 50px;
padding: 20px;
border:solid 6px #4C4648;
outline: 2px dashed #CFA840;
outline-offset: -8px;
min-height:250px;
position:absolute;
}
.btab-container > div:not(:target) > div {
position: absolute;
}
.btab-container > div:target > div {
position: absolute;
z-index: 3 !important;
}
div.tab-content{
padding-bottom: 70px;
padding-left: 20px;
padding-right: 20px;
}
.btab-content img{
margin:0 auto;
display:block;
padding-bottom: 20px;
padding-top: 10px;
}
6. Klik "Save/Simpan Template".
7. Pergi ke laman Tata Letak/Layout.
8. Klik Add Gadget.
9. Pilih HTML/JavaScript.
10. Letakkan kode di bawah ini kedalamnya.
<div id="btabcontainer">
<div class="tab-container">
<div id="c1">
<a href="URL Tujuan Tab View 1">Judul Tab View 1</a>
<div class="tab-content">
<h3>Judul isi tab view 1</h3>
<p>Isi dari tab view 1</p>
</div>
</div>
<div id="c2">
<a href="URL Tujuan Tab View 2" >Judul Tab View 2</a>
<div class="tab-content">
<h3>Judul isi tab view 2</h3>
<p>Isi dari Tab View 2</p>
</div>
</div>
<div id="c3">
<a href="URL Tujuan Tab View 3">Judul Tab View 3</a>
<div class="tab-content">
<h3>Judul isi Tab View 3</h3>
<p>Isi dari Tab View 3</p>
</div>
</div>
</div>
</div>
Keterangan:
- Ganti kode yang berwarna merah dengan URL tujuan dari masing-masing Tab View.
- Ganti kode yang berwarna biru dengan Judul dari masing-masing Tab View.
- Ganti kode yang berwarna hijau dengan Judul dari masing-masing Isi Tab View.
- Ganti kode yang berwarna oranye dengan Isi dari masing-masing Tab View.
6. Klik "Save/Simpan", dan selesai.
Bagi anda yang ingin melihat demonya secara live atau langsung, anda dapat melihatnya dilihat disini. Demikian informasi terbaru tentang cara membuat tab view minimalis di blog, baca juga artikel menarik lainya seputar tutorial blog tentang cara membuat widget social media vertikal di blog, semoga bermanfaat, dan selamat mencoba.
Sumber Referensi : Bloggertrix
EmoticonEmoticon