Tutorial Cara Membuat Widget 3 Kolom Horizontal pada Blogspot

Bagaimana cara membuat widget 3 kolom pada blog saya ?

[post_ad]

Pada artikel kali ini saya akan mencoba menjawab pertanyaan diatas yang merupakan pertanyaan yang paling banyak saya dapatkan dari teman-teman blogger. Sebelum kita menjawab pertanyaan diatas ada baiknya kita jelaskan dulu maksud dari pertanyaan tersebut. Barangkali ada dari pembaca yang tidak mengerti maksud dari pertanyaan diatas.

Screenshot halaman situs www.industrimigas.com

Gambar diatas merupakan tampilan dari situs www.industrimigas.com yang menggunakan widget 3 kolom, yang dimaksud widget 3 kolom pada sidebar adalah bagian yang didalam kotak merah pada gambar diatas. Widget ini berfungsi untuk meminimalisir penggunaan sidebar blog dengan menggabungkan 3 widget sekaligus dalam satu space sidebar yang memiliki view atau tampilan tab atau kolom.

Semoga dari penjelasan diatas pembaca semua dapat mengerti apa maksud dari pertanyaan yang akan kita bahas disini. Yup benar sekali, tentunya kita akan membahas bagaimana cara membuat widget 3 kolom pada sidebar blog. Adapun cara membuat widget 3 kolom pada sidebar blog adalah sebagai berikut :

• Buka halaman dashboard blogger.com anda.

Tambahkan gadget

• Pilih menu layout / tata letak 》tambahkan gadget.

Tambahkan gadget HTML / JavaScript

• Tambahkan gadget html / JavaScript.
• Copy code dibawah ini :

<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">Menu 1</span></a>
<a><span style="color: #fff">Menu 2</span></a>
<a><span style="color: #fff">Menu 3</span></a>
</div>
<div style="width: 310px; height: 400px;" class="Pages">
<div class="Page">
<div class="Pad">
<div class="fb-like-box" data-href="http://www.facebook.com/IndustriMigas" data-width="280" data-height="600" data-show-faces="true" data-border-color="blue" data-stream="false" data-header="true"></div>
</div></div>
<div class="Page">
<div class="Pad">
<a class="twitter-timeline"  href="https://twitter.com/industrimigas"  data-widget-id="345784719847333888"> </a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div></div>
<div class="Page">
<div class="Pad">
<script src="http://feeds.feedburner.com/blogspot/industrimigas?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/blogspot/industrimigas"></a><br/>Powered by FeedBurner</p> </noscript>
</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://artechnolife.blogspot.com/2014/05/cara-membuat-widget-3-kolom-pada.html" target="_blank">&#9658;Get this widget</a></div>

• Ubah / tambahkan code yang berwarna merah sesuai dengan kebutuhan anda.
• Klik simpan. Maka tampilan widget yang akan anda hasilkan adalah seperti dibawah ini :

Tampilan Menu 3 (Saya ubah menjadi menu RSS)

Tampilan menu 1 (saya ubah menjadi menu facebook)

Tampilan menu 2 (saya ubah menjadi menu twitter)

Setelah langkah-langkah diatas telah anda jalankan dan sesuaikan dengan kemauan anda maka anda telah memiliki widget 3 kolom yang dapat meminimalisir penggunaan sidebar pada blog anda. Dimana apabila dengan cara biasa maka anda perlu menambahkan 3 gadget html / javaacript maka dengan menggunakan widget 3 kolom ini anda hanya perlu menambahkan 1 gadget html / javascript untuk menampilakan 3 code html / javascript. Selain itu tampilan blog anda pun akan terlihat lebih indah dan profesional. 

Demikian jawaban dari artechnolife tentang pertanyaan pada awal artikel ini. Semoga bermanfaat bagi para pembaca.