tips dan trik

Membuat Code Script Menu Horizontal With Drop Down Support All Browser

2011-06-08T14:10:00.001-07:00

Mungkin anda masih ingat postingan saya sebelumnya yakni cara membuat menu horizontal dengan sub menu vertikal atau anda bisa melihat kembali postingannya klik disini, tapi sayang postingan itu tidak bisa support semua browser dan hanya bisa dengan baik melalui browser mozilla firefox tapi untuk kali ini saya sudah mencoba dengan support mozilla Firefox, IE, Chrome dan Opera. Anda boleh menjajalnya blog MGM ini dengan semua browser karena saya sudah menggunakan menu horizontal with drop down atau menu horizontal dengan sub menu vertikal ini seperti screenshot diatas. Untuk memulai tutorial memasang menu horizontal drop down menu ini silahkan perhatikan berikut ini :
Masuk ke dashboard ► LAYOUT ► EDIT HTML ► centang Expand Widget Templates dan temukan bagian kode berikut (tekan ctrl+F) : ]]></b:skin> kemudian simpan kode berikut sebelum kode ]]></b:skin>

.jqueryslidemenu{
font: bold 12px Trebuchet MS; background: #414141; width: 100%;}

.jqueryslidemenu ul{
margin: 0; padding: 0; list-style-type: none;}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative; display: inline; float: left;}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #151515;
color: #2d2b2b;
text-decoration: none;}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;}

.jqueryslidemenu ul li a:hover{
background: #DF0101; /*tab link background during hover state*/
color: white;}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0; display: block; visibility: hidden;}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item; float: none;}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{top: 0;}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;color: black;}

/* CSS classes applied to down and right arrow images */

.downarrowclass{
position: absolute; top: 12px; right: 7px;}

.rightarrowclass{
position: absolute; top: 6px; right: 5px;}

Langkah selanjutnya sisipkan kode berikut sebelum kode </head>

<script src='http://mastergomaster.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src=' http://emoticmastergomaster.googlecode.com/files/jquery_slide.js ' type='text/javascript'/>

Setelah kode diatas anda sisipkan dengan baik pada template tahap selanjutnya silahkan copy kode script drop down menu horizontal berikut dan masuk ke Dashboard ► LAYOUT ► ADD a GADGET ► HTML/JavaScript ► SAVE.

<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='http://www.mastergomaster.com/2009/08/about-me.html'>About Us</a></li>
<li><a href='http://www.mastergomaster.com/2009/04/contact-mgm-via-email.html'>Contact Us</a></li>
<li><a href='http://www.mastergomaster.com/2009/02/table-of-content.html'>Blog Archive</a></li>
<li><a href='/'>Software</a>
<ul>
<li><a href='http://www.mastergomaster.com/search/label/anti%20virus'>Anti Virus</a></li>
<li><a href='http://www.mastergomaster.com/search/label/multimedia'>Multimedia</a></li>
<li><a href='http://www.mastergomaster.com/search/label/web%20browser'>Web Browser</a></li>
</ul>
</li>
<li><a href='/'>Blog Tutorial</a>
<ul>
<li><a href='/'>Wordpress</a></li>
<li><a href='/'>Blogspot</a>
<ul>
<li><a href='/'>1</a></li>
<li><a href='/'>2</a></li>
<li><a href='/'>3</a>
<ul>
<li><a href='/'>1</a></li>
<li><a href='/'>2</a></li>
<li><a href='/'>3</a></li>
<li><a href='/'>4</a></li>
</ul>
</li>
<li><a href='/'>4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://www.mastergomaster.com/search/label/domain'>Domain</a></li>
<li><a href='http://www.mastergomaster.com/search/label/get%20money'>Get Money</a></li>
<li><a href='http://www.mastergomaster.com/2010/02/kode-warna-html.html'>HTML Colour Code</a></li>
<li><a href='http://www.mastergomaster.com/2010/04/mendapatkan-pagerank-tinggi-dalam-waktu.html'>(S.E.O)</a></li>
<li><a href='http://www.mastergomaster.com/2009/08/cek-kecepatan-blog-dan-berat-websitemu.html'>Web Tools</a></li>
<li><a href='http://www.mastergomaster.com/search/label/widget'>Widget</a></li>
</ul>
<br style="clear: left" />
</div>

kemudian geser dan tempatkan seperti gambar berikut :

Pada tahap akhir silahkan ganti link postingan MGM dengan postingan anda, terima kasih dan semoga artikel membuat menu horizontal dengan drop down menu ini bermanfaat untuk anda semua.

sumber : http://mastergomaster.blogspot.com/2010/05/membuat-code-script-menu-horizontal.html

CSS Margin atau Posisi TEks Konten

2011-06-08T14:09:00.000-07:00

Properti CSS margin berfungsi untuk mengatur jarak atau membuat ruang kosong, baik bagian kanan, kiri, atas, dan bawah disekitar elemen seperti box, teks, gambar dll. Dalam penerapannya Properti CSS margin, kita dapat menententukan nilainya dalam satu properti atau satu baris kode css sehingga lebih ringkas. Tetapi Properti CSS margin juga dapat ditulis secara masing - masing antara bagian kanan, kiri, atas, dan bawah.

Lebih jelasnya,silahkan anda perhatikan penulisan berikut :

Contoh A

Anda lihat posisi teks dibawah ini :

CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Dengan kata lain Css adalah merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Contoh B

Anda lihat posisi teks dibawah ini :

Contoh C

Anda lihat posisi teks dibawah ini :

Contoh D

Penulisan diatas sama penulisannya dengan :

Anda lihat posisi teks dibawah ini :

Catatan : Untuk satuan nilai kita bisa menggunakan satuan " cm, px, em, atau %"

Ok...., Silahkan anda bisa coba mengganti nilai ukurannya sesuka anda, agar terlihatperbedaan hasilnya. Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Cara Membuat Spoiler

2011-06-07T17:58:00.001-07:00

Elu yang biasa nongkrong di forum mungkin sudah nggak asing lagi dengan spoiler. Yaitu teknik menyembunyikan gambar/teks/video dll untuk menghemat space. Spoiler ternyata bisa juga diterapkan di blog. Cara membuat spoiler di postingan blog atau di widget pada sidebar (baik berbasis blogger/blogspot maupun wordpress).

Contohnya :

caranya gampang sekali bung...

langsung tanpa basa-basi yg basi lagi...

ini dia scripnya

<center><div><div style="margin: 15px;">
<div style="margin-bottom: 2px;"
class="bigfont"><input style="margin: 0px;
padding: 0px; width: 110px;
" value="LIAT" onclick="if
(this.parentNode.parentNode.getElementsByTagName('div')
[1].getElementsByTagName('div')[0].style.display != '')
{ this.parentNode.parentNode.getElementsByTagName('div')
[1].getElementsByTagName('div')[0].style.display = '';
this.innerText = ''; this.value = 'UDAH'; } else {
this.parentNode.parentNode.getElementsByTagName('div')
[1].getElementsByTagName('div')
[0].style.display = 'none'; this.innerText = '';
this.value = 'LIAT'; }" type="button"/>
</div>
<div style="border: 0px inset ;
margin: 0px; padding: 0px;" class="alt2">
<div style="display: none;">

PASANG SCRIPT/TULISAN ANDA DISINI

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

</center>

Ket :

Ganti angka yang tercetak BIRU sesuai kebutuhan, semakin gede angkanya, semakin panjang tombolnya.
Ganti kata yang tercetak MERAH sesuai kebutuhan, misalnya "SHOW" n "HIDE" apa "TAMPILKAN" n "SEMBUNYIKAN" suka-suka elu lah.
Isi dengan tulisan atau gambar atau video atau script yg laennya
Jika spoiler berisi gambar, anda upload dulu dengan blogspot atau pengupload macam photobucket, tinypic, dll, lalu ganti 'isi spoiler' dengan kode HTML gambar yang sudah diupload.
Jika spoiler berisi video, ganti 'isi spoiler' dengan embed kode video.

gampangkan...selamat menjoba...

Membuat kategori otomatis hanya thumbnail dan berderet kesamping

2011-06-03T08:17:00.001-07:00

Kali ini tutorial dan software akan menyajikan tutorial modifikasi dari tutorial sebelum ini.. jika pada sebelumnya kategori otomatis dengan thumbnail nya dengan tulisan.. namus sekarang hanya thumbnailnya saja.. dan thumbnailnya berderet kesamping

Berikut adalah langkah-langkahnya :

Langkah pertama

Login ke blogger dengan ID anda.
Klik Rancangan.
rancangan
Klik tab Edit HTML.

Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
Carilah kode ]]></b:skin>, copy lalu paste kode berikut persis diatas kode ]]></b:skin>

    /*** Labels Thumbs ***/
    img.label_thumb{
    float:left;
    border:1px solid #ccc;
    width:85px;
    height:70px;
    margin-right:10px;
    margin-bottom:10px;
    }

Carilah kode </head>, copy lalu paste kode berikut persis diatas kode </head>

    <script type='text/javascript'>
    //<![CDATA[
    function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
    if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
    var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
    {s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}
    else thumburl='';}
    document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');
    if(i!=(numposts-1))
    document.write('');}
    document.write('</div>');}
    //]]>
    </script>

Klik tombol SIMPAN TEMPLATE.
Langkah pertama selesai.

Langkah kedua

Klik tab Rancangan.
rancangan
Jika masih dalam posisi tab Elemen Laman, silahkan klik terlebih dahulu tab menu Elemen Laman.
elemen laman
Klik Tambah Gadget untuk menambahkan gadget baru.
tambah gadget
Setelah muncul jendela baru, klik tanda plus untuk HTML/JavaScript
html javascript

Copy script dibawah ini, lalu paste pada kolom yang tersedia. Beri juga judul yang sesuai dengan yang anda inginkan. Namun sebelumnya anda harus mengubah tulisan yang di beri warna hijau dengan nama kategori yang di inginkan.

<script type='text/javascript'>var numposts = 6;</script>
<script type="text/javascript" src="/feeds/posts/default/-/namalabelmu?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

     script label
    Klik tombol SIMPAN
    Langkah kedua Selesai.

Jika anda ingin menambahkan widget lain untuk nama kategori yang lain, anda hanya melakukan hal yang sama dengan urutan Langkah Kedua.

Untuk pengaturan custom seperti mengubah ukuran thumbnail, border dan lainnya, anda dapat mengubah pengaturan di bagian CSS, silahkan kreasikan sendiri :

/*** Labels Thumbs ***/
img.label_thumb{
float:left;
border:1px solid #ccc;
width:85px;
height:70px;
margin-right:10px;
margin-bottom:10px;
}

Untuk mengatur jumlah thumbnail yang ingin tampil anda tinggal mengubah angka 6 dengan nilai angka yang lain.

<script type='text/javascript'>var numposts = 6;</script>

Manampilkan kategori hanya thumbnail, mungkin cocok untuk blog yang bersifat gallery template, gallery photo dan sejenisnya.

Sumber: http://kolom-tutorial.blogspot.com/

Thumbnail Albums for Blogger.

2011-05-30T05:57:00.000-07:00

Thumbnail albums can be created in Blogger using software or by hardcoding them in the Edit Html tab of the post Editor. It is preferable to do the latter as it gives you better control besides saving on the cost of third party software.....

The first step is to upload your image to a freehost like Googlepages. Do not upload to Blogger as it resizes your image to arbitrary sizes. After uploading image as described in Upload Files to Blogger copy down the link to the image. Then login to Dashboard of Blogger and click on +New Post link. The Post Editor opens and click on Edit Html tab ofPost Editor. Use the following code to paste the image in it :

<A HREF="URL OF IMAGE" target="_blank" title="Click to view" >
<IMG HEIGHT=50 WIDTH=50 SRC="URL OF IMAGE" alt="image name" /></A>

Adjust the numbers 50 by clicking on the Preview link in top frame of Post Editor. This uses HTML to resize your image. Because of this the image loads faster. As an example I have used this function to load a wallpaper of Andrea Rincon below.

The actual size of this image is 1024 by 768 pixels. Click on the image to see actual size.

THUMBNAIL ALBUM

To make a thumbnail album make a table and insert the above code in each cell. For example if you want a table with four images use this code for a one row by four columns table :

<TABLE> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> </TABLE>

Insert the code for the picture between each <TD> and </TD> tags. Type out the full code in one line in Notepad without pressing Enter and then paste it in your post. See Below :

For a two by two table use this code :

<TABLE> <TR> <TD> </TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> </TR> </TABLE>

See example below :

To add table spacing and borders add this line instead of the first <TABLE>

<TABLE cellspacing=0 cellpadding=3 width="80%" border=1 bordercolor="#0000ff">

For example a three row by two column table will be :

To add a caption add this line after the first <TABLE> tags :

<caption>Picture Gallery</caption>

This will show as follows in a two by three gallery:

Picture Gallery

To add titles for each picture below it add two more rows by pasting this code :

<TR>

<TD align=middle valign=top><font size="2" face="verdana" color="#0000ff"><b>WALLPAPER 1</b></font></TD>

<TD align=middle valign=top><font size="2" face="verdana" color="#0000ff"><b>WALLPAPER 2</b></font></TD>

<TD align=middle valign=top><font size="2" face="verdana" color="#0000ff"><b>WALLPAPER 3</b></font></TD></TR>
See the effect below :

Picture Gallery

WALLPAPER 1	WALLPAPER 2	WALLPAPER 3

WALLPAPER 1	WALLPAPER 2	WALLPAPER 3

Technorati Tags:photo, photo album, picture, thumbnails, Thumbnail Albums, tables

Membuat Menu Horizontal dengan Sub Menu Vertikal

2011-05-25T11:43:00.001-07:00

Hmm... akhirnya selesai juga neh pesanan bung bayu lebond dengan alamat di http://bayulebond.blogspot.com/ atas permintaan postingan cara membuat menu horizontal dengan sub menu vertikal-nya, Maaf ya bung baru aku post hari ini artikelnya ! saya ucapkan semoga bisa anda pergunakan tutorial ini. Bagi yang belum tahu gambarannya seperti apa maksud menu horizontal ini berikut dibawah ini screenshot-nya, apabila ingin memperbesar gambarnya klik pada gambar tersebut ya !

untuk langkah-langkah membuat menu horizontal with drop down perhatikan berikut dibawah ini :
Masuk ke dashboard ► LAYOUT ► EDIT HTML ► centang Expand Widget Templates dan temukan bagian kode berikut (tekan ctrl+F) : ]]></b:skin> kemudian simpan kode berikut diatas kode]]></b:skin>

.chromestyle{
width: 100%;
font-weight: bold;
}

.chromestyle:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #F2F2F2;
width: 100%;
background: #151515
repeat-x;
padding: 4px 0;
margin: 0;
text-align: left;
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #F2F2F2;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #F2F2F2;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background: #DF0101
repeat-x;
}

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #6E6E6E;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: color=#CACACA
,direction=135,strength=4);
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #151515;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{
background-color: #848484;
}

Simpan kode berikut dibawah kode ]]></b:skin>

<script src='http://emoticmastergomaster.googlecode.com/files/chrome.js' type='text/javascript'>
</script>

Simpan kode berikut diatas kode <div id='content-wrapper'> atau dibawah kode </header>

<div class='chromestyle' id='chromemenu'>

<ul>
<li><a href='/'>Home</a></li>
<li><a href='#' rel='dropmenu1'>Menu1</a></li>
<li><a href='#' rel='dropmenu2'>Menu2</a></li>
<li><a href='#' rel='dropmenu3'>Menu3</a></li>
<li><a href='#' rel='dropmenu4'>Menu4</a></li>
<li><a href='#' rel='dropmenu5'>Menu5</a></li>
<li><a href='#' rel='dropmenu6'>Menu6</a></li>
<li><a href='#' rel='dropmenu7'>Menu7</a></li>
<li><a href='#' rel='dropmenu8'>Menu8</a></li>
</ul>
</div>


<div class='dropmenudiv' id='dropmenu1'>
<a href='URL sub menu1'>Sub Menu1</a>
<a href='URL sub menu2'>Sub Menu2</a>
<a href='URL sub menu3'>Sub Menu3</a>
</div>


<div class='dropmenudiv' id='dropmenu2'>
<a href='URL sub menu1'>Sub Menu1</a>
<a href='URL sub menu2'>Sub Menu2</a>
<a href='URL sub menu3'>Sub Menu3</a>
</div>

<script type='text/javascript'>
cssdropdown.startchrome("chromemenu")
</script>

Langkah terakhir lakukan dengan menelan tombol save template. Terima kasih atas atas perhatiannya dan semoga trik membuat menu horizontal ini bermanfaat dan jika ingin memasang menu horizontal dengan drop down support all browser klik disini

Cara Mudah Membuat Tampilan Read More pada Postingan

2011-05-23T22:24:00.001-07:00

Rekan2 Blogger ... Kali ini saya akan menulis dan belajar ( khususnya saya sendiri ) untuk membuat fungsi Read more / Baca selanjuynya adalah fungsi pemenggalan pada suatu paragraf yang sering kita lihat di kebanyakan blog yang sangat berguna untuk mengurangi tampilan awal pada suatu blog, sehingga tidak terlalu memakan tempat.

Trik untuk membuatnya sangatlah mudah, langsung saja y saya akan menuliskan caranya dan ikuti langkah2 berikut :

Setting kode HTML :

1. Masuk ke Account blogger sobat.
2. Pilih Tata Letak => Edit HTML.
3. Silahkan save dulu template tersebut, ini untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.
4. Klik / Beri tanda centang Tulisan "expand widget template" yang ada diatas kanan kolom edit HTML. ( Tunggu beberapa saat ketika proses sedang berlangsung )
5. Lalu Cari Kode :

<data:post.body/>

Atau kode dibawah ini ( Sama saja )

6. Hapus kode diatas lalu ganti dengan kode dibawah ini.

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Baca Selengkapnya...</strong></a></p>
</b:if>

7. Klik tombol simpan dan selesai

Setting Format :

1. Klik Pengaturan.
2. Klik Format.
3. Pada layar paling bawah, ada text area kosong disamping tulisan Template Posting, isi tesxt area kosong tersebut dengan kode di bawah ini :

4. Klik tombol Simpan Pengaturan

Pemasangan kode ini di maksudkan agar pada saat posting artikel, kode tersebut langsung muncul tanpa harus menuliskan terlebih dahulu, jadi membantu kita agar tidak harus selalu mengingat kode tersebut.

Cara posting artikel :

1. Klik menu Posting.
2. Klik menu Edit HTML, maka secara otomatis tampak kode yang telah kita setting tadi, yakni :

3. Tuliskan artikel yang ingin tampak didepan / tidak disembunyikan pada blog sebelum kode dibawah ini :

4. Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode ( Tulis kode dibawah ini pada bagian paling bawah postingan ) :

</span>

5. Klik tombol bertuliskan MEMPUBLIKASIKAN POSTING.
6. Klik tulisan Lihat Blog (di jendela baru) untuk melihat hasil dari postingan kita, kemudian lihat apakah hasilnya sukses atau tidak. Jika tidak, mungkin ada bagian yang terlewatkan. Coba lihat kembali langkah diatas.

Mudah2an dapat membantu, kususnya bagi para rekan2 blogger yang masih pemula seperti saya. Jika rekan2 yang gagal mempraktekkan cara ini, anda jangan khawatir untuk mengembalikanya seperti semula sangat mudah asal anda punya backup data yang di simpan. Anda tinggal copas aja kode yang anda backup tadi dan pastekan di kolom edit HTML. Selesai ...

Menampilkan daftar isi pada label tertentu

2011-05-20T16:41:00.001-07:00

DEMO

Menampilkan daftar isi sebuah blog merupakan sebuah kebutuhan agar pembaca dapat memperoleh informasi apa yang kita sajikan dengan mudah, tapi dalam beberapa hal ini juga merupakan sebuah dilema karena dengan banyaknya artikel yang kita muat akan membuat loading saat membuka blog cukup lama sehingga bisa mengganggu kenyamanan pengunjung.

Ada beberapa cara untuk menampilkan isi blog diantaranya adalah :

Recent Post ( artikel terbaru )
Top Posting ( artikel populer )
Random Post ( artikel acak )
Membuat Daftar Isi
Related Post, etc

Sekarang kita akan mencoba membahas mengenai daftar isi dengan menampilkan hanya sebagian berdasar label posting.

untuk lebih jelasnya ikuti langkah berikut :

Klik Page Element
Klik Add Gadget
Klik plus button (+) for HTML/JavaScript. (img)
Copy and paste kode dibawah ini

<h3>Arsitektur</h3>

<h3>Rumah Adat</h3>

Keterangan :

<h3>Arsitektur</h3> = judul label posting yang dimaksud ( sesuai dengan label artikel yang ingin ditampilkan )
http://kibagus-homedesign.blogspot.com/feeds/posts/default/-/Arsitektur = alamat URL dan label artikel yang dimaksud ( ganti dengan alamat blog dan nama label = warna hijau )
Untuk menampilkan lebih dari 3 label tinggal tambahkan kode pada bagian bawah, sesuai dengan kebutuhan.

Tips :

Penggunaan daftar isi jenis ini harus di ikuti dengan pengaturan jenis label yang kita gunakan jangan sampai kita menggunakan label sebuah artikel dengan lebih dari 1 label karena pada tampilan daftar isi akan muncul judul artikel yang sama pada label yang berbeda.
Tampilkan hanya beberapa jenis label yang utama.

Cara Membuat Kotak Komentar Blogger di Bawah Postingan

2011-04-24T15:57:00.000-07:00

Nah, coba kamu liat dulu di artikel kamu. Udah ada belom kotak komentarnya? Kalo udah ada berarti udah bisa kasih komentar di artikel kamu. Tapi kalo belum ada yaudah saya kasih tau cara ngeadainnya:

Pergilah kamu wahai blogger ke menu "Edit HTML" di menu "Layout" atau "Tata Letak
Abis itu kamu kasih tanda ceklis ke kotak "Expand Widget Templates"
Kamu cari kode di bawah ini:

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</p>
</b:if>

Biar lebih gampang, tekan ctrl+f trus cari kode yg tebal di atas. Tapi kamu harus teliti, ada lebih dari satu kode <p class='comment-footer'>, cari kode <p class='comment-footer'> yg di bawahnya terdapat kode <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
Ganti kode yg di atas dengan yg ini:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/> <b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</b:if> </b:if> </p> </b:if>
Save templatenya.

Kalo udah dikerjain langkah-langkah di atas, coba kamu cek salah satu artikel di blog kamu. Kalo udah ada kotak komentarnya, berarti kamu udah berhasil. Kalo ada yg gagal atau ada yg mau ditanyain kasih komentar aja yah..

Sekian, semoga bermanfaat...

How to Add the Quick Edit Pencil Button?

2011-01-30T05:32:00.000-08:00

The top image shows the Quick Edit button (the yellow pencil) in a blog post. Some of the older templates provided here don't have the Pencil button on even if you opted it to be on from the Layout page.

There are 2 things you have to do to turn on the Pencil button.

1. Modify the XML code
Here's what to add in the XML code so you can have the Pencil shows up on your blog posts when you're logged in, to make it easier for you to edit the posts.

If you're editing the XML code online from the Blogger Layout > Edit HTML page, make sure you click on the Expand Widget Templates box.

Inside the XML (or HTML) code, search for the string 'data:post.editUrl'. The code section should look something like this if you don't have the Pencil button on.

<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<span class='quick-edit-icon'> </span>
</a>
</span>
</b:if>

To turn on the Pencil button, replace the red line on the code above with the blue line from the code below (as you can see, the rest of the codes remain the same):

<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_edit_allbkg.gif'/>
</a>
</span>
</b:if>

2. Select the Quick Edit Button
Go to your Layout > Page Elements > Blog Posts Edit tab, and click on the Show Quick Editing box to turn it on. That's it.

Sumber: http://www.ourblogtemplates.com

Cara Menghilangkan Navbar Blogger

2011-01-29T03:20:00.005-08:00

Sobat Ihsan mengajukan pertanyaan yang di tulis melalui shoutbox. Beliau menanyakan bagaimana cara menghilangkan Navbar Blogger, dan kali ini saya akan mencoba membahasnya. Apa itu Navbar Blogger? navbar blogger adalah suatu frame yang berukuran kecil miliknya blogger yang terdapat di bagian atas blog. frame ini berfungsi untuk login ke blogger atau bisa juga sebagai jalan untuk melihat blog lain atau bisa juga untuk menandai blog yang sekiranya melanggar TOS blogger seperti blog yang mengandung unsur SARA ataupun pornografi untuk dilaporkan ke pihak blogger.

Apakah kita bisa menghilangkan Navbar Blogger? jika pertanyaannya seperti itu maka tentu jawabanya adalah bisa, akan tetapi sebelum menghilangkan navbar tersebut ada baiknya sobat berfikir-fikir dahulu dan silahkan baca TOS blogger secara seksama, karena resiko yang akan di pikul sangatlah berat yaitu akan di tutupnya account blogger sobat atau dengan kata lain sobat akan kehilangan blog kesayanangannya. Lumayan mengerikan bukan? memang beberapa waktu yang lalu tersiar kabar bahwa pernah ada yang menanyakan ke pihak blogger apakah boleh menghilangkan navbar blogger atau tidak? dan katanya sekarang pihak blogger membolehkan untuk menghapus navbar, tapi entahlah apakah berita tersebut benar atau tidak yang jelas sobat harus selalu membaca TOS secara seksama.

Masih bersikeras untuk menghilangkan navbar blogger? jika masih akan saya beritahu, akan tetapi resiko di tanggung masing-masing, saya tidak bertanggung jawab jika di kemudian hari terjadi sesuatu dengan blog sobat.

Untuk menghilangkan navbar blogger, sobat tinggal menambahkan kode di bawah ini pada style sheet CSS :

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Atau bisa juga menaruh kode berikut persis di bawah kode <body> :

<style type='text/css'>
#navbar-iframe {display:none;}
</style>

Mau pilih yang mana? keduanya mempunyai fungsi yang sama yaitu menghilangkan navbar blogger. Masih bingung juga dalam pemasangan kode di atas? silahkan ikuti langkah-langkah berikut ini :

Untuk template klasik

Klik menu Template

Klik menu Edit HTML

Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman

Copy kode berikut lalu paste di atas kode </style>

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Klik tombol Simpan Perubahan Template

Selesai.

Untuk template baru

Klik menu Layout

Klik menu Edit HTML

Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data

Copy kode berikut lalu paste di atas kode ]]></b:skin>

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Klik tombol Simpan Template

Selesai.

Selamat menikmati blog tanpa navbar !