Memasang Tab Menu Horizontal

Ada beberapa jenis dan layout tentang Tab Menu, ada yang secara vertikal dan ada juga yang secara horizontal dan lain-lain. Tujuannya sendiri , selain merupakan navigasi yang memudahkan dan memanjakan pengunjung , Tab Menu juga mempercantik desain blog kita.

Dan untuk kali ini, saya akan menulis tentang Tab menu berjenis Horizontal seperti gambar di atas. dan agar memudahkan dalam pemasangnya kita akan mengunakan penyedia layanan Tab Menu Generator.

Langkah-langkahnya seperti berikut ini.

Pertama : buka situs www.cssmenumaker.com

Kedua : Dalam kolom Horizontal Css Menus pilih salah satu desain yang kita sukai. kemudian tekan link tulisan Customize.

Ketiga : Setelah terbuka halaman Customize. dalam kotak kosong isi berapa jumlah bottom ( tombol ) yang akan kita gunakan.misalkan di isi dengan 4 atau 5. kemudian tekan Submit. untuk menuju halaman berikutnya.

Keempat : Dalam halaman step 1 ini. Di bawah tulisan Enter Label And Link For Each Buttom , ada sejumlah kotak kosong yan perlu kita isi.

Kolom Button Label : Menamai Button/Tab Menu. misalkan Home, Album, Login dll.

Link : Isi alamat link url yang sesuai dengan Labelnya. misalkan Label Home Link url-nya di isi dengan http://alamatblogkita.com/. Label Photo Link url-nya di isi dengan Categorie/label photo di blog kita.

untuk langkah mudahnya seperti ini :

buat tab baru di browser baik IE atau FireFox,kemudian buka situs blog kita, pada categorie/label di blog kita klik kanan di atas label photo, dan pilih Copy Link Location.

Setelah itu balik lagi ke situsnya Cssmenumaker.com, pada kolom Link , klik kanan mouse kemudian pilih paste.

dan begitu juga untuk alamat url yang lainnya.

Setelah di isi semuanya, tekan tombol Generate Menu Code.

Kelima : Kemudian terbuka halaman donlot images file, html kode dan css kode. langkah pertama donlot dulu image filenya.

karena ini berbentuk file .zip extrakan dulu ke dalam komputer kita, kemudian upload atau simpan image filenya ke tempat biasa kita menyimpan gambar. misalkan ke photobucket.com.( baca cara menyimpan gambar ke server ).

Keenam : Sekarang kita balik ke situs kita dan buka halaman Template blog kita, kemudian pilih tulisan Edit Html.

kemudian cari kode ini ( baca cara mudah mencari kode di sini. )

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Ganti angka satu ( 1 ) dengan angka tiga ( 3 ) dan tulisan no dengan yes. tujuannya untuk menambah elemen widget di bagian header.

kemudian masukan kode Css kode dari situs Cssmenumaker.com ke tempat kode Css template blog kita.

gambar css code dari Cssmenumaker.com

Copi dan simpan code dari cssmenumaker.com ini. contohnya saya menyimpanya di atas tag #header-wrapper kode Css template blog kita.

DI ATAS SINI /* Header ----------------------------------------------- */ #header-wrapper { width:660px; margin:20px auto 10px;

langkah selanjutnya misalkan kita di beri kode dari Cssmenumaker seperti ini.

ul#menu { width: 100%; height: 43px; background: #FFF url("images/menu-bg.gif") top left repeat-x; font-size: 0.8em; font-family: "Lucida Grande", Verdana, sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; } bla..bla..bla ul#menu li a.current{ color: #FFF; background: #FFF url("images/current-bg.gif") top left repeat-x; padding: 5px 15px 0; }

ganti url (" images/menu-bg.gif") dengan alamat gambar "menu-bg.gif" url kita. begitu juga url ("images/current-bg.gif") dengan alamat gambar "curren.gif" url kita. Setelah beres Klik tulisan SIMPAN TEMPLATE.

Ketujuh : Setelah itu buka tab ELEMEN HALAMAN

Di atas widget header tekan tulisan TAMBAHKAN SEBUAH ELEMEN HALAMAN.

Dalam pemilihan widget tambahkan ke blog HTML/JAVASCRIP.

Setelah terbuka halaman HTML/JAVASCRIPT masukan HTML Code dari Cssmenumaker. misalkan kode Html code nya seperti ini.

<ul id='menu'> <li ><a class='current' href='http://www.jaloee.blogspot.com' >home</a></li> <li ><a href='http://http://jaloee.blogspot.com/search/label/Photo' >Photo</a></li> <li ><a href='http://http://www.blogger.com/' >login</a></li> </ul>

Masukan Html code -nya seperti gambar di bawah. sedangkan untuk kolom judul-nya ngga usah di isi.

Kemudian SIMPAN PERUBAHAN.

Jika ingin Tab Menu di bawah posisi Header kita tinggal drag/ pindahkan saja widgetnya ke bawah widget Header.

Sejauh ini kita telah membuat dan memasang sebuah Tab Menu Horizontal. Sekarang bagaimana kalau ingin menambah dan mengedit Tab Menu secara manual. Misalnya kita ingin menambah Label Tab Button dan alamat Urlnya.

Pertama : Dalam Template buka Elemen Halaman di lanjutkan dgn membuka widget Tab Menu untuk di edit.

Misalkan Code Html Tab Menu-nya seperti ini.

<ul id="menu"> <li><a class="current" href="http://www.jaloee.blogspot.com">home</a></li> <li><a href="http://http://jaloee.blogspot.com/search/label/Photo">Photo</a></li> <li><a href="http://http://www.blogger.com/">login</a></li> </ul>

untuk menambah Tab Menu kita tinggal menulis dan memasukan label dan alamat urlnya yang diapit oleh tag <li> ... </li> . contohna.

<li><a href="http://www.alamat url">Label Tab</a></li>

Menambahkannya di antara properti List seperti ini.

<ul id="menu"> <li><a class="current" href="http://www.jaloee.blogspot.com">home</a></li> <li><a href="http://www.alamat url">Label Tab</a></li> <li><a href="http://http://jaloee.blogspot.com/search/label/Photo">Photo</a></li>

Sekarang bagaimana jika memasang Tab Menu tidak mengunakan sebuah widget html/javascrip seperti lagkah ke enam di atas. Untuk mengetahuinya bisa anda baca (Memasang Tab Menu Bag ke2 di sini)

Technorati tags: Belajar blogs, New blogger

Trik Cepat Menambah Tiga Kolom di Blogger

Iseng-iseng liat extremetracking ternyata ada empat orang lebih yang nyasar ke blog ini nyari cara bikin atau nambah kolom template na menjadi ( 3 ) tiga kolom. Sebab itu sekalian saja saya bikin postingan tentang bagaimana caranya menambah kolom di template new blogger.

Baiklah untuk menambah layout menjadi ( 3 ) tiga kolom, saya lebih suka mengunakan sistem persen ( % )dari pada mengunakan sistem angka. Bukan apa-apa sih, kalau mengunakan angka terkadang menjadi ribet dalam menentukan margin-nya, lagi pula ketika saya buka di Template Tab Elemen Halaman posisinya sering berantakan seperti ini.

" Perlu di Ingat kunci perubahan lebar akibat penambahan kolom terletak pada nilai Outer-wrapper nya. "

Template yang saya pake template minima .- jadi yg ingin mengikuti tutor ini mesti di istallkan dulu template minima-nya , juga biar seragam kita merubah OUTER-WRAPPER-nya menjadi 80%.

1. MENAMBAH KOLOM POSISI MAIN CONTENYA DI TENGAH.

Seperti biasa untuk mengedit layout buka tulisan atau TAB EDIT HTML.

Dan untuk kasus ini biarkan saja Expand Template Widget dalam ke adaan kosong ( tidak di tandai ).

oke sekarang cari kode ini.

<div id='main-wrapper'>
       <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
     </div>

Setelah itu masukan di atasnya kode berikut ini.

<div id="newsidebar-wrapper">
<b:section class="sidebar" id="newsidebar" preferred="yes">
</b:section></div>

Sekarang scroll mouse ke atas ke bagian kode Css-nya. temukan kode ini.

#sidebar-wrapper {
 width: 220px;
 float: right;
 word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
 overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

di bawah-nya masukan kode ini.

#newsidebar-wrapper {
 width: 220px;
 float: right;
 word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
 overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Tugas kita sekarang merubah nilai lebar, margin dan float-nya. yang pertama rubah nilai WIDTH dari OUTER-WRAPPER -nya menjadi WIDTH : 80%; ( selalu ingat di tutup dengan titik koma.)

#outer-wrapper {
 width: 80%;
 margin:0 auto;
 padding:10px;
 text-align:left;
 font: $bodyfont;
 }

Yang Kedua rubah nilai WIDTH dari MAIN-WRAPPER -nya menjadi WIDHT : 55%; dan tambahkan pula sintax Margin left nilainya sekitar 2% cukup. yaitu : Margin-left: 2%; jadi bila di bandinghkan dengan kode asli-nya kode perubahannya seperti di bawah ini.

#main-wrapper {
 width: 55%;
 margin-left:2%;
 float: left;
 word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
 overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
 }

" Sekarang tinggal tersisa 45% lagi, yang dibagikan untuk kedua sidebar. terserah mau nilai sidebarnya sama atau berbeda, yang jelas mesti ada sisa buat nilai marginnya. Jadi kalau mau sidebar keduanya sama berarti nilainya sekitar 20%. dan sisanya yang 5% untuk nilai margin" lanjut Yang ketiga merubah nilai WIDHT dan menambah Margin left dari SIDEBAR-WRAPPER menjadi seperti di bawah ini.

#sidebar-wrapper {
 width: 20%;
 margin-left:2%;
 float: right;
 word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
 overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Yang ke empat NEW SIDEBAR-WRAPPER atau Sidebar Baru. Sidebar ini yang mesti dirubahnya adalah nilai WIDHT dan juga merubah nilai FLOAT nya menjadi Left. jadi WIDHT:20%; , Float:Left; Seperti di bawah ini.

#newsidebar-wrapper {
 width: 20%;
 float: left;
 word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
 overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Pekerjaan terakhir ialah merubah bagian HEADER-WRAPPER -nya menjadi WIDTH :100%;

#header-wrapper {
 width:100%;
 margin:0 auto 10px;
 border:1px solid $bordercolor;
 }

Dan begitu juga bagian FOOTER -nya sama WIDTH:100%.

#footer {
 width:100%;
 clear:both;
 margin:0 auto;
 padding-top:15px;
 line-height: 1.6em;
 text-transform:uppercase;
 letter-spacing:.1em;
 text-align: center;
}

Kenapa mesti 100% ( seratus persen ) ? ... ingat ! Outer-Wrapper merupakann wadah atau bungkus dari header, content ( main dan sidebar ) juga Footer -nya. ( dan mengunakan 100 % untuk kasus Template Minima )

Setelah beres semuanya, jika kita tekan PRATINJAU ngga terjadi apa-apa ? .. tenang saja jangan panik !!! itu karena memang kita belum menambah widget apapun di sidebar barunya ( kamu harus percaya )... jadi kita tekan saja tulisan SIMPAN TEMPALTE dan buka tulisan atau TAB ELEMEN HALAMAN. bravo kita sukses sekarang menambah sebuah kolom baru !!. coba tambahkan di sidebar baru sebuah WIDGET POLLING , karena kita akan melanjutkan tentang menambah kolom di new blogger ini ,yaitu bagaimana menambah kolom kalau posisi kedua sidebarnya sisi kanan atau sisi kiri ( seperti layout blog ini ).- itu juga kalau ngga malas nulisnya . Yes jadi tambahkan sekarang widget polling.. ( hanya sebagai alat untuk acuan saja ).

tunggu saja sambungannya.

del.icio.us tags: Belajar Blogs, New blogger

Photoshop Brush The Simpsons

View Donlot : photoshopessentials.com

Technorati tags: Photoshop Brush, Belajar Photoshop

Gambar Dan Tutorial Header layout

Sebuah header atau image header untuk blog atau weblog, adalah salah satu unsur dari unsur-unsur  visual yang  paling utama. dan sedikit banyak merupakan pesan dan membawa pengaruh bagi keseluruhan dari conten sebuah web atau blog ( heuheuheu... katanya ciiihhh ).

Untuk itu dalam postingan ini, saya mempunyai beberapa link situs tentang header ini, baik itu gambar header yang sudah jadi, dan kita tinggal memakainya, atau juga link tutorial photoshop tentang membuat header.

Mudah-mudahan kumpulan link yang sempat saya bookmarks ini, merupakan sebuah info yang berharga dan dapat membantu bagi yang kesusahan mencari gambar untuk header blognya,  dan juga bagi yang suka dengan photoshop walaupun tidak terlalu banyak, mudah-mudahan tutorial membuat headernya dapat menambah pengalaman dan pengetahuan baru.

selamat menjelajahi.

 

 

View Web : enricocasarosa.com

View Web : freewebpageheaders.com

View Web : www.digitalwestex.com

Tutorial Photoshop Header Layout

 

View Web : adobetutorialz.com

 

View Web : adobetutorialz.com

View Web : www.photoshop-pack.com

View Web : www.dutorials.com

View Web : www.avivadirectory.com

Dalam web yang sama

1.bioshock-website-header
2.spatter-paint-header-navigation
3.designing-a-navigation-header-for-a-portal
4.navigation-header-for-a-jewelry-website
5.smooth-header-tutorial
6.gears-of-war-website-heade

View Web : www.thedesignworld.com

View Web : www.thedesignworld.com

Technorati tags: Blog Layout, Desain Header

Menyisipkan dan menyimpan gambar secara otomatis

Untuk menulis sebuah postingan, sampai saat ini aku masih betah pake windows live writer, walaupun masih ada kekurangannya tapi di bandingkan dengan desktop blogging client sejenis, window live writer menurut saya menawarkan kemudahan dalam pengunaanya, apalagi kalau di install dengan sejumlah plug'in-nya.

Sebenarnya tentang windows live writer sendiri telah bahas di sini, namun akan saya bahas lagi pada tulisan ini selintas apa sih windows live writer itu ?
kemudian akan saya lanjutkan juga tentang cara membuat tulisan, meletakan  gambar dan menguploadnya ke server dengan otomatis, hingga kita ngga di bikin kesel dan boring .

Selintas Windows Live writer

Windows Live Writer (WLW ) Merupakan program text editor  ( atau pengolah kata seperti ms word ) pada desktop windows yang dapat kita gunakan untuk menulis dan mengirim sejumlah blog yang telah kita buat ke beberapa blog online services, seperti Blogger, wordpress, dan beberapa server blog lainnya.

Karena ini merupakan aplikasi yang terinstall di dalam linkungan windows, maka untuk membuka aplikasi ini dan memulai membuat sebuah tulisan kita dapat melakukanya secara offline, dan jika tulisan  sudah dirasakan cukup, kita dapat mengirimkanya ke dalam sejumlah blog yang kita kelola sendiri.

Windows Live Writer Versi 3 Beta

Jika pertama kali membuka program ini, sebenarnya kita akan menemukan kemiripan dengan pengolah kata seperti ms word.
Dalam membuat tulisan  kita ngga usah repot, karena layaknya seperti  mengetik di program Ms word (web layout atau Normal ), atau bisa juga jika kita memilih tulisan secara Html editor ( Html Code ), kemudian  setelah menulis kita juga bisa melihat hasil sementara tulisan kita lewat previewnya (Web Preview).
Untuk melakukan ini  buka tanda panah kecil di samping baris menu option tulisan View.  seperti gambar bawah.

Untuk versi tiganya sendiri, sudah bisa untuk menambah Categorie, penanggalan ( memasukan atau merubah tanggal postingan ) dan insert tabel-nya yang makin keyeeen.

Menyisipkan Gambar dan MengUploadnya.

Untuk memasukan dan menempatan gambar di antara tulisan, kita  bisa mengatur ke dalam tiga peletakan. gambar di kiri, gambar di tengah atau gambar di kanan, juga jarak antara gambar dan tulisan kita bisa mengaturnya.
Caranya tekan tulisan di jendela Sidebar INSERT-PICTURE ( atau bisa juga di barisan tab menu-insert-picture. )

Setelah kita memilih dan menempatkan gambar,.- dan gambar dalam ke adaan terpilih.., lihat di samping kanan atau di jendela sidebarnya, merupakan settingan untuk mengatur  gambar.

Keterangan

1. Text Wrapping : mengatur posisi gambar di antara text, apakah secara inline, sisi kanan atau kiri.

2. Margin : Jika yang kita pilih Custom Margin, maka kita bisa mengatur jarak antara gambar dan text.

3. Border : efek bingkai pada gambar.

4. Link to : jika kita pilih url, maka kita bisa membuat link alamat ketika gambar di tekan.

kita juga bisa mengatur panjang dan tinggi sebuah gambar. caranya tekan tombol tulisan ADVANCED.

keterangan

Image Size : Ukuran gambar, kecil, sedang, besar, atau original. atau kita bisa mengatur sendiri ukurannya, ketik saja di kotak widht dan height.

nah ini yang paling menarik

Sedangkan untuk memudahkan mengirim gambar bersama postingan ke dalam blog, tampa perlu ribet  membuka server situs penyimpanan gambar , tampa perlu menyimpan gambar dulu ke server dan tampa perlu mengcopy alamat gambarnya, untuk melakukan tugas seperti itu, dalam program windows live writer di barisan menu-nya buka tab  tulisan Weblog kemudian tekan Edit Weblog Settings . ( untuk mensetting ini, harus dalam keadaan ONLINE )

 

Maka setelah terbuka  jendela Weblog Setting-nya.

 

pilih tulisan Image tandai juga tulisan Upload images to an ftp server setelah itu tekan tombol Counfigure ftp.. maka akan terbuka jendela seperti gambar bawah.

Keterangan.

Ftp hostname : tulis alamat ftp server, biasa kita menyimpan gambar. misalkan ftp.photobucket.com ( untuk wordpress yg mempunyai domain sendiri..caranya sama, atau alamat situs gambar lainnya, tulis alamat ftp-nya ).

Username dan Password : isi dengan User dan Password situs di mana kita menyimpan gambar.

Publish images this folder: tekan tombol di sebelahnya, kemudian pilih atau buat folder baru untuk menyimpan gambar. ( lebih baik setting dulu kolom nomor empat yakni Url of images into this folder, di bawah.. baru isi kolom ini, )

Url of images into this folder : untuk mengisi kolom ini, cara mudahnya kita harus membuka dulu situs tempat kita menyimpan gambar. misalkan karena saya menyimpan di photobucket, buka situs photobucket kemudian pilih di album mana kita akan menyimpan gambar,misalkan saya menyimpannya di folder book,  setelah itu klik kanan pada mouse tekan tulisan copy link location.

( Sidebar Album pada photobucket. )

kemudian kembali lagi pada ftp configure windows live, isi dan paste alamat folder tadi di kolom ( Url of images into this folder) ini.

Dengan mengatur configure ftp-nya ini, kita ngga akan boring lagi untuk menyertakan gambar atau photo dalam postingan, kita ngga perlu lagi membuka server tempat menyimpan gambar atau hanya untuk mengambil source code alamat gambarnya.. untuk lebih jelasnya buka juga menu help -nya

Catatan :

Jika kita biasa pake text editor lainnya, seperti scribe fire dll, untuk urusan gambar sama saja, lakukan pengaturan ftp server penyimpan gambarnya. 

Info Terkait

1. Donlot Windows Live Writer
2. System Requirements
3. Galeri Plug-ins Windows Live
4. Layanan Keterangan dan Bantuan

Technorati tags: Blog, Blog Tools

Leot yg kesekian

Puiiih..!Setelah cukup lama ngga ngoprek-ngoprek template, akhirnya kemarin alhamdulillah di situsnya free-css-templates aku nemuin layout yang lumayan bagus, minimalis dan aku pikir akan sangat mudah bila di terapkan ke dalam engine blogger.

Apalagi setelah saya donlot di templatenya  memang ada halaman Css, sangat memudahkan dalam pengerjaaanya,  tinggal buka di DreamWaver untuk mengetahui letak-letak leotnya. Dan setelah berjuang seharian penuh, walaupun ngga begitu sempurna kelar juga saya mengadaptasikannya ke dalam blooger.

Saya ngga tahu apa layout ini sudah beredar di pasaran..heuheuheu.

Rencananya ini akan saya pake khusus buat cuap-cuap dan curhat. bloem lauching sih, karena lagi nunggu gambar headernya bergaya kartunis dari kartununited.
Oh ya bro jangan lupa kasih nilai doang : bagus, sangat bagus, istimewa (ngga ada nilai jelek yach ) hihiihi ngarep. boleh intip

Cording 01

Sampai kapankah aku akan bertahan, apakah harus terus mengalir hingga aku nemukan sebuah muara dari telaga masa lalu ku.
ahh.. tahu kah kau ? Aku jadi teringat masa lalu, saat aku masih memliki mimpi. ketika aku masih mempunyai semangat dan ke angkuhan.
Saat malam pada sunyi...kegelisahan ini, terucap kerinduan  pada mu .

Technorati tags: coretan Ku

Hide/show Navigation Elemen

Ini code hack yang saya dapat dari bu Annie's di blognya bloggeruniversity.blogspot.com.

Hide/Show Navigation Elemen ini sendiri, di gunakan bisa  untuk menganti A drop-down menu atau Archive drop-dwon menu, dan bisa juga di pakai ke dalam postingan. Saya sendiri dari mulai punya blog sampai sekarang suka pake hack dari bu Annie ini, terutama saya sering gunakan untuk menyederhanakan Blogroll yang sering terlalu panjang sampai memanjang ke bawah, contohnya seperti banner button di sidebar blog ini.

Step 1...+/-

Dalam halaman TEMPLATE tekan tulisan Edit Html.

kemudian simpan code di bawah ke dalam bagian code Css.  atau sebelum tag ]]></b:skin>.

.commenthidden {display:none}
.commentshown {display:inline}

Step 2...+/-

Simpan Code di bawah sebelum code atau tag </head>

<script type="text/Javascript"> function togglecomments (postid) { var whichpost = document.getElementById(postid); if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; } } </script>

Step 3...+/-

Dan code di bawah merupakan kode yang akan kita simpan baik itu di Sidebar, postingan atau di mana saja selama kode hack ini memungkin untuk di gunakan.

<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')">Title
</a><br /> <div class="commenthidden" id="UniqueName">..isi..</div>

Inga- Inga !!

UniqueName : tulisan yg berwarna merah di atas, ganti dengan nama yang uniq artinya  tidak boleh nama yang sama dalam dua pengunaan.
Contohnya, jika saya mengunakan hack ini ke dalam blogroll link teman-teman dengan nama UniqueName-nya "LinkSatu", maka untuk blogroll link Situs Favorit misalnya, namanya harus "LinkDua".(ngga boleh sama ).

Title : merupakan judul atau tombol ( bisa berupa tulisan atau image ). yang apabila di tekan akan menampakan atau meyembunyikan sebuah elemen.

Isi  : merupakan Elemen yang di sembunyikan. bisa berupa postingan, linklist dll.

untuk pengunaan hack Hide/Show Navigation Elemen ini, anda bisa melihat contoh-contonya.

Contoh 1...+/-

Untuk megunakan hack ini ke dalam postingan. Pertama  dalam Editor blog kita harus menulis dalam bentuk Html jadi tekan Edit html.

kemudian contoh penulisan kodenya seperti ini.

<a aiotitle="click to expand" href="javascript:togglecomments('CONTOHPERTAMA')">
Postingan...+/-</a><br /> <div class="commenthidden" id="CONTOHPERTAMA">Untuk megunakan hack ini ke dalam postingan. Pertama dalam Editor blog kita harus nulis dalam bentuk Html jadi tekan Edit html.</div>

Contoh 2...+/-

Untuk di gunakan ke dalam elemen widget LinkList atau blogroll. pertama cari dulu kode html LinkList kita. caranya dalam halaman TEMPLATE buka EDIT HTML kemudian tandai Expand Template Widget.

Setelah itu cari kode html LinkList. misalkan kodenya seperti di bawah.dan lihat tulisan berwarna merupakan kode hack Hide/Show Elemen, yang saya tambahkan dan tempatkan di antara kode html LinkList.

<b:widget id='LinkList1' locked='false' title='Photoshop' type='LinkList'> <b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content'>
<a aiotitle='click to expand' href='javascript:togglecomments("Basic")'>
Blogroll...(+/-)
</a><br/> <div class='commenthidden' id='Basic'>
<ul>
<b:loop values='data:links' var='link'>
<li><aexpr:href='data:link.target'><data:link.name/>
</a></li>
</b:loop>
</ul></div>
<b:include name='quickedit'/>
</div>
</b:includable> </b:widget>

catatan :
Basic : merupakan uniqname
Blogroll...(+/-) : merupakan title atau semacam tombol.

Contoh3...+/-

Contoh4...+/-

Sidebar Layout

Di setiap pembuat dan penyedia free template untuk para blogger mania, sebenarnya banyak hal trik-trik yang bisa kita pelajari.

misalkan saja template yang di keluarkan oleh bloggerBuster, dari sekian Add-ons yang terpasang dalam free template-nya, yang paling menarik bagi saya ialah adanya kode Css untuk merapikan Halaman Elemen, yang terkadang berantakan akibat penambahan kolom atau pemindahan kolom. 

Begitu juga dengan free template yang di keluarkan oleh blogandweb. ke khasan paling menonjol yang sering saya lihat dalam free templatenya adalah menyimpan selector ID #Outer-wrapper selalu di atas  Body. apa maksudnya yach ? ... heuheueheu

Selain itu, ada satu lagi ke khasan dari blogandweb yang bisa kita jumpai, yaitu selalu meng-grouping atau mengelompokan  selector ID   ( properti dan value yang sama ) untuk Halaman Elemenya, namun di samping itu kita pun bisa melihat contoh declarasi yang berbeda di setiap selector ID tiap elemennya.

Contoh, jika kita mendonlot salah satu template dari blogandweb kita akan menemukan pengelompokan seperti ini.

#NewsBar1, #NewsBar2, #VideoBar1, #VideoBar2, #AdSense1, #AdSense2, #AdSense3, #Profile1, #Feed1, #Feed2, #NewsBar1, #NewsBar2, #HTML1 , #HTML2, #HTML3, #HTML4, #Text1, #Text2, #LinkList1, #LinkList2, #TextList1, #TextList2, #BlogArchive1, #Label1, #Label2
{
margin: 0;
padding: 0;
}

Atau seperti ini.

#sidebar #TextList1 li, #sidebar #TextList2 li, #sidebar #NewsBar1 li, #sidebar #LinkList1 li, #sidebar #LinkList2 li, #sidebar #Feed1 li, #sidebar #Feed2 li
{
background: url(alamat gbr) no-repeat left 6px !important;
padding-left: 25px !important;
}

Untuk apa mengelompokan-nya seperti di atas ?

bagi saya pertanyaan itu sudah tidak penting lagi. karena bahasa yang saya pahami cuma dua Bahasa sunda dan Bahasa Indonesia, selebihnya apakah itu bahasa inggris atau bahasa Css aku ngga ngerti sama sekali.

Namun jika pertanya-anya kemungkinan apa saja yang bisa saya lakukan dengan template saya? mungkin untuk otak ku yang tertinggal ini bisa muter-muter sedikit, dan jawabanya pun bisa aneh dan ngawur. di antara jawabanya seperti ini :

2. mungkin bisa membuat judul setiap elemen berbeda warna font, warna background atau penambahan icon yang berbeda.

3. mungkin bisa membuat setiap conten atau isinya berbeda latar belakang warnanya, bukan dari dalam elemen atau tag Htmlnya tapi cukup membuat dalam kode Css.

4. mungkin bisa membuat blogroll yang berjalan ke atas atau kebawah (marque), sekali lagi bukan dengan menambahkan kode ke dalam elemen Html/javascript, tetapi tetap mengunakan elemen linklist sebagai elemen baku untuk blogroll namun kendalinya ada pada pendenifisian pada kode Css.

5. Dan kemungkinan lainnya, bisa habis rokok dua bungkus.

Technorati tags: Blogs, Belajar New Blogger

Kamu Tahu Ngga

Kamu tahukan situs photobucket, salah satu situs untuk menyimpan gambar ( image hosting ) . Dan kamu tahukan cara menyimpan dan cara mengunakannya untuk keperluan gambar di blog kita. Namun kamu tahu ngga ada cara lain untuk menyimpan dan mengupload gambar dari komputer kita  ke situs photobucket dengan mengunakan layanan ftp.photobucket. nya ??.. caranya buka saja keterangan bantuan dari pihak photobucket di sini... gampang koq, cuma liat baca dan praktekan.

Technorati tags: Blog, Info Blogging