@FreeDomain @Review @Facebook
Gratis artikel Bang Del, daftar sekarang!
Posted by Bang Del

Blog yang Bagus Gimana Sih?

Apakah blog yang bagus menurut saya sudah bagus menurut orang lain. Apakah blog yang bagus menurut orang lain sudah bagus menurut saya. Jawaban untuk kedua pertanyaan di atas adalah belum tentu. Terkadang bagus menurut saya ternyata jelek di mata pembaca dan terkadang bagus menurut pembaca ternyata tidak bagus menurut saya. Menurut kamu blog yang bagus gimana sih?

blog yang bagus
Posted by Bang Del

Cara Promosi Blog yang Baik

Ingin blog anda terkenal? Temukan jawabannya di sini "Cara Promosi Blog yang Baik". Hampir semua pemilik blog ingin blognya menjadi terkenal dan ramai dikunjungi dengan trafik yang tinggi pula. Saya pun begitu, sama seperti anda :) Posting tentang cara promosi blog ini adalah berdasarkan pengalaman pribadi. Silahkan dibaca-baca dulu dan ambil poin-poin yang cocok buat blog anda. Semoga bermanfaat.

promosi blog
Posted by Bang Del

Jenis-Jenis Bisnis Online

Sudah sering mendengar tentang Bisnis Online ya. Saya akan memberikan sedikit ulasan tentang bisnis online dan jenis-jenis bisnis online. Barangkali anda tertarik untuk memonetisasi blog. Hitung-hitung bisa dapat dollar dari internet. Artikel ini mengulas beberapa jenis bisnis online yang sedang marak dan digandrungi para blogger.

bisnis online

Membuat Tab View Widget Blogger

Kemarin saya dapat pertanyaan dari Fandy seperti ini "salam kenal sob. oh iya gw mau sedikit tanya nih gmana cara buat tab View seperti punya kamu .? makasih sob". Oke, terimakasih kembali Fandy. Sebenarnya sudah banyak yang memposting tentang membuat tab view, namun tak apa saya tuliskan tutorialnya di sini. Widget tab view sangat berguna untuk blog karena dapat menghemat ruang pada blog dan bisa menampung begitu banyak link serta konten blog di dalamnya. Contohnya bisa anda lihat pada gambar di bawah ini:

tabview
Nah, untuk membuat widget tab view pada blog anda silahkan ikuti langkah berikut :
  1. Login ke blog dengan ID anda
  2. Pilih menu Layout » masuk ke Edit HTML
  3. Cari kode ini ]]></b:skin>
  4. Copy lalu paste kode berikut ini sebelum kode ]]></b:skin>

    div.TabView div.Tabs
    {
    height: 24px;
    overflow: hidden;
    }

    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 90px; /* Lebar Menu Utama Atas */
    text-align: center;
    height: 24px; /* Tinggi Menu Utama Atas */
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid #000000; /* Warna border Menu Atas */
    border-bottom-width: 0;
    text-decoration: none;
    font-family: "Arial", Times New Roman, Serif; /* Font Menu Utama Atas */
    font-weight: 900;
    color: #000080; /* Warna Font Menu Utama Atas */
    }

    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #BDBDBD; /* Warna background Menu Utama Atas */
    }

    div.TabView div.Pages
    {
    clear: both;
    background-color: #FFFFFF; /* Warna background Kotak Utama */
    border: 1px solid #000000; /* Warna border Kotak Utama */
    overflow: hidden;
    }

    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 0px;
    overflow: hidden;
    }

    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }
    Teks yang berwarna merah adalah keterangan untuk mengatur tab view. Seperti ukuran tebal border, tinggi dan lebar tab view serta warna background. Nah, untuk mengatur warna, silahkan gunakan kode warna saya.
  5. Kemudian pasang kode berikut sebelum kode </head>
    <script type='text/javascript'>
    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>
  6. Kemudian klik Save Template
  7. Masuk ke menu Page Elements
  8. Pilih Add a Gadget » Pilih menu HTML/Javascript, Copy lalu paste kode berikut di dalamnya.
    <form action="tabview.html" method="get">
    <div class="TabView" id="TabView">
    <div class="Tabs" style="width: 350px;">
    <a>Tab 1</a>
    <a>Tab 2</a>
    <a>Tab 3</a>
    </div>
    <div class="Pages" style="width: 350px; height: 250px;">

    <div class="Page">
    <div class="Pad">
    Tab 1.1 <br />
    Tab 1.2 <br />
    Tab 1.3 <br />
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    Tab 2.1 <br />
    Tab 2.2 <br />
    Tab 2.3 <br />
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    Tab 3.1 <br />
    Tab 3.2 <br />
    Tab 3.3 <br />
    </div>
    </div>


    </div>
    </div>
    </form>

    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>
  9. Lalu klik Save dan tempatkan widget tab view agar sesuai dengan template anda.
  10. Selesai

Sebagai catatan:
  • Angka yang berwarna merah adalah ukuran lebar dan tinggi widget tab view.
  • Kode yang berwarna hijau adalah teks pada menu utama di bagian atas.
  • Kode yang berwarna biru adalah teks yang berada di halaman tab view yang bisa kamu isi dengan link apa saja, gambar, banner dan script lainnya.
  • Untuk menambahkan jumlah menu maka perhatikanlah text yang berkedip2-kedip. Tambahkan menu berikutnya di bawahnya.

Contoh pengaturan teks :
  • Teks "Tab 1" dapat diganti dengan teks lain seperti "Tutorial Blogger", "Bisnis" atau teks lainnya.
  • Sedangkan pada bagian isi menu di bawahnya yang berwarna biru Tab 1.1 <br /> bisa diganti dengan link posting blog seperti ini :
    <ul><li><a href="http://bangdel.blogspot.com/2009/06/tentang-saya-dan-blog-bang-del.html">Tentang Saya Dan Blog Bang Del</a></li>

Mudah-mudahan tutorial membuat widget tab view ini dapat bermanfaat, terima kasih.

Related Post:


Top Blogs or My Zimbio or Bookmark and Share

19 comment:

elitzeroone said...

Ini yang saya tunggu..tunggu akhirnya di posting juga. makasih nih bang...
"fandy"

Angelique S said...

Thanks berat. Trus terang tadinya mau nanya kode ini juga, tapi khan nanti jadi ketauan newbie deh. ;)
Makasih bget, Allah bless you..

Tips Trik Komputer dan Windows said...

Makasi bang infonya.

Sofyan Saori said...

Salam kenal.
Cape deh, kesana-sini cari cara membuat Widget Tab View, beberapa diantaranya sudah ada yang saya pasang, eh... gagal maning, gagal maning, Akhirnya ketemu yang mantaf disini. pokoknya mantaf. Terimakasih,

khabibkhan said...

Mantaps, Thanks

attonk said...

ini tutorial yang saya cari
thanx berat mas

dirgantara said...

om cara liat traffic blog kita gmn sih?
maksud nya berapa banyak org yg view blog kita gitu

tfkbhr said...

OM mau tanya nih, untuk mengisi tab menu dengan recent posts,recent comment,sama tag cloud, gimana caranya ya.. Plis tolong di jawab..

Andre Lao said...

~x( Akhirnya nemuin cara buat nutupin kekurangan Blog. Tadinya aku mau ngisi tiap2 tab pada blog dengan materi yg uda aku siapin. Tp ktny Blog cuma ada fasilitas page statis. Yg dinamis gk ada.
Yach pkai cara ini aja deh..
Trims ya Bang Del
Salam kenal semuanya
:D

Chugy said...

mantap boz...infonya lams knal ni dr chugy....!!! dtnggu knjngan bliknya....ksh

s. wahyudi said...

Mampir bos. blognya bagus dan isinya variatif. sangat membantu bagi saya yang newbie

amex wijaya said...

Bang Q mw nxa, cara biar ngelink yg TAB 2 itu gmna ya bang...??
msak pxQ cma TAB1 aj yang bisa di liat.......

mnta bntuannya ya Bang cz Q msh pmula.....
mksih Bang

jakerobe - seo blogger said...

semangat pagi sensei :X ..., waduh..ni postingan mantaf n komplit.. murid minta ijin untuk belajar sensei... ;;)

Dewa Agung Surat said...

keren..., thanks bang.

Cipanas Online said...

Bagus nih buat blog, aku belum pasang neh.

Anonymous said...

:D

Cara Membuat said...

ini dia yang dicari. saya mau pakai tutorial ini agar menghemat ruang di blog saya. Agar pengunjung blog tidak perlu menscroll ke bawah. Makasih

ADEN YOGI SANDRA, S.Sos said...

halo bang del
mksh nih infonya bnr2 bermanfaat
tp sewaktu saya coba "save template" ga keluar jd ga bisa ngedit HTML.
mohon bantuannya...
tlng juga dilihat dan dikasih masukan apa saja kekurangan blog saya di http://adenyogisandra.blogspot.com/
mksh ya

ADEN YOGI SANDRA, S.Sos said...

O iya 1 lagi gmn cara menampilkan apa ya namanya ga tau hehehe..
posisinya di atas header sebelah kiri yang ada tulisannya kira2 Home, bisnis, blog, dlsb

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Post a Comment

Terima kasih, komentar anda sangat berarti bagi Bang Del. Isi pendapat anda tentang blog ini di Testimoni. Tinggalkan pesan di Blogroll untuk tukaran link.

Link Exchange | Blog Directory

Link Exchange Directory of Top Sites Dmegs.com
SEO friendly web directory of top sites & blogs organized by topic into categories and presented according to relevance ofwebsite. Submit your website free.

Tukar Link dan Promosi Website
Webkios Direktori Indonesia, katalog website untuk tukar link dan promosi gratis. Tambahkan website anda sekarang juga di direktori kami.

Increase your PageRank
The Search Engine Optimization Experiment - Increase your PageRank.

Blogarama - The Blog Directory
Get Listed At One Of The Largest FREE Blog Directories Online. Let People Find And Rate Your Blog In The Blog Directory!

2RSS.com :: RSS directory
2RSS.com :: RSS feeds, RSS directory, RSS software, RSS scripts, RSS articles, RSS syndication, XML, RDF, news.
 

Followers

Recent Comments