 |
| Credit img: freepik.com |
Melihat tampilan blog yang lebih simple itu sangat menyenangkan bagi seorang pengunjung. Seperti halnya ketika pengunjung mengeklik menu ataupun submenu yang telah disediakan di blog kita. Jika tampilan menu ataupun submenu blog kita semrawut, otomatis si pengunjung akan enggan untuk melihat informasi ataupun membaca artikel yang sudah kita posting sebelumnya. Nah, dari itulah kita seharusnya mencoba mengamati bagaimana sih supaya pengungjung blog kita tidak jenuh dalam melihat artikel blog kita?
Sebagai contoh disini saya akan berbagi cara membuat widget Tab View 3. Lalu apa sih Tab View 3 itu?
Tab View 3 merupakan widget yang berupa tabs dan dapat menghemat tempat sehingga dapat diisikan dengan 3 buah widget lainnya.
Langsung saja, begini cara membuat widget Tab View 3 -nya:
Login ke akun blogger
Pilih Tata letak >Tambah wiget >Pilih HTML/Javascript
Isikan kode :
<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: #fff">Tab 1</span></a>
<a><span style="color: #fff">Tab 2</span></a>
<a><span style="color: #fff">Tab 3</span></a>
</div>
<div style="width: 310px; height: 400px;" class="Pages">
<div class="Page">
<div class="Pad">
Konten dari Tab 1
</div></div>
<div class="Page">
<div class="Pad">
Konten dari Tab 2
</div></div>
<div class="Page">
<div class="Pad">
Konten dari Tab 3
</div></div>
</div>
</div>
</form>
<script src="http://airalokadotcom.googlecode.com/files/tab%20view.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
<div style="text-align:right;margin-right:7px;"><a title="Widget Tab View 3 Kolom" style="font:bold 8px Arial,Sans-Serif;color:#666 !important;text-shadow:0px 1px 0px rgba(255,255,255,0.1);opacity:1 !important;visibility:visible !important;display:block !important;" href="http://lukman-s.blogspot.com/2014/01/membuat-tampilan-blog-lebih-rapi-dengan.html" target="_blank">►Get this widget</a></div>
Simpan.
NB:
Ganti tulisan yang berwarna biru dengan Judul Menu yang anda inginkan.
Ganti tulisan yang berwarna merah dengan kode script yang ingin anda pasang.
Gampangkan? Semoga bermanfaat.
