Static Page Fitur Baru dari Blogspot/Blogger

Ini dia Fitur baru blogspot/blogger Static Page dapat digunakan sebagai top menu navigation seperti About Us, Contact Us dan lain sebagainya. Meskipun masih dalam tahap pengembangan Fitur Static Page layak di coba. Fitur ini dapat di akses melalui http://draft.blogger.com.

Bagaimana cara setting  Fitur static page di blogspot/blogger ?

Ikuti langkah-langkah di bawah ini:

1. Login ke  http://draft.blogger.com , login menggunakan account blogger kamu seprti biasa.
2. Kemudian klik Posting > Edit Laman/Edit Page(1) , lalu klik Laman Baru/New Page(2).

3. Setelah muncul form untuk mengisi Laman Baru(New Page), isi judul halaman misal About Me, kemudian klik Tayangkan Laman(Publish). 
   
4. Akan muncul pilihan penempatan : di Navigation Menu, di Sidebar atau akan kita pasang manual.Setelah dipiling klik Simpan dan Terbitkan.
   

5. Untuk mengedit susunannya klik Tata Letak ( Layout), klik Edit pada Widget Laman(Page). dari sinilah kita dapat mengedit susunan linknya.

Selamat mencoba...




Sumber : bloggerindraft.

Continue

Widget Recent Post & Recent Comment

Wah, sudah lama nggak nulis buat PermakBlogs. Hampir dua minggu! Hahaha, oke deh, untuk salam pembuka tahun baru, kita berikan trik Blogspot yang bisa dibilang lumayan mudah dan pendek untuk pemanasan. Trik kali ini adalah bagaimana caranya kita membuat widget Recent Post dan Recent Comments tanpa harus menggunakan javascript, instalasi javascript pada Blogspot bisa lumayan berpengaruh memperlambat loading dan kurang begitu bagus diterapkan untuk Search Engine Optimization (SEO).

Seberapa gampang sih widget ini? Sangat gampang, anda hanya membutuhkan link RSS yang juga sudah disediakan oleh Blogspot.  Berikut adalah kode RSS untuk post dan comments.

http://namasitusanda.blogspot.com/feeds/posts/default

http://namasitusanda.blogspot.com/feeds/comments/default

Yang perlu anda lakukan hanyalah mengubah namasitusanda dengan nama situs anda, tentunya.

Oke setelah bahannya disiapkan, sekarang kita nyalakan kompornya. Masuk ke blogspot, pilih layout di dashboard kemudian pilih Page Element. Tambahkan widget, add page element dan pilih Feed. Masukkan url di atas masing-masing dengan judul Recent Post dan Recent Comments. Save.

Voila, job well done.

Anda bisa meletakkan kedua feed ini dimanapun di blog dengan hanya melakukan drag and drop kotak widgetnya. Mudah kan?

Selamat mencoba!

Continue

Cara Menambah Banner Iklan di Blogger

Akhirnya nulis artikel lagi setelah sekian lama... mumpung lagi semangat lanjut...

Kali ini mau bagi - bagi cara menambah banner di blogger, kayak di saamping kanan blog ini. Buat apa sich dikasih banner? Ndak usah dijelaskan ya? para blogger sudah pasti tau to. Langsung ke caranya aja ya?

ikuti langkah - langkah di bawah ini :

1. Masuk ke account blogger kamu.
2. Lalu pilih Tataletak/layout dan pilih tab Edit Html.
3. Jangan lupa backup Blog kamu dulu, klik Download Template Lengkap dan juga contreng Expand Template Widget.
4. Cari Kode di bawah ini :


]]></b:skin>

Setelah itu copy paste kode di bawah ini tepat diatas kode tersebut.


/* Banner Iklan 125x125 */
#spotbanner{
overflow: hidden;
padding:0;
}
.ad1, .ad3 {
float: left;
margin-bottom: 5px;
padding-left:0px;
}
.ad2, .ad4 {
float: right;
margin-bottom: 5px;
padding-right:0px;
}

klik simpan template

5. Masuk ke Tab Elemen laman
   Kemudian buat element HTML/Javascript baru (di bagian sidebar kiri atau kanan halaman sesuai keinginan kamu) lalu masukan kode di bawah ini


<div id='spotbanner'>
<!-- Ad1 start -->
<a class='ad1' href='http://permakblogs.blogspot.com'><img src='http://i945.photobucket.com/albums/ad300/andrebwid/banner/banneriklan.jpg'/></a>
<!-- Ad2 start -->
<a class='ad2' href='http://permakblogs.blogspot.com'><img src='http://i945.photobucket.com/albums/ad300/andrebwid/banner/banneriklan.jpg'/></a>
<!-- Ad3 start -->
<a class='ad3' href='http://permakblogs.blogspot.com'><img src='http://i945.photobucket.com/albums/ad300/andrebwid/banner/banneriklan.jpg'/></a>
<!-- Ad4 start -->
<a class='ad4' href='http://permakblogs.blogspot.com'><img src='http://i945.photobucket.com/albums/ad300/andrebwid/banner/banneriklan.jpg'/></a>
<div class='clearer'/>
</div>

*text warna biru dapat diganti dengan Url web yang lain
*text warna merah bisa diganti dengan Url gambar

6. Klik Simpan, setelah proses simpan selesai klik lihat blog... kelihatan kan banner iklannya?

ok semoga berhasil ya...

Continue

Cara Permak Header Menjadi Dua Bagian

Yes berhasil juga akhirnya mbagi header menjadi dua bagian. Sekarang saatnya bagi-bagi ke Permaker semua. Kalau dua artikel sebelumnya dah dikasih tau tentang bagaimana menyembunyikan Judul/diskripsi Blog dan bagaimana menambah gambar pada header kali ini membahas cara membuat header menjadi dua bagian. Mau langsung atau ngobrol dulu? langsung aja ya ntar malah ngantuk...

Ikuti langkah - langkah di bawah ini :

1. Masuk ke Account Blogger kamu
2. Pilih Tata Letak klik Edit Html ( jangan lupa contreng "Expand Template Widget").
3. Cari code di bawah ini :


/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}

Kalau beda yang penting cari CSS bagian header biasanya

/* Header
===================================
*/

................... samai dengan
}
/* Posts
----------------------------------------------- */


4. Hapus kode bagian header diatas ganti dengan kode di bawah ini:


/* Header
===================================
*/

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor;
height:190px;
}

#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#r_head{
width:300px;
float:left;
padding-top:10px;
}



5. Selanjutnya cari code di bawah ini :


<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="Nama blog anda (Header)" type="Header">
</b:widget>
</b:section></div>


Hapus kode di atas dan ganti dengan kode di bawah ini


<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>


6. Ok sudah selesai tinggal klik save template, trus klik Tab elemen halaman nah jadikan sekarang headernya jadi dua bagain satu buat logo satu bisa buat banner atau google adsense.
   

Gampangkan ? gampang dan menyenangkan memang permak blogs, kalau bisa itu puas rasanya.. bagaimana dengan kamu?

OK semoga berhasil ya.

NB : lebar kolom(width) di atas silahkan disesuaikan keinginan anda trial and error aja, Trus kalau template kamu berbeda sialhken lapor aja nanti kita bantu tenang aja :).

Continue