Download Scribe 3 kolom (XML)

Pada postingan yang lalu, saya sudah berikan template scribe 3 kolom bagi sobat yang memakai template klasik, dan kali ini saya persembahkan lagi satu template, judulnya masih sama yaitu Scribe 3 kolom. Akan tetapi yang ini adalah dalam format XML atau template yang baru.




Bagi sobat yang suka memotong postingan dengan fasilitas Read more.. atau
Baca Selengkapnya.., sobat tidak harus menambahkan berbagai kode lagi karena
sudah saya tambahkan. Sobat hanya harus menambah kode <span id="fullpost"> ... </span> pada saat posting artikel, atau biar lebih jelasnya lagi silahkan baca postingannya di sini ! Pada header sudah ada navigasi, tinggal ganti alamat link nya dengan milik sobat sendiri, untuk lebih jelasnya coba baca postingannya di sini ! Serta aksesoris yang lainnya.



Template ini silahkan download kemudian ekstrak dulu dengan software Winzip sebelum di upload ke blogger. Permintaan saya, tolong jangan menghapus banner yang saya pasang ! jika mau di pindahkan tempatnya silahkan saja asal jangan
di hapus. Sebagai pemberitahuan saja, template ini sudah saya coba dan hasilnya tidak ada kendala atau dengan kata lain tidak ada masalah. Untuk cara instalasi, silahkan baca secara seksama di sini !



Untuk contoh blog yang memakai template ini, silahkan klik di sini !. Untuk mendownload silahkan sobat klik di sini !



Selamat menikmati wajah baru.

Cepat Terindeks di Google

Menyambung postingan kemarin bahwa saya akan memposting tips-tips bagaimana agar blog kita lebih cepat terindeks di google. Tentunya tips-tips berikut tidaklah seratus persen menjamin bahwa blog kita akan lebih cepat terindeks, akan tetapi bolehlah untuk di coba dan sebenarnya ini sudah saya buktikan sendiri kebenarannya.



Seperti keterangan yang lalu, bahwa setelah kita mendaftar di google,
blog kita tidaklah langsung terindeks pada mesin pencari google, akan tetapi bisa memakan waktu 3 sampai 4 minggu bahkan apabila bernasib kurang baik bisa sampai 8 minggu barulah blog kita terlisting pada mesin pencari nya. Nah agar tidak terlalu bosan menunggu, sedikit tips bagi sobat, silahkan coba dan buktikan.

• Memperbaiki Pengaturan blog

Untuk langkah-langkah pengaturan (Setting) blog, secara lengkap sudah saya posting
silahkan baca di sini !,
akan tetapi karena postingan tersebut di buat sebelum ada layanan blogger berbahasa indonesia, maka settingannya berbahasa inggris. Tapi toh saya yakin bahwa sobat pasti faham dengan yang saya tulis.

• Link ke blog dengan page rank tinggi

Salah satu cara agar blog kita lebih cepat terindeks di google adalah kita di link oleh blog yang mempunyai page rank yang tinggi, dan biasanya blog-blog tersebut adalah blog terkenal. Contoh blog Indonesia yang sangat terkenal adalah blog miliknya mas fatih syuhud yaitu http://fatihsyuhud.com, blognya kang Agus hery di http://edittag.blogspot.com, dan masih banyak lagi yang lainnya. Saran saya pasanglah terlebih dahulu link blog mereka pada halaman blog milik sobat, setelah itu mintalah agar blog sobat di linkback atau di link balik oleh mereka. Permintaan untuk di linkback bisa di ajukan pada buku tamu (shoutbox) atau bisa juga melalui komentar pada postingan atau jika ingin lebih pribadi kirim melalui email. Saya yakin mereka akan segera memasang link sobat pada blog mereka, atau jika dalam waktu tiga hari masih belum di linkback, ajukan kembali permintaan untuk dilinkback karena untuk blog-blog terkenal dalam sehari tidak hanya satu atau dua blog saja yang pasang link blog mereka, maka wajar saja apabila ada satu atau dua blog yang terlewatkan untuk di linkback.

• Pasang tag meta

Salah satu cara agar blog kita lebih di lirik atau di kenali oleh mesin pencari miliknya om google adalah memasang tag meta di bagian header pada kode template blog. contoh tag meta untuk blogger seperti ini :

<meta name="robots" content="INDEX, FOLLOW"/>


<meta name="description" content="Deskripsi dari blog sobat di sini "/>


<meta name="keywords" content="kata kunci atau keyword simpan disini, buatlah beberapa keyword yang sobat anggap sangat berhubungan dengan blog sobat "/>

Yang harus diperhatikan adalah tulisan-tulisan yang tercetak merah. Tulisan-tulisan tersebut haruslah di sesuaikan dengan kondisi blog sobat.



Untuk deskripsi, silahkan isi dengan deskripsi blog sobat. contoh untuk blog milik saya adalah "Panduan praktis membuat blog di blogger.com. tips, trik, serta download software secara gratis".



Untuk kata kunci (keyword), silahkan isi dengan kata kunci yang berhubungan dengan blog sobat. contoh untuk blog ini adalah : blog tutorial, cara membuat blog, bikin blog, cara bikin blog, dan sebagainya. Jangan lupa untuk menyisipkan tanda koma untuk memisahkan antara keyword yang satu dengan keyword yang lainnya.



Untuk judul blog, silahkan isi dengan judul dari blog sobat.Contoh : untuk blog ini adalah Blog tutorial.




Bagi yang belum mengetahui dimanakah tag meta di simpan, jawabannya adalah di dalam kode header blog, atau jika masih bingung simpan saja di bawah kode <title><data:blog.pageTitle/></title> .




Sebenarnya masih ada beberapa tips yang bisa dilakukan, akan tetapi kayanya udah lemes nih ngetiknya, jadi dicukupkan sekian dulu deh, selamat mencoba dan mudah-mudahan blog sobat lebih cepat terindeks di google. Satu pertanyaan aja deh buat tambahan, sudahkah blog sobat terindeks di google? coba tuliskan alamat blog sobat pada search engine google di bawah postingan ini !



Update : di revisi tanggal 06 april 2008.

Cara Daftar Search Engine

Tak di sangkal bahwa tujuan utama dari membuat blog antara lain adalah agar tulisan-tulisan kita bisa di baca oleh orang lain atau pengunjung blog, semakin banyak yang berkunjung apalagi memberikan komentar pada apa yang kita posting tentunya akan membuat hati kita merasa senang dan bahagia. Akan tetapi tentunya tidak serta merta blog kita akan ramai di kunjungi, ini memerlukan usaha publikasi yang gencar dari pemilik blog apabila ingin banyak pengunjungnya.



Banyak cara yang bisa kita lakukan agar blog kita bisa dikenal dan di kunjungi, antara lain adalah dengan rajinnya kita blogwalking atau berkunjung ke blog milik orang lain, mendaftarkan ke berbagai agregator, dan yang paling efektif adalah melalui search engine atau mesin pencari.



Bagi blogger pemula mungkin berangggapan bahwa apabila kita membuat website atau blog akan secara otomatis terindeks atau berada pada list berbagai search engine, dan kenyataannya tidaklah demikian. Seperti halnya sebuah sekolah, agar nama kita terdaftar pada buku daftar siswa, tentunya kita harus melakukan pendaftaran terlebih dahulu ke sekolah tersebut. Sama halnya dengan mesin pencari, agar blog kita terindeks pada mesin pencari, maka kita harus terlebih dahulu mendaftarkan blog milik kita pada situs pemilik mesin pencari.



Mesin pencari tentu jumlahnya sangat banyak sekali, dan pada saat ini yang paling terkenal di dunia adalah Google, Yahoo, serta Msn. Apabila blog kita ingin terindeks pada mesin pencari mereka, maka kewajiban kita adalah mendaftarkan URL blog kita pada mesin pencari mereka. Bila ada yang belum tahu ke manakah harus mendaftarkan blognya, maka silahkan simak tulisan berikut :

Daftar Google

Untuk mendaftar ke google, silahkan sobat kunjungi http://www.google.com/addurl/, nah apabila sudah berada pada halaman pendaftaran ada beberapa langkah yang harus di lakukan, yaitu mengisi form yang di sediakan :

• URL --> Isi dengan URL blog sobat.


• Comments --> Isi dengan keyword atau kata kunci yang berhubungan dengan blog sobat


• Isi kotak kosong dengan huruf Verifikasi yang tersedia


• Klik tombol Add URL


• Selesai.

Setelah sobat melakukan pendaftaran ke Google, maka tidak serta merta blog sobat terindeks pada mesin pencari nya, akan tetapi memerlukan 3 sampai 4 minggu baru blog sobat bisa terindeks. Jika sudah 3 sampai 4 minggu, maka cobalah ketik alamat blog sobat pada mesin pencari google, apakah sudah terindeks atau belum? jika belum, coba tunggu beberapa minggu lagi, dan tuliskan kembali alamat blog sobat, Jika ternyata masih belum juga, coba deh daftarin lagi blog nya ke google seperti langkah di atas. Atau mungkin sobat tidak sabar ingin cepat terindeks, sebenarnya bisa saja ini terjadi, hanya dalam 3 atau 4 hari saja blog sobat sudah bisa terindeks di google. Ingin tahu caranya? simak saja postingan berikutnya ya, mungkin satu dua hari ke depan artikelnya selesai saya buat.



Daftar Yahoo!

Untuk mendaftar ke yahoo! silahkan sobat kunjungi https://siteexplorer.search.yahoo.com/submit. Akan tetapi untuk mendaftar ke yahoo, sobat harus terlebih dahulu mempunyai account yahoo, karena di perlukan log in terlebih dahulu ke account yahoo. Bagi yang belum punya account yahoo (email di yahoo) silahkan bikin dulu, bagi yang sudah punya, sobat tinggal login dengan username serta password sobat. Apabila sudah login, nanti sudah tersedia kolom untuk di isi, silahkan isi kolom tersebut dengan URL sobat, kemudian klik tombol Add URL, selesai. Jika ingin memasukan alamat feed sekalian, sobat bisa memasukannya. Ingat, alamat feed di blogger hanya tinggal menambahkan atom.xml di belakang uRL blog sobat, contoh : untuk blog saya ini mempunyai alamat feed sebagai berikut :



http://kolom-tutorial.blogspot.com/atom.xml



atau memakai www pun sama saja :



http://www.kolom-tutorial.blogspot.com/atom.xml



Daftar ke Msn

Untuk daftar ke Msn, silahkan sobat kunjungi http://search.msn.com/docs/submit.aspx?FORM=WSDD2 silahkan sobat isi huruf verifikasi dan URL sobat pada kotak yang tersedia, kemudian klik tombol Submit URL, selesai.



Sudahkan blog sobat terindeks di google? coba masukan alamat blog sobat pada mesin pencari google yang tersedia di bawah postingan ini !

Pasang Kode Tuker Link

BangDhika beberapa waktu yang lalu mengajukan pertanyaan melalui shoutbox mengenai bagaimana cara membuat kode untuk tukeran link, dan sekarang saya akan coba membahasnya. Mudah-mudahan informasi ini bermanfaat juga bagi sobat lainnya yang belum mengetahui mengenai hal ini.



Untuk membuat kode tukeran link, kebanyakan para blogger menggunakan banner yang
berukuran kecil atau di sebut juga dengan chiklet sebagai ciri khas dari blog masing-masing. Maka dari itu, saya akan mencoba mengulas pembahasan ini bermula dari pembuatan chiklet nya.




Untuk membuat sebuah chiklet, sobat bisa menggunakan berbagai software grafik & design semacam photoshop, corel, atau lain sebagainya. Tak hanya sebatas chiklet yang berupa gambar diam, sebuah animasi pun bisa di jadikan chiklet tukeran link, tentunya ini terserah kepada keahlian masing-masing dalam hal membuat chiklet.



Akan tetapi, bagi sobat yang belum bisa atau hanya sekedar malas untuk membuatnya karena memerlukan waktu yang cukup lama untuk berkreasi, sobat bisa menggunakan layanan berbagai situs pembuat chiklet. Salah satu situs yang menyediakan layanan ini adalah www.chicklette.net. Melalui situs ini sobat hanya perlu menentukan warna serta tulisan yang di inginkan, kemudian apabila sudah selesai, sobat tinggal save picture lalu menyimpannya dalam komputer sobat.



Itu tadi merupakan langkah pertama. langkah kedua adalah meng upload file chiklet tadi ke hosting untuk menyimpan gambar, boleh di blogger atau di hosting lain, untuk cara upload gambar sudah sering di bahas, apabila masih bingung coba baca lagi di sini ! Jika proses upload selesai, sobat tinggal mencatat atau mengcopy alamat URL gambar tersebut. Misal saya ambil contoh untuk chiklet blog ini adalah :



http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif



langkah selanjuatnya adalah membuat kode link dari alamat gambar tadi, contoh kodenya seperti ini :


<a href="http://kolom-tutorial.blogspot.com" target="_blank">
<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>


Nah itu tadi merupakan contoh link untuk membuat link ke blog ini, untuk ngelink
ke blog sobat ya tinggal sesuaikan saja.



Apabila kode link sudah ada, langkah selanjutnya adalah membuat text area untuk menampung seluruh kode agar nanti bisa di copy oleh pengunjung yang mau nge link ke blog sobat, kodenya seperti ini :


<textarea name="code" rows="6" cols="20">



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

<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>



</textarea>





Beberapa langkah sudah di lewati, langkah selanjutnya adalah merangkaikan kode-kode tadi, misalkan kode tukeran link ingin di bawah gambar chicklet agar tampak lebih menarik, kodenya kira-kira seperti ini :


<h2>Tukeran link</h2>

<br/><br/>

Copy kode di bawah masukan di blog anda, saya akan segera linkback kembali

<br/><br/>


<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial ">


<br/><br/>


<textarea name="code" rows="6" cols="20">

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

<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>



</textarea>





Hasilnya nanti akan seperti ini :



Tukeran link



Copy kode di bawah masukan di blog anda, saya akan segera linkback kembali








<br /><br /><a href="http://kolom-tutorial.blogspot.com" target="_blank"><br /><img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a><br /><br />




Dari tulisan diatas, terlihat ada tulisan yang memanjang kekanan. Akan tetapi jangan kawatir karena tulisan tersebut akan turun secara otomatis
mengikuti lebar dari sidebar. Untuk mengatur lebar serta tinggi dari text area, sobat tinggal mengganti nilai dari rows serta cols saja.



Ada juga blogger yang suka memasang tombol LINK TO ME pada blog nya, ini di maksudkan agar ketika pengunjung yang ingin membuat link
ke blog sobat tinggal mengklik tombol tersebut. Akan tetapi ini bekerja bagi mereka (yang ingin membuat link ke blog sobat) yang memakai
template baru saja, sedangkan untuk yang template klasik tidak bisa, jadi menurut saya kurang efektif. Contoh tombolnya seperti :

<br /> <a href="http://kolom-tutorial.blogspot.com" target="_blank" /><br /><img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a><br />

The button image will displayed on your site like this

Coba buktikan deh, klik saja pada tombol yang saya berikan.



Kode untuk membuatnya seperti ini :


<center>

<form action="http://beta.blogger.com/add-widget" method="POST">

<input value="FAVOURITE" name="widget.title" type="hidden"/><textarea style="display:none;" name="widget.content">

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

<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>

</textarea><input value="http://buzz.blogger.com" name="infoUrl" type="hidden"/>

<input value="http://www.blogger.com/img/icon_logo32.gif" name="logoUrl" type="hidden"/>

<input value="LINK TO ME" name="go" type="submit"/></form><p>The button image will displayed on your site like this</p><br/>

<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>
</center>



Silahkan ganti alamatnya dengan yang di miliki sobat.




bagi sobat yang menggunakan template klasik, sobat tinggal menyimpan kode di atas pada sidebar
yang sobat inginkan. Untu yang memakai template baru, sobat tinggal memilih tambah elemen, trus pilih
HTML/Javascript, kemudian masukan kode yang seperti diatas, simpan dan selesai.



Semoga mudah untuk di mengerti.



Salam buat blogger sejati semua......

Image dalam Kode Marquee

Sobat guest (karena beliau tidak memperkenalkan namanya) mengajukan pertanyaan sampai dua kali pada shoutbox dalam dua hari berturut-turut. Sebuah keinginan yang di dorong rasa ingin tahu tentang apakah bisa sebuah gambar atau image di masukan ke dalam kode marquee ( kode untuk membuat text bisa bergerak/berjalan ). Keingintahuan yang harusdi jawab, dan sebenarnya sudah saya jawab melalui shoutbox/buku tamu pula.
Akan tetapi sebuah jawaban singkat saja mungkin tidak akan dapat mewakilinya, dan
agar jawabannya dapat di cerna dengan mudah sengaja saya tuangkan ke dalam artikel ini.



Jawabannya adalah sebuah ataupun beberapa buah gambar dapat di masukan ke dalam kode
marquee. Seperti halnya teks biasa, kita hanya perlu memasukan kode gambar ke dalam kode marquee.



Prinsip dasarnya seperti ini :



<marquee>



Teks, links, gambar, atau apa saja yang ingin di masukan.



</marquee>



Dari prinsip dasar diatas, maka kita hanya perlu memasukan kode gambar diantara kode marquee, sangat sederhana. Kode marquee yang dipakai tentu saja banyak variasinya, tergantung mana yang akan di pakai. Dan tidak hanya terpatok di situ saja, kita bisa memadukan berbagai kode HTML di dalam marquee, semisal apabila teks ingin berada di tengah-tengah, rata kiri, rata kanan, rata kiri-kanan, memakai bingkai, menggunakan warna latar belakang, dan atau apa saja. Tentunya di perlukan suatu kreatifitas agar kita bisa memadukannya.



Perlu di ketahui bahwa kode marquee ini tidak terlalu dimengerti oleh browser Firefox, terutama versi yang terdahulu. Untuk versi terbaru pun memang sudah bisa mengerti (soalnya sekarang saya pake versi terbaru) akan tetapi tetap saja tidak seindah seperti ketika kita melihatnya melalui internet explorer. Akan tetapi lagi nih, jangan dulu berburuk sangka bahwa browser firefox tidak bagus, tentunya banyak kode-kode HTML yang lain akan berfungsi dengan baik apabila di lihat dengan firefox dan tidak berfungsi dengan baik apabila di lihat dengan internet explorer. Jadi pikir-pikir dulu apabila ingin menggunakan kode marquee, terlebih dalam jumlah yang banyak alias setiap sudut halaman blog menggunakan kode marquee.



Kembali lagi ke bahasan utama yaitu membuat gambar bisa bergerak dengan marquee, sobat tinggal memasukan kode gambar di dalamnya. Jika ingin ada beberapa buah gambar untuk memisahkannya (tidak berdempetan), sobat harus menyisipkan kode <br/> diantara kode gambar untuk arah vertikal dan kode &nbsp; (jika sobat memakai firefox, kode yg sobat lihat mungkin salah kode yg benar ini -->       & n b s p ;     tapi tanpa sepasi alias bersatu). Saya berikan contoh, alamat foto yang saya miliki seperti ini :





http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg



http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg





Untuk membuat foto tersebut tampil harus menggunakan kode html tambahan :



<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" />



<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" />



hasilnya seperti ini :
















yang di tampilkan di atas adalah dalam ukuran asli, jika ingin memperkecil maka tinggal memasukan atribut width="..." serta height="...". sebagai contoh saya ubah menjadi, tinggi 130 pixel dan lebar 190 pixel maka kodenya menjadi seperti ini :



<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" height="130" width="190" />



<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" height="130" width="190" />



Maka hasilnya akan seperti ini :














Sekarang bagaimana memasukan kode gambar tersebut ke dalam marquee?



Saya ambil contoh, kode marquee yang di pakai adalah dengan variasi agar ketika mouse menyorot pada gambar berhenti, maka kodenya akan seperti ini :



<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" align="center">



<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" height="130" width="190" />


<br/><br/>

<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" height="130" width="190" />



</marquee>



Itu tadi yang polos alias gambar saja yang yang bergerak. Jika ingin sedikit variasi bisa memakai bingkai.
kodenya seperti ini :

<table border="10" cellpadding="3" height="135" width="195"/>

<tr>

<td>

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="192" height="132" align="center">

<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" height="130" width="190" />

<br/>

<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" height="130" width="190" />

</marquee>

</td>

</tr>

</table>

Itu tadi memakai bingkai dengan warna latar belakang default (putih), jika ingin ada warna latar belakang (background) maka tinggal menyisipkan atribut background pada kode tabel, contoh dengan warna background biru muda :

<table border="10" cellpadding="3" height="135" width="195" bgcolor="#b1c3d9" />

<tr>

<td>

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="192" height="132" align="center">

<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" height="130" width="190" />

<br/>

<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" height="130" width="190" />

</marquee>

</td>

</tr>

</table>

Untuk melihat efek dari kode-kode yang saya tulis, silahkan sobat klik di sini !



Mudah-mudahan mudah untuk di mengerti. Selamat mencoba !

Download Template Scribe 3 kolom

Waduh, dua hari sudah tidak nongol-nongol di blog ini di akibatkan lagi seneng ngotak-ngatik template supaya menjadi tiga kolom. Dan ternyata .....twew....twew....
ada juga nih yang sudah jadi, tapi cuma yang model template klasik dulu kalau yang model baru nya belum jadi. Yoi men, bagi sobat yang menyukai template Scribe buatan dari Todd Dominey, yang aslinya cuma dua kolom, dan sekarang sudah saya sulap menjadi 3 kolom.



Template ini sudah saya coba di review di internet explorer serta firefox dan hasilnya cukup memuaskan, untuk browser lainnya saya tidak mencobanya karena saya tidak punya programnya, males installnya.




Biar lebih menarik, kali ini saya akan perlihatkan screen shootnya. Tapi maaf nih sobat, gambarnya jelek banget tidak sesuai aslinya. Silahkan klik pada gambar di bawah ini untuk melihat contoh blog yang sudah memakai template yang saya modifikasi :
















Sudah dilihat? menarik tidak? Jika tertarik silahkan baca dulu instruksinya. Template ini sudah saya masukan fungsi Read more , sobat tinggal memasukan
kode <div class="fullpost"> .... </div>
pada saat posting. Biar lebih jelas lagi, silahkan klik di sini !
Fasilitas lainnya yaitu sudah saya tambahkan menu navigasi pada headernya, kalau mau baca-baca seputar menu ini, silahkan baca di sini ! dan tentunya masih ada aksesoris lainnya yang saya tambahkan.



Templatenya saya berikan gratis, cuma syaratnya sobat jangan menghapus banner yang saya pasang ya, itung-itung menghargai hasil kerja saya selama berjam-jam di depan komputer gitoe loe !



Biar tidak terlalu banyak energi yang keluar untuk membaca artikel yang tidak terlalu bermanfaat, silahkan bagi yang berminat mendownload template ini, klik saja di sini !

Gambar Berbingkai

Rupanya postingan yang kemarin lusa salah alamat alias ga nyambung, maksud dari sobat
edelweis adalah membuat bingkai gambar yang ada di postingan, eh postingan saya malah photo profile. Saya yang salah apa bukan ya? tapi biarin deh, kan itupun lumayan buat pengetahuan.




Baiklah, saya kutif pertanyaan lanjutan dari sobat edelweis :




"Maaf Mas, sepertinya cara bertanya saya salah. Maksud saya bingkai untuk postingan gambar, bukan foto profile"





Memang keinginan setiap orang tidak sama, ada yang berkeinginan agar gambar yang ada di blog tidak mempunyai bingkai ada juga malah yang mau ada bingkai nya. Ok, saya coba jawab ya, mudah-mudahan jawaban kali ini tidak salah alamat lagi.




Pertama, tentu saja kita harus mempunyai alamat gambar yang mau di tampilkan, caranya yaitu gambar yang kita miliki harus di upload, bisa ke blogger atau ke hosting lain. Topik ini sudah saya bahas pada postingan terdahulu, bagi yang masih bingung silahkan klik di sini untuk membacanya kembali.
Bagaimana kita mengetahui kode HTML dari gambar yang kita upload di blogger? caranya yaitu setelah upload gambar selesai , maka sobat harus berpindah menu ke Edit HTML apabila sedang berada pada menu Compose. Saya ambil contoh gambar yang telah saya upload mempunyai kode seperti ini :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDTLCygfGhm20sxHcjb9PsUvtb4UQ9_eAswDD4eaCtgDalxtqPaDHhg_iRJen0qRD5QhbjBwZ1V687zH8USm-9lEpGInxz00JYa3GlsMAkKK1OKs0GQBNMV8aWbXRWkKlVRX91Q27IZuA/s1600-h/DSC01367.JPG"><img id="BLOGGER_PHOTO_ID_5058536746814715122" style="FLOAT: left; MARGIN: 0px 10px 10px 0px; WIDTH: 133px; CURSOR: hand; HEIGHT: 113px" height="150" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDTLCygfGhm20sxHcjb9PsUvtb4UQ9_eAswDD4eaCtgDalxtqPaDHhg_iRJen0qRD5QhbjBwZ1V687zH8USm-9lEpGInxz00JYa3GlsMAkKK1OKs0GQBNMV8aWbXRWkKlVRX91Q27IZuA/s200/DSC01367.JPG" width="133" border="0" /></a>

Gambarnya seperti ini :


















Bagaimana caranya agar kita bisa membuat gambar tersebut menjadi ada bingkainya? Ini bisa dilakukan dengan menyisipkan beberapa atribut atau kode ke dalam kode gambar tersebut. Tampak pada kode yang saya berikan diatas sengaja saya cetak merah, nah kita bisa menyisipkan beberapa kode di dalamnya, antara lain padding serta border, contoh :



padding:3px;

border:15px solid #BEBBBB;




padding:3px; --> padding adalah jarak atau ruang kosong yang kita buat agar terpisah dengan border (bingkai) dalam contoh ini yaitu sebesar 3 pixel. Apabila sobat tidak menginginkan ada jarak, maka jangan tambahkan kode ini.



border:15px solid #BEBBBB; --> border adalah besarnya bingkai yang akan di buat, saya ambil contoh sebesar 15 pixel. #BEBBBB --> adalah kode warna yang mau di tampilkan, dalam contoh ini warna coklat.



Merujuk pada kode yang saya cetak merah di atas, apabila kita sisipkan kode tambahan maka potongan kode gambar diatas akan menjadi seperti ini :



style="FLOAT: left; MARGIN: 0px 10px 10px 0px; WIDTH: 133px; CURSOR: hand; HEIGHT: 113px; padding:3px; border:15px solid #BEBBBB;"



Maka gambar yang di hasilkan akan seperti ini :




















Agar bingkai tampil lebih menarik, ada kode html yang bisa di pakai, contoh kodenya seperti ini :






<table border="20" cellpadding="6" />

<tr>

<td>



kode gambar yang ingin di tampilkan di sini !

</td>

</tr>

</table>

Sebagai contoh saya ambil alamat gambar yang sama yaitu pada kode gambar di atas. Untuk mengetahui alamat gambar diatas adalah kita ambil setelah kode src=", yaitu yang di awali dengan http dan di akhiri dengan JPG, sehingga alamat gambar diatas adalah sebagai berikut :




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDTLCygfGhm20sxHcjb9PsUvtb4UQ9_eAswDD4eaCtgDalxtqPaDHhg_iRJen0qRD5QhbjBwZ1V687zH8USm-9lEpGInxz00JYa3GlsMAkKK1OKs0GQBNMV8aWbXRWkKlVRX91Q27IZuA/s200/DSC01367.JPG




Untuk menampilkan gambar, kodenya jadi seperti ini :




<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDTLCygfGhm20sxHcjb9PsUvtb4UQ9_eAswDD4eaCtgDalxtqPaDHhg_iRJen0qRD5QhbjBwZ1V687zH8USm-9lEpGInxz00JYa3GlsMAkKK1OKs0GQBNMV8aWbXRWkKlVRX91Q27IZuA/s200/DSC01367.JPG">




Jadi apabila di satukan dengan kode HTML untuk bingkai, kodenya menjadi seperti ini :




<table border="15" cellpadding="6" />

<tr>

<td>



<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDTLCygfGhm20sxHcjb9PsUvtb4UQ9_eAswDD4eaCtgDalxtqPaDHhg_iRJen0qRD5QhbjBwZ1V687zH8USm-9lEpGInxz00JYa3GlsMAkKK1OKs0GQBNMV8aWbXRWkKlVRX91Q27IZuA/s200/DSC01367.JPG">

</td>

</tr>

</table>

dan gambar yang akan di tampilkan adalah seperti ini :













Untuk bingkai yang ini menurut saya lebih menarik daripada bingkai yang pertama karena ada kesan tiga dimensi.




Agar sobat lebih faham, ada kode yang nilainya bisa sobat rubah sesuai keinginan, yaitu :




boder="15" --> nilai "15" adalah tebalnya bingkai sebesar 15 pixel, ini bisa sobat ganti dengan nilai yang di inginkan.



cellpedding="6" --> nilai "6" adalah nilai jarak antara gambar dengan bingkai sebesar 6 pixel, ini bisa sobat ganti dengan nilai yang di inginkan.



Saya rasa cukup nih, selamat mencoba deh.



Salam blogger sejati buat semua !