Cara Membuat Widget tab di blog / webstite

Membuat sebuah wodget tab dalam blog itu gimana sih ???

Seringkali kita bertanya cara membuat menu widget yang satu ini guna mempercantik tampilan blog sobat sekalian. Memang kalo kita membuat menu ini rada susah karena mungkin kita belum begitu
menguasai bahasa pemrograman html dll atau mungkin kita juga tidak tau sama sekali mengenai hal tersebut. Dalam tutorial kali ini akan membahas cara membuat menu tab tersebut, sobat sekalian tak perlu bingung untuk membuatnya tinggal copy paste saja dari blog ini.

• Langkah pertama masuk ke dalam blog kalian
• Kemudian setelah itu masuk ke template dan kemudian tambahkan widget, setelah itu pilih yang html/javascript.
• Setelah itu maka masukkan kode dibawah ini dan kemudian simpan.
• Maka setelah itu kita tinggal melakukan review dan menu tab widget kita sudah jadi

 

 
<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 77px; /* 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: #FFF9F9; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #D4D3D3; /* 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: #0026FF; /* 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: 250px;" class="Tabs">
<a><span style="color: #CBCBCB">Terbaru</span></a>
<a><span style="color: #CBCBCB">Artikel</span></a>
<a><span style="color: #CBCBCB">Tutorial</span></a>
</div>
<div style="width: 245px; height: 440px;" class="Pages">

<div class="Page">
<div class="Pad">


<style type="text/css">
#rp_plus_img{height:385px;overflow:hidden;border:0;padding:6px 10px 14px 5px;background: transparant;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:solid 1px #D0D0D0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:5px;list-style:none;}
#rp_plus_img a{color:##000;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:12px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #D0D0D0;width:50px;height:50px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://permathicblog.googlecode.com/files/Slideshow%20Postingan.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 20;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>



</div></div>

<div class="Page">
<div class="Pad">



<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<b>INDEX ARTIKEL</b><span style="font-size: small;"><span style="color: #444444;">&nbsp;</span></span><br />
<span style="font-size: small;"><span style="color: #444444;"></span></span><br />
<ul style="text-align: left;">
<li><a href="http://budiantogaze71.blogspot.com/2014/06/recovery-mengembalikan-data-hilang.html"><span style="font-size: small;"><span style="color: #444444;">Recovery Mengembalikan Data Hilang (Terhapus atau Terformat)</span><span style="color: #444444;"></span></span></a></li>
<li><a href="http://budiantogaze71.blogspot.com/2014/06/kelebihan-dan-kekurangan-windows-8.html"><span style="font-size: small;"><span style="color: #444444;"><span style="font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;">KELEBIHANDAN KEKURANGAN WINDOWS 8</span></span></span></a></li>
<li><span style="font-size: small;"><a href="http://budiantogaze71.blogspot.com/2014/06/buah-sirsak-obat-kanker.html"><span style="color: #444444;">Buah Sirsak Obat Kanker</span></a><span style="color: #444444;"><br /></span></span></li>
<li><span style="font-size: small;"><a href="http://budiantogaze71.blogspot.com/2014/06/rainmeter-dan-omnimo.html"><span style="color: #444444;"><span style="font-family: &quot;Arial&quot;,&quot;sans-serif&quot;;"><span style="text-decoration: none;">Rainmeter DanOmnimo (Sulap Laptop kamu seperti Windows 8)</span></span></span></a></span></li>
<li><a href="http://budiantogaze71.blogspot.com/2014/06/game-seru-di-android.html"><span style="font-size: small;"><span style="color: #444444;"><span style="font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;">Game UnikDan Seru Di Android</span></span></span></a></li>
<li><a href="http://budiantogaze71.blogspot.com/2014/06/cara-cek-kuota-internet-smart-fren_11.html"><span style="font-size: small;"><span><span style="color: #444444;">Cara Cek Kuota Internet Smartfreen</span></span></span></a></li>
<li><span style="color: #444444; font-size: x-small;"><a href="http://budiantogaze71.blogspot.com/2014/06/cara-setting-modem-speedy-wifi-tp-link.html"><span style="font-size: small;"><span style="font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></span></span></a><span style="font-size: medium;"><span style="font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"><a href="http://budiantogaze71.blogspot.com/2014/06/cara-setting-modem-speedy-wifi-tp-link.html"><span style="font-size: small;">Cara Setting Modem Speedy Wifi </span></a></span></span></span></li>
<li><span style="font-size: small;"><span style="color: #444444;"><br /></span></span></li>
</ul>
</div>
<ul style="text-align: left;">
</ul>
</div>




</div></div>

<div class="Page">
<div class="Pad">


<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<b>INDEX TUTORIAL</b></div>
<div style="text-align: center;">
<br /></div>
<ul style="text-align: left;">
<li><a href="http://budiantogaze71.blogspot.com/2014/07/tutorial-cara-upload-aplikasi-android.html">Tutorial Cara Upload Aplikasi Android Ke Google Play</a>&nbsp;</li>
<li><a href="http://budiantogaze71.blogspot.com/2014/07/tutorial-cara-upload-aplikasi-android.html">Cara Upload Aplikasi di Google Playstore</a>&nbsp;</li>
<li><a href="http://budiantogaze71.blogspot.com/2014/06/cara-menggabungkan-dua-file-dengan-2.html">Cara Menggabungkan Dua File Dengan 2 Sheet Yang Berbeda Menjadi Satu Exel</a>&nbsp;</li>
<li><a href="http://budiantogaze71.blogspot.com/2014/06/program-database-menggunakan-vbnet.html">Program Database Menggunakan VB.Net (Visual Studio 2010 Ultimate)</a></li>
</ul>
</div>



</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://budiantogaze71.blogspot.com" target="_blank">&#9658;Get this widget</a></div>

Untuk melakukan beberapa penyesuaian mulai dari lebar, tinggi warna juga tambahan widget lain tinggal melakukan otak atik saja pada coding tersebut. Untuk menghindari resiko kesalahan soabat sekalian jangan lupa untuk membackup dulu sebelum melakukan pengeditan.

Oke demikian tutorial kali ini semoga bermanfaat. Terima Kasih.

Share on Google Plus

About Bgaze

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.