Berbagi Informasi Bisnis, Berita, Tips & Trik, dll: Tabs

Tampilkan postingan dengan label Tabs. Tampilkan semua postingan

Tabs menu Horizontal dg Background Aneka Warna

Ada dua cara untuk membuat tabs menu horizontal blogger dengan background beraneka warna, dan ini adalah cara yang pertama. Agar setiap tab menu mempunya warna background berbeda dengan warna background menu yang lain, setiap link dibuat mempunyai class berbeda yang masing-masing mempunyai background berbeda warna. Jika anda menginginkan warna teks link berbeda disetiap menu, andapun bisa menambahkannya.

D E M O

Mengaktifkan Tabs Menu Horizontal Blogger

Agar tabs menu horizontal dengan aneka warna background dapat dibuat, anda harus menggunakan tabs menu horizontal dalam blog dengan cara mengaktifkan fitur "Laman/Pages yang dapat ditemukan di dasbor. Fitur ini berisi link posting halaman statis dan/atau link alamat web/blog lain atau bisa juga link posting tertentu, baik di dalam blog atau yang berasal dari luar blog. Anda bisa mengisi setiap link menu di tabs menu horizontal blogger sesuai dengan apa yang diinginkan untuk ditampilkan.

Cara mengaktifkan fitur "Laman/Pages"

Login ke Blogger
Halaman Dasbor/Dasboard
Laman/Pages
Buatlah link tabs menu horizontal dengan cara :
- Membuat Posting di halaman statis. Untuk membuat posting di halaman statis, pilih "Laman Kosong" kemudian buat posting lengkap dengan judul postingnya. Judul posting hendaknya singkat saja karena nantinya digunakan di tabs menu sebagai teks link tabs menu horizontal.
- menampilkan alamat web/blog lain di tabs menu horizontal blogger. Untuk membuat link seperti ini silahkan pilih "Alamat Web".
  Tuliskan secara singkat titlenya kemudian tuliskan juga alamat web-nya. Alamat web bisa juga diganti dengan alamat sebuah posting.
Lanjutkan dengan pilih "Tab atas".
Setelah daftar menu di tabs horizontal selesai dibuat dengan langkah di atas, lanjutkan dengan proses membuat background aneka warna untuk masing-masing menu.

Menambah kode css & menambah class

Lanjutkan dengan klik "Template" yang letaknya di bawah fitur "Laman/Pages".
Lakukan proses "Cadangkan/Pulihkan" atau "Backup/Restore" templates untuk berjaga-jaga dari kemungkinan yang tak di harapkan.
Klik "Edit HTML".

Template › Edit HTML

Klik "Lanjutkan/Proceed".
Klik "Expand Templates Widget".
Cari kode <li class='selected' expr:id='data:link.title'>
Gunakan Ctrl + F untuk mempercepat dan mempermudah pencarian kode.

Di bawah kode tersebut masih ada beberapa kode lain seperti terlihat di bawah ini:

xHTML tabs menu default blogger

<li class='selected' expr:id='data:link.title'><a expr:href='data:link.href'><data:link.title/></a></li>
          <b:else/>
            <li expr:class='data:link.title'><a expr:href='data:link.href'><data:link.title/></a></li>

Ganti kode dengan kode berikut:

xHTML pengganti kode default tabs menu blogger

<li class='selected'><a expr:class='data:link.title' expr:href='data:link.href'><data:link.title/></a></li>
          <b:else/>
            <li><a expr:class='data:link.title' expr:href='data:link.href'><data:link.title/></a></li>

Klik "Simpan Template/Save Template".

Lanjutkan dengan membuat class pada kode css sesuai kode xHTML tab menu

Membuat class dan background pada kode css

Kode CSS dan contoh class link tab menu

li a.Beranda{background:green;}
li a.gubhugreyot{background:blue;}
li a.Belajar{background:orange;}
li a.Hacks{background:brown;}
.tabs .widget-content ul li a{
      color:yellow;
      text-shadow:1px 1px 1px #000;
      transition:background-color 0.6s,color 1s;
      -o-transition:background-color 0.6s,color 1s;
      -ms-transition:background-color 0.6s,color 1s;
      -moz-transition:background-color 0.6s,color 1s; 
      -webkit-transition:background-color 0.6s,color 1s;
}
.tabs .widget-content ul li:hover a{
      background:#000;
      color:#02e7fb;
}

Keterangan :

li a.Beranda » class "Beranda" diperoleh dari menu pertama yang title-nya "Beranda". Nama berbeda yang biasa dipakai adalah "Home".
li a.gubhugreyot » class "gubhugreyot" diperoleh dari title tab menu "gubhugreyot.
li a.Belajar » class "Belajar" diperoleh dari title tab menu "Belajar Kode CSS. Anda bisa mengambil salah satu dari "Belajar, Kode dan CSS" sebagai class.
li a.Hacks » class "Hacks" diperoleh dari title tab menu "Best Blogger Hacks. Anda bisa mengambil salah satu dari "Best, Blogger dan Hacks" sebagai class.
Setelah mendapatkan class sesuai title link tabs menu yang telah anda buat melalui "fitur Laman" dan digunakan di kode CSS untuk menggantikan class yang ada di contoh css, silahkan simpan kode css di bawah kode ]]></b:skin>
Klik "Simpan Template/Save Template"
Buka blog dan lihat hasilnya.
Anda bisa menambah class baru sesuai jumlah tab yang dibuat. Warna juga bisa dirubah disesuaikan dengan selera!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Posting » Setu WAGE, August, 18, 2012

» Happy Blogging - gubhugreyot «

16.23 | 0 komentar | Read More

Panduan BloGGeR Cara Membuat DIV Tab View

Tab view sangat tepat digunakan blog yang mempunyai materi posting bervariasi. Tab view tak ubahnya sebuah box menu yang dibagi dalam beberapa tab. Masing-masing tab mempunyai lebar sama dengan box yang digunakan dan hal seperti ini sangat berguna karena setiap tab bisa memanfaatkan lebar kolom secara maksimal. Banyak cara bisa digunakan untuk membuat tab view, namun kali ini kita coba membuat dengan bantuan sebuah javascript yang sangat sederhana namun mampu melakukan dungsinya secara sempurna.

Tab view ini terhitung sangat irit dalam penggunaan KODE CSS ataupun script namun demikian mampu memberikan penampilan yang sangat istimewa. Tentu saja dengan iritnya penggunaan CSS dan script ini akan sangat menguntungkan terhadap stabilitas loading blog.

D E M O

Kode CSS Tab View :

.GRtab_view{
        margin:20px auto;
        text-align:center;
        float:none;
        background:#888;
        width:356px;
}
div.GRtab_view div.tabs{
        cursor:pointer;
        height:30px;
        overflow:hidden;
        border:4px solid #999;
        float:left;
        width:350px;
        background:#666;
}
div.GRtab_view div.tabs a{
        float: left;
        display: block;
        text-align:center;
        padding:8px;
        vertical-align: middle;
        border: 1px solid #444;
        font-family:Arial;
        font-weight:700;
        font-size:11px;
        text-transform:uppercase;
        color:#eee;
        background:#666;
}
div.GRtab_view div.tabs a:hover{
        background:#900;
        color:#fff;
} 
div.GRtab_view div.tabs a.Active{
        background:#444;
        color:#FF0000;
}
div.GRtab_view div.tabs a.Active:hover{
        background:#555;
        color:#ffff99;
} 
div.GRtab_view div.FTs{
        clear:both;
        text-align:left;
        border:3px solid #888;
        border-bottom-width:10px;
        overflow: hidden;
        background:#888;
        width:350px;
        height:250px;
        margin-top:0;
        font-size:11px;
        font-family:verdana;
        color:#CCC;
        line-height:18px;
        padding:1px;
        background:rgba(0,0,0,0.1);
}
div.GRtab_view div.FTs ul{
        list-style-type:square;
        margin:0;
        padding:0;
        padding-left:15px;
}
div.GRtab_view div.FTs li p{
        margin:0 0 0 4px;
}
div.GRtab_view div.FTs div.FT{
        background:rgba(0,0,0,0.6);
        height:100%;
        padding:10px;
        overflow:hidden;
}
div.GRtab_view div.FTs div.FT div.Fs{}
div.GRtab_view a{
        cursor:pointer;
        color:#F90;
        text-decoration:none;
        padding:2px 4px;
        margin:0;
        text-shadow:1px 1px 1px #000;
}
div.GRtab_view a:hover{
        color:#6FF;
        text-decoration:none;
        background:#F90;
}
div.GRtab_view a.GRview_img img{padding:2px;background:#777;}
div.GRtab_view a.GRview_img:hover{background:none;}
div.GRtab_view a.GRview_img img:hover{
        background:#F90;
}

Javascript-1 :

<script type="text/javascript">
//<[CDATA[
function GRtab_view_aux(m, k) {
    var l = document.getElementById(m);
    var n = l.firstChild;
    while (n.className != "tabs") {
        n = n.nextSibling
    }
    var i = n.firstChild;
    var o = 0;
    do {
        if (i.tagName == "A") {
            o++;
            i.href = "javascript:GRtab_view_switch('" + m + "', " + o + ");";
            i.className = (o == k) ? "Active": "";
            i.blur()
        }
    } while (i = i.nextSibling);
    var p = l.firstChild;
    while (p.className != "FTs") {
        p = p.nextSibling
    }
    var j = p.firstChild;
    var o = 0;
    do {
        if (j.className == "FT") {
            o++;
            if (p.offsetHeight) {
                j.style.height = (p.offsetHeight - 2) + "px"
            }
            j.style.overflow = "auto";
            j.style.display = (o == k) ? "block": "none"
        }
    } while (j = j.nextSibling)
}
function GRtab_view_switch(d, c) {
    GRtab_view_aux(d, c)
}
function GRtab_view_initialize(b) {
    GRtab_view_aux(b, 1)
};
//]]>
</script>

Javascript-2 :

<script type="text/javascript">
GRtab_view_initialize('GRtab_view');
</script>

xHTML :

<div class="GRtab_view" id="GRtab_view">
    <div class="tabs">
        <a>CSS</a>
        <a>Javascript</a>
        <a>Animasi gif</a>
        <a>Music</a>
        <a>Gallery</a>
    </div>             
<!-- ======== Start content ========== -->
<div class="FTs">
    <div class="FT">
        <ul>
            <li><a href="http://gubhugreyot.blogspot.com/2010/01/tab-view.html" target="_blank">Drop Down Menu</a><p>Dropdown menu css3 ...</p></li>
            <li><a href="http://gubhugreyot.blogdetik.com" target="_blank">Tab View Script</a></li>
            <li><a href="http://tantytm.blogspot.com" target="_blank">Hoizontal Menu</a></li>
            <li><a href="http://lightbox-demo-tutorial.blogspot.com" target="_blank">Opacity Effect Script</a></li><a class="GRview_img" href="http://bgsgr.blogspot.com" target="_blank"><img class="opa" src="https://lh6.googleusercontent.com/-KBlhOxwhO24/T14I_GP8XvE/AAAAAAAAAXY/eMUM3EBaEBs/s144-c/12Maret2012.jpg" style="width:50px;margin:5px 0 5px 0;" /></a>
        </ul>
    </div>
    <div class="FT">
        <ul>
            <li><a href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/2012/03/hidden-text-sizer.htmlhtml" target="_blank">Hidden Tex Sizer</a></li>
            <li><a href="Link Text Animation.html" target="_blank">Text Animation</a></li>
            <li><a href="Link Top Bar Script.html" target="_blank">Top Bar Script</a></li>
        </ul>
    </div>
    <div class="FT">
        <ul>
            <li><a href="Link Memotong Gambar.html" target="_blank">Memotong Gambar</a></li>
            <li><a href="Link Photo dari Layar PC.html" target="_blank">Photo dari Layar PC</a></li>
        </ul>
    </div>
    <div class="FT">
        <ul>
            <li><a href="Link Mp3 Barat.html" target="_blank">Mp3 Barat</a></li>
            <li><a href="Link Mp3 Indonesia.html" target="_blank">Mp3 Indonesia</a></li>
            <li><a href="LinkReggae.html" target="_blank">Reggae</a></li>
        </ul>
    </div>
    <div class="FT">
        <ul>
            <li><a href="Link Photo Artis.html" target="_blank">Photo Artis Telanjang</a></li>
<a class="GRview_img" href="Link Photo Artis.html" target="_blank"><img src="https://lh6.googleusercontent.com/-KBlhOxwhO24/T14I_GP8XvE/AAAAAAAAAXY/eMUM3EBaEBs/s144-c/12Maret2012.jpg" style="width:50px;margin:5px 0 5px 0;" /></a>
            <li><a href="Link Photo Pemandangan.html" target="_blank">Photo Pemandangan </a></li>
            <li><a href="Link Pakaian Adat Afrika.html" target="_blank">3.Pakaian Adat Afrika</a></li>
        </ul>
    </div>
</div>
<!-- ======== End content ========== -->
</div>

Cara membuat DIV Tab View :

Login ke Blogger.
- Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
- Tuliskan Password.
- Klik "Sign in"
Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
Klik "Rancangan (Design)".
Kembali halaman baru akan terbuka, klik "Edit HTML".
Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
- Backup/Restore Template » berisi fitur untuk melakukan backup template.
- Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
- Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
Cari kode ]]></b:skin> pada "Box Edit Template".
Copy kode CSS dan letakkan di atas ]]></b:skin>
Copy Javascript-1 dan letakkan di bawah ]]></b:skin>
Cari kode </body> kemudian letakkan javascript-2 di atasnya.
Klik "Simpan Template (Save Template)".
Klik "Rancangan (Design)".
Klik "Add a Gadget". Pilih elemen yang mempunyai lebar sekitar 380px.
Klik "HTML/Javascript".
Copy xHTML dan pastekan salam "box HTML/Javascript".
Klik "SIMPAN/SAVE"

Catatan/Keterangan :

Setelah tab view berhasil dibuat, ganti variable isi tab view dengan yang ingin anda tampilkan.
Merubah ukuran lebar tab view dilakukan dengan merubah width pada beberapa syntax. Perubahan juga akan berpengaruh terhadap jumlah tab.
Gunakan title setiap tab sependek mungkin agar bisa lebih banyak tab termuat.
Tab view selain untuk memmuat daftar link juga dapat digunakan untuk berbagai hal lain seperti memuat artikel pendek atau image.
Jika membutuhkan panduan backup template, cara mencari kode dan berbagai cara menyimpan kode di template, silahkan buka Special Tutorials di kolom sebelah kiri halaman.
Tab view dapat digunakan juga di halaman posting.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Ngahad LEGI,Maret,17,2012

» Happy Blogging - gubhugreyot «

10.01 | 0 komentar | Read More

Rainbow Tab »Tabs content CSS3 Cantik & Antik

"Rainbow tabs" hanyalah sebuah istilah sekedar untuk memberi nama tab konten yang kita buat menggunakan css3. Perpindahan tab menggunakan fungsi hover effect. Anda bisa melihat bagimana rainbow tab bekerja. Tabs content ini tak hanya bisa digunakan melalui "Add a Gadget", namun bisa juga anda gunakan di halaman posting.

Raibow tabs merupakan tab dengan efek transparansi dimana untuk menciptakan efek ini digunakan background rgba. Adapun tujuannya selain membuat "warna terlihat lebih mengkilat" juga agar dalam tab bisa ditampilkan sebuah background image yang terlihat secara samar-samar.

D E M O

Kode CSS dan xHTML

Kode CSS :

#mbahGRtab{
        background:#777 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6Wsv5veGfwbn1fkTLIqYdoFFw3NdljUxQBCWAjkybRc7Ids56Cw8q966wLSCjWhQ3cVHC3VFPFsNdg9_Ifdwy5msYzfICX_6ZkonGNxwbdSWogRSy5rapQkTuGkNC-RkYTuDzs3mRYz4/s340/img_gubhugreyot_gadisku-06.jpg) center 95% no-repeat;
        background-size:322px 350px;
        border:8px double #666666;
        font-size:12px;
        color: #FF9900;
        position:relative;
        width:322px;
        height:402px;
        margin:20px auto;
}
#mbahGRtab .mbahGRselector{
        width:130px;
        padding:5px;
        height:30px;
        text-align:center;
        display:block;
        font-size:14px;
        font-weight:bold;
        text-transform:uppercase;
        margin:0;
        border:1px solid #000;
}
.mbahGRkonten a:link{
        color:#F90;
        margin-left:0;
        text-decoration:none;
}
.mbahGRkonten a:hover,#mbahGRtabA .mbahGRselector:hover,#mbahGRtabB .mbahGRselector:hover,#mbahGRtab .mbahGRselector:hover{ 
        color:#6F0;
}
#mbahGRtabB .mbahGRkonten{
        z-index:1;
        opacity:0;
        filter:alpha(opacity=0);
}
#mbahGRtabA .mbahGRselector{
        z-index:3;
        left:0;
        background:#30F url(https://lh4.googleusercontent.com/-Qgnehm31W-E/T2RPdyOU76I/AAAAAAAAAcA/ULIWGJNUhUM/h120/grad-blue-transp-4x100.png) left -16px repeat-x;
}
#mbahGRtabB .mbahGRselector{
        background:#fff url(https://lh4.googleusercontent.com/-Qgnehm31W-E/T2RPdyOU76I/AAAAAAAAAcA/ULIWGJNUhUM/h120/grad-blue-transp-4x100.png) left -50px repeat-x;
        left:180px;
}
#mbahGRtabA .mbahGRselector,#mbahGRtabB .mbahGRselector,#mbahGRtab .mbahGRselector{
        position:absolute;
        cursor:pointer;
        top:0;
        color:#fff;
        font-family:Verdana;
        font-size:14px;
        text-shadow:1px 1px 1px #000;
        line-height:25px;
}
.mbahGRkonten a,#mbahGRtabA .mbahGRselector,#mbahGRtabB .mbahGRselector,#mbahGRtab .mbahGRselector{
        transition:0.6s ease-in;
        -o-transition:0.6s ease-in;
        -moz-transition:0.6s ease-in;
        -webkit-transition:0.6s ease-in;
        -ms-transition:0.6s ease-in;
}
#mbahGRtab:hover .mbahGRselector, #mbahGRtabs:focus .mbahGRselector, #mbahGRtabs:active .mbahGRselector{
        background:#fff url(https://lh3.googleusercontent.com/-tONv3Oew8_8/T2bbmxS1cxI/AAAAAAAAAco/uy2Lqhozn7Q/h120/bgGradRedBlackV41H8.png) top right repeat-x;
        z-index:0;
}
#mbahGRtabA:hover .mbahGRselector,#mbahGRtabA:focus .mbahGRselector,#mbahGRtabA:active .mbahGRselector{
        z-index:4;
        background:#060 url(https://lh4.googleusercontent.com/-Tk55wbQOL_s/T2XGvQfF2WI/AAAAAAAAAcY/1_THN4F2g7A/h120/gradOrangeBlackV45H2.gif) bottom left repeat-x;
}
#mbahGRtabB:hover .mbahGRselector,#mbahGRtabB:focus .mbahGRselector,#mbahGRtabB:active .mbahGRselector{
        z-index:4;
        background:#000066 url(https://lh4.googleusercontent.com/-Qgnehm31W-E/T2RPdyOU76I/AAAAAAAAAcA/ULIWGJNUhUM/h120/grad-blue-transp-4x100.png) left -55px repeat-x;
}
#mbahGRtab:hover .mbahGRkonten, #mbahGRtabs:focus .mbahGRkonten, #mbahGRtabs:active .mbahGRkonten{
        z-index:0;
        opacity:0;
        filter:alpha(opacity=0);
}
#mbahGRtabA:hover .mbahGRkonten,#mbahGRtabA:focus .mbahGRkonten,#mbahGRtabA:active .mbahGRkonten,#mbahGRtabB:hover .mbahGRkonten,#mbahGRtabB:focus .mbahGRkonten,#mbahGRtabB:active .mbahGRkonten{
        z-index:3;
        opacity:1.0;
        filter:alpha(opacity=100);
        overflow:auto;
        background:rgba(27,1,0,0.85);
}
#mbahGRtabB:hover .mbahGRkonten,#mbahGRtabB:focus .mbahGRkonten,#mbahGRtabB:active .mbahGRkonten{
        color:#D0ECF9;
        background:rgba(2,0,27,0.85);
        overflow:auto;
}
.mbahGRkonten{
        margin:0 !important;
        padding:20px 5px 15px 15px !important;
        background:#fff;
        border:1px solid #000;
        position:absolute;
        left:0;
        top:40px;
        width:300px;
        height:325px;
        display:block;
        margin:0;
        font-family:Arial;
        transition:1s;
        -o-transition:1s;
        -moz-transition:1s;
        -webkit-transition:1s;
        -ms-transition:1s;
        line-height:18px;
        overflow:hidden;
        background:rgba(0,0,0,0.6);
        list-style-type:square;
}
.mbahGRkonten li{
        margin-left:20px;
}
.mbahGRkonten li:hover a{
        margin-left:10px;
}
#mbahGRtabA .mbahGRkonten{
        z-index:2;
        color:#ddd;
}

<div id="mbahGRtab">
<div id="mbahGRtabA">
    <h3 class="mbahGRselector">First Tab</h3>
    <ul class="mbahGRkonten"><p><span style="color:red;">Tuliskan teks di sini !</span> Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!</p>
        <li><a class="tipz" href='http://bloggerstuars.blogspot.com' target='_blank' title='Dapatkan menu masakan dari berbagai daerah di seluruh penjuru nusantara'>Menu Masakan Indonesia</a></li>
        <li><a class="tipz" href='http://tantytm.blogspot.com' target='_blank' title='Mengapa harus belajar hipnotis? Bukankan mendingan ngeblog saja?!'>Trik Belajar Hipnotis</a></li>
        <li><a class="tipz" href='http://gubhugreyot.blogdetik.com' target='_blank' title='Panduan lengkap ngeblog di blogdetik'>Tutorial Blogdetik</a></li>
        <li><a class="tipz" href='http://gubhugreyot.blogdetik.com' target='_blank' title='Panduan sederhana menggynakan Adobe'>Adobe Photoshop</a></li>
        <li><a class="tipz" href='http://lightbox-demo-tutorial.blogspot.com' target='_blank' title='Cara mudah membuat berbagai lightbox'>Lightbox</a></li>
        <li><a class="tipz" href='http://gubhugreyot-demo-tutorial-blogger-1.blogspot.com' target='_blank' title='Cara membuat wanita bertekuk lutut'>Trik Tundukkan Wanita</a></li><p><span style="color:red;">Tuliskan teks di sini ! </span>Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!</p><p>
Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!</p>
    </ul>
</div>
<div id="mbahGRtabB">
    <h3 class="mbahGRselector">Second Tab</h3>
    <ul class="mbahGRkonten"><p>Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!</p>
        <li><a href='Link2a' title='2A'>Nama Link2a</a></li>
        <li><a href='Link2b' title='2A'>Nama Link2b</a></li>
        <li><a href='Link2c' title='2A'>Nama Link2c</a></li>
        <li><a href='Link2d' title='2A'>Nama Link2d</a></li>
        <li><a href='Link2e' title='2A'>Nama Link2e</a></li>
        <li><a href='Link2f' title='2A'>Nama Link2f</a></li>
        <li><a href='Link2g' title='2A'>Nama Link2g</a></li>
        <li><a href='Link2h' title='2A'>Nama Link2h</a></li>
        <li><a href='Link2i' title='2A'>Nama Link2i</a></li>
        <li><a href='Link2j' title='2A'>Nama Link2j</a></li><p>Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!</p><p>Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!</p>
    </ul>
</div>
<div class="clearboth"></div>
</div>

Cara membuat :

Login ke Blogger.
- Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
- Tuliskan Password.
- Klik "Sign in"
Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
Klik "Rancangan (Design)".
Kembali halaman baru akan terbuka, klik "Edit HTML".
Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
- Backup/Restore Template » berisi fitur untuk melakukan backup template.
- Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
- Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
Cari kode ]]></b:skin> pada "Box Edit Template".
Copy kode CSS dan letakkan di atas ]]></b:skin>
Klik "Simpan Template (Save Template)".
Klik "Rancangan (Design)".
Klik "Add a Gadget".
Klik "HTML/Javascript".
Copy xHTML dan pastekan salam "box HTML/Javascript".
Klik "SIMPAN/SAVE"

Catatan/Keterangan :

Jika membutuhkan panduan cara backup template, cara cari kode dan berbagai cara simpan kode, buka Special Tutorials yang terletak di kolom sebelah kiri.
Selain disimpan di atas kode ]]></b:skin>, kode CSS dapat juga disimpan bersama xHTML melalui "Add a Gadget". Agar bisa disimpan disini tambah tag style pada kode css.
Kode CSS :
```
<style type="text/css">
Letakkan kode CSS di sini!
</style>
```

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Ngahad LEGI,Maret,17,2012

» Happy Blogging - gubhugreyot «

09.13 | 0 komentar | Read More

Tabs with Opacity Effects

Tabs with opacity Effects merupakan sebuah tab multi fungsi yang bisa digunakan untuk melakukan posting dengan muatan teks, gambar ataupun KODE HTML. Penampilannya yang exotic tentunya akan memberikan citra lebih bagi penampilan sebuah web atau blog. Kamu bisa melihat penampilannya dengan KLIK DEMO.

D e m o :

Silahkan buka demonya melalui link berikut. Dalam demo tidak dipergunakan background image seperti dalam kode css di bawah atau seperti yang terlihat di screenshoot, namun hanya menggunakan background color.

D E M O

Cara membuat Auto Hide Box :

Copy dan simpan KODE CSS dan Javscript berikut di bagian head di antara tag <head> dan tag </head>. Kode css bisa disimpan di atas KODE ]]></b:skin> dan javascript di bawah kode <head> kemudian gunakan KODE HTML di bagian body di antara tag <body> dan tag </body> atau pada saat posting. Jika bog anda sudah menggunakan jQuery 1.3.2 atau versi yang lebih baru silahkan gunakan javascriptnya saja.

Kode CSS :

<style type="text/css">
h3.green, h3.grey{
       padding:4px 10px;
       font-family:Arial;
       font-weight:bold;
       font-size:14px;
}
h3.green{color:#81C791;} 
h3.grey{color:#cccccc;}
p.yellow{font-family:12px Times New Roman 900;color:#ffff00;}
ul.GRtabnav{
       list-style:none;
       margin:0;
       padding:0;
}
ul.GRtabnav li{
       display:inline;
}
ul.GRtabnav li a{
       font-family:verdana;
       font-weight:600;
       color:#fff;
       font-size:14px;
       padding:5px 5px;
       background:#ccc url("http://gubhugreyot-background.googlecode.com/svn/small/bgGrad-bluelight-31x30.gif");
       border:2px solid #333333;
       text-decoration:none;
}
ul.GRtabnav li a.selected, ul.GRtabnav li a:hover{
       background:#333 url("http://gubhugreyot-background.googlecode.com/svn/small/bgGrad-orangeblack-8x45.gif") repeat-x;
       color:#ffcc33;
       padding-top:6px;
}
ul.GRtabnav li a:focus{
       outline:0;
}
div.GRtabs > div{
       font-family:Georgia, "Times New Roman", Times, serif;
       background:#244e8a url("http://gubhugreyot-background.googlecode.com/svn/small/bgGrad-blueblack-17x446.gif") top left repeat-x;
       font-weight:550;
       font-size:12px;
       width:450px;
       height:300px;
       padding:8px;
       margin-top:3px;
       border:6px double #999;
       border-top:12px double #999;
       overflow:auto;
}
div.GRtabs{
       opacity:0.6;
       filter:alpha(opacity=60);
       transition:0.7s;
       -o-transition:0.7s;
       -moz-transition:0.7s;
       -webkit-transition:0.7s;
       -ms-transition:0.7s;
}
div.GRtabs:hover{opacity:1.0;filter:alpha(opacity=100);}
div.GRtabs > div h3{
       margin-top:0;
    height:30px;
    font-size:14px;
    line-height:28px;
    padding-bottom:2px;
    background:url("http://gubhugreyot-background.googlecode.com/svn/small/bgGrad-coklatgrad-26x27.gif");
    border:1px dotted #777;
    border-radius:3px;
    font-family:Arial;
    letter-spacing:-1px;
    text-transform:uppercase;
}
#first{color:#66ffcc;}
#second{color:#99e1fc;}
#third{color:#92e1fc;} 
#four{color:#fdeba3;} 
.waste{min-height:1000px;}
</style>

Javascript :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function () {
 var tabContainers = $('div.GRtabs > div');
 tabContainers.hide().filter(':first').show();
 $('div.GEtabs ul.GRtabnav a').click(function () {
  tabContainers.hide();
  tabContainers.filter(this.hash).show();
  $('div.GRtabs ul.GRtabnav a').removeClass('selected');
  $(this).addClass('selected');
  return false;
 }).filter(':first').click();
});
//]]>
</script>

xHTML :

<div class="GRtabs">
<ul class="GRtabnav">
<li><a href="#first">Tab-1</a></li>
<li><a href="#second">Tab-2</a></li>
<li><a href="#third">Tab-3</a></li>
<li><a href="#four">Tab-4</a></li>
</ul>

<div id="first">
<h3 class="green">Title Tab Pertama (1)</h3><p class="yellow">Konten Tab Pertama (1)</p>
<p>Konten dari Tab Pertama (1)</p>
</div>

<div id="second">
<h3 class="grey">Title Tab kedua (2)</h3><p class="yellow">Konten tab kedua (2)</p>
<p>Konten dari Tab Kedua (2)</p>
</div>

<div id="third">
<h3 class="green">Title Yab ketiga (3)</h3>
<p>Konten dari Tab Ketiga (3)</p>
</div>

<div id="four">
<h3 class="grey">Title Tab keempat (4)</h3>
<p>&lt;img src="URL-image.jpg" width="100" height="75" style="float:left;margin:5px 12px 5px 0;"/&gt;Konten dari Tab Keempat (4)</p>
</div>

<div class="waste"></div>
</div>

Cara Menggunakan Kode :

Login ke Blogger.
Setelah halaman dasbor (Dasboard) terbuka, cari dan klik Design (Rancangan).
Lanjutkan dengan klik Edit HTML
Lakukan Backup Template.
Cari kode <head> kemudian copy dan pastekan javascript tepat di bawahnya.
Cari kode <]]></b:skin>. Copy dan pastekan kode css tepat di atasnya.
Klik Simpan Template (Save Template).
Lanjutkan dengan menggunakan xHTML.
Gunakan xHTML di elemen sidebar atau yang lain. Simpan kode melalui Add a Gadget yang terdapat di Elemen Laman (Page Elemen).
Anda bisa juga menggunakan tab ini di halaman posting. Jika digunakan di halaman posting seluruh xHTML harus dibuat dalam bentuk rapat (tak terputus).

Catatan/Keterangan :

Anda dapat membuka Special Tutorials yang ada di kolom sebelah kiri halaman untuk mendapatkan panduan tentang cara backup template, cara cepat cari kode html di template serta cara menyimpan kode html, javascript dan kode css.
Tinggi tabs dapat disesuaikan dengan kebutuhan dan ruang yang tersedia di halaman blog dengan merubah ukuran height pada KODE CSS (di syntax div.GRtabs > div {)
Lebar tabs dapat disesuaikan dengan kebutuhan dan ruang yang tersedia di halaman blog dengan merubah ukuran width pada KODE CSS (di syntax div.GRtabs > div {). Kamu bisa menggantinya juga dengan width:auto; --> Lebar tab langsung menyesuaikan diri dengan lebar ruang yang tersedia.
Penampilan tab dapat dirubah dengan mengganti beberapa background image yang digunakan.

Penting!

Seluruh background image harus anda download kemudian diupload di blogger agar bisa berfungsi dengan sempurna!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Kamis KLIWON, Maret, 08, 2012

» Happy Blogging - gubhugreyot «

01.56 | 0 komentar | Read More

Berbagi Informasi Bisnis, Berita, Tips & Trik, dll

Tabs menu Horizontal dg Background Aneka Warna

Mengaktifkan Tabs Menu Horizontal Blogger

Cara mengaktifkan fitur "Laman/Pages"

Menambah kode css & menambah class

xHTML tabs menu default blogger

xHTML pengganti kode default tabs menu blogger

Membuat class dan background pada kode css

Kode CSS dan contoh class link tab menu

Keterangan :

Panduan BloGGeR Cara Membuat DIV Tab View

Kode CSS Tab View :

Javascript-1 :

Javascript-2 :

xHTML :

Rainbow Tab »Tabs content CSS3 Cantik & Antik

Kode CSS :

Kode CSS :

Tabs with Opacity Effects

Kode CSS :

Javascript :

xHTML :

Adsense Black Magic

Label

Popular Posts Today