Buat Logo & Image Button

Bagi para sobat yang sudah mahir menggunakan program desain grafis semisal adobe photoshop ataupun coreldraw serta teman-temannya yang lain, membuat sebuah logo bukanlah sebuah pekerjaan yang sulit, dan mungkin tutorial ini menjadi tidak menarik untuk di baca. But barangkali ada sebagian dari para sobat sekalian yang satu nasib dengan saya, sebenarnya saya pun boleh di katakan tidak awam banget dengan program-program desain grafis tersebut, akan tetapi tak cukup hanya menguasai tentu saja di perlukan suatu daya kreasi atau imajinasi yang tinggi untuk menciptakan sebuah logo.

Nah kalau ada diantara sobat sekalian yang senasib dan sepenanggungan seperti saya (lho ko jadi ngawur ngomongnya)jangan dulu berkecil hati, seperti biasa ada pepatah mengatakan banyak jalan menuju Roma ((irama)kaya postingan dulu...dah basi)untuk membuat logo kita bisa memakai jasa situs di internet, salah satunya yaitu cooltext.com, Silahkan ikuti langkah-langkah berikut ini :

1. Silahkan buka alamat http://cooltext.com
   
2. Lalu klik tulisan Design a Logo
   
3. Klik gambar contoh logo yang sobat sukai
   
4. Tulis tulisan yang ingin di jadikan logo di sampimg tulisan Logo Text. Misal : Blog Tutorial
   
5. Tulis ukuran yang di inginkan di samping Tulisan Text Size. Misal : 50
   
6. Klik logo warna-warni disamping kotak yang ada tulisan Text Color untuk memilih warna tulisan (text).silahkan pilih warna yg sobat sukai
   
7. Pilih format image disamping tulisan file format. sebaiknya .JPG atau .GIF
   
8. Klik tombol yang bertuliskan Render Logo Design
   
9. Tunggu beberapa saat ketika proses pembuatan logo berlangsung
   
10. Lihat hasil logo, sudah cocok apa belum? bila belum cocok, klik tulisan Edit this logo ulangi langkah diatas, rubah yang sobat inginkan. Jika sudah cocok, klik tulisan Download Image untuk kita simpan di PC kita
    
11. Selesai. Sobat sudah mempunyai sebuah logo.

Agar logo yang kita buat tadi bisa tampil di blog, sobat harus upload gambar tersebut ke blogger.com atau melalui situs lain. Tapi saya lebih suka menyimpannya di situs lain misal www.photobucket.com.

Untuk proses upload di photobucket.com, silahkan ikuti langkah-langkah berikut :

1. Silahkan buka alamat http://www.photobucket.com,
   
2. Jika belum terdaftar di situs ini, silahkan daftar dulu (gratis bo) dengan meng klik tombol yang bertuliskan Join Now pada sudut kanan atas layar
   
3. Sekarang saya asumsikan sobat sudah terdaftar (pastilah cara daftarnya bisa kan)
   
4. Silahkan Sign In dengan Id sobat
   
5. Bila sudah berada pada halaman Account sobat, Klik tombol yang bertuliskan Browse... Silahkan pilih logo yang tadi di buat
   
6. Klin tombol yang bertuliskan Upload
   
7. Tunggu beberapa saat ketika proses upload berlangsung
   
8. Setelah upload selesai, akan di perlihatkan gambar logo serta kode HTML nya
   
9. Copy kode HTML yang ada di sebelah tulisan URL Link. Paste pada program notepad
   
10. Silahkan klik tulisan Log Out untuk keluar dari account sobat. tutup layar browser sobat

Nah sekarang sobat tinggal memasukan kode gambar tadi ke blog ke blog sobat, cuma ada sedikit kode yang harus di tambahkan, karena kode tadi baru berupa Link Image saja. Contoh kode link image : http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg. Disini sobat harus menambahkan kode <img src="Link URL logo">, sehingga kode tadi menjadi seperti ini :

<img src="http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg">

Maka contoh hasilnya akan seperti ini :

Untuk cara memasukan kode HTML kedalam blog sudah sering di bahas, jika lupa silahkan klik di sini.

Sebagai tambahan, kode HTML di atas adalah kode untuk menampilkan image dengan ukuran yang sebenarnya. Apabila sobat ingin memperbesar atau memperkecil image tersebut, sobat bisa menambahkan beberapa atribut ke dalam kode HTML nya. Contoh : image tadi ingin saya tampilkan dalam ukuran 100px X 40px , maka kode tersebut menjadi seperti ini :

<img src="http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg" width="100" height="40" alt="ini contoh saja">

sedikit clue, kode width="..." yaitu untuk ukuran lebar image, jadi untuk memperbesar atau memperkecil image, sobat tinggal menambah atau mengurangi nilainya. kode height="..." yaitu untuk ukuran tinggi image, sobat tinggal menambah atau mengurangi nilainya. Untuk alt="..." yaitu untuk menampilkan tulisan ketika mouse berada pada image tersebut.

Sebagai contoh, hasil dari kode diatas adalah sebagai berikut, silahkan sorot image tersebut untuk melihat efek kode alt="..." :





Bagaimana sudah bisa kan? pasti bisa, kan sudah di coba. Sekarang bagaimana cara membuat image button? langkahnya sama saja dengan langkah-langkah di atas, cuma pada saat berada di situs cooltext.com yang sobat klik adalah tulisan Desiggen a Button bukan Design a Logo, contoh image button :










Ok sobat, selamat menikmati hasil karyanya

Pasang Buku Tamu di Sidebar

Memasang sebuah buku tamu (shoutbox/guestbook) pada sebuah blog adalah hal yang cukup lumayan penting,karena buku tamu ini merupakan salah satu sarana untuk berinteraksi antara yang mpunya blog dengan para pengunjung blog. Dengan di pajangnya buku tamu di dalam blog, maka para pengunjung dapat mengungkapkan isi hatinya tentang blog yang anda buat, yang pasti isi dari sebuah buku tamu ini sangatlah bervariasi bisa merupakan pujian, pertanyaan, sekedar iseng, atau ada juga merupakan kritikan terhadap isi blog anda, dan justru dengan adanya variasi itulah membuat blog kita jadi hidup lebih hidu (kaya iklan aja).






Ok, terlalu lama intermezonya ya, sekarang kita kembali (ke lap...top) ke topikbahasan. Bagaimana caranya mendapatkan sebuah buku tamu. Untuk mendapatkannya sangat mudah, anda tinggal mencarinya pada mesin pencari semisal google ataupun yahoo, silahkan ketikan kata free shoutbox atau free guestbook pada search engine masing-masing situs, maka dalam beberapa detik saja akan muncul berpuluh-puluh situs penyedia buku tamu tadi, anda tinggal klik lalu coba lihat-lihat. Tapi untuk menghemat waktu pencarian anda, maka di sini saya akan langsung memberikan alamat situs penyedia buku tamu yang servernya lumayan bagus dan jarang sekali mengalami down yakni http://www.shoutmix.com. Untuk caranya silahkan anda ikuti langkah-langkah berikut ini :

1. Seperti biasa anda harus daftar terlebih dahulu dengan cara mengklik tulisan Get One noe, free>>, ataupun dengan mengklik tulisan Sign Up, silahkan anda tulis data-data anda pada form yang telah di sediakan.


2. Jika sudah tedaftar, dan di terima jadi anggota shoutmix, silahkan anda login dengan id anda


3. Pada kolom yang berjudul Style, klik menu appearance.



4. Silahkan klik menu pulldown di samping tulisan Load From Preset untuk mengatur tampilan buku tamu anda, silahkan pilih yang sesuai dengan keinginan anda. Jika sudah selesai klik Save Setting.


5. Untuk mendapatkan kode HTML dari shoutbox anda, silahkan klik Use Shoutbox yang berada di bawah menu Quick Start


6. Klik tulisan Place Shoutbox on web page. Isi lebar dan tinggi shoutbox yang di inginkan



7. Copy seluruh kode HTML yang ada pada text area yang berada di bawah tulisan Generated Codes, lalu simpan di program Notepad anda


8. Klik Log out yang berada di atas layar anda untuk keluar dari halaman shoutmix anda. Silahkan close situs tersebut.


9. Selesai

Untuk menempatkan kode HTML shoutbox tadi pada blog anda, silahkan ikuti langkah-langkah berikut ini.

Untuk blogger dengan template klasik :

1. Log in terlebih dahulu ke blogger.com dengan id anda



2. Klik menu Template


3. Klik Edit HTML


4. Paste kode HTML shoutbox anda yang telah di copy pada notepad tadi di tempat yang anda inginkan


5. Untuk jelasnya saya ambil contoh dengan shoubox milik saya, untuk menempatkannya tinggal klik Edit pada browser lalu pilih Find (on this page).. trus tuliskan kata buku tamu lalu klik find, maka kita akan langsung di bawa ke tulisan tersebut. Jika sudah ketemu tulisan tadi silahkan paste kode HTML shoutbox nya.
   

6. Klik tombol Preview untuk melihat perubahan yang kita buat.


7. Jika sudah cocok dengan perubahan tadi, klik Save Template Changes



8. Selesai

Sedikit Clue, agar shoutbox anda sesuai dengan ukuran lebar sidebar , anda bisa merubah ukuran lebar ataupun tinggi dari shoutbox , caranya anda tinggal merubah angka Width (untuk lebar) dan Height (untuk tinggi) dari dalam kode HTML shoutbox tersebut.

Untuk Blogger baru :

1. Silahkan Login dengan id anda


2. Klik menu Layout



3. Klik Page Element


4. Klik Add a Page Element


5. Klik tombol Add to Blog yang berada di bawah tulisan HTML/JavaScript
   

6. Tuliskan judul shoutbox anda pada form title. Contoh : Buku tamu ku, atau my guestbook atau apa saja yang anda suka


7. Copy paste kode HTML shoutbox anda di dalam form Content



8. Klik tombol Save Changes


9. Drag & Drop element yang telah anda buat tadi di tempat yang di sukai


10. Tekan tombol Save


11. Selesai

Selamat mencoba !

Membuat Read More

Wah judul yang aneh, "membuat Read More" maksudnya apa? Begini sobat, sebenarnya saya kurang setuju dengan judul tersebut, tadinya saya ingin memberi judul "Membuat menu Selengkapnya", tapi berhubung kata "Read More" yang paling di kenal di jagad blog, ya saya pun ikut-ikutan (dasar tukang ngekor). Ya sudahlah kepanjangan ngobrolnya. Kita mulai pembahasannya. Bagi para sobat yang baru mulai membuat blog, mungkin belum mengetahui informasi ini dan mudah-mudahan dengan membaca artikel ini dapat menambah pengetahuan kita tentang yang namanya nge-blog.




Sobat mungkin melihat bahwa artikel-artikel saya terlihat hanya berupa judul-judul dengan satu atau dua buah paragrap saja, dan untuk melihat keseluruhan artikel harus meng klik link yang bertuliskan >> Selengkapnya...", ini di sebut pengkaburan
atau pengkamuflasean postingan (ribet banget nyebutnya). Bagi sobat yang baru posting artikel hanya satu atau dua artikel saja mungkin menganggap tidak perlu menyingkat artikel sobat, namun jika nanti artikel sobat sudah banyak, maka mungkin saja ada terbersit ingin membuat menu ini.



Oke... kelamaan ngawurnya, mending langsung saja. Untuk membuat menu Read more kita harus menambahkan beberapa kode HTML ke dalam template blog kita. Tapi untuk postingan kali ini, saya khususkan untuk blogger yang memakai template klasik saja, untuk yang memakai template baru silahkan tunggu pada postingan yang akan datang.



Silahkan ikuti langkah-langkah berikut :

• Login ke blogger.com dengan id sobat





• Klik menu bertuliskan Template






• Klik menu Edit HTML





• jangan lupa Copy seluruh kode template milik sobat lalu paste pada notepad dan kemudian simpan, untuk membuat back up data. Ini dimaksudkan apabila terjadi kesalahan dalam template setelah kita otak-atik, kita masih punya cadangan data untuk mengembalikannya.





• Copy kode HTML di bawah, kemudian paste persis di atas kode </style> :









<MainOrArchivePage>



div.fullpost {display:none;}



</MainOrArchivePage>



<ItemPage>



div.fullpost {display:inline;}



</ItemPage>





Untuk mempercepat pencarian kode </style>, silahkan sobat klik menu Edit yang ada pada bar menu browser, kemudian klik Find (on this page)..., lalu tulis </style>
trus klik tombol find next, maka secara otomatis akan di bawa ke kode tersebut.





• langkah selanjutnya adalah, silahkan copy kode berikut lalu paste setelah kode <$BlogItemBody$> :






<MainOrArchivePage><br/>


<a href="<$BlogItemPermalinkURL$>">Read more!</a>





</MainOrArchivePage>





Lagi-lagi Untuk mempercepat pencarian kode <$BlogItemBody$>, silahkan sobat klik menu Edit yang ada pada bar menu browser, kemudian klik Find (on this page)..., lalu tulis <$BlogItemBody$>
trus klik tombol find next, maka secara otomatis akan di bawa ke kode tersebut.





• Klik tombol yang bertuliskan SAVE SETTINGS
  
  
  
  
  
  
• Langkah selanjutnya adalah klik menu Setting





• Klik menu Formatting





• Dibagian bawah menu tersebut ada kotak di samping tulisan Post Template, nah isi kotak kosong tersebut dengan kode di bawah ini :






<div class="fullpost">




</div>




Sebenarnya langkah diatas tidak wajib dilakukan,akan tetapi ini di maksudkan agar ketika kita mau posting artikel, kode tersebut akan muncul secara otomatis tanpa harus di tulis dahulu, tentunya ini akan lebih mempermudah dan tidak harus selalu mengingat kode tersebut.





• kemudian jangan lupa klik tombol Save Settings





• Selesai

Cara Posting Artikel




Oke, sesudah beberapa tahap kita lalui, sekarang kita masuk ke tahap bagaimana cara memposting suatu artikel agar ada menu Readmore nya.

• Klik menu Posting





• klik menu Edit HTML, nah di sana secara otomatis akan tampak kode yang kita simpan tadi, yakni :








<div class="fullpost">






</div>






simpan artikel sobat yang ingin di tampilkan sebelum kode <div class="fullpost">, kemudian
simpan sisa keseluruhan artikel setelah kode <div class="fullpost"> dan sebelum kode </div>



Agar lebih jelas, saya beri contoh, misal artikelnya begini :




Ini adalah contoh tulisan yang di simpan pada awal artikel yang akan selalu muncul pada blog kita,
sedangkan tulisan yang lainnya tidak akan muncul.

<div class="fullpost">


dan tulisan yang ini adalah tulisan yang akan muncul ketika para pengunjung meng klik link yang bertuliskan Read more.


</div>



Hasilnya yang akan tampak pada blog kita adalah seperti ini :



Ini adalah contoh tulisan yang di simpan pada awal artikel yang akan selalu muncul pada blog kita,
sedangkan tulisan yang lainnya tidak akan muncul.




Read more!

Bagaimana sobat, sudah jelaskan. bila belum jelas silahkan di tanyakan kembali pada komentar.



Sedikit clue, kata Read more! sebenarnya bisa kita ganti sesuai dengan
keinginan kita, misalkan kita rubah menjadi Baca selengkapnya..., Selengkapnya.., Lanjutannya... atau apa saja
yang penting kata tersebut bisa memberi tahu kepada para pengunjung bahwa artikel kita ada kelanjutannya.




Kode di atas sebenarnya ada alternatif lain, yakni memakai kode Span, jika berminat, ganti semua kode div menjadi Span.
Hasilnya akan sama, cuma bagi para sobat yang suka posting pada menu compose, kode ini sering ada masalah di karenakan bertabrakan
dengan perintah lain yang memakai kode Span.





Akhirul kata selamat mencoba !