65 Cara Menambahkan Elemen Halaman Atau Kolom Full Widgets Pada Sidebar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Tutorial kali ini kita akan belajar lagi tentang desain template? Bagaimana menambahkan elemen halaman atau kolom full widget pada sidebar template blogger dengan menggunakan CSS, XHTML dan JavaScript hanya dalam empat langkah simple, kita juga bisa dengan mudah mengganti warna dan widget langsung pada area dashboard. Berikut sebuah screenshot simple hasil dari tutorial ini: 
Tabber Tab Styles 

Tampilannya mirip tab view sederhana yang triknya pembuatannya pernah saya bahas sebelumnya hanya saja selain perbedaan yang sudah saya sebutkan diatas kolom widget ini ketika menu diklik tingginya akan menyesuaikan dengan tinggi widget. Untuk menguji dan meyakinkan sobat JavaScript ini bekerja silahkan lihat demonya dulu pada template yang masih dalam proses desain saya disini dan disini. Sekalian saya minta saran dan kritik teman-teman untuk kedua tampilan terbaik template sederhana itu!!!

O ya saya sarankan untuk mengetes tutorial ini pada minima template atau backup template sobat sebelum bereksperimen dengan template sobat saat ini.

Oke sekarang ikuti langkah-langkah berikut:

Cara menambahkan elemen halaman baru atau kolom full widgets pada sidebar template blogger/ Cara membuat tab view versi dua:

  • Loggin ke akun blogger anda, pada dashboard klik layout > edit html dan letakkan script berikut sebelum tag </head>

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview-v2.js.js' type='text/javascript'/>

  • Selanjutnya cari kode berikut <div id='sidebar-wrapper'> just below there add the following code

 <div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>
<b:section class='tabbertab' id='tab3' maxwidgets='1'/>
</div>
 

 
Kode diatas hanya untuk tiga tab jika ingin lebih tinggal tambah kode serupa, tapi ingat id tab harus unik tudak boleh sama.

  • Sekarang tambahkan kode CSS berikut diatas ]]></b:skin>

/* start tab styles */
.tabberlive{
margin:0;
padding:5px;
clear:both;
background:#F2F2F2;
border:1px solid $tbbxbrcolor;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
}
.tabbernav {
margin:0px;
padding: 5px 0;
border-bottom: 1px solid $tbbxbrcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:7px 0.5em;
margin-right:4px; 
border-bottom:none;
background:$tbbxcolor2;
text-decoration:none;
color:$tbbxcolor1;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:$tbbxcolor1;
color:$tbbxcolor2;
border-bottom: 1px solid $tbbxcolor1;
}
.tabberlive .tabbertab {
padding:7px; 
border-top:0;
background:$tbbxcolor1;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid $tbbxbrcolor;
margin:0 5px;
padding:2px 0 5px 0;
}
/* end tab styles */

  • Dalam kode CSS diatas terdapat 4 variables named tbbxbgcolor, tbbxbrcolor, tbbxcolor1 and tbbxcolor2 jadi kita akan mudah mengganti warna tab konten langsung pada dashboard. Terakhir kita tambahkan code variable berikut pada bagian atas template variable definitions:


<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">

Sekarang simpan template! Klik elemen halaman/ page elemen jika sobat berhasil akan melihat kolom seperti screenshot berikut.
 
Sobat bisa menambahkan sebuah widget setiap klik nomer yang ada, jadi sobat dapat menambahkan sekian widget pada 1 kolom dengan mudah. Jangan lupa setelah melihat preview/ pratinjau blog untuk menyimpan atau save template.

Untuk mengganti warna tab menu, background atau border masuk pada menu layout (tata letak) klik tab font dan warna seperti screenshot berikut.

Now you should have a fully widgetized tabbed content box i hope you enjoyed this tutorial comments are welcome see my result

Inspirasi: Lawny.Design dengan sedikit modifikasi CSS


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

65 komentar :

  1. hasil dari eksperimen yang sangat luar biasa sob, buat tutorialnya membutuhkan waktu ya sob, makasih banyak sudah berbagi ilmunya sob!!!!

    BalasHapus
  2. Selalu keren, ukhti...salut!!

    BalasHapus
  3. ketigaxx yah, lumayan sob^^
    thanks buat tipsnya lagi, keep posting yang bermanfaat y sob :)

    salam blogger :D

    BalasHapus
  4. salam sahabat
    bagus ukhti,kreativ dan siip dech..thnxs n good luck yach

    BalasHapus
  5. keren banget tabviewnya....
    tab viewku cuma ada linknya..jelek jadinya..


    oh ya ada award buatmu...kalo berkenan diambil ya

    BalasHapus
  6. all: terimakasih apresiasinya

    BalasHapus
  7. kapan kapan kalau pengen nambah mas :)

    BalasHapus
  8. wah keren, klo nambah elemen halaman di header gmn, jadi supaya header bisa jadi 3 kolom gt maksudnya? thx atas jawabnnya..
    salam kenal saling kunjung yah..

    BalasHapus
  9. terimakasih apresiasinya, ada waktu anaa posting tutorial membagi header menjadi beberapa kolom ya!

    BalasHapus
  10. kereen pisan euy.. ane kantongin bawa pulang :)

    BalasHapus
  11. Terima Kasih Sudah Berbagi....semoga bermanfaat. ditunggu di rumah kayu

    BalasHapus
  12. mantap...
    mantap...
    mantap...

    salam.

    BalasHapus
  13. selalu ada yang baru di sini ya, sampai bingung klo mau mraktekin, hehehe

    BalasHapus
  14. sip deh mba...salut...
    menguasai benar nih.
    makasih sudah berbagi ilmunya.

    BalasHapus
  15. hasil templatenya boleh juga tuh mba...

    BalasHapus
  16. woww,,,artikelmu makin komplet aja ana..
    best share

    BalasHapus
  17. kunjungan malam...aku datang bergerilya lagi di blog sobat...
    nah...ini dia nih yang mantap...thanks sob..

    BalasHapus
  18. Wah pokoe mantap benar tutorialnya....makasih

    BalasHapus
  19. All: Terimakasih kunungan, komentar dan sgala apresiasinya!

    BalasHapus
  20. nanti kalau dah minat tak coba deh, soalnya ad beberapa script yg belum aq pasang

    BalasHapus
  21. iya, terimakasih komentarx

    BalasHapus
  22. tutorial bagi headernya mana yah :-(
    saling kunjung yah..

    BalasHapus
  23. Wah...bagus nih tutorialnya... saya suka banget

    BalasHapus
  24. terimakasih apresiasinya

    BalasHapus
  25. weh, makin keren aja neh blognya.
    thank's udh mampir ke blog saya.. .

    mampir balik :D

    BalasHapus
  26. salam ukhuwah...wah...makin banyak aja ilmu yang bisa dipelajari dari blog ini...tengkyu

    BalasHapus
  27. assalamu'alaikum..kak tambah keren blognya..masya alloh..ana minta diajarin kak...soalnya sudah ernah coba beberapa kali,,tapi ga berhasil2..hiks :'(

    BalasHapus
  28. aq pernah nyoba tp blog q malab tambah berat maklum basik template q mang dah berat dari sononya

    BalasHapus
  29. @ aku seorg muslimah: iya insyaAllah de' kpn? bgm? bknx diatas udah?

    @ anaa rasa tab diats tdk menambah berat palg klu widget blogger yg dipakai, justru menurut anaa blog yg kbnyk spoiler yg berat. script spoiler khn poanjang?

    BalasHapus
  30. mantaaaaaaaaaab sangad tutorial ini dan sudah aq manfaatkan diblog aq......hasilnya kantab ibis dan keren bgt...terimakasih

    BalasHapus
  31. mbak mohon dikasih tutorialnya untuk nambah tabnya jadi lebih dari 3....salam knl mbak....n minta izin bertukar link

    BalasHapus
  32. Woow...thatz great tutorial!
    can u give me more?
    Thanks for your information...
    Nice!

    BalasHapus
  33. mantap tabber tabnya, thanks, ini tab view versi 2 yah bro
    http://suharjo21.blogspot.com

    BalasHapus
  34. yang ini maksudnya apa yah

    "template variable definitions:"


    mohon pencerahannya..

    BalasHapus
  35. wah tulisannya kok jadi berubah yah..

    saya sudah copas










    setelah itu malah rusak tulisannya jadi besar + bold

    BalasHapus
  36. maaf sebelumnya,

    aku sudah mencoba, ternyata sudah bisa mba.


    ternyata variable code itu di taro di bawahnya..

    kalo di atasnya jadinya rusak..


    makasih banyak loh..

    sori sepertinya saya komentar 3x berturut2

    BalasHapus
  37. @ Isnan: Alhamdulillah klu dah berhasil. Iya maksud sy lettak bgn variabel dibgn ats template adalah dibagian akhir atau bawah jajaran variable yg telah ada.

    Makasih apresiasinya.

    BalasHapus
  38. saya malah jadinya terpecah 3... duuhhh pusing.. :( terus lagi... bagian atas template variable definitions pada langkah terakhir itu maksudnya mesti di atasnya atau di bawahnya (ngebaca komen Isnan Nugrah Lastiko) peletakannya???

    mohon bimbingannya sangad... saya sudah mondar mandir mau pake tabber tapi gak nemu2 tuto yg keren... baru di sini.. eee tiba2 mentok di kata2 itu :(

    terpaksa tuk sementara, kode2nya saya hapus kembali.. :( [padahal udah suka banget sama tampilannya :(

    BalasHapus
  39. assllmkm sahabat,,wah keren nih tab viewnya,,terima kasih atas infonya sahabat

    BalasHapus
  40. assalamu 'alaikum wrwb.

    saya bingung. kok pengaturan warnanya tidak keluar.

    kode berikut ini :






    ditaruh dimana yah? mhn pencerahan.

    BalasHapus
  41. maaf gan...variabel-nya tuh tepatnya di kode apa ya??mohon pencerahannya...

    BalasHapus
  42. template variable definitions tuh letak nya dibagian mana sob ? saya bingung disini.. :) mohon bantuannya

    BalasHapus
    Balasan
    1. Pada bagian atas kode template anda, letakkan kode baru variable tab view dibagian bawah kode variable yg anda ditemplate anda.

      Hapus
  43. sangat sangat bermanfaat.. tutornya mudah di mengerti + berbobot.. happy blogging..

    BalasHapus
  44. haduh masih mumet ,, ga berhasil mempraktekannya,,,

    BalasHapus
  45. Waduh begadang disini untuk praktekin satu-satu tutorial yang ada diblog ini. Keren, salut sob. Sekalian numpang copas ya sob!!! He he

    BalasHapus
    Balasan
    1. Gpp, tapi lebih bijak mungkin anda ketika copas 100% tidak lupa untuk memberikan link back. Terimakasih kunjungannya

      Hapus
  46. tolongin dong ukhti, sepertinya ada masalah dgn template yg saya pake. saya gak bisa praktekin tutorial di blog ini. pliiisss...
    Tks b4
    ini blog saya: maskapro.com

    BalasHapus
    Balasan
    1. Iya sy sdh lihat blog anda, kalau mau coba tutorial diats coba pada template minima yg disediakan blogger atau anda bisa gunakan tabber tab dengan bantuan script JQuery, silahkan search saja tutorialnya diblog ini. Makasih

      Hapus
  47. tempat blog ane kenapa gak bisa muncul ya
    www.buka-a.biz

    BalasHapus
  48. maksudnya variable.... itu apa sie mbak?

    BalasHapus
  49. ane gak ngerti postingannya

    mampir balik http://infodariom.blogspot.com

    BalasHapus
  50. boss punya saya vertikal jadinya . . . cara nambahnya gmana boss

    BalasHapus
  51. variable definitions tulisan codenya gmna boss

    BalasHapus
  52. assalamualaikum.. yang langkah ke-2 it. ak gk tau mksudnya.
    ak fund pke ctrl+F, gk ktemu. Mhon Bmbingannya ;-(

    BalasHapus
  53. saya masih belum ngerti dengan kode Variable :-)

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!