Photo Profile Berbingkai

Sobat Edelweis rupanya berkeinginan agar photo yang terpampang di profilemenjadi ada figura nya supaya tampak lebih sedap di pandang mata, Sebuah keinginanyang wajar kalau menurut saya. Yups..untuk itu akan saya bahas sedikit trik
agar photo tersebut menjadi ada figuranya.



Agar photo frofile menjadi berbingkai atau berfigura, langkahnya sangat sederhana
sekali,yaitu sobat hanya merubah nilai border pada stylee sheet css pada bagian untuk
photo frofile, contoh kode photo frofile untuk template lama seperti ini :



.profile-img img {

float:left;

padding:4px;

border:1px solid #ddd;

margin:0 8px 3px 0;

}



untuk template baru seperti ini :



.profile-img {

float: left;

margin: 0 5px 5px 0;

padding: 4px;

border: 1px solid $bordercolor;
}




Tugas sobat hanya merubah nilai bordernya saja dengan nilai yang lebih besar tentunya, biar lebih jelas, sedikit saya ulas tentang kode-kode diatas :



float:left; --> artinya photo akan di simpan di sebelah kiri pada tulisan frofile.


padding:4px; --> padding disini maksudnya adalah jarak antara photo dengan figura (border) sebesar 4 pixel, jika sobat tidak menginginkan ada jarak antara photo dengan bingkai, maka tinggal ganti nilainya dengan 0px (nol).



border:1px solid #ddd; --> nah ini yang menjadi bingkai photonya, nilai figura adalah sebesar 1 pixel, jika ingin figuranya tampak lebih lebar, ya tinggal ganti nilai 1px dengan nilai yang lebih besar, contoh 6px, 8px atau yang lainnya. kode #ddd --> adalah kode warna untuk abu-abu, silahkan ganti dengan kode warna lainnya jika tidak cocok.




Masih bingung cara merubahnya? silahkan ikuti langkah-langkah berikut!



Untuk template klasik :

1. Sig in di blogger





2. Klik menu Template





3. Klik menu Edit HTML





4. Copy seluruh kode template yang ada lalu paste pada notepad kemudian save. ini untuk backup data bila terjadi kesalahan editting





5. Cari kode yang mirip dengan kode di bawah ini :





.profile-img img {

float:left;

padding:4px;

border:1px solid #ddd;

margin:0 8px 3px 0;

}





6. Ganti nilai border dengan nilai yang lebih besar, contoh 8px, sehingga kodenya akan seperti ini :





.profile-img img {

float:left;

padding:4px;

border:8px solid #ddd;

margin:0 8px 3px 0;

}






7. Klik tombol Pratinjau untuk melihat hasil perubahan





8. Jika sudah OK, klik tombol Simpan Perubahan Template





9. Selesai.

Untuk template baru :

1. Sign in





2. Klik menu Layout





3. Klik menu Edit HTML





4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data






5. Klik kotak kecil di samping tulisan Expand Template Widget





6. Tunggu beberapa saat sampai proses selesai





7. Cari kode yang mirip dengan kode di bawah ini :






.profile-img {

float: left;

margin: 0 5px 5px 0;

padding: 4px;

border: 1px solid $bordercolor;

}





8. Ganti nilai border dengan nilai yang lebih besar, contoh 8px, sehingga kodenya akan seperti ini :





.profile-img img {

float:left;

padding:4px;

border:8px solid $bordercolor;

margin:0 8px 3px 0;

}





9. Klik tombol Pratinjau untuk melihat perubahan





10. Bila sudah OK, klik tombol SIMPAN TEMPLATE





11. Selesai.

Sebagai catatan, untuk melihat efek figura berfungsi, tentunya sobat harus terlebih dahulu memasang photo profile ( ya iya rek, kalo ga ada photonya, opo yang mau di buatin bingkai tho).



Jika penasasaran ingin melihat photo ganteng dengan figura yang antik, silahkan klik di sini !




Selamat mencoba deh !

Download Minima 3 kolom

Setelah beberapa hari menghilang dari peredaran, maklum kemarin abis dari bandung nengokin sikembar yang mau masuk TK (lho ko jadi curhat men), akhirnya saya kembali menemui sobat semua.



OK, mungkin kali ini saya tidak membicarakan tentang blog tutorial yang seperti biasanya saya posting. Kemarin saya iseng-iseng otak-otak template miliknya blogger yaitu minima yang dua kolom itu lho, niatnya pengen jadi tiga kolom, dan apa yang terjadi....the...weeew...weeeeewww...akhirnya jadi juga deh tuh template jadi tiga kolom.



Yups, buat sobat yang pecinta minima dengan background putih saya kasih deh tuh template buat di download secara gratis, tapi ni ye...ada tapinya..kali ini yang saya buat cuma yang template klasik, kalo yang template baru alias pake XML belum saya buat, nanti deh ya saya buatin.



Biar tidak penasaran, saya berikan screen shootnya. silahkan klik di sini ! fitur-fitur yang saya masukan pada template ini antara lain yaitu sudah tersedianya system Read more ! seperti yang ada pada blog ini, syaratnya pada saat posting sobat harus menyisipkan kode <div class="fullpost"> .... </div>, untuk lebih jelasnya tentang Read more ini silahkan baca di sini ! fitur lainnya yaitu sudah terpasang menu dtree, silahkan edit kembali menu tersebut sesuai dengan keinginan sobat, untuk lebih jauh tentang menu dtree ini, silahkan klik di sini ! serta Recent comment pada sidebar, dan yang lebih menarik lagi adalah sudah di pasang navigasi yang terletak pada header blog, lebih jauh tentang menu navigasi ini, silahkan baca di sini ! silahkan edit kembali sesuai keinginan sobat.



Sekali lagi jika ada pertanyaan, apakah template ini bisa di download secara gratis? jawabannya iye bisa di download gratis. Cuma, ada cuma..nya nih. Sebagai apresiasi terhadap karya seseorang dalam hal ini ya saya dong, saya cuma minta sobat jangan menghapus kredit berupa banner dari blog ini, jika mau di pindahkan silahkan saja asal jangan di hapus ya.



Mengulas sedikit tentang template ini biar sobat bisa lebih leluasa dalam melakukan editting, menu css yang saya tambahkan agar menjadi tiga kolom adalah sebagai berikut :





#sidebarkiri {

width: 210px;

float: left;

padding-right:10px;

}





#sidebarkiri { --> hanya nama saja biar mudah di ingat

width: 210px; --> lebar kolom yang ada disebelah kiri sebesar 210px, silahkan di rubah apabila ingin menggunakan ukuran lain

float: left; --> terletak di sebelah kiri

padding-right:10px; --> jarak padding dengan kolom sebelah kanannya sebesar 10px





Eh lupa deh, kan judulnya soal download nih, jadi ga akan terlalu berlama-lama tentang tutorialnya, silahkan tanyakan seputar template ini jika sobat menemui masalah. Sebagai info aja nih, template ini hasilnya OK baik dengan intrnet Explorer ataupun si rubah mozilla firefox. Template ini datanya tidak besar, hanya sebesar 5 kb dalam bentuk .zip. silahkan ekstrak dulu dengan winzip. Jika belum punya program winzip, silahkan klik di sini untuk mendownloadnya. (weeeeeyyy...kelamaan, mana link download templatenya?) Untuk mendownload template ini silahkan klik di sini !



Selamat mendownload ya !

Anchor Link / Link Satu Halaman

Lagi-lagi saya tertarik untuk membahas tentang cara membuat link. Yo'i, karena
tercatat tiga artikel yang sudah di posting tentang bagaimana cara membuat
tautan atau link, dan yang sekarang merupakan artikel yang keempat. Akan tetapi jangan
dulu mengira bahwa posting kali ini akan sama dengan postingan terdahulu, sebab
kali ini yang akan di bahas adalah cara untuk membuat link dalam bentuk Anchor.



Apa itu Anchor Link ?



Anchor link biasa di sebut juga dengan link dalam satu halaman, berbeda dengan hyperlink
pada umumnya yang biasa di gunakan untuk menghubungkan suatu tulisan dengan tulisan lain yang berada
pada halaman yang berbeda atau blog yang berbeda, anchor link ini lebih banyak di gunakan untuk
halaman yang sama. Masih bingung? memang saya juga sama bingungnya kalau membaca sekilas tentang pengertian tadi,
agar tidak sama-sama bingung akan saya beri contoh yang nyata. Pada bagian paling bawah blog ini, ada
tulisan berupa link yang tertera :



->> Kembali lagi ke atas <<-



Nah apabila sobat meng klik link tulisan tersebut maka secara otomatis yang akan tampil pada layar monitor sobat adalah halaman yang paling
atas dari blog ini, tidak percaya? silahkan buktikan ! Kelebihan anchor link dengan link biasa adalah link ini tidak memerlukan loading
ulang untuk memanggil obyek yang telah di tandai sebagai anchor.Contohnya seperti link yang berada paling bawah blog
ini, jika sobat mengkliknya maka tidak memerlukan waktu lebih dari satu detik halaman atas dari blog ini akan di tampilkan.



Bagaimana cara membuat anchor link?



Prinsip dasarnya adalah kita menandai terlebih dahulu suatu objek, lalu pada bagian yang lain kita buat link untuk memanggilnya.
Kode dasarnya seperti ini :




<a name="NamaAnchor"> .... </a>       <-- objek anchor



<a href="#NamaAnchor"> .... </a>       <-- link pemanggil anchor



Perhatikan tanda pagar (#) di atas, untuk nama anchor tidak memakai tanda pagar, akan tetapi untuk
link pemanggil anchor harus memakai tanda pagar.




Objek dari suatu anchor bisa di tampilkan bisa juga tidak, terlihat dari kode di atas ada tanda berupa titik-titik.
Titik-titik tersebut bisa di isi tulisan bisa juga di biarkan kosong, contoh :



<a name="AtasBlog"></a>       <-- objek anchor yang tidak ingin menampilkan tulisan.



<a name="AtasBlog">Blog bagian atas</a>       <-- objek anchor yang ingin menampilkan tulisan.



Berbeda dengan objek dari anchor, link pemanggil anchor haruslah di beri tulisan untuk bisa di klik oleh pengunjung, contoh :



<a href="#AtasBlog">Kembali ke atas</a> <-- link pemanggil anchor harus di beri tulisan.




Tertarik ingin membuatnya, silahkan ikuti langkah-langkah berikut :




Untuk template klasik :

1. Sign in di blogger





2. Klik menu Template





3. Klik menu Edit HTML





4. Copy seluruh kode template sobat, lalu paste pada notepad, silahkan save dulu untuk backup data





5. Copy kode berikut lalu paste persis di bawah kode <body>





<a name="atas"></a>





6. Copy paste kode berikut di atas kode </body>





<center><a href="#atas"> Kembali lagi ke atas</a> </center>





7. Klik tombol Pratinjau untuk melihat perubahan





8. Jika sudah OK, klik tombol Simpan Perubahan Template





9. Selesai.

Penambahan kode <center> </center> di maksudkan agar tulisan link berada pada posisi tengah.




Untuk template baru :

1. Sign in di blogger





2. Klik menu Layout





3. Klik menu Edit HTML





4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data






5. Klik kotak kecil di samping tulisan Expand Template Widget





6. Tunggu beberapa saat sampai proses selesai





7. Copy kode berikut lalu paste persis di bawah kode <body>





<a name="atas"></a>





8. Copy paste kode berikut di atas kode </body>





<center><a href="#atas"> Kembali lagi ke atas</a> </center>





9. Klik tombol Pratinjau untuk melihat perubahan





10. Jika sudah OK, klik tombol SIMPAN TEMPLATE





11. Selesai.

Satu lagi yang menarik dari fungsi kode ini, yaitu buat para sobat yang suka menulis posting
yang sangat panjang, atau merupakan tulisan-tulisan yang berupa karya ilmiah, Kode ini bisa
membantu kita untuk membuatkan sebuah navigasi untuk mempermudah pembaca. Misalkan pada setiap
pharagrap kita sisipkan sebuah anchor link yang mana anchor link ini bisa berupa tulisan yang terlihat
ataupun hanya sebuah objek yang tidak bisa terlihat oleh pembaca. Dan tentunya pada tempat-tempat tertentu
kita membuat tulisan berupa link untuk memanggil anchor link. Sebagai contoh saya telah membuat beberapa
anchor link pada setiap pharagrap, kode anchor link yang saya sisipkan seperti ini :



<a name="satu"></a>    --> pharagrap pertama



<a name="dua"></a>    --> pharagrap kedua



<a name="tiga"></a>    --> pharagrap ketiga



Mau membuktikan? Ok, coba deh klik masing-masing link berikut :



Kembali ke pharagrap Pertama !



Kembali ke pharagrap Kedua !



Kembali ke pharagrap Ketiga !




mau lihat contoh blog yang memakai kode ini juga, silahkan klik Di sini !



Menarik bukan? Selamat mencoba deh !

Tips Mengganti Background Blog

Beberapa hari yang lalu, sobat Uel menanyakan perihal bagaimana caranya untuk
mengganti background blog, dan tentunya saya akan coba membahasnya. Menurut
saya, ada dua kemungkinan mengganti background yaitu yang pertama adalah mengganti
hanya warna background (latar belakang) saja, yang kedua adalah mengganti background
blog dengan menggunakan gambar atau image.




Ada satu hal yang saya anggap penting apabila sobat berniat mengganti background (latar belakang)
yaitu gantilah background dengan warna atau image yang sekiranya tidak membuat tulisan-tulisan
kita menjadi susah untuk di baca. Jika tulisan yang tersedia berwarna gelap, maka pilihlah warna
atau image yang terang, akan tetapi sebaliknya apabila tulisan yang ada berwarna terang, maka sebaiknya
warna atau image background berwarna gelap. Tulisan yang susah untuk di baca oleh pengunjung, tentunya
akan membuat pengunjung tersebut malas untuk membaca artikel-artikel yang kita tulis, dan tentunya
percuma saja kita memposting artikel jika tidak ada yang mau untuk membacanya.OK, biar tidak menyita
halaman langsung saja pada topik utama. Karena kode template sangat bervariasi, yang akan saya jadikan
contoh adalah template asli blogger yaitu template minima.

Mengganti Warna Background

Untuk template minima klasik :

1. Sign in




2. Klik menu Template




3. Klik menu Edit HTML




4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data




5. Rubahlah kode warna asli template dengan kode warna yang sobat sukai (yang warna merah adalah kode yang harus di rubah) :





body {

background:#fff;

margin:0;

padding:40px 20px;

font:x-small Georgia,Serif;

text-align:center;

color:#333;

font-size/* */:/**/small;

font-size: /**/small;

}



Misalkan jika ingin menjadi warna abu-abu terang, kodenya jadi seperti ini :



body {

background:#E7E3E3;

margin:0;

padding:40px 20px;

font:x-small Georgia,Serif;

text-align:center;

color:#333;

font-size/* */:/**/small;

font-size: /**/small;

}





6. Klik tombol Pratinjau untuk melihat perubahan




7. Jika sudah OK, klik tombol Simpan Perubahan Template




8. Selesai.

Jika sobat kebingungan tentang kode warna, sobat bisa menggunakan bantuan
program photoshop, kapan-kapan akan saya posting khusus tentang bagaimana
cara mengetahui kode warna.





Untuk template minima baru :

1. sign in




2. Klik menu Layout




3. Klik menu Fon dan Warna




4. Pada gambar teks area sebelah kiri, pilih yang Warna latar Belakang Halaman (biasanya yg pertama sih langsung ini, jadi tidak usah
   di pilih lagi)




5. Klik warna yang sobat sukai pada gambar warna-warna yang di tampilkan, lalu lihat perubahannya pada gambar di sebelah bawah




6. Jika merasa sudah cocok, klik tombol SIMPAN PERUBAHAN




7. Selesai.

Mudah bukan?

Mengganti Background Dengan Image

Hal yang pertama tentu saja sobat harus mempunyai file image. Image
ini bisa berbentuk imaage biasa, photo, bahkan animasi pun bisa.
hal yang kedua adalah menguploadnya ke situs untuk menyimpan gambar, saya
anggap sobat sudah bisa melakukannya karena sudah saya bahas pada postingan
terdahulu, atau masih bingung? kalau iya, coba baca kembali di sini !



Untuk ukuran gambar, sobat tidak usah membuatnya dalam bentuk yang sangat besar,
karena walaupun ukuran asli dari image (gambar) adalah kecil, nanti akan di tampilkan
dalam jumlah yang sangat banyak hingga memenuhi layar monitor, contoh saya sudah
menguload sebuah gambar dengan ukuran yang kecil saja, gambarnya seperti ini
(ukuran gambar dalam ukuran aslinya) :



alamat gambarnya adalah



http://amen24.googlepages.com/pattern_096.gif



gambarnya seperti ini :







gambarnya sangat kecil bukan? tapi gambar tersebut akan tampil memenuhi layar karena akan di tampilkan
dalam jumlah yang sangat banyak.



Untuk cara instalasinya, silahkan ikuti langkah-langkah berikut !



Untuk template minima klasik :

1. Sign in




2. Klik menu Template




3. Klik menu Edit HTML




4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data




5. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :





body {

background:#fff url('http://amen24.googlepages.com/pattern_096.gif');

margin:0;

padding:40px 20px;

font:x-small Georgia,Serif;

text-align:center;

color:#333;

font-size/* */:/**/small;

font-size: /**/small;

}





6. Klik tombol Pratinjau untuk melihat perubahan




7. Jika sudah OK, klik tombol Simpan Perubahan Template




8. Selesai.

Kode warna background sengaja tidak saya hilangkan, ini di maksudkan agar
apabila background image yang kita pakai gagal di loading oleh komputer pengunjung
blog, maka yang bekerja duluan warna background.




Untuk template minima baru :

1. Sign in





2. Klik menu Layout





3. Klik menu Edit HTML





4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data






5. Klik kotak kecil di samping tulisan Expand Template Widget





6. Tunggu beberapa saat sampai proses selesai





7. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :





body {

background:$bgcolor url('http://amen24.googlepages.com/pattern_096.gif');

margin:0;

color:$textcolor;

font:x-small Georgia Serif;

font-size/* */:/**/small;

font-size: /**/small;

text-align: center;

}





8. Klik tombol Pratinjau untuk melihat perubahan





9. Bila sudah OK, klik tombol SIMPAN TEMPLATE





10. Selesai.

Saya rasa ini sangat mudah dilakukan, karena tidak banyak kode yang harus di tambahkan, Untuk melihat
contoh blog yang sudah saya pasang background dengan gambar yang saya contohkan di atas, silahkan sobat
klik di sini !



Eh lupa, bagi sobat yang malas membuat gambar, sobat bisa mendownload berbagai gambar pattren di sini.




Selamat mencoba !

Mengatur Perataan Posting Artikel

Sudah dua kali pertanyaan ini muncul pada shoutbox, salah satunya
seperti ini :



"mas,gimana cara bikin rata kanan agar postingnya jadi rapi .... thx"



Sebenarnya tentang cara posting artikel sudah saya bahas pada postingan terdahulu, jika mau iseng coba baca di sini, akan tetapi biar lebih faham, sengaja saya posting lagi agar lebih jelas.



Untuk membuat perataan (align), baik rata kiri, kanan, kiri-kanan, atau mau tengah-tengah semuanya, bisa dengan dua cara tergantung dari kebiasaan sobat saat posting artikel, apakah biasa pakai menu Compose atau Edit HTML. Oleh karena itu akan saya bahas untuk keduanya.




Untuk menu Compose



Pada menu compose sebenarnya ini lebih mudah, sebab untuk membuat perataan sudah di sediakan tool (peralatan) yang sama dengan yang ada di Microsoft Word atau Exel, icon tool nya seperti ini :



--> Untuk merubah jenis hurup yang di gunakan



--> Untuk merubah ukuran hurup (heading)



--> Untuk Menebalkan hurup



--> Untuk memiringkan hurup



--> Untuk merubah warna hurup



--> Untuk membuat link



--> Untuk membuat artikel menjadi rata kiri



--> Untuk membuat tulisan menjadi di tengah



--> Untuk membuat artikel menjadi rata kanan



--> Untuk membuat artikel menjadi rata kiri dan rata kanan



--> Untuk membuat sub bahasan oleh angka



--> Untuk membuat sub bahasan oleh bullet



--> Untuk mengecek spelling



--> Untuk memasukan gambar(upload gambar)



--> Untuk membuat artikel dalam kode HTML



--> Untuk membuat artikel dalam mode Compose (biasa)




--> Untuk me review (melihat) artikel



Cara agar artikel bisa rata kanan yaitu Highligh (blok) seluruh artikel yang di buat, lalu klik icon yang untuk rata kanan saja. Bila ingin rata kanan-kiri, rata kiri atau tengah semua, caranya ya sama yaitu tinggal Highligh (blok) seluruh artikel yang di buat, trus ya klik icon yang sobat mau pake, kelar deh. Selanjutnya ya tinggal publish, mudah bukan?



Akan tetapi bagi sobat yang memakai system Read more yang memakai kode <span class="fullpost">, memposting artikel artikel dengan memakai menu Compose sering menemui masalah di akibatkan jika di lihat pada menu Edit HTML akan muncul kode tadi di atas dalam jumlah yang banyak tanpa kita tuliskan sehingga sistem read more menjadi tidak bekerja dengan baik, oleh karena alasan tadi sistem
read more yang saya ajarkan di blog ini adalah dengan memakai kode <div class="fullpost"> yang relatif lebih aman.




Untuk menu Edit HTML



Bagi sobat yang terbiasa memakai Edit HTML bisa juga membuat perataan, baik kiri, kanan, kiri-kanan, ataupun tengah semua, yaitu caranya dengan menambahkan kode HTML di awal dan akhir artikel, kodenya seperti ini :



Rata kiri :



<div align="left">



isi artikelnya di sini



</div>



Rata kanan :



<div align="right">



isi artikelnya di sini



</div>



Rata kiri-kanan :



<div align="justify">



isi artikelnya di sini



</div>



Supaya tengah semua :



<div align="center">



isi artikelnya di sini



</div>




Agar hasilnya kelihatan, saya berikan contoh dengan mengutif isi artikel di blog ini.



Contoh cara membuatnya seperti ini :



Untuk yang rata kiri :



<div align="left">

Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.

</div>



Maka hasilnya akan seperti ini :

Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.

Untuk yang rata kanan :



<div align="right">

Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.

</div>



Maka hasilnya akan seperti ini :

Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan.
Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan
dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal
membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk
hal-hal yang baik,Terima kasih.

Untuk yang rata kiri-kanan :



<div align="justify">

Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan.
Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan
dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal
membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk
hal-hal yang baik,Terima kasih.

</div>



Maka hasilnya akan seperti ini :

Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan.
Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan
dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal
membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk
hal-hal yang baik,Terima kasih.

Untuk yang tengah semua :



<div align="center">

Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan.
Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan
dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal
membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk
hal-hal yang baik,Terima kasih.

</div>



Maka hasilnya akan seperti ini :

Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan.
Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan
dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal
membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk
hal-hal yang baik,Terima kasih.

Untuk yang bullet & numbering, ini bisa juga dilakukan :



contohnya seperti ini :



Bullet saja :




<li>Sig in di blogger dengan id sobat </li>

<br/>

<li>Klik menu layout </li>

<br/>

<li>Klik menu Edit HTML </li>



Hasilnya seperti ini :

Sig in di blogger dengan id sobat

Klik menu layout

Klik menu Edit HTML

Bullet yang menjorok ke tengah :



<ul>

<li>Sig in di blogger dengan id sobat </li>

<br/>

<li>Klik menu layout </li>

<br/>

<li>Klik menu Edit HTML </li>

</ul>




Hasilnya seperti ini :

• Sig in di blogger dengan id sobat




• Klik menu layout




• Klik menu Edit HTML

Yang memakai nomor :



<ol>

<li>Sig in di blogger dengan id sobat </li>

<br/>

<li>Klik menu layout </li>

<br/>

<li>Klik menu Edit HTML </li>

</ol>




Hasilnya seperti ini :

1. Sig in di blogger dengan id sobat




2. Klik menu layout




3. Klik menu Edit HTML

Untuk warna :



<span style="color:kode warna">

tulisan yang mau di warnai

</span>



contoh untuk warna merah :



<span style="color:red">

ini contoh merah

</span>



hasilnya seperti ini :





ini contoh merah




atau bisa juga seperti ini :



<span style="color:#FD0303">

ini contoh merah

</span>



Hasilnya tetap sama :




ini contoh merah




untuk mengetahui kode warna sangat gampang, sobat bisa menggunakan bantuan program photosop,
sobat tinggal sorot warna yg di kehendaki, nanti kode warnanya akan di tampilkan.



Kode-kode diatas tidak hanya berlaku pada postingan saja, akan tetapi berlaku juga
pada edit HTML untuk kode template.



Saya kira cukup sekian dulu, kalau kepanjangan bosen bacanya kan ?



Selamat ngeblog buat semuanya !

Navigasi Dengan Css (2)

Lagi-lagi menanggapi keinginan mba Ati dalam hal membuat menu navigasi yang berbentuk
horizontal seperti yang terdapat pada header blog ini, kali ini saya akan mencoba menjawabnya dan mudah-mudahan postingan kali ini dapat memenuhi rasa ketidakpuasan terhadap jawaban saya pada postingan yang lalu. Menu navigasi yang akan saya buat adalah dengan menggunakan css agar hasil yang di dapat bersifat flexible dan tidak kaku.



Untuk membuat menu navigasi dengan css, tentunya akan berbeda hasilnya tatkala menggunakan template yang berbeda, akan tetapi agar saya bisa memberi sedikit gambaran maka template yang saya jadikan contoh adalah template minima yang di desain oleh Douglas Bowman (template asli blogger), klik tombol dibawah untuk melihat demo :









Bagaimana menarik bukan? jika tertarik silahkan sobat lanjut bacanya. Sekarang silahkan sobat baca dulu seluruh artikel ini sampai tuntas, karena ada kode-kode tertentu yang harus di sesuaikan, dan nanti pada akhir artikel saya akan menerangkan tentang kode-kode yang harus di rubah.



Untuk membuat menu tersebut silahkan sobat ikuti langkah-langkah berikut ini.




Untuk template minima klasik :

1. Sig in di blogger





2. Klik menu Template





3. Klik menu Edit HTML





4. Copy seluruh kode template yang ada lalu paste pada notepad kemudian save. ini untuk backup data bila terjadi kesalahan editting





5. Copy kode berikut lalu paste pada style sheet css sobat, atau bila bingung simpan saja di atas kode </style>






/* Navigasi buat si juleha

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

#juleha{

height:25px;

text-align: center;

}



#juleha a{

margin:0;

font-size:1.2em;

font-weight:bold;

letter-spacing:-1px;

background-color: #cccccc;

color: #000000;

padding-top:2px;

padding-bottom:2px;

padding-left:4px;

padding-right:4px;

}



#juleha a:hover{

text-decoration:none;

padding:34px 5px 41px 5px;

background-color: #0326FC;

background-repeat: repeat-x;

color:#A7FC03;

padding-top:2px;

padding-bottom:2px;

padding-left:4px;

padding-right:4px;

}





6. Copy kode berikut lalu paste pada kode template seperti di bawah ini, yang berwarna hitam adalah kode aslidan warna merah adalah kode yang harus di tambahkan :





<div id="header">


<h1 id="blog-title">

<ItemPage><a href="<$BlogURL$>"></ItemPage>

<$BlogTitle$>

<ItemPage></a></ItemPage>

</h1>



<id="description"><$BlogDescription$>


<div id="juleha">

<a href="#" target="_blank">Link 1</a>

<a href="#" target="_blank">Link 2</a>

<a href="#" target="_blank">Link 3</a>

<a href="#" target="_blank">Link 4</a>

<a href="#" target="_blank">Link 5</a>

</div>





</div>






7. Klik tombol Pratinjau untuk melihat hasil perubahan





8. Jika sudah OK, klik tombol Simpan Perubahan Template





9. Selesai.

Untuk template minima baru :

1. Sign in





2. Klik menu Layout





3. Klik menu Edit HTML





4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data






5. Klik kotak kecil di samping tulisan Expand Template Widget





6. Tunggu beberapa saat sampai proses selesai





7. Copy kode berikut lalu paste pada style sheet css sobat, atau bila bingung simpan saja di atas kode ]]></b:skin>






/* Navigasi buat si juleha

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

#juleha{

height:25px;

text-align: center;

}



#juleha a{

margin:0;

font-size:1.2em;

font-weight:bold;

letter-spacing:-1px;

background-color: #cccccc;

color: #000000;

padding-top:2px;

padding-bottom:2px;

padding-left:4px;

padding-right:4px;

}



#juleha a:hover{

text-decoration:none;

padding:34px 5px 41px 5px;

background-color: #0326FC;

background-repeat: repeat-x;

color:#A7FC03;

padding-top:2px;

padding-bottom:2px;

padding-left:4px;

padding-right:4px;

}









8. Copy kode berikut lalu paste pada kode template seperti di bawah ini, yang berwarna hitam adalah kode asli dan warna merah adalah kode yang harus di tambahkan :





<div class='descriptionwrapper'>

<p class='description'><span><data:description/></span></p>



<div id="juleha">

<a href="#" target="_blank">Link 1</a>

<a href="#" target="_blank">Link 2</a>

<a href="#" target="_blank">Link 3</a>

<a href="#" target="_blank">Link 4</a>

<a href="#" target="_blank">Link 5</a>

</div>



</div>

</div>

</b:if>






9. Klik tombol Pratinjau untuk melihat perubahan





10. Bila sudah OK, klik tombol SIMPAN TEMPLATE





11. Selesai.

Agar sobat lebih faham, saya akan sedikit memberi keterangan tentang kode-kode
yang saya berikan, silahkan simak :



juleha{

height:25px;

text-align: center;

}

#juleha hanyalah penamaan saja, bisa di ganti dengan apa saja yang penting nyambung dengan kode yang di bawahnya, mau ibro, samson, mau tukul juga boleh kalo sobat penggemarnya.

height:25px; kode ini adalah sebagai pengatur tingginya tombol navigasi, yang saya pakai adalah sebesar 25 pixel, boleh di ganti nilainya dan sesuaikan dengan keinginan sobat.

text-align: center; kode untuk memposisikan tombol-tombol berada di tengah-tengah, jika ingin mepet di sebelah kiri ganti kata Center dengan kata left, jika ingin mepet kanan, ganti dengan right.

#juleha a{

margin:0;

font-size:1.2em;

font-weight:bold;

letter-spacing:-1px;

background-color: #cccccc;

color: #000000;

padding-top:2px;

padding-bottom:2px;

padding-left:4px;

padding-right:4px;

}

#juleha a penamaan agar nyambung dengan kode diatasnya, dan kode-kode di yang di tulis bawahnya adalah yang akan muncul sebelum di sorot oleh mouse pengunjung blog.

font-size:1.2em; ukuran huruf yang di pake sebesar 1.2 . jika ingin lebih besar atau lebih kecil, silahkan ganti saja nilainya.

font-weight:bold; agar link yang di tulis hurufnya di cetak tebal, jika tidak mau ganti saja tulisan bold dengan tulisan normal.

background-color: #cccccc; kode untuk membuat warna latar belakang tombol. kode warna #cccccc adalah kode untuk abu-abu, silahkan sobat ganti dengan warna yang sobat sukai.

color: #000000; kode untuk warna huruf link, #000000 adalah kode warna hitam, silahkan ganti dengan warna yang sobat sukai.

#juleha a:hover{

text-decoration:none;

background-color: #0326FC;

background-repeat: repeat-x;

color:#A7FC03;

padding-top:2px;

padding-bottom:2px;

padding-left:4px;

padding-right:4px;

#juleha a:hover adalah kode yang di harapkan ketika mouse menyorot pada
kode tombol yang di definisakan oleh kode-kode yang ada di kode #juleha a.

background-color: #0326FC; kode untuk membuat warna latar belakang tombol ketika mouse menyorot. kode warna #0326FC adalah kode untuk biru, silahkan sobat ganti dengan warna yang sobat sukai.

color:#A7FC03; kode untuk warna huruf link ketika mouse menyorot, #A7FC03 adalah kode warna hijau terang, silahkan ganti dengan warna yang sobat sukai.

<div id="juleha">

<a href="#" target="_blank">Link 1</a>

<a href="#" target="_blank">Link 2</a>

<a href="#" target="_blank">Link 3</a>

<a href="#" target="_blank">Link 4</a>

<a href="#" target="_blank">Link 5</a>

</div>

<div id="juleha"> kode pembuka juleha. Apa-apa yang di simpan di bawah kode ini, mengacu kepada apa yang di definisikan oleh kode juleha.

<a href="#" target="_blank">Link 1</a> kode untuk membuat link.

href="#" ganti tanda pagar (#) dengan URL atau link yang ingin sobat tuliskan. contoh : jika saya ingin membuat link ke blog ini, maka tanda pagar tadi saya ganti dengan http://kolom-tutorial.blogspot.com

target"_blank" adalah kode untuk memunculkan jendela baru ketika link di klik oleh pengunjung, bila tidak ingin ada jendela baru, maka hilangkan kode ini.

Link 1 ganti tulisan ini dengan tulisan link yang sobat inginkan. contoh : untuk menuliskan blog ini saya ganti dengan kata Kolom Tutorial

jadi kira-kira link yang tadi akan menjadi seperi ini :



<a href="http://kolom-tutorial.blogspot.com" target="_blank">Kolom Tutorial</a>

</div> adalah kode penutup buat kode si juleha.

Contoh link yang saya berikan diatas adalah sebanyak lima buah link, ini bisa sobat kurangi atau bisa juga di tambah, akan tetapi jika space yang tersedia penuh maka tombol akan secara otomatis berpindah ke bawah, oleh sebab itu sesuaikanlah dengan space yang ada.



Bagaimana sobat, bingung tidak? mudah-mudahan dapat di mengerti.