Cara Membuat 3 Widget Dalam 1 Kolom Widget

17:24:00
Cara Membuat 3 Widget Dalam 1 Kolom Widget
Cara Membuat 3 Widget Dalam 1 Kolom Widget Cara Membuat 3 Widget Dalam 1 Kolom Widget




Selamat datang agan atau aganwati kali ini Saya akan berbagi tentang tips blogging, kali ini yang Saya akan bahas adalah membuat 3 widget dalam 1 kolom widget, seperti yang anda lihat di atas ini, untuk membuat widget seperti di atas Anda harus mengikuti beberapa langkah berikut;

Langkah

1. Login dashboard blog Anda masing-masing,

2. Masuk ke menu tata letak, lalu pilih tambahkan widget,

3. Pilih menu HTML / Javascript,

4. Copy script di bawah ini,

 <style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 90px; /* Lebar Menu Utama Atas */
text-align:center ; height: 26px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #FFD700; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana",Arial; /* Font Menu Utama Atas */
font-weight:bold; color:#FFD700; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color:#000000; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #FFD700; /* Warna border Kotak Utama */ overflow:hidden; background-color:#F0FFFF; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 285px;" class="Tabs">
<a>Comments</a>
<a>Members</a>
<a>Donate</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
SCRIPT WIDGET DI SINI
</div>
</div>
<div class="Page">
<div class="Pad">
SCRIPT WIDGET DI SINI
</div> </div> <div class="Page"> <div class="Pad">
SCRIPT WIDGET DI SINI
</div> </div> </div> </div> </form> <script type="text/javascript"> tabview_initialize('TabView'); </script>



Sesuaikan script dengan kebutuhan blog Anda!

5. Paste pada kolom HTML / Java Script.

6. Simpan widget.






Nah semoga artikel ini dapat membantu anda, jangan lupa like, share, dan google+nya serta komentar dari Anda, terima kasih.

Share this

I'm CEO & Founder in http://caritema.com & http://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Artikel Selanjutnya
Next Post
Artikel Sebelumnya
Previous Post
Cara style text di komentar Disqus dan Blogger:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
  • Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQ
Emotikon

Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

4 Comments

Renaldy Ramadani 26 October 2014 at 19:58

:shakehand test :hammer

Tsani Aziz 27 October 2014 at 22:02

Artikel anda lumayan membantu :v

Renaldy Ramadani 27 October 2014 at 22:04

Sip gan, thanks :D

Renaldy Ramadani 19 November 2014 at 16:53

:))