Pasang Snaps Shots

Apakah sobat pernah mengunjungi blog yang apabila mouse menyorot link kemudian keluar screenshoot? (artikel yang aneh baru mulai sudah ada pertanyaan) , nah apabila sobat berkeinginan blognya mempunyai fasilitas seperti itu coba deh baca artikel ini sampai selesai.



Untuk mendapatkan tool screenshoot seperti itu, sobat bisa mendapankannya diberbagai situs di internet. Agar tidak berlama-lama mencari, saya ambil contoh salah satunya adalah http://www.snap.com. Berminat tapi masih bingung cara mendapatkannya? silahkan ikuti langkah-langkah berikut ini :

1. silahkan sobat kunjungi http://www.snap.com


2. Apabila sobat sudah berada dihalaman situs tersebut, klik tombol Get Started Now


3. Pilih warna yang di inginkan di bawah tulisan CHOOSE A COLOR THEME, klik saja warna yang tersedia


4. Pilih Snap shot icon dan trigger di bawah tulisan CHOOSE A SNAP SHOT AND TRIGGER, klik saja pada radio button yang ada


5. Apabila sobat ingin memasang logo milik sendiri, klik tombol Browse...., kemudian pilih gambar icon yang tersedia pada komputer sobat, apabila tidak mau ya biarkan saja


6. Pilih ukuran snap shots di bawah tulisan CHOOSE SNAP SHOTS SIZE, beri tanda pada radio button nya


7. Klik tombol Continue


8. Masukan alamat blog sobat pada kotak di bawah tulisan Enter Your Site URL. contoh : http://template-unik.blogspot.com


9. Masukan alamat email sobat di bawah tulisan Enter Your Email


10. Beri tanda centang pada kotak di samping tulisan I agree to the Terms and Conditions below (kalau mau dibaca, silahkan baca dulu TOS nya)


11. Klik tombol Continue


12. Apabila sobat memakai template baru, klik banner logo Blogger, silahkan sign in di blogger dan pilih nama blog yang di inginkan


13. Klik tombol MENAMBAH WIDGET, maka akan secara otomatis kode dari snaps shots akan di tambahkan


14. Pindahkan elemen yang baru di tambahkan pada tempat yang di inginkan, karena kode tersebut memuat pula banner dari snapshot


15. Klik tombol SIMPAN


16. Selesai.

Bagi sobat yang memakai template klasik, pada langkah yang ke 12, sobat klik lagi tombol Continue. Klik link READ MORE yang berada di bawah tulisan yang berjudul Put a Snap Shots Badge on your site. Copy kode yang di berikan dan paste pada notepad. langkah terakhir tinggal memasukannya kedalam kode template sobat.



Selamat mencoba !

Daftar Feedburner.com

Setelah kemarin yang di bicarakan adalah masalah duit, akhirnya kembali lagi deh seperti biasanya yaitu membicarakan soal blog tutorial. Artikel ini saya buat untuk memenuhi permintaan sahabat Setyo beberapa waktu yang lalu pada shoutbox, beliau meminta agar di buatkan tutorial bagaimana caranya memasang banner-banner seperti Add to Google, My Yahoo, dan lain sebagainya. Jawaban singkat dari saya adalah untuk mendapatkan semua banner tersebut (beserta fungsinya) anda harus bergabung dengan http://www.feedburner.com, apa itu http://www.feedburner.com? www.feedburner.com adalah satu situs yang memberikan layanan dalam hal syndikasi atau feed. Menurut berita yang saya baca dari halaman news miliknya feedburner, bahwa sekarang feedburner telah di akuisisi oleh google sehingga kita dapat mengalihkan feed blog kita ke feed yang dari feedburner.

Bagi anda yang ingin blognya lebih cepat terkenal saya sarankan untuk bergabung dengan feedburner, layanannya ditanggung gratis. Bagi yang ingin mendaftar tapi belum mengetahui caranya, silahkan ikuti langkah-langkah berikut ini :

1. Silahkan kunjungi http://www.feedburner.com.
   
   
2. Klik tulisan Register pada halaman bagian atas
   
   
3. Isi seluruh form yang yang ada
   
   
   • Username --> isi dengan username yang diinginkan. contoh : japra
     
   • password --> isi dengan password yang diinginkan. contoh : japratea
     
   • Password (again) --> isikan kembali password yang tadi di tulis
     
   • Email address --> isi dengan alamat email yang sobat miliki
     
   • Secret Question --> isi dengan pertanyaan rahasia yang jawabannya nanti cuma sobat yang tau. Contoh : siapa nama pacar pertamamu ?
     
   • Secret Answer --> isi dengan jawaban yang sesuai dengan pertanyaan di atas. Contoh : juleha
     
   • Klik tombol Sigin
   
   
   
4. Jika berhasil, muncul ucapan selamat datang (welcome) dari feedburner
   
   
5. Isi kotak di bawah tulisan Burn a feed right this instant dengan alamat blog anda. Contoh : http://template-unik.blogspot.com
   
   
6. Beri tanda pada radio buuton yang tersedia, terserah mau pilih yang mana, kemudian klik tombol Next
   
   
7. Ubah Feed Title dengan Feed Address jika mau di ubah, kalo sudah tinggal klik tombol Active Feed
   
   
8. Ada ucapan Conrats, klik saja langsung tombol Next
   
   
9. Beri tanda centang pada kotak di samping tulisan Clickthroughs serta I want more ! have FeedBurner stats PRO also track (karena sekarang layanan yang PRO pun sudah gratis karena sudah di akuisisi oleh google)
   
   
10. Klik tombol Next
    
    
11. Klik tab Optimize
    
    
12. Silahkan setting yang anda inginkan, tapi yang paling penting adalah anda harus mengaftifkan fitur SmartFeed, karena fitur ini berfungsi agar supaya fungsi dari feed kita kompatibel atau klop dengan berbagai feed reader yang ada
    
    
13. silahkan klik SmartFeed lalu klik tombol Active
    
    
14. Klik tab Publicize, silahkan pilih fitur yang anda inginkan, tapi yang sering di gunakan adalah fitur feedCount coba klik FeedCount
    
    
15. Pilih bentuk style dari feedcount, yang biasa atau yang animasi, beri tanda pada radio button di sampingnya
    
    
16. Klik tombol Active
    
    
17. Copy kode HTML yang di berikan pada text area, paste pada notepad untuk nanti di pasang di blog anda
    
    
18. Klik Chicklet Chooser untuk memilih berbagai banner atau chicklet seperti yang di tanyakan sahabat setyo
    
    
19. Beri tanda pada radio button yang terletak di samping chicklet masing-masing, kemudian copy kode HTML yang di berikan yang ada pada text area, kemudian paste pada notepad. catatan : setiap sobat memberi tanda pada radio button masing-masing chicklet, maka secara otomatis kode HTML yang ada di bagian bawahpun akan berubah, jadi kesimpulannya beri tanda radio button lalu copy kode HTML nya beri tanda lagi lalu copy kodenya lagi
    
    
20. Klik Pingshot, beri tanda pada kotak di samping Ping-O-matic serta Newsgator, klik menu dropdown yang ada, lalu pilih yang sobat inginkan, klik tombol Add, klik lagi menu dropdownnya bila ingin di tambahkan lagi, klik Add kembali
    
    
21. Klik tombol Active
    
    
22. Klik Headline Animator untuk mendapatkan banner animasi
    
    
23. Klik menu dropdown di bawah tulisan Theme, pilih yang sesuai keinginan (yang paling banyak di minati adalah type classic)
    
    
24. Klik tombol Active
    
    
25. Klik menu dropdown di samping tulisan Add to, pilih Blogger blog
    
    
26. Klik tombol Next
    
    
27. Setelah muncul window baru, klik tombol Add to Blogger
    
    
28. silahkan Sign in dulu di blogger
    
    
29. Pilih blog yang mau di pasang banner animasi nya, lalu klik tombol Menambah Widget maka secara otomatis banner animasi akan di tambahkan. catatan : cara ini hanya berlaku bagi yang memakai template baru
    
    
30. Silahkan sign out dari situs tersebut
    
    
31. Selesai

Untuk fitur-fitur yang lain lainnya, silahkan anda coba-coba saja sendiri karena jika di terangkan semuanya, saya anggap terlalu banyak. alasan utamanya sih cape ngetiknya bro .

Untuk pemasangan kode-kode HTMl yang tadi di copy pada notepad, saya anggap anda sudah bisa melakukannya, karena sudah sering saya bahas. Yang pake template klasik tinggal paste saja pada kode template nya, bagi yang pake template baru ya tinggal tambah elemen trus pilih yang HTML/Javascript, paste kodenya udah deh.

Satu yang paling terakhir. Seperti yang saya katakan diatas tadi bahwa sekarang feedburner sudah di akuisisi sama google, maka untuk feed blogger bisa di alihkan ke feedburner. Caranya seperti ini :

1. Sig in di blogger
   
   
2. Klik menu Pengaturan
   
   
3. Klik Feed Situs
   
   
4. Di sebelah tulisan Ijinkan Feed Blog, pilih yang Penuh
   
   
5. Simpan alamat feed dari feedburner pada kotak di samping tulisan posting URL Pengubahan Arah Feed. contoh alamat feed dari feed burner : http://feeds.feedburner.com/TemplateUnik
   
   
6. Apabila anda mempunyai account google adsense, anda bisa menyimpan kode iklan google adsense anda pada kotak di samping tulisan Feed Item Footer
   
   
7. Klik tombol Simpan Pengaturan
   
   
8. Selesai.

Ok deh, semoga dengan bergabungnya anda ke feedburner, blog sobat menjadi cepat terkenal dan ramai di kunjungi.

Rasanya ada yang lupa nih, contoh-contoh banner yang bisa di dapatkan dari feedburner antara lain seperti di bawah ini :

1st Template Unik (XML)

Ada tambahan template nih, judulnya rada norak : 1st Template Unik, tapi saya suka dhenk dengan nama itu. mau lihat screenshootnya, coba klik gambar di bawah ini :








Tertarik? kalau iya, silahkan baca dulu petunjuknya ! template ini sudah saya pasang
sistem Readmore versi baru, sobat hanya tinggal menambakan kode <span id="fullpost"> .... </span>
pada saat posting, tapi jangan lupa postingnya harus pada posisi Edit HTML bukan pada posisi Compose. Agar lebih jelas coba baca lagi di sini !



Mengingat pengalaman yang lalu bahwa ada yang kesulitan menempatkan gambar pada bagian header, maka sebentar saya bahas tentang bagaimana menempatkan kode gambar pada header, kurang lebih caranya seperti ini :

1. sign in di blogger





2. Klik Layout





3. Klik Edit HTML





4. cari kode berikut :




#header {

margin: 0 2%;

color: $headerTextColor;

padding: 0;

font: $headerFont;

height:150px;

background-color:$headerBgColor;

}



tambahkan alamat gambar yang sudah sobat miliki! contoh :



misal alamat gambarnya seperti ini :



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



maka penambahan kode seperti ini :



#header {

margin: 0 2%;

color: $headerTextColor;

padding: 0;

font: $headerFont;

height:150px;

background-color:$headerBgColor;

background:url('http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif');

}




itu nanti gambar akan memenuhi seluruh ruang header, jika gambarnya kecil maka gambar akan di tampilkan ulang alias berderetan, kalau ingin gambar tampil seperti gambar aslinya (yang tampil cuma satu gambar) kodenya ada sedikit tambahan, seperti ini :



#header {

margin: 0 2%;

color: $headerTextColor;

padding: 0;

font: $headerFont;

height:150px;

background-color:$headerBgColor;

background:url('http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif') no-repeat top center;


}


kode yang diatas akan menampilkan gambar pada posisi tengah bagian header. kode height:150px; adalah untuk menyesuaikan dengan tinggi gambar yang sobat miliki, nilainya silahkan ubah sesuai dengan tinggi gambar yang sobat miliki.





5. Klik tombol Simpan Perubahan





6. Selesai.

Langkah ini berlaku juga untuk template Denim yang kemarin lusa saya berikan.



Tidak seperti template Denim yang kemarin, template ini sudah saya masukan banyak variable agar sobat lebih mudah mengatur Font dan warna, bila tidak suka dengan warnanya, silahkan sobat masuk ke halaman Font dan warna ubahlah warna sesuai dengan keinginan sobat.



Agar tidak berlama-lama berimprovisasi, untuk mendownload template ini, silahkan klik di sini !



Selamat mendownload ria !

Daftar Google Sitemap

Senada dengan postingan kemarin lusa yaitu agar blog kita lebih diperhatikan oleh mbah Google, salah satu caranya adalah dengan mendaftarkan blog milik anda ke Google sitemap.

Google, google, dan google lagi yang dibicarakan, ada apa dengan google? Memang tak dapat dipungkiri bahwa sebagaimana kita ketahui si mbah google ini merupakan situs yang mempunyai search engine atau mesin pencari terkenal di dunia untuk saat ini, ribuan atau bahkan jutaan website/blog bersaing memperebutkan perhatian mbah google agar situs miliknya di tempatkan pada urutan teratas pencarian. Dan tentunya apabila website/blog kita di tempatkan pada urutan teratas, niscaya website/blog kita berkesempatan di banjiri oleh pengunjung dari bebagai penjuru dunia, bukankah itu yang selama ini kita harapkan?

Dengan mendaftar ke Google sitemap maka setiap artikel yang kita posting akan secara otomatis di tangkap oleh google. Ada satu hal yang perlu di ketahui yaitu anda harus mempunyai account email di google, akan tetapi anda tidak perlu kawatir karena tak seperti waktu dulu yaitu untuk membuat email di google harus di invite oleh orang lain, sekarang sudah bisa sendiri. Bagi yang belum punya bikin dulu deh, jalan yang mudah adalah coba login di google dengan email yang di berikan untuk Blogger.com, nah nanti akan secara otomatis di suruh upgrade ama ntuh mbah google dan di suruh melengkapi formulir bikin account di google.

Agar intermezonya tidak terlalu panjang, bagi yang mau daftar Google sitemap silahkan ikuti langkah-langkah berikut ini :

1. Login di google dengan ID GMAIL sobat, silahkan kunjungi Google sitemap
   
   
2. Setelah berada di halaman account sobat, alihkan perhatian ke halaman sebelah atas ! di sana terdapat kotak isian di samping tombol Add Site, isilah kotak tersebut dengan alamat blog anda. Contoh : http://template-unik.blogspot.com
   
   
3. Klik tombol Add Site
   
   
4. Klik link Verify your site

   
   
   

5. Klik menu dropdown yang ada, pilih metode yang di inginkan. Biar mudah pilih saja yang Add a meta tag

   
   
   

6. Copy meta tag yang di berikan, lalu paste pada notepad atau text editor yang lainnya agar mudah di gunakan nantinya.

   
   
   

7. Silahkan masuk ke account blogger dan tuju blog yang di daftarkan tadi
   
   
8. Copy paste meta tag yang di berikan tadi, sebaiknya di bawah kode <title><data:blog.pageTitle/></title> untuk template baru atau di bawah kode <title><$BlogPageTitle$></title> untuk template klasik, jangan lupa klik tombol Simpan perubahan.
   
   
9. Bila sudah selesai, tuju kembali Goggle site map, lalu klik tombol Verify

    

10. Jika semua berjalan dengan baik, akan ada tulisan  “You've successfully verified http://NamaBlogAnda.blogspot.com/”

11. Selesai.

 

 

Bila anda mempunyai beberapa blog, anda tinggal memasukan lagi ke Add Site, ikuti seperti langkah sebelumnya.

Semoga blog anda tampak lebih menarik di mata mbah google.

 

Update : Tutorial ini sudah di tambahkan bantuan gambar agar lebih mudah di fahami.

Tambahan : Sekarang webmaster tool sudah terintegrasi dengan blogger, silahkan login k webmastertool dan anda akan melihat blog dalam akun gmail tersebut, untuk selanjutnya tinggal ikuti seperti langkah di atas.

Ubah Lebar Kolom Template

Lagi-lagi soal template nih. Mungkin ada beberapa dari sobat sekalian ada yang merasa sangat menyukai suatu template, akan tetapi ada ganjalan yakni lebar kolom yang ada tidak sesuai keinginan kita, baik itu lebar kolom sidebar atau pun mainbar (kolom tempat posting). Ada kalanya lebar kolom dari suatu template di rasa terlalu lebar ataupun terlalu sempit, nah jika sobat mengalami hal yang demikian, lumayan nih ada tips buat mengakalinya supaya lebar kolom menjadi sesuai dengan keinginan kita sendiri.



Untuk mengetahui lebar kolom suatu template, kita bisa mengenalinya melalui style sheet CSS nya. Akan tetapi tentu saja ada perbedaan antara satu template dengan template yang lainnya, ini tentunya terserah kepada si designer template nya sendiri. Sebagai contoh untuk bagian header, jika menurut standar template blogger di dalam style sheet CSS nya di namakan header, akan tetapi untuk template-template hasil buatan designer lain di luar blogger ada yang menamakan Banner ataupun nama-nama yang lainnya. Sebuah nama tentu tidak akan berpengaruh terhadap hasil yg di dapat, nama ini di pakai hanyalah agar mudah untuk di ingat atau di kenali oleh sang pemakai template apabila ingin melakukan editting template.



Agar tidak terlalu membingungkan, saya ambil contoh template minima 3 kolom yang bisa di download di sini !.Setelah melihat perkembangannya ternyata template ini banyak yang menyukainya. Jika sobat tidak puas dengan lebar kolom pada template tersebut, silahkan deh ikuti tips berikut biar lebar kolomnya sesuai dengan keinginan sobat. Dimanakah letak kode-kode untuk mengatur lebar kolom ? saya berikan contoh :





#header-wrapper {

width:900px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}



#outer-wrapper {

width: 900px;

margin:0 auto;

padding:10px;

text-align:justify;

font: $bodyfont;

}

#main-wrapper {

width: 435px;

margin-left: 20px;

margin-right: 20px;

float: left;



}

#sidebar-wrapper {

width: 220px;

float: right;

}

#newsidebar-wrapper {

width: 200px;

float: left;

}

Seperti yang terlihat pada kode-kode diatas, yang mempengaruhi lebar kolom adalah
yang saya cetak merah. Width tentu saja dalam bahasa indonesia adalah lebar,
jadi gampangkan untuk mengenalinya. 900px adalah nilai lebar yaitu sebesar 900 pixel.



Agar lebih faham, kode-kode diatas saya uraikan :



#header-wrapper {

width:900px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}



Ini artinya header-wrapper mempunyai lebar sebesar 900px dan mempunyai border (saya artikan border adalah bingkai atau garis tepi) sebesar 1 pixel dengan garis yang solid (solid = garis penuh. dashed = garis putus-putus. dotted = garis berupa titik-titik) dengan warna border yang bisa di ubah-ubah (pada bagian font dan warna).



header-wrapper adalah hanya penamaan saja, tidak mutlak. Jika di ganti dengan nama kepala juga tidak apa-apa. width:900px; berarti lebarnya sebesar 900 pixel. nah nilai 900 pixel inilah yang bisa di ubah sesuai keinginan sobat, mau ditambah nilainya biar lebih lebar, atau di kurangi biar lebih kecil. Akan tetapi saran saya, nilai dari header ini harus sama dengan nilai dari lebar body agar terlihat bagus. border:1px solid $bordercolor; adalah agar bagian header mempunyai garis tepi sebesar 1 pixel, jika ingin lebih tebal sobat tinggal tambahin nilainya, atau jika sobat menginginkan garis tepi ini tidak ada maka sobat hapus saja kode ini.





#outer-wrapper {

width: 900px;

margin:0 auto;

padding:10px;

text-align:justify;

font: $bodyfont;

}


Ini artinya outer-wrapper mempunyai lebar sebesar 900px, jarak sela sebesar
10 pixel dengan align nya adalah rata kiri-kanan dan jenis huruf yang bisa di ubah-ubah melalui panel huruf dan warna.



outer wrapper hanyalah nama saja. width:900px; berarti lebarnya 900 pixel. 900 pixel ini adalah lebar yang di sediakan untuk kolom-kolom yang ada, sebut saja dalam hal ini kolom main-wrapper, sidebar-wrapper, dan newsidebar-wrapper. Jadi dengan kata lain outer wraper adalah hasil penjumlahan lebar kolom main-wrapper, sidebar-wrapper,
dan newsidebar-wrapper. Apabila sobat memasukan content yang melebihi lebar kolom masing-masing, maka secara otomatis pula melebihi spek dari lebar yang di sediakan oleh outer wraper dan yang terjadi adalah salah satu kolom akan melorot ke bawah dan ini membuat blog kita menjadi kurang sedap untuk di pandang mata. Jadi apabila sobat ingin mengubah lebar salah satu kolom di antara yang tiga, maka lebar dari outer wraper pun harus di ubah dan di sesuaikan.

#main-wrapper {

width: 435px;

margin-left: 20px;

margin-right: 20px;

float: left;



}

Ini artinya kolom main-wrapper mempunyai lebar sebesar 435 pixel dengan margin kanan sebesar 20 pixel, margin kiri 20 pixel dan kolom ini di letakan sebelah kiri.



main-wrapper adalah kolom halaman posting, apa-apa yang kita posting maka akan masuk ke halaman ini. width: 435px; berarti lebar kolom ini sebesar 435 pixel, tapi karena menggunakan margin-left dan margin-right, maka lebar kolom sebenarnya adalah sebesar 475 pixel. Akan tetapi yang 40 pixel hanyalah jeda saja agar batas kolom menjadi terlihat tidak bersentuhan. Apabila sobat merasa kolom ini terlalu sempit atau kekecilan, maka sobat bisa menambahkan nilai, contoh 550 pixel. Apabila sobat berniat merubah kolom ini, kolom outer-wraper pun harus di tambah nilainya. contoh tadi apabila main-wrapper ingin menjadi 550 pixel, maka 550px-475px=75px. ini berarti kolom outer-wraper harus di tambah sebesar 75px, jadi 900px+75px=975px.

#sidebar-wrapper {

width: 220px;

float: right;

}

Ini artinya kolom sidebar-wrapper mempunyai lebar sebesar 220 pixel dan di tempatkan sebelah kanan layar.



Kolom sidebar-wrapper adalah kolom sidebar atau kolom tempat di mana kita menyimpan berbagai aksesoris atau yg lainnya. width: 220px; berarti mempunyai lebar sebesar 220 pixel, apabila ingin di persempit atau di perlebar, maka kita hanya
perlu mengubah nilai pixelnya saja. Cuma apabila merubah nilai kolom ini, jangan lupa untuk mengubah nilai space yang di sediakan oleh outer-wraper. contoh : apbila kolom ini ingin diperbesar menjadi 250pixel maka tambahan pixel adalah sebesar 30 pixel, nah jangan lupa untuk menambahkan pula pada kolom outer-wraper.

#newsidebar-wrapper {

width: 200px;

float: left;

}

Ini artinya kolom newsidebar-wrapper mempunyai lebar kolom sebesar 200 pixel dan di tempatkan pada layar sebelah kiri.



Seperti halnya sidebar-wrapper, kolom newsidebar-wrapper pun adalah tempat menyimpan berbagai aksesori ataupun blog tool. kolom ini di buat agar kita bisa lebih banyak memuat berbagai aksesori yang kita inginkan. Kolom newsidebar-wrapper ini lebarnya sebesar 200px, nah bila berniat merubahnya maka tinggal merubah nilai pixelnya saja, tapi jangan lupa untuk menambahkan pula pada kolom
outer-wraper.




Coba bandingkan antara dua blog ini, silahkan klik di sini ! dengan yang di sini !



Selamat berbingung ria !

Pasang Jadwal Sholat

Dari kemarin yang di omongin kayanya soal ngotak-ngatik template melulu, biar tidak jenuh kali ini saya akan membahas tentang aksesori blog. Bagi sobat yang notabene muslim, ada nih aksesori blog plus buat mengingatkan kepada kita akan waktu sholat biar para pengunjung blog kita tidak terlalu terlena ketika memmbaca berbagai artikel yang kita tulis di blog. Jadwal waktu sholat ini bisa sobat dapatkan di
http://www.islamicfinder.org, untuk cara mendapatkannya silahkan ikuti langkah-langkah berikut ini :

1. Silahkan sobat kunjungi situs http://www.islamicfinder.org atau hanya klik di sini !






2. Klik link yang bertuliskan Add new sevices to your site di halaman bagian bawah





3. Alihkan perhatian ke nomor pilihan ke 2. Klik menu Dropdown yang bertuliskan Select a Country





4. Klik nama negara yang sobat inginkan, lalu klik Go. Contoh : Indonesia





5. Klik nama kota yang sobat inginkan. Contoh : Jakarta





6. KLik tombol Generated Code





7. Copy kode yang di berikan, lalu paste pada notepad untuk nanti keperluan di simpan ke blok kita





8. Silahkan tutup window situs tersebut





9. Selesai.

Itu tadi cara mendapatkan kode jadwal sholatnya, untuk memasukan kode tersebut ke dalam blog, silahkan ikuti langkah berikut :




Untuk Template Klasik

1. Sign in di blogger





2. Klik menu Template





3. Klik menu Edit HTML





4. Copy seluruh kode template, paste pada notepad lalu simpan untuk backup data





5. Copy kode jadwal sho;at yang tadi lalu paste pada tempat yang sobat inginkan





6. Klik tombol Pratinjau untuk melihat perubahan





7. Bila sudah Ok, klik tombol Simpan Perubahan Template





8. Selesai.

Untuk Template baru

1. Sign in di blogger





2. Klik menu Layout





3. Klik menu Elemen Halaman





4. Klik tulisan Tambahkan sebuah Elemen Halaman





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





6. Paste kode Jadwal sholat tadi ke kolom yang di sediakan





7. Klik tombol Simpan Perubahan





8. Pindahkan elemen yang baru di buat pada tempat yang sobat sukai





9. Klik tombol Simpan





10. Selesai

Contoh jadwal sholat yang saya terangkan diatas seperti ini :




Yang arah vertical :









Yang arah horizontal












Selamat mempunyai jadwal sholat dan jangan lupa sholat ye jangan ngeblog melulu !

Template Denim 3 kolom (XML)

Template lagi nih, biasa tiga kolom (dasar tukang modif, kerjanya cuma moifikasi
ga pernah bikin sendiri ). kan baru mulai bro, nanti kalau sudah kenyang modifikasi
baru bikin sendiri. OK bro (gaul dikit, biasanya sobat) kali ini adalah template denim yang sudah menjadi tiga kolom, sudah dilengkapi system readmore versi baru. Sobat hanya tinggal menambahkan kode <span id="fullpost"> .... </span> pada saat posting, biar lebih jelas tentang system readmore ini, silahkan baca postingan lengkapnya di sini ! Sudah di tambahkan tab navigasi di bawah header, sobat tinggal mengganti alamat linknya dengan alamat link punya sobat sendiri. Biar lebih jelas tentang tab navigasi ini, silahkan baca postingan lengkapnya di sini ! Serta penambahan-penambahan aksesori lainnya.




Untuk melihat demo nya, silahkan klik pada gambar di bawah ini :







Keterangan tambahan, setelah di download jangan langsung di upload ke blogger, akan tetapi harus di ekstrak dulu dengan Winzip, setelah di ekstrak barulah file dengan ekstensi .xml nya di upload ke blogger. Untuk lebih jelas tentang cara mengganti template, silahkan baca postingan lengkapnya di sini !



Satu permintaan dari saya, banner Template Unik yang ada di dalam template tersebut jangan di hapus ! kalau mau di pindahkan silahkan saja, asal jangan di hapus. Untuk mendownload template denim 3 kolom ini, silahkan klik di sini !



Selamat berdownload ria !

Pelacak IP Address

Bagi sobat yang suka akan aksesori blog, ada lagi nih blog toolsekaligus sebagai aksesori blog. Tool ini berfungsi untuk melacak alamat IP (Internet Protocol) sang pengunjung blog kita. Selain IP address, tool ini juga bisa melacak browser serta Operating system yang dipakai oleh pengunjung.



Untuk mendapatkan tool ini, sobat bisa mendapatkannya di banyak situs pada internet. Agar tidak usah bingung mencari, saya ambil contoh salah satunya adalah http://www.ipnow.org.
Salah satu contoh tampilan yang di miliki situs ini adalah sebagai berikut :





     
     





Tertarik memasang ini? Silahkan ikuti langkah-langkah berikut ini :

1. Silahkan buka situs http://www.ipnow.org




2. Di bawah tulisan Custom Image ada beberapa tampilan yang bisa di pilih. Ambil contoh : klik yang Custom Graphical Info Image




3. Pilih warna backround serta warna text yang di inginkan oleh sobat




4. Klik tombol Create My Image




5. Tunggu beberapa saat sampai proses selesai




6. Copy kode yang di bawah tulisan Linked Image, paste pada notepad untuk keperluan nanti di masukan ke blog




7. Silahkan tutup situs tersebut

Untuk cara memasukan kode yang di copy tadi, silahkan ikuti petunjuknya !



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 yang ada di notepad tadi lalu paste pada tempat yang sobat inginkan





6. Klik tombol Pratinjau untuk melihat perubahan





7. Jika sudah OK, klik tombol Simpan Perubahan Template





8. Selesai.

Untuk template baru :

1. Sign in di blogger





2. Klik menu Layout





3. Klik menu Elemen halaman





4. Klik tulisan Tambah sebuah Halaman Elemen





5. Klik tulisan TAMBAHKAN KE BLOG di bawah tulisan HTML/javascript





6. Copy kode yang ada pada notepad, kemudian paste pada kolom yang tersedia





7. Klik tombol SIMPAN PERUBAHAN





8. Pindahkan elemen yang baru di buat pada tempat yang sobat inginkan, lalu klik tombol SIMPAN





9. Selesai.

Situs lain yang menyediakan layanan seperti ini bisa sobat kunjungi :

1. http://www.danasoft.com





2. http://www.ip2phrase.com

Mau lihat contoh blog yang memakai fasilitas ini? Silahkan klik di sini !



Selamat mencoba deh !

Tips Mengubah Warna Link

Jika pada postingan yang lalu membahas tentang bagaimana cara menghilangkan garis bawah pada sebuah tulisan yang berbentuk link, maka pada kesempatan ini saya ingin mengulas tentang cara mengubah warna link. kenapa merubah warna link di perlukan? alasannya begini, pernah saya mengunjungi beberapa blog yang mempunyai latar belakang bergambar, masalahnya yaitu warna latar belakang dengan warna link hampir sama, sehingga penglihatan kita menjadi kabur dan tidak bisa membaca tulisan link.
Sebenarnya kejadian tersebut tidak perlu terjadi, karena warna link dapat kita ubah sendiri.



Bagi sobat yang memakai template baru, tentunya hal ini bukan masalah besar, karena fasilitas untuk merubah warna dan huruf sudah di sediakan. Lain halnya bagi sobat yang memakai template klasik, untuk merubah warna link, sobat harus sedikit berkeringat karena harus merubah kode-kode yang ada pada kode template sobat.




Kode-kode yang manakah yang harus ubah?



Untuk mengubah warna link, setiap template tentunya berbeda-beda, Akan tetapi untuk gambaran saja saya ambil contoh di dalam template ada kode seperti ini :



a:link {

color:#3333FF;

text-decoration:underline;

}



a:hover {

color:#000066;

text-decoration:underline;

}



a:visited {

color:#663366;

text-decoration:underline;

}





Agar menjadi faham, akan saya uraikan :




a:link {

color:#3333FF;

text-decoration:underline;

}



kode ini mempunyai arti --> sebuah link akan berwarna biru dan bergaris bawah.




a:hover {

color:#000066;

text-decoration:underline;

}


Sebuah link apabila di sorot oleh mouse akan berubah warna menjadi biru tua dan bergaris bawah.





a:visited {

color:#663366;

text-decoration:underline;

}



Sebuah link apabila pernah di klik oleh komputer yang sama akan berwarna ungu dan bergaris bawah.






Pertanyaan selanjutnya manakah kode diatas yang menentukan warna link? jawabnya adalah kode :



color:#3333FF;




Tulisan yang saya cetak merah adalah penentu warna atau di sebut juga dengan kode warna heksa, kode tersebutlah yang menentukan warna sebuah link. Bagaimana cara merubahnya? caranya tentu saja kita harus mengganti kode warna tersebut dengan kode warna yang kita inginkan. untuk mencari tau kode heksa dari warna, saya biasanya menggunakan bantuan dari program photoshop, disana telah disediakan contoh warna lengkap dengan kode heksa nya, kita tinggal memilih warna yang diinginkan kemudian secara otomatis akan di perlihatkan kode heksanya. Masih bingung? kalau masih bingung
soal warna, sobat kunjungi deh blognya bang iwan di link ini http://free-7.blogspot.com,
ada juga di bagian Side bar blog beliau di tuliskan berbagai kode heksa.



Saran dari saya, apabila sobat menggunakan warna latar belakang yang terang, maka pilihlah warna link yang gelap. Sebaliknya, apabila warna latar belakang berwarna gelap, maka warna link haruslah berwarna terang.



Selamat mencoba !

Menghilangkan Garis Bawah Link

Pernah ada salah satu sobat yang mengirimkan email ke saya, beliau ini menanyakan cara menghilangkan garis bawah yang ada pada setiap link. Garis bawah ini menurut beliau sangat mengganggu keindahan tulisan-tulisannya. Memang seperti kata-kata saya terdahulu, lain orang lain keinginan, untuk urusan link pun ada yang suka memakai garis bawah dan ada juga yang tidak suka akan garis bawah tersebut.



Menurut kebiasan yang berlaku, sebuah tulisan yang berbentuk link biasanya memang mempunyai garis bawah, akan tetapi sebenarnya garis bawah tersebut bisa di hilangkan apabila kita mau. Bagaimana cara menghilangkan garis bawah pada link? untuk menghilangkannya sobat perlu merubah beberapa kode yang ada pada style sheet CSS, kode tersebut biasanya seperti ini :





a:link {

color:#58a;

text-decoration:underline;

}



a:hover {

color:#c60;

text-decoration:underline;

}



a:visited {

color:#969;

text-decoration:underline;

}





Agar menjadi faham, akan saya uraikan :




a:link {

color:#58a;

text-decoration:underline;

}



kode ini mempunyai arti --> sebuah link akan berwarna biru dan bergaris bawah.





a:hover {

color:#c60;

text-decoration:underline;

}


Sebuah link apabila di sorot oleh mouse akan berubah warna menjadi biru tua dan bergaris bawah.





a:visited {

color:#969;

text-decoration:underline;

}




Sebuah link apabila pernah di klik oleh komputer yang sama akan berwarna biru tua (banget) dan bergaris bawah.






Pertanyaan selanjutnya manakah kode diatas yang membuat link menjadi bergaris bawah? jawabnya adalah kode :



text-decoration:underline;




Tulisan underline lah yang membuat link menjadi bergaris bawah. Apabila kita tidak menginginkan adanya garis bawah pada sebuah link, maka kita hanya cukup merubahnya dengan kata none, nanti kodenya akan menjadi seperti ini :



text-decoration:none;




Dari pengertian tadi diatas tentu saja kita dapat mengatur ingin ada atau tidak ingin ada garis bawah, tergantung dari selera masing-masing, apakah sebuah link ingin bergaris bawah atau tidak? apakah apabila sebuah link di sorot oleh mouse ingin bergaris bawah atau tidak? apakah apabila sebuah link pernah di kunjungi
atau di klik ingin bergaris bawah atau tidak? semua terserah sobat sebagai pemilik blog. Ingin bergaris bawah?
ya pakai underline, kalau tidak ingin bergaris bawah ya tingal ganti dengan none,
gampang bukan?

Pasang Kalender di Blog

Sobat Guest452, itulah nama yang di kenalkan pada shoutbox. Beliau membredel shoutbox sebanyak tiga kali berturut-turut dengan permintaan agar di postingkan
cara membuat Kalender pada blog. Untuk menghormati keinginan beliau ini, maka saya
coba bahas tentang bagaimana cara pasang kalender di dalam blog.



Untuk memasang sebuah kalender kita bisa memanfaatkan berbagai situs penyedia kalender gratisan. Situs seperti ini sangatlah banyak, tentunya mereka berlomba dengan menampilkan kalender-kalender yang menarik untuk di lihat. Agar tidak terlalu bingung mencarinya, saya berikan contoh satu saja yaitu http://www.free-blog-content.com.
Silahkan coba sobat kunjungi situs tersebut ! kalender yang di sediakan sangat beragam. Silahkan klik kategori yang ada untuk memilih bentuk kalender yang sobat sukai, kemudian copy kode yang di berikan di bawah gambar kalender lalu paste pada notepad untuk nanti keperluan di simpan di blog.




salah satu contoh gambar yang di sediakan seperti ini :













Untuk cara instalasi, silahkan ikuti langkah-langkah berikut !



Untuk Template klasik

1. Sig in di blogger dengan id sobat




2. Klik menu Template




3. Klik menu Edit HTML




4. Copy seluruh kode HTMl lalu paste pada program notepad kemudian save. Ini di maksudkan untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting template, sobat masih mempunyai data untuk mengembalikannya ke semula




5. Copy kode yang tadi telah ada di notepad lalu paste pada tempat yang di inginkan, mau di sidebar atau di manapun boleh




6. Klik tombol Simpan Perubahan Template




7. Selesai.

Untuk Template baru

1. Sign in di blogger dengan id sobat




2. Klik menu layout




3. Klik menu Elemen Halaman




4. Klik tulisan Tambahkan sebuah elemen halaman




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




6. Copy kode yang tadi telah ada di notepad lalu paste pada kolom yang di sediakan





7. Klik tombol SIMPAN PERUBAHAN




8. Pindahkan elemen yang baru di buat pada tempat yang sobat inginkan, lalu klik tombol SIMPAN




9. Selesai.

Khusus bagi sobat yang muslim dan ingin kalendernya dalam bentuk kalender Hijriah, ada sumbangan hasil karya yang bisa sobat pakai. Kalender ini di dapat dari http://mfr.jentayu.com. Bentuk kalendernya seperti ini :














Bentuknya sangat menarik bukan? Jika sobat ingin memasang kalender ini, sobat tinggal menyinpan kode berikut pada template sobat :








<script src="http://hijriah.jentayu.com/hijriah.php"> </script>



 

Untuk langkah-langkahnya sama persis seperti diatas, akan tetapi tentu yang di masukan adalah kode ini. Atau bagi sobat yang memakai template baru, biar gampang silahkan klik saja tombol di bawah ini! nanti akan secara otomatis kalendernya akan di masukan ke blog sobat. tapi ya musti sign in dulu yah :

value="Tanggal Hijriah"/>
value="<script language='JavaScript' src='http://hijriah.jentayu.com/hijriah.php'></script>"/>
value="<data:content/>" />

Ada lagi yang lebih menarik, bukan hanya berfungsi sebagai kalender, akan tetapi berfungsi sebagai arsip. Pengunjung dapat dengan mudah membuka arsip postingan-postingan kita yang terdahulu melalui kalender tersebut. Apabila tertarik coba deh kunjungi blog nya mas anang di http://anangku.blogspot.com. Silahkan baca triknya di sana, soalnya sudah kecapean nih ngetiknya, jadi tidak saya tuliskan sendiri.



Selamat mempercantik blognya dengan kalender.

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/AVvXsEh5U2UxS1OGIRGaCviWESUDnA2tm0FN4eciU6S4rgNmcp9zIBu_Ut2KnfzeYTS3LFRO75p2lMSyzY5BQAcyyeRJBXgNoaChnKWPiqpINa3VftyiXBPh-iS0wyiZhStjIjSOXwrQ0BU9QeI/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/AVvXsEh5U2UxS1OGIRGaCviWESUDnA2tm0FN4eciU6S4rgNmcp9zIBu_Ut2KnfzeYTS3LFRO75p2lMSyzY5BQAcyyeRJBXgNoaChnKWPiqpINa3VftyiXBPh-iS0wyiZhStjIjSOXwrQ0BU9QeI/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/AVvXsEh5U2UxS1OGIRGaCviWESUDnA2tm0FN4eciU6S4rgNmcp9zIBu_Ut2KnfzeYTS3LFRO75p2lMSyzY5BQAcyyeRJBXgNoaChnKWPiqpINa3VftyiXBPh-iS0wyiZhStjIjSOXwrQ0BU9QeI/s200/DSC01367.JPG




Untuk menampilkan gambar, kodenya jadi seperti ini :




<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5U2UxS1OGIRGaCviWESUDnA2tm0FN4eciU6S4rgNmcp9zIBu_Ut2KnfzeYTS3LFRO75p2lMSyzY5BQAcyyeRJBXgNoaChnKWPiqpINa3VftyiXBPh-iS0wyiZhStjIjSOXwrQ0BU9QeI/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/AVvXsEh5U2UxS1OGIRGaCviWESUDnA2tm0FN4eciU6S4rgNmcp9zIBu_Ut2KnfzeYTS3LFRO75p2lMSyzY5BQAcyyeRJBXgNoaChnKWPiqpINa3VftyiXBPh-iS0wyiZhStjIjSOXwrQ0BU9QeI/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 !

Download minima 3 kolom (XML)

Sesuai dengan janji saya kemarin lusa bahwa akan membuat template minima 3 kolom dalam versi XML (new blogger template), akhirnya template ini selesai juga saya modifikasi. Template ini adalah hasil desain dari Douglas Bowman dan telah di hack oleh Ramani, yang terakhir di modifikasi lagi oleh saya sendiri.



Lagi-lagi template ini saya berikan gratis, syaratnya hanya satu yaitu tidak diperkenankan untuk menghapus banner kolom-tutorial yang saya pasang. Jika mau di pindahkan, silahkan saya izinkan asal jangan di hapus aja ya.



untuk melihat contoh blog yang memakai template ini, silahkan klik di sini ! Fitur-fitur yang telah di masukan kedalam template ini antara lain sudah di pasang system Read more dengan system baru, tugas sobat hanya membubuhkan kode <span id="fulpost"> ... </span> lebih jauh tentang fungsi Read more yang di pakai pada template ini silahkan baca di sini !, menu navigasi yang terdapat di header, untuk mengetahui informasi tentang navigasi ini, silahkan klik di sini ! penambahan anchor link pada bagian footer agar mempermudah pengunjung untuk kembali ke halaman utama. Serta tulisan yang bisa berjalan pada bar menu bawah, tugas sobat hanya mengganti kata-katanya saja.



Satu informasi yang perlu sobat ketahui adalah pada saat download template tersebut sobat harus klik kanan (right click) pada link download yang di berikan, kemudian klik Save target as.... jangan klik kiri, karena proses download tidak akan berlangsung, yang keluar nanti malah kode-kodenya. Untuk instalasipun jangan copy paste kode template, akan tetapi harus melalui tombol Browse... yang telah di sediakan. Agar tidak keliru dalam proses instalasi, silahkan sobat baca di sini !



Agar tidak terlalu lama menunggu, untuk mendownload template minima 3 kolom ini, silahkan sobat klik di sini !



Selamat ber download ria !

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 !