Horizontal Blue Menu Navigation

Ada suka memasang menu navigasi di header? yang satu ini boleh untuk
di jadikan pilihan.Blue menu navigatioan, biru is my color. Penasaran
ingin melihat seperti apa tampilan menu navigasi ini, silahkan klik
pada tombol di bawah ini :

Bagaimana menurut sobat akan tampilan menu navigasi ini? tertarik? silahkan
ikuti cara instalasinya di sini !



Selamat mencoba !

uniQue Template R 1.3

Ada yang suka gelap? jika ada, saya sudah buatkan yang satu nih, hitam.
Black is macho, begitu katanya bagi yang sangat menggemarinya. Dari segi desain,
template ini tidak ada yang beda dengan pendahulunya yaitu uniQue template R 1.2,
yups... cuma beda warna. Lumayan buat sobat yang masih bingung otak-atik warna sudah
tidak perlu lagi berpuyeng ria karena sudah saya buatkan untuk sobat.

Untuk melihat demo, silahkan klik pada gambar di bawah :











Yang mau download, silahkan klik di sini !



Sebelum di upload ke blogger, jangan lupa untuk mengekstrak terlebih dahulu dengan software winzip.



Selamat berdownload ria !

Sisipkan Icon di View Profile

Jika pada postingan yang lalu telah di bahas bagaimana cara
menyisipkan mini icon pada label(kategory), maka pada kesempatan
kali ini akan coba di bahas tentang cara menyisipkan mini icon di
View My Complete Profile atau Lihat Profile Lengkap Saya.
Memang sebenarnya tidak terlalu penting, akan tetapi lumayan untuk
pemanis blog kita agar tampil sedikit lebih cantik dari sebelumnya.

Seperti biasa, sobat terlebih dahulu harus sudah mengupload mini icon
yang akan di pasang pada hosting tempat menyimpan gambar, kemudian
catat alamat gambar tersebut, misal saya telah mengupload sebuah mini
icon dan telah mempunyai lamat gambar alamat sebagai berikut :




http://24rohman.googlepages.com/icon_user.gif





Agar gambar tersebut bisa tampil, maka harus di tambah kode untuk memangilnya,
kodenya jadi seperti ini :




<img src='http://24rohman.googlepages.com/icon_user.gif'/>





Icon ini mempunyai gambar seperti ini :







Sebagai catatan saja bahwa tutor kali ini khusus bagi sobat yang memakai template baru.
Untuk menyisipkan mini icon pada View My Complete Profile, sebelumnya sobat
harus sudah menampilkan profile di blognya. Silahkan ikuti langkah-
langkah berikut ini:

1. Sign in di blogger.





2. Klik menu Layout.





3. Klik menu Edit HTML.





4. Klik tulisan Download Template Seluruhnya, silahkan save dulu untuk backup data.





5. Klik kotak kecil di samping tulisan Expand Widget Template.





6. Tunggu beberapa saat sampai proses selesai.





7. Cari kode seperti ini :






<b:if cond='data:aboutme != ""'>




<dd class='profile-textblock'><data:aboutme/>




</dd>




</b:if>

</dl>

<a class='profile-link' expr:href='data:userUrl'>




<data:viewProfileMsg/></a>

</b:if>





8. Sisipkan kode icon seperti kode di bawah ini :




<b:if cond='data:aboutme != ""'>




<dd class='profile-textblock'><data:aboutme/>




</dd>




</b:if>

</dl>

<a class='profile-link' expr:href='data:userUrl'>




<img src='http://24rohman.googlepages.com/icon_user.gif'/>&#160;




<data:viewProfileMsg/></a>

</b:if>








9. Klik tombol SIMPAN TEMPLATE.





10. Selesai.

Untuk melihat contoh silahkan sobat klik di sini !



Selamat mencoba !

Revisi Blue Lover Template

Setelah saya melakukan blogwalking beberapa hari yang lalu,
saya menjumpai ada yang memakai templateku yaitu Blue Lover Template,
eh setelah saya perhatikan ada pemandangan yang kurang mengasyikan yaitu
pada bagian label serta bagian arsip ada tulisan yang terpotong, iya benar-benar terpotong
sehingga tidak dapat terbaca. Ada yang salah dengan rancanganku uy...

Bagi sobat yang sudah terlanjur memakai template ini, ada revisi nih dari saya.
Ada sedikit kode yang harus di tambahkan pada template sobat, silahkan untuk
mengikuti langkah-langkah berikut ini :

1. Sign in di blogger





2. Klik menu Layout





3. Klik menu Edit HTML





4. Klik link Download template seluruhnya, save dulu untuk backup data





5. Cari kode seperti ini :






/* Sidebar Content

------------------------------------------------- */

.sidebar {

color: $sidebartextcolor;

line-height: 1.5em;

background: $sidebarBgcolor;

padding:5px;

}




.sidebar ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

background: $sidebarBgcolor;

}

.sidebar li {

margin:0;

text-indent:-15px;

line-height:1.5em;

}




.sidebar .widget{

padding:0 0 0em;

margin:0 0 1.5em;

}






6. Selipkan kode yang dicetak merah seperti contoh berikut :



/* Sidebar Content

------------------------------------------------- */

.sidebar {

color: $sidebartextcolor;

line-height: 1.5em;

background: $sidebarBgcolor;

padding:5px;

}




.sidebar ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

background: $sidebarBgcolor;

}

.sidebar li {

margin:0;

text-indent:-15px;

line-height:1.5em;

padding:0 0 .25em 15px; /* ini kode tambahannya */

}




.sidebar .widget{

padding:0 0 0em;

margin:0 0 1.5em;

}





7. Klik tombol Simpan Template





8. Selesai.

Bagi sobat yang akan memakai template ini, jangan kawatir karena sudah saya
perbaiki, silahkan bagi yang berminat untuk mendownloadnya di sini !
tapi jangan lupa di ektrak dulu pake winzip sebelum di upload ke blogger ya.

Ganti Warna Sidebar Minima

Adakah diantara sobat pecinta template minima? jawabannya kemungkinan banyak, diantaranya
adalah sobat junyan. Di balik kecintaannya terhadap template minima, ada sedikit keinginan
yang masih belum bisa di lakukan yaitu mengubah warna kolom sidebar agar tidak sama dengan
warna kolom posting. Memang jika sobat merujuk kepada kode asli dari template tersebut, walhasil
tidak akan bisa membuat keduanya berbeda warna karena memang di desain untuk satu warna.
Apabila sobat ingin merubahnya tentu saja itu bisa di lakukan dan saya kira tidaklah terlalu
sulit untuk melakukannya.

Karena saat ini template minima masih terbagi dua yaitu minima klasik dan minima baru maka
akan saya coba bahas satu persatu. Sebai catatan yaitu template yang di gunakan adalah template minima
berwarna putih.

Minima Klasik

Untuk merubah warna kolom sidebar minima, silahkan cari kode seperti di bawah ini :



/* Content

----------------------------------------------- */

@media all {

#content {

width:660px;

margin:0 auto;

padding:0;

text-align:left;

}

#main {

width:410px;

float:left;

}

#sidebar {

width:220px;

float:right;

}

}




Agar warna sidebar bisa berubah warna, sobat tinggal menyisipkan kode warna yang di inginkan, contoh
warna krem :



background:#f5ede3;



Agar tulisan yang ada di sidebar tidak terlihat menabrak dinding sidebar, sobat bisa memberi sedikit
sentuhan dengan menambahkan kode padding, misal :



padding : 7px;



Maka apabila kode-kode diatas di sisipkan pada kode kolom sidebar, maka kodenya akan jadi seperti ini :



/* Content

----------------------------------------------- */

@media all {

#content {

width:660px;

margin:0 auto;

padding:0;

text-align:left;

}

#main {

width:410px;

float:left;

}

#sidebar {

width:220px;

float:right;

background:#f5ede3; /*ini kode tambahannya */

padding:7px;/*ini kode tambahannya */

}

}




Sangat mudah bukan? tidak terlalu banyak kode yang harus di tambahkan. Bagaimana apabila
kolom posting ingin di beri warna juga? sobat hanya tinggal menyisipkan kode warna diantara
kode posting, yaitu bagian #main;


#main {

width:410px;

float:left;

background:#f5ede3; /* ini kode tambahannya */

padding:7px;/* ini kode tambahannya */

}

Minima baru

Untuk template baru, ada sedikit perbedaan dalam hal pewarnaan yaitu memakai variable
warna. Dengan adanya variable warna maka si pemakai template dapat mengubah warna secara
praktis di bagian menu Font dan Warna. Contoh variable warna dari template minima
seperti ini :





<Variable name="bgcolor" description="Page Background Color"

type="color" default="#fff" value="#ffffff">







Tugas dari sobat adalah membuat variable baru, terserah namanya apa, akan tetapi di sarankan
untuk membuat nama variable dengan yang mudah di ingat. Masih bingung? silahkan ikuti langkah berikut ini:




Sisipkan kode berikut diantara kode variable :

<Variable name="sidebarbgcolor" description="Warna background sidebar"

type="color" default="#999" value="#e6e6e6">

Tambahkan kode berikut pada kode untuk kolom sidebar, yang warna merah adalah kode yang harus di tambahkan :



/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:left;

font: $bodyfont;

}

#main-wrapper {

width: 410px;

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 */

}

#sidebar-wrapper {

width: 220px;

float: right;

background:$sidebarbgcolor; /* ini kode tambahannya */

padding: 7px; /* ini kode tambahannya */

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 */

}

Jika penambahan kode sudah selesai, jangan lupa untuk menekan tombol Simpan Template.
Bagaimana jika kolom posting juga ingin berwarna? seperti yang tadi juga, silahkan buat variable warna
dan sisipkan kode diantara kode kolom posting. Trus bagaimana apabila kolom sidebarnya ada dua? sama
saja, tinggal buat variable, kemudian sisipkan kode tambahan pada sidebar yang satunya lagi.



Sedikit tambahan, sebenarnya untuk variable warna bisa juga tidak usah dibuat. Caranya sobat langsung
menuliskan kode warnanya pada kode sidebar, contoh :



/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:left;

font: $bodyfont;

}

#main-wrapper {

width: 410px;

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 */

}

#sidebar-wrapper {

width: 220px;

float: right;

background:#e6e6e6; /* ini kode tambahannya */

padding: 7px; /* ini kode tambahannya */

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 */

}

Akan tetapi apabila kode warna langsung di pasang seperti itu maka pada menu Font dan Warna,
warna tersebut tidak bisa di ubah-ubah.



mau melihat contoh sidebar minima yang punya warna berbeda, silahkan klik di sini !



selamat mencoba !

Buat Frame Iklan

Sobat fajar widodo rupanya tertarik untuk mengetahui bagaimana
cara membuat frame seperti frame iklan yang ada di blog ini. Apakah sobat juga
sama tertarik untuk membuat frame tersebut? baca saja sampai akhir,
saya akan memberitahu caranya.

Untuk membuat frame seperti itu banyak cara yang bisa di tempuh, diantaranya bisa
menggunakan kode HTML <div>
atau bisa juga dengan menggunakan kode HTML <span>.
Langkah yang harus di persiapkan adalah tentukan dahulu lebar, warna latar belakang,
warna huruf, jenis huruf, besarnya huruf, serta hal lain yang sekiranya berhubungan. Agar lebih
mudah untuk di mengerti, saya buatkan sebuah contoh frame sebagai berikut:

Belajar membuat website »

Membuat website itu sangatlah mudah, dapatkan panduannya di sini ! ditunjang berbagai software & full support. daftar segera !!

http://www.resepbisnis.com/?id=rohman

Kode asli dari frame di atas adalah sebagai berikut :



<div style="border: 3px dashed red; background: #005af5; padding:10px; width:330px; text-align:left; color:white;">

<a style="font-size: 17px;COLOR: yellow; text-decoration:none;" href="http://kolom-tutorial.blogspot.com/2007/07/perkenalkan-situs-wwwresepbisniscom.html" title="klik di sini"><b>Belajar membuat website </b></a> &raquo;<br/>

Membuat website itu sangatlah mudah, dapatkan panduannya di sini ! ditunjang berbagai software & full support. daftar segera !!<br/>

<a style="color:yellow; font-size:12px; text-decoration:none;" href="http://kolom-tutorial.blogspot.com/2007/07/perkenalkan-situs-wwwresepbisniscom.html" title="klik di sini"><b>http://www.resepbisnis.com/?id=rohman</b></a>

</div>



Jika saya membuat spesifikasi pada frame iklan di atas, maka akan seperti ini :



warna pembatas : merah

style dari pembatas : garis putus-putus dengan lebar 3 pixel

jarak hurup dengan batas terluar : 10 pixel

lebar frame: 330 pixel

posisi hurup : rata kiri

warna hurup : putih

warna latar belakang : biru

warna link : kuning




Bagaimana sudah agak faham? kemungkinan besar masih bingung deh.
Agar lebih mudah cobalah sobat otak-atik sendiri kode di atas, saya
sedikit malas untuk menerangkan secara terperinci dari kode yang
saya buat.



ooo... iya lupa... sobat fajar widodo lebih spesifik menanyakan kode untuk
membuat garis putus-putus. Untuk garis putus-putus perintahnya seperti ini :



border : 3px dashed red;



3px menandakan lebar dari garis, dashed berarti garis putus-putus, red adalah kode warna merah.



Ada juga style yang lain yaitu berupa garis berbentuk garis yang solid ada juga yang berupa titik-titik.



border : 3px dashed red; --> untuk garis solid

border : 3px dotted red; --> untuk garis berupa titik-titik




Sepertinya cukup dulu deh, silahkan untuk bereksperimen menciptakan variasi-variasi baru
dari bentuk frame. Salam !

Pasang Kode Adsense Untuk Konten

Jika beberapa waktu yang lalu saya telah memposting artikel yang
memuat kiat-kiat agar lebih mudah untuk di terima oleh google adsense,
maka pada kesempatan kali ini akan mencoba membahas tentang bagaimana
menempatkan kode iklan "Adsense Untuk Konten " (adsense for content)
pada blog.



Berbicara mengenai cara pemasangan kode iklan, maka sudah barang tentu sobat harus
sudah di terima oleh Google Adsense sebagai mitra kerjanya. Bagi sobat yang
masih belum di terima, maka menurut saya kata sabar adalah yang paling tepat untuk
di ucapkan dan di laksanakan. Jika masih belum di terima,

cobalah untuk
memperhatikan isu yang di angkat oleh google pada surat penundaan penerimaan keanggotaan
sobat, apakah isu bahasa yang belum di support oleh adsense? isi blog yang susah di navigasikan
atau alasan lainnya? maka segeralah untuk memperbaikinya, dan apabila sudah merasa yakin telah
memenuhi kriteria yang ada maka cobalah untuk submit kembali blognya ke google adsense.



Kembali kepada topik bahasan utama seperti yang telah di katakan di awal yaitu mengenai
pemasangan kode iklan "Adsense Untuk Konten", sobat bisa melakukannya
dengan beberapa cara yaitu di antaranya adalah dengan mengambil kode langsung dari situs
Google Adsense atau bisa juga langsung dari account Blogger tanpa harus
mengunjungi Google adasense. Untuk cara yang pertama yaitu mengambil langsung kode iklan
dari situs Google Adsense, silahkan untuk mengikuti langkah-langkah berikut ini :

1. Silahkan kunjungi situs google adsense
   atau klik saja di sini !





2. Login dengan menggunakan username serta password sobat





3. Klik tab Konfigurasi Adsense





4. Klik Adsense untuk Konten





5. Beri tanda pada tombol radio di samping tulisan Unit Iklan





6. Klik pada menu dropdown yang ada di sampingnya, pilih iklan apa yang mau tampil di blog sobat :







• Iklan teks dan gambar (default) : iklan yang akan muncul berupa iklan yang berbentuk teks atau bisa juga
  berbentuk gambar (banner)




• Hanya iklan teks : pilihan ini khusus untuk menampilkan iklan dalam bentuk teks




• Hanya iklan gambar : jika iklan yang mau muncul berupa iklan gambar (banner) saja








7. Klik tombol Lanjutkan >> yang berada di sebelah kiri bawah layar monitor





8. Klik menu dropdown yang ada di sebelah atas untuk menentukan ukuran dari iklan





9. Aturlah warna sesuai dengan keinginan sobat, klik pada kotak masing-masing







• Garis Tepi : warna dari garis tepi




• Judul : warna hurup judul iklan




• Background : warna latar belakang iklan




• Teks : warna hurup isi iklan




• URL : warna hurup alamat situs si pemasang iklan







10. Klik pada menu dropdown untuk memilih gaya sudut







• Sudut bujur sangkar : bentuk iklan berbentuk kota




• Sudut sedikit membulat : bentuk iklan pojoknya membentuk bulatan kecil




• Sudut yang sangat membulat : bentuk iklan yang tampil berbentuk membulat (rounders), ini cocok bagi yang
  yang memakai template dalam bentu bulat (Rounders)








11. Klik pada tombol radio untuk memilih tampilan apabila tidak iklan yang bisa di tampilkan







• Tampilkan iklan layanan masyarakat : yang akan tampil adalah berupa iklan layanan masyarakat




• Menampilkan iklan non-Google dari URL lain : yang akan di tampilkan adalah bukan iklan dari google




• Isi ruang dengan warna solid : akan di timpah dengan warna yang di pilih







12. Klik tombol Lanjutkan >>





13. Klik link Tambahkan channel baru





14. Masukan nama channel yang di inginkan, contoh : kolom tutorial. Kemudian klik tombol Ok





15. Klik tombol Lanjutkan





16. Copy seluruh kode yang di berikan, lalu paste pada notepad untuk keperluan nanti di pasang di blog





17. Selesai.

Untuk langkah pertama yaitu pengambilan kode iklan dari Google adsense telah selesai, langkah selanjutnya
adalah memasang pada blog sobat, silahkan ikuti langkah berikut ini :

1. Sign in di blogger dengan id sobat





2. Klik menu layout





3. Klik menu Elemen Halaman





4. Klik tulisan Tambahkan sebuah lemen Halaman





5. Klik tombol TAMBAHKAN KE BLOG, di bawah tulisan Javascript/HTML





6. Copy kode yang ada di notepad tadi, kemudian paste pada kolom elemen yang muncul





7. Klik tombol Simpan perubahan





8. Klik pada elemen yang baru di buat, tahan lalu pindahkan pada tempat yang di inginkan (di drag & dropt),
   lalu klik tombol SIMPAN yang berada di sebelah atas





9. Selesai.

Pembahasan mengenai cara memasang iklan yang langsung diambil dari Google Adsense di rasa sudah cukup, untuk yang lain-lain
akan di bahas pada artikel berikutnya.




PS : bagi yang belum daftar, cepetan daftar. Klik pada banner di sebelah kanan atas.