Daftar Isi




Tampilkan postingan dengan label Tips dan Triks. Tampilkan semua postingan
Tampilkan postingan dengan label Tips dan Triks. Tampilkan semua postingan

Sabtu, 04 Agustus 2012

Membuat Sliding Box

Membuat Sliding box, code Scriptnya :
<!--Slidbox -->
<script type="text/javascript" src="http://marewainfo.googlecode.com/files/slidboxordinary.js"></script>
<div style="position:fixed; width:342px; overflow:hidden; bottom:20px;
right:10px; display:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMBa9-9xf3dY750aGaIn8lyp_ThWXtFNPQAspMcM5xAib-eU1I-bc40N2PducBOr-WsPGz6mOGjbwCbLCKIdqZRdwy5OxWOQ9xzImv4qlqY4NkYr-Jb_RvHGEDYg3qZGL9RJiLzKk4YNOP/s0/bo-bg-html.gif)
repeat; -moz-border-radius:15px; -webkit-border-radius:15px;
border-radius:15px; border:2px solid #111111;" id="fbslidebox">

<div style="width:320px; padding:10px; margin:0 auto; overflow:hidden;">

<a href="#" style="float:right; color:#999; padding:0 3px;
border:1px solid #CCC; text-decoration:none; font-size:9px; font-family:Verdana, Geneva, sans-serif;" id="fbcloseslidebox">X</a>
<!--Slidbox tempat isi -->
<strong style="color:#66ad3d;">JUDUL</strong>
Diisi Sesuka Hati
<!--Slidbox end tempat isi -->
</div></div>
<!--Slidbox end -->
<div style="-moz-border-radius: 12px 12px 12px 12px; background-color: #e6e6e6; border: 2px solid rgb(204, 204, 204); color: black; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">
Hasil CodeScript </div>

Read more »
Diposting oleh di 3 komentar:
Label: , , ,

Rabu, 01 Agustus 2012

Cara Membuat Postingan Terbaru Blog Otomatis menjadi Status Facebook

Cara Membuat Postingan Terbaru Blog Otomatis menjadi Status Facebook - Cara agar postingan terakhir blog masuk di akun facebook - Setelah posting mengenai cara membuat fanpage di facebook dan cara membuat like box facebook di blog, kali ini saya akan bahas bagaimana kita bisa memanfaat keduanya untuk mendapatkan traffic tambahan untuk blog kita. Bagi anda yang suka ngeblog (blogger) dan juga online terutama dengan facebook, tentunya ingin juga posting blog terbaru langsung ter-update di facebook. Sekarang ini situs jejaring sosial seperti facebook sungguh luar biasa penggemarnya, hampir setiap orang online atau terkoneksi internet, website yang pertama kali dibuka biasanya adalah facebook.com - login ke account masing-masing dan update status atau baca-baca status orang lain, member komment, sampai-sampai status gak pentingpun rasanya ingin sekali dibagikan di facebook. Bagi para blogger sebagian besar menginginkan blognya rame di kunjungi orang, atau mungkin para pebisnis online yang menginginkan usaha onlinenya (toko online - nya) di serbu orang, pasti sangat menginginkan hal ini, dengan cara menampilkan informasi terbaru (update) dari blog/ web kita di situs jejaring social terutama facebook, dan ini sangat memungkinkan penambahan kunjungan ke blog/ web kita. Pada kesempatan yang sangat baik ini saya akan berbagi tutorial singkat tentang bagaimana cara membuat Posting Blog Terbaru Otomatis Update di Status Facebook kita. Sulitkan membuat postingan terbaru pada blog otomatis update di status facebook? Jawabannya silakan simak panduan (tutorial) Posting Blog Terbaru Otomatis Update di Status Facebook kita di bawah ini. Berikut cara agar postingan terakhir blog masuk di akun facebook:
  1. Silahkan anda buka alamat https://twitterfeed.com/
  2. Klik Register Now maka akan tampil gambar , silahkan anda isi email aktif anda, password untuk login ke twitterfeed, tulis kode yang tampak dan klik create account.
  3. Setelah anda klik create account, selanjutnya anda masukan Feed Name (boleh anda tulis dengan nama blog anda), kemudian pada kolom Blog URL/ RSS Feed anda isi http://nama-blog-anda.blogspot.com/atom.xml
  4. Tahap selanjutnya anda pilih situs jejaring sosial facebook.
  5. Selanjutnya anda disuruh menghubungkan ke account facebook anda, akan ada jendela aktifasi, setelah anda klik izinkan maka account facebook anda akan masuk didalam kotak Authenticated account facebook.
  6. Terakhir Anda klik Create Service, jika berhasil maka akan tampil “congrulation”.
Dan hasil akhirnya, setiap anda posting tulisan terbaru di blog anda, secara otomatis akan terupdate di status facebook anda. Semoga postingan kali ini bermanfaat.
Read more »
Diposting oleh di Tidak ada komentar:
Label: ,

Membuat Back To Top dengan Efek Smooth Scroll

"Back to Top" adalah salah satu fasilitas yang dapat digunakan pada blog untuk memudahkan pengunjung menavigasi halaman pada blog anda. Fungsi dari Back To Top yaitu mengantarkan kembali pengujung anda ke halaman paling atas. Penggunaan JQuery dengan fungsi ini dapat memberikan hasil scroll yang lebih baik, dalam hal ini scroll menjadi lebih smooth atau halus. Jika anda udah gak sabaran pengen membuatnya langsung aja dipraktekin...

Copyright: Blog Trik dan Tips - http://blogtrikdantips.blogspot.com/2009/10/membuat-back-to-top-dengan-efek-jquery.html#ixzz22JD8SqQM
Tolong sertakan link ini jika mengkopi artikel diatas. Terima kasih

Hasil CodeScript
Read more »
Diposting oleh di 2 komentar:
Label: , , ,

Cara Membuat Link Blog Berwarna-Warni

Sobat pasti sudah pernah melihat link berwarna warni pada blog. Ada berbagai warna yang ditampilkan link tersebut apabila cursor anda berada diatasnya. Kali ini kita akan membuat setiap link berwarna-warni pada blog anda. Javascript yang satu ini sangat mudah untuk diinstal karena anda tidak perlu mengotak atik template. Jika ingin tau caranya ikuti langkahnya dibawah ini:
1. Login ke Blogger
2. Masuk ke Rancangan --> Edit Laman
3. Tambahkan Gadjet lalu pilih HTML Javascript
4. Masukan kode berikut ini:
<script src="http://andreblog.googlecode.com/files/Rainbow_Colors_Way2blogging.js" type="text/javascript"></script>
5. Simpan gadjet anda

Apabila script tersebut tidak bekerja itu disebabkan karena script tersebut tidak cocok pada css template. Untuk itu coba sobat hapus tag !important. Demikian trik dan tips untuk saat ini semoga bermanfaat.


Read more »
Diposting oleh di Tidak ada komentar:
Label: , ,

Senin, 23 Juli 2012

Cara Menampilkan File Word, Excel, Power Point di Blog

Bagi anda yang suka dan ingin sharing file dalam bentuk microsoft word (document) dan microsoft excel (spreadsheet) ataupun microsoft power point (presentation) di blog, maka anda bisa menggunakan berbagai layanan di internet.
Salah satu di antaranya adalah layanan yang di sediakan oleh google yaitu Google docs. Dengan google docs anda bisa membuat file microsoft office yang saya sebutkan tadi secara online ataupun anda bisa mengupload file yang sudah jadi alias sudah di kerjakan secara offline dan kemudian ambil kode yang di berikan lalu setelah itu anda bisa menampilkannya di blog anda.

Apa kelebihan dari google docs? dengan google docs anda tidak perlu mempunyai software microsoft office yang lisensi nya sangat mahal terinstall di komputer anda, yang anda perlukan adalah anda bisa online di internet. Sepertinya saya tidak perlu menerangkan bagaimana cara membuat file di google docs karena penggunaannya hampir sama dengan microsoft office. Yang mau saya terangkan adalah bagaimana cara mengupload file yang sudah jadi ke google docs dan kemudian menampilkannya di blog anda.

Salah satu syarat untuk bisa menggunakan google docs adalah anda harus mempunyai alamat email di gmail (google acount). Jika selama ini account blogger anda menggunakan gmail maka bisa secara langsung login ke google docs. Bagi anda yang baru pertama kali masuk ke google docs, maka anda harus setuju dengan peraturan yang di buat oleh google. Sudah punya account google?

Langkah 1 : upload file ke google docs.
  1. Silahkan login ke http://docs.google.com dengan account gmail anda.
  2. Klik Tab Upload yang berada di sebelah kiri atas layar monitor anda.- Klik tombol browse… di bawah tulisan Browse your computer to select a file to upload:
  3. Masukan file yang ingin anda upload (word, excel, power point).
  4. Klik tombol Upload File yang ada di sebelah bawahnya.
  5. Tunggu beberapa saat sampai file anda terupload semuanya (tergantung dari besarnya file serta kecepatan koneksi anda).
  6. Jika sudah terupload, anda bisa mengeditnya jika mau.
  7. Klik Tab publish yang ada di sebelah kanan atas layar monitor anda, maka akan keluar tulisan "This document is not yet published."
  8. klik tombol Publish Now yang ada di bawahnya.
  9. Jika sudah selesai, lihat kembali ke bagian bawahnya!
  10. Klik link bertuliskan More Publishing Options.
  11. Setelah keluar window pop up, klik menu drop down di sebelah tulisan File format kemudian pilih "HTML to embed a webpage."
  12. Klik tombol Generate URL. 
  13. Copy kode HTMl yang di berikan, lalu paste pada notepad atau text editor lainnya. 
  14. Silahkan di close saja window nya. 
  15. Silahkan anda sign out dari google docs jika mau. - Selesai.
Langkah 2 : posting kode google docs ke blogger.
Silahkan login ke blogger dengan ID anda.
  1. Klik Posting Baru.
  2. Silahkan anda buat postingan yang anda inginkan.
  3. Ketika anda mau menyisipkan kode yang dari google docs, klik terlebih dahulu tab Edit HTML ( jangan yang compose)
  4. Paste kode google docs yang ada di notepad tadi pada tempat yang anda inginkan.
  5. Klik Tombol PUBLIKASIKAN POSTING.
  6. Silahkan lihat hasilnya.
  7. Selesai
Sekarang anda sudah tahu cara menampilkan file excel di blog kan? ada lagi tambahan nih dari kang rohman. Berikut adalah contoh kode HTML yang di berikan oleh google docs :
<iframe width='500' height='300' frameborder='0' src='http://spreadsheets.google.com/pub?key=pC1rhcSE_YQEbEbMd8xfaGA&output=html&widget=true'></iframe>
Lihat PREVIEW

Jika kita perhatikan kode tersebut adalah kode HTML untuk perintah iframe, masih ingatkan dengan perintah iframe yang pernah saya posting di “mengenal perintah iframe”? tentunya kode yang di berikan oleh google docs tidaklah mutlak harus seperti itu, tapi kita bisa memodifikasinya sesuai dengan keinginan kita.

Sebagaimana kita lihat bahwa ukuran lebar (width) sebesar 500 pixel, nilai ini bisa anda ganti dan disesuaikan dengan lebar dari halaman post anda, begitupun dengan tingginya (height) ini pun bisa anda ganti dengan nilai yang anda inginkan. Ada satu lagi yang penting adalah dalam kode tersebut tidak di sertakan kode scrolling, sehingga apabila file anda sangat lebar tidak akan terlihat oleh pembaca, maka solusi yang saya berikan adalah menambahkan kode scrolling=”yes’ ataupun scrolling=”auto” pada kode iframe di atas.
contoh kode yang memakai scrolling :
<iframe width='500' height='300' frameborder='0' scrolling='yes' src='http://spreadsheets.google.com/pub?key=pC1rhcSE_YQEbEbMd8xfaGA&output=html&widget=true'></iframe>
Lihat Preview
Atau dapat juga seperti ini :
<iframe width='500' height='300' frameborder='0' scrolling='auto' src='http://spreadsheets.google.com/pub?key=pC1rhcSE_YQEbEbMd8xfaGA&output=html&widget=true'></iframe>
Dengan anda menambahan kode seperti itu, maka walaupun file anda mempunyai lebar serta tinggi yang melebihi halaman posting anda, pembaca dapat menggesernya dengsn leluasa memakai scrolling.


Selamat Mencoba
Read more »
Diposting oleh di 1 komentar:
Label:

Memasang User Online Status 1

English Version
How many people is online at your blog? you know that or don't? If you don't know how many people is online at your blog, you can use a free tracker to know it. That is much site provide this service. Once of them is www.histats.com.
If you use them tool, you can know how many people online at your blog, how many people was visited to your blog, and any function. This is once of example :
How to get it? please following the steps :
  1. Please visit www.histats.com.
  2. If you was on the histats site, click Register at the top tab.
  3. Content the form with your information, such as email, password, your blog url and etc.
  4. Click Continue button.
  5. Choose the style of histats counter, click Choose a counter from this category.
  6. Please mark the radio button beside the counter style you wanted.
  7. Click Continue button at the bottom of page.
  8. Click at the drop down menu, choose the category which to display at your counter. the choice is : visitor today, Page views today, User online, Total visitors, and total page views. Choose empty if you want not to display them.
  9. Click Continue button.
  10. Wait a moment, your counter is updating.
  11. Until the process is done, copy your counter code and paste to the Notepad or other text editor. Save into your computer.
  12. Logout and close your internet browser.
  13. Done. Now you has have a counter code to add at your blog.

Next step is add your counter code to your blog, please following the steps :
  1. Login to blogger with your ID.
  2. After entering the dasboard page , click Layout.
  3. Click at Page Element tab. See the picture below :
  4. Click at Add a Page element.
  5. After emerging pop up window , Klik add to blog button for the things HTML/JavaScript. See the picture following :

  6. Open your Counter code, copy and then paste into available column.
  7. Click
  8. Done. Please see the result.

Now you have a Counter, and you will know how many people online at your blog.

If you don't like with this counter, you can get at the other site, this is several site provide the same service :

See you next time at my new tips. Happy blogging.

Read more »
Diposting oleh di Tidak ada komentar:
Label:

Memasang User Online Status 2

Versi Bahasa Indonesia
Berbicara masalah blog tools, kayanya saya jarang sekali membahasnya. Dari sekian banyak artikel yang telah saya posting, tercatat baru dua artikel yang membahas tentang blog tools. Untuk itu dalam postingan kali ini akan di bahas salah satu blog tools yang banyak di gunakan oleh para blogger yakni tool untuk mengetahui berapa banyak pengguna/user yang sedang online pada blog milik kita.
Disamping berfungsi sebagai blog tools, tool ini berfungsi juga sebagai aksesori blog yaitu untuk menghiasi halaman blog milik kita agar tampak lebih cantik dan menarik untuk dilihat oleh para pengunjung. Oleh karena alasan tadi banyak penyedia tool ini yang menawarkan tampilan-tampilan yang unik serta menarik di samping fungsi utamanya yakni melacak user yang sedang online di blog kita.

Ok, biar ga bosan baca intermezo yang terlalu panjang dan garing, langsung saja pada topik bahasan utama.Untuk mendapat tool user online status, salah satunya kita bisa mendapatkan dari www.Geovisite.com, untuk langkah-langkahnya silahkan ikuti langkah berikut :
  1. Silahkan buka www.geovisite.com 
  2. Klik tulisan Register yang berada di bawah gambar Geo counter Flash
  3. Tulis alamat email sobat pada kotak kosong di samping tulisan Email
  4. Tulis address blog milik sobat disamping tulisan URL. Contoh : http://bloggerblogku.blogspot.com
  5. Tulis kata untuk login di samping tulisan Login (4/12). Contoh : amen24
  6. Tulis password yang di inginkan disamping tulisan password (4/8). Contoh : kinoy
  7. Pilih waktu yang sesuai dengan daerah sobat disamping tulisan Location. contoh :untuk daerah jakarta adalah Asia/Jakarta (GMT+7)
  8. Pilih kategori yang sesuai dengan blog sobat di samping tulisan Category. Contoh : Internet
  9. Pilih bahasa yang sesuai dengan blog sobat di samping tulisan Language of your site. Contoh : English (soalnya kalo indonesia ga ada, belum di akui bo)
  10. Pilih judul blog sobat disamping tulisan Title. Contoh : Rubrik Elektronik
  11. Tulis deskripsi dari blog milik sobat pada kotak di samping tulisan Descriptioan. Contoh : All about Electronic, tips, maintenance, until how to service the equipment of electronic
  12. Klik tombol yang berlogo disket
  13. Copy salah satu kode HTML yang dinginkan, antara lain : GEOGLOBE, GEOCOUNTER, GEOMAP lalu paste pada program notepad
  14. Silahkan close window browser sobat
  15. langkah selanjutnya adalah memasukan kode HTML tersebut pada kode HTML milik sobat.
  16. Selesai.
Agar sobat bisa menentukan pilihan mana yang harus di pilih apakah GEOGLOBE, GEOCOUNTER, atau GEOMAP ? Silahkan klik di sini untuk melihat secara nyata gambar dari ketiga pilihan tadi, tunggu beberapa saat,loadingnya lumayan sedikit lama. Kenapa tidak saya cantumkan di sini,alasannya yaitu agar halaman blog ini tidak terlalu berat untuk di akses makanya sengaja saya pisahkan.

Sebagai tambahan, situs penyedia yang lainnya sobat bisa kunjungi di :

Selamat menikmati tool baru...
Read more »
Diposting oleh di Tidak ada komentar:
Label:

Membuat Efek Refresh di Blog (Redirect)

Fungsi refresh di gunakan untuk membuat “penyegaran” kembali halaman blog ataupun website. Fungsi refresh ini sama dengan fungsi refresh yang ada pada browser internet, perbedaannya yaitu fungsi ini di buat bekerja secara otomatis, yakni pengguna tidak perlu menekan tombol refresh yang ada pada tool bar.
Untuk membuatnya cukup dengan hanya membubuhkan kode di bawah ini :

<meta http-equiv="refresh" content="10"/>


Simpan kode di atas antara <head> .... </head>

Sedikit uraian kode diatas, content="10" --> angka sepuluh menunjukan bahwa proses refresh akan di lakukan dalam rentang waktu 10 detik. Jadi sebaiknya angka ini di set jangan terlalu cepat karena bisa menimbulkan kejengkelan kepada para pembaca apabila terlalu cepat di refresh.

Fungsi refresh selain untuk menyegarkan kembali halaman-halaman blog, ada fungsi lain yang juga cukup menarik, yakni berfungsi sebagai Redirect dari satu URL addres ke URL addres yang lain. Ini berfungsi jika anda ingin membawa pengunjung blog atau situs anda ke alamat situs yang anda inginkan. Agar lebih jelas, saya ambil salah satu contoh. Ada teman saya sudah lama nge blog, dan setelah sekian lama kemudian dia membuat situs baru. Jadi blog yang lama tidak ingin di aktifkan lagi (di non aktifkan). Nah selain memakai cara meninggalkan pesan bahwa alamat situs atau blog sudah pindah alamat, alangkah baiknya kita memakai fungsi Refresh yang di setting secepat mungkin yakni waktu refresh di set 0 (nol) detik. Jadi apabila ada pengunjung yang mengunjungi alamat blog tersebut akan secara otomatis di bawa langsung ke alamat baru yang di inginkan.

Fungsi Redirect ini bisa di buat dengan kode :
<meta http-equiv="refresh" content="0;URL=tulis alamat URL tujuan di sini"/>
Read more »
Diposting oleh di Tidak ada komentar:
Label: ,

Cara Pasang Statistik dan Tracker

Salah satu blog tool sekaligus sebagai aksesori blog yang sering di gunakan oleh para blogger yakni memasang statistik dan tracker.
Dengan adanya statistik blog, maka kita yang mpunya blog ataupun yang berkunjung pun dapat mengetahui berapa pengunjungkah yang pernah berkunjung ke blog kita. selain itu juga bisa sekaligus sebagai tracker yakni kita bisa mengetahui para pengunjung blog kita datang dari mana, apakah dari search engine, blog lain ataupun darimana saja kita dapat mengetahuinya.

Sekarang bagaimana caranya kita membuat statistik tersebut? cara yang mudah yaitu kita menggunakan situs penyedia statistik. Di internet banyak sekali situs penyedia statistik gratis, sebagai contoh adalah situs http://www.sitemeter.com. Berikut adalah contoh tool yang bisa kita pilih :
Untuk mendapatkannya silahkan ikuti langkah-langkah berikut :
  1. Silahkan kunjungi situs http://www.sitemeter.com.
  2. klik tulisan Sign Up untuk melakukan pendaftaran
  3. klik tombol bertuliskan Next
  4. Klik tombol Next lagi
  5. Isi semua tabel yang ada lalu klik tombol Next lagi
  6. Isi lagi tabel yang ada, lalu klik tombol Next lagi
  7. klik tombol Next lagi
  8. klik tombol Next lagi ( cape dech next..next melulu )
  9. Setelah ada keterangan proses sign up selesai, anda harus melakukan veryfikasi, silahkan buka email yg anda berikan
  10. Buka email yang datang dari sitemeter.com, di dalamnya ada username dan password anda untuk login ke sitemeter.com
  11. Silahkan login dengan id anda
  12. Bila sudah login, Klik menu Manager
  13. Klik Menu Meter Style untuk memilih gaya dari site meter anda
  14. Pilih style yang anda sukai, kemudian klik tombol Select
  15. Klik menu HTML Code
  16. Klik tulisan Adding site Meter to a Blogger.com Site
  17. copy semua kode HTML yang di berikan lalu paste pada Notepad
  18. Klik menu Logout untuk keluar dari situs tersebut
  19. Selesai, tinggal memasukan kode yang kita dapat ke dalam blog kita
Sekarang tugas kita adalah memasukan kode yang sudah kita dapat ke dalam blog, ikuti langkah- langkah berikut :

khusus blog dengan template klasik :
  1. Sign in di blogger dengan id anda
  2. Klik menu TEMPLATE
  3. Klik Edit HTML
  4. Klik Edit (yang ada pada bar menu browser anda)
  5. Klik Find (on this page)... >>> untuk mempercepat pencarian
  6. Tuliskan kata dimana anda ingin tempatkan, contoh di blog saya adalah blogger (karena dekat dengan tombol blogger) klik Find
  7. Copy & paste kode yang telah di simpan di notepad tadi, lalu klik tombol Preview untuk melihat perubahan yang terjadi
  8. Jika sudah cocok dengan perubahan tadi, Klik Save Template Changes. Selesai

Sedikit tambahan, bila anda ingin site meter posisinya berada di tengah-tengah, tinggal tambah kode <center> ...kode site meter... </center>

Untuk blog dengan Template baru :
  1. Login di blogger dengan ID anda
  2. Klik menu layout
  3. Klik Elemen Halaman
  4. Klik Tambahkan sebuah Elemen Halaman
  5. Klik TAMBAHKAN KE BLOG pada menu HTML/JavaScript
  6. Tulis Judul site meter anda pada isian di sebelah form judul (bila ingin ada keterangan. kalau tidak, ya kosongkan saja)
  7. Copy & paste kode Site meter pada kolom isian
  8. Klik tombol Simpan Perubahan
  9. Klik Elemen yang baru anda buat tadi, tahan lalu pindahkan ke tempat yang anda inginkan ( di drag & drop)
  10. Klik tombol PRATINJAU untuk melihat perubahan yang baru di lakukan
  11. Bila sudah cocok dengan perubahan tadi, klik tombol SIMPAN
  12. Selesai
Untuk fungsi site meter sebagai tracker, silahkan anda login ke sitemeter.com trus ya acak-acak deh isinya pasti ketemu....


Selamat mencoba.
Read more »
Diposting oleh di Tidak ada komentar:
Label: , ,

Pasang Image/Gambar/Icon di Setiap Judul Artikel/Posting

Image. Kalau berbicara masalah image/gambar, memang sangat seru dan menyenangkan. Dengan adanya image maka blog kita akan tampil lebih menarik untuk di lihat,walaupun tentusaja apabila berlebihan akan berakibat buruk yaitu blog kita akan susah untuk di aksesoleh para pengunjung karena beban kapasitas data yang berlebihan dan bila itu terjadi maka para pengunjung akan menjadi malas untuk berkunjung. Memang segala sesuatu kalau berlebihan akan berakibat tidak baik, jalan keluarnya ya wajar-wajar saja Re....
Ok sobat, biar ga terlalu banyak berimpropisasi, langsung saja pada topik bahasan. topik yang akan kita bicarakan saat ini yaitu memasang image/gambar pada judul artikel. Artikel ini saya buat bagi yang senang akan pernak-pernik gambar,bagi yang tidak senang, ya sebagai pengetahuan saja lah.

Untuk memasang sebuah image pada judul artikel, ada beberapa tahapan yang harus dilakukan, antara lain :
  • Langkah pertama
    • Langkah pertama yang harus dilakukan adalah membuat image ataupun logo yang di inginkan. jika sobat mahir dalam program grafik & design semisal adobe photoshop ataupun coreldraw, ya tinggal buat saja yang nyentrik. Tapi kalau tidak bisa atau males bisa gunakan layanan di internet, ini sudah saya bahas pada artikel terdahulu, silahkan klik disini untuk membacanya kembali.
  • Langkah kedua
    langkah kedua yaitu sobat harus upload image atau logo tersebut, bisa ke blogger ataupun ke hosting lain. Misalkan biasanya saya menyimpan setiap image yang saya punya di www.Photobucket.com untuk masalah upload gambarpun sudah saya bahas pada postingan yang lalu, kalau mau baca-baca lagi silahkan klik di sini.
  • Langkah ketiga
    langkah ketiga adalah mengatur ukuran dari image tersebut agar sesuai dengan yang di inginkan, karena jika terlalu besar atau terlalu kecil maka tentu saja akan tidak enak dipandang mata. Misalkan saya mempunyai URL image seperti ini :
    • http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif
    Sebagaimana kita ketahui untuk membuat sebuah image bisa online maka kita tambahkan kode : <img src="URL image"> Sehingga kodenya akan jadi seperti ini :
    <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif">
    dan yang akan tampil adalah image dengan ukuran yang sebenarnya. contoh image tersebut adalah seperti ini :  
    tentu saja bila kita memajang image sesuai ukuran image yang aslinya, ini menjadi kurang enak di lihat jika di padukan dengan tulisan judul posting. Untuk mengakalinya kita bisa menambahkan beberapa atribut kedalam kode image tersebut, antara lain atribut width="..." untuk lebar, height="..." untuk tinggi, dan border="..." untuk bingkai, dan dalam hal ini yang dipakai adalah border dengan nilai 0 (nol) agar terhindar dari setting template yang memakai nilai border. Saya ambil contoh kode image tadi jadi seperti ini :
    <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0">
    sehingga image yang tadi akan berubah jadi seperti ini :   Bagaimana sudah jelaskan cara merubah ukuran gambar? jika sudah, kita beranjak ke langkah selanjutnya.
  • Langkah keempat
    langkah keempat yaitu memasukan kode gambar yang sudah kita modifikasi tadi ke dalam kode template blog milik kita. Silahkan ikuti langkah-langkah berikut ini :

    Untuk yang memakai template klasik :


    • Sign in ke blogger dengan id sobat
    • Klik menu Template
    • Klik menu Edit HTML
    • Copy 'n paste seluruh kode HTML ke dalam notepad, ini dimaksudkan untuk mengurangi resiko apabila terjadi kesalahan pada saat kita melakukan editting kode template
    • Cari kode berikut pada kode HTML sobat :
      • <$BlogItemTitle$> cara yang mudah untuk menemukan kode tersebut adalah : klik menu Edit yang berada bar menu browser lalu klik Find kemudian tuliskan kode diatas tadi lalu klik tombol Find, maka secara otomatis kita akan langsung di bawa ke tulisan kode tadi. Nah kode <$BlogItemTitle$> adalah merupakan kode untuk menampilkan judul postingan, maka kita harus menyimpan kode image yang kita miliki di dekatnya, bisa sebelum atau sesudahnya tergantung dari keinginan kita. Tentunya bila di simpan sebelum kode judul posting maka image pun akan muncul sebelum judul posting, jika di simpan sesudah kode judul posting sudah barang tentu image pun akan muncul sesudah tulisan judul. Saya ambil contoh kode image di simpan sebelum tulisan judul :
      <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0">&nbsp;&nbsp;<$BlogItemTitle$>
      pemasangn kode &nbsp;&nbsp; adalah untuk memberi jarak spasi antara image dengan tulisan judul, sebab jika tidak menambahkan kode &nbsp; maka image dengan tulisan akan bersatu walaupun kode image dengan kode judul di tulis ada jarak spasinya.
    • Klik tombol Preview untuk melihat perubahan yang dilakukan
    • Jika sudah OK, klik tombol Save Settings
    • Selesai

      Maka setiap sobat posting artikel, secara otomatis image yang kita pasang tadi akan muncul tanpa harus di tuliskan kembali. Untuk contoh nyata silahkan lihat judul postingan ini. 

    Untuk yang memakai templat baru :
    Catatan awal bagi yang memakai template baru yaitu setiap tag yang kita pakai harus selalu di tutup tidak seperti template klasik, contoh kode gambar yang tadi kita pakai adalah :
    <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0">
    kode image tersebut tag nya harus ditutup dengan tag penutup :
    </img>
    Sehingga kode image jadi bertambah menjadi :

    <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0"></img>

Untuk memasukan kode gambar yang sudah di tambahi tag penutup tadi, silahkan ikuti langkah berikut :
  1. Sign in ke blogger dengan id sobat
  2. Klik menu Layout
  3. Klik menu Edit HTML
  4. Klik tulisan Download Full Template
  5. Silahkan save dulu template sobat, ini untuk back up data apabila terjadi kesalahan editting
  6. Beri tanda centang pada kotak disamping tulisan Expand Widget Templates. Sekali lagi jangan lupa beri tanda centang, sebab kalau tidak, nanti tidak akan sesuai dengan langkah selanjutnya
  7. Tunggu beberapa saat sampai proses selesai
  8. Cari kode berikut pada template sobat :
    9. <a expr:href='data:post.url'><data:post.title/></a> <b:else/>
  9. Sisipkan kode gambar yang kita miliki diantara kode :
    <a expr:href='data:post.url'> dan kode <data:post.title/></a>
    <b:else/>
    Sehingga bila di satukan kodenya menjadi :
    <a expr:href='data:post.url'> <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0"></img> &nbsp;&nbsp;<data:post.title/></a>

    <b:else/>
  10. Klik tombol PREVIEW untuk melihat perubahan
  11. bila sudah OK, klik tombol SAVE TEMPLATE
  12. Selesai
Bagaimana sudah di coba? mudah-mudahan saja berhasil. Selamat mencoba !
Read more »
Diposting oleh di Tidak ada komentar:
Label: ,

Free Logo Maker dan Download Icon Gratis


Sebuah informasi ringan yang mungkin dibutuhkan oleh sahabat blogger lain, yang ingin membuat tampilan blognya menjadi lebih unik dan menarik dengan memasang sebuah logo karya sendiri.

Banyak sekali situs web yang menyediakan tools ini, salah satu diantaranya yaitu Logo Maker Tool yang Free... alias GRATISSSS....yang beralamat di http://www.logoease.com.

Buat anda yang ingin mencoba, silahkan daftar dulu sebelum membuat sebuah logo, karena itu salah satu syarat yang dia minta. Proses cepat dan tidak rumit. Jika penasaran, coba saja kunjungi http://www.logoease.com.
Ya.. udah sekian dulu posting saya diawal pagi ini.... nanti dilanjut!

eh..sebentar tanggung juga! mungkin informasi ini juga dapat berguna untuk menambah koleksi icon sobat, Berikut ini alamat download icon gratis :
  1. http://icontexto.blogspot.com
    contoh iconnya :

  2. http://jwloh.deviantart.com
    contoh iconnya :

  3. http://marcelomarfil.deviantart.com
    Contoh Iconnya :

  4. http://www.webappers.com
    Contoh Iconnya :

  5. http://www.zeusboxstudio.com
    Contoh Iconnya :

  6. http://www.vistaicons.com
    Contoh Iconnya:

  7. http://itweek.deviantart.com
    Contoh Iconnya :

  8. http://lecoupdulapin.deviantart.com
    Contoh Iconnya "

  9. http://csscreme.com
    Contoh Iconnya :

  10. http://stinky9.deviantart.com
    Contoh Iconnya :

  11. Dan banyak lagi icon-icon yang bisa anda dapatkan secara free atau gratis, caranya sangat mudah, anda tinggal tulis keyword Free Icon pada search engine google yang ada di sebelah kanan atas blog ini. Selamat berdownload ria.


Read more »
Diposting oleh di Tidak ada komentar:
Label: ,

Membuat Top / Down Halaman

Dengan adanya perintah ini dapat memudahkan para reader untuk melihat halaman atas/bawah blog kita tanpa harus melakukan penggulungan layar.
Script Codenya hampir sama dengan Floating Image, yaitu gambarnya tetap diam sekalipun kita menggulung layar, seperti pada kotak dibawah halaman ini.
Untuk membuat perintah ke atas dan ke bawah adalah dengan memanfaatkan code script dari floating image yang kemudian dipasangi Link.
  1. Dari halaman Darbor Blogger kamu, pilih Tata Letak - Edit HTML.
  2. Kopikan kode CSS berikut dan letakkan di atas ]]></b:skin>:
    3. #floating-atas-bawah { position:fixed; _position:absolute; bottom:5px; right:5px; clip:inherit; z-index:+1000;}
  3. Setelah itu kopikan kode HTML berikut (gunakan Control C) dan letakkan di bawah </head> atau antara </head> dan <body>
    <div id='floating-atas-bawah'>
    <a href='#' title='Ke Atas'><img border="0" src='http://sites.google.com/site/ruangsc/imgsb/keatas.png'/></a> <a href='#footer' title='Ke Bawah'><img border="0" src='http://sites.google.com/site/ruangsc/imgsb/kebawah.png'/></a>
    </div>
    KETERANGAN :

    • Untuk gambar dapat diganti sesuai selera.
    • Dan Jika Perintah tidak bekerja, ganti  #footer dengan #bottom
    • Selesai dan Simpan.

    Berikut Ini adalah CONTOH Gambarnya

    URL: http://sites.google.com/site/ruangsc/imgsb/arrow-up.gif
    URL: http://sites.google.com/site/ruangsc/imgsb/arrow-down.gif
    URL: http://sites.google.com/site/ruangsc/imgsb/keatas.png
    URL: http://sites.google.com/site/ruangsc/imgsb/kebawah.png
    URL : http://sites.google.com/site/ruangsc/imgsb/scrolltop.png
    URL : http://sites.google.com/site/ruangsc/imgsb/scrolldown.png
    diambil dari Blog Kang Enes
Read more »
Diposting oleh di Tidak ada komentar:
Label: , ,

Membuat Floating Image (Melayang)

Apa Float Image/gambar melayang? hehehehehehe... susah mau kasih definisi detailnya... coba perhatikan didalam blog ini, floating image adalah gambar kotak yang terletak dibawah display page halaman ini.

Lalu apa mamfaat dari adanya float image ini dan bagaimana cara membuatnya?
Mamfaatnya selain membuat tampilan blog kamu semakin keren, juga untuk menambahkan tautan (link) pada gambar tesebut sehingga jika gambar itu diklik akan langsung ke alamat yang dijadikan tautan.

Cara membuat float image ini juga cukup mudah, kamu bisa mengikuti langkah-langkah berikut:
  • Login pada akun BlogID anda.
  • Kemudian pilih Dashboard klik Tata Letak dan pilih Edit HTML.
  • Cari kode ]]></b:skin> dengan menekan Control + F setelah ketemu letakkan code dibawah ini di diatas ]]></b:skin>.
#gambar1 {
position:fixed; _position:absolute; top:0px; right:0px; clip:inherit; z-index:+1000;}
  • Kemudian Copy kan lagi kode dibawah ini diantara ... </head> dan <body> :
<div id="gambar1">
<a href="http://bloggerblogku.blogspot.com/2010/05/membuat-floating-image-melayang.html" target="_blank" title="Tips Membuat Floating Image">
<img border="0" src="http://s3.tinypic.com/32zovnl.jpg"/></a>
</div>
  • Jangan Lupa lakukan Preview dulu, setelah berhasil baru Simpan.

KETERANGAN:
Untuk Merubah Letak Gambar/Image
  1. TOP untuk ATAS BOTTOM untuk BAWAH LEFT untuk diKIRI RIGHT untuk diKANAN Warna biru adalah URL dari gambar/image atau tautan yang ingin anda tampilkan.
  2. Untuk Menampilkan Floting Image lebih dari 1 adalah dengan meng-kopi kode #gambar1 dst., lalu ubah menjadi gambar2. Kopikan pula kode <div id='gambar1'>
    dst., lalu ubah menjadi gambar2 dst.
  3. Float image ini juga bisa kamu mamfaatkan untuk memberi perintah ke atas dan ke bawah halaman blog.

    Alamat Gambar yang dapat kamu coba : Adiwidget
Dibawah ini gambar yang dapat dicoba (Klik untuk Melihat Previewnya)
# Kupu-kupu 1 URL: http://s3.tinypic.com/32zovnl.jpg
# Kupu-kupu 2 URL: http://s6.tinypic.com/j64bw7.jpg
# Kucing URL: http://s5.tinypic.com/67uxav.jpg
# Mickey Mouse URL: http://s3.tinypic.com/ou5ahd.jpg
# Soniclari URL: http://s6.tinypic.com/auyrgh.jpg
# The Pooh URL: http://s5.tinypic.com/2itlohw.jpg
# Bumi Kita URL: http://s6.tinypic.com/9h5t8p.jpg
# Save Our Planet 1 URL: http://s6.tinypic.com/23sbwv7.jpg
# Save Our Planet 2 URL: http://s6.tinypic.com/1zf4yv8.jpg
Read more »
Diposting oleh di 2 komentar:
Label: , ,

Pasang Widget Kode Warna di Blog

Kode warna, pasti sobat yang masih suka utak-atik template blogger bakal sering dihadapkan dengan ini. Saya sudah buat posting khusus untuk memilih kode warna untuk kebutuhan desain template. Nah, barangkali ada sobat yang tertarik untuk memasang widget kode warna pada blognya. Namun, sedikit banyak script CSS kode warna ini akan mempengaruhi kecepatan loading blog. Agar loading blog cepat, silahkan baca CSS Compressor. Jika tertarik ingin memasang kode warna pada blog, silahkan ikuti langkah berikut ini.

Cara pasang widget kode warna pada blogger

Langkah Pertama
  1. Login ke blogger dengan id anda
  2. Klik menu Tata Letak
  3. Pada tab menu klik Edit HTML
  4. Silahkan Backup dulu template anda dengan klik Download Template Lengkap
  5. Sekarang cari kode </head>. Jika sudah ketemu, copy lalu paste kode berikut di atas kode </head>
    6. <script language='javascript'> function Barva(koda) { document.getElementById("vzorec").bgColor=koda; document.hcc.barva.value=koda.toUpperCase(); document.hcc.barva.select(); } function BarvaDruga(koda) { document.getElementById("vzorec2").bgColor=koda; document.hcc.Barva2.value=koda.toUpperCase(); document.hcc.Barva2.select(); } </script> <script type='text/javascript'> var hue; var picker; //var gLogger; var dd1, dd2; var r, g, b; function init() { if (typeof(ygLogger) != "undefined") ygLogger.init(document.getElementById("logDiv")); pickerInit(); //ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1" //ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1" } // Picker --------------------------------------------------------- function pickerInit() { hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180); hue.onChange = function(newVal) { hueUpdate(newVal); }; picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180); picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); }; hueUpdate(); dd1 = new YAHOO.util.DD("pickerPanel"); dd1.setHandleElId("pickerHandle"); dd1.endDrag = function(e) { // picker.thumb.resetConstraints(); // hue.thumb.resetConstraints(); }; } executeonload(init); function pickerUpdate(newX, newY) { pickerSwatchUpdate(); } function hueUpdate(newVal) { var h = (180 - hue.getValue()) / 180; if (h == 1) { h = 0; } var a = YAHOO.util.Color.hsv2rgb( h, 1, 1); document.getElementById("pickerDiv").style.backgroundColor = "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")"; pickerSwatchUpdate(); } function pickerSwatchUpdate() { var h = (180 - hue.getValue()); if (h == 180) { h = 0; } document.getElementById("pickerhval").value = (h*2); h = h / 180; var s = picker.getXValue() / 180; document.getElementById("pickersval").value = Math.round(s * 100); var v = (180 - picker.getYValue()) / 180; document.getElementById("pickervval").value = Math.round(v * 100); var a = YAHOO.util.Color.hsv2rgb( h, s, v ); document.getElementById("pickerSwatch").style.backgroundColor = "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")"; document.getElementById("pickerrval").value = a[0]; document.getElementById("pickergval").value = a[1]; document.getElementById("pickerbval").value = a[2]; var hexvalue = document.getElementById("pickerhexval").value ='#'+ YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]); ddcolorposter.initialize(a[0], a[1], a[2], hexvalue) if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select(); } </script><!--[if gte IE 5.5000]> <script type="text/javascript"> function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher. { for(var i=0; i<document.images.length; i++) { var img = document.images[i] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + img.style.cssText if (img.align == "left") imgStyle = "float:left;" + imgStyle if (img.align == "right") imgStyle = "float:right;" + imgStyle if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" img.outerHTML = strNewHTML i = i-1 } } } YAHOO.util.Event.addListener(window, "load", correctPNG); </script> <![endif]-->
    Selesai
    Langkah Kedua : Berikutnya, memasang tabel kode warna pada blog. Ada dua pilihan, pertama dipasang sebagai posting blog dan yang kedua dipasang pada halaman utama (homepage) blog. Nah, kode untuk tabel kode warna yang akan dipasang adalah berikut ini :
    Kode Warna :
    </div><center><form name="hcc" id="hcc"> <table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody><tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808"> </td><td onclick="Barva(this.bgColor)" bgcolor="#b40404"> </td><td onclick="Barva(this.bgColor)" bgcolor="#df0101"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f78181"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#61380b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08"> </td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04"> </td><td onclick="Barva(this.bgColor)" bgcolor="#df7401"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#faac58"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907"> </td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#868a08"> </td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404"> </td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907"> </td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#38610b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08"> </td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404"> </td><td onclick="Barva(this.bgColor)" bgcolor="#74df00"> </td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00"> </td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58"> </td><td onclick="Barva(this.bgColor)" bgcolor="#bef781"> </td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#088a08"> </td><td onclick="Barva(this.bgColor)" bgcolor="#04b404"> </td><td onclick="Barva(this.bgColor)" bgcolor="#01df01"> </td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58"> </td><td onclick="Barva(this.bgColor)" bgcolor="#81f781"> </td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9"> </td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0"> </td><td onclick="Barva(this.bgColor)" bgcolor="#effbef"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138"> </td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f"> </td><td onclick="Barva(this.bgColor)" bgcolor="#01df74"> </td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#58faac"> </td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be"> </td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0"> </td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec"> </td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#088a85"> </td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae"> </td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4"> </td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3"> </td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2"> </td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861"> </td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0174df"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe"> </td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa"> </td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5"> </td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8"> </td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61"> </td><td onclick="Barva(this.bgColor)" bgcolor="#08088a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0101df"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe"> </td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa"> </td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5"> </td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8"> </td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719"> </td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#380b61"> </td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4"> </td><td onclick="Barva(this.bgColor)" bgcolor="#7401df"> </td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff"> </td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa"> </td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb"> </td></tr><tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29"> </td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39"> </td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886"> </td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae"> </td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24"> </td><td onclick="Barva(this.bgColor)" bgcolor="#610b38"> </td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f"> </td><td onclick="Barva(this.bgColor)" bgcolor="#df0174"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f781be"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#151515"> </td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#424242"> </td><td onclick="Barva(this.bgColor)" bgcolor="#585858"> </td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#848484"> </td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4"> </td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd"> </td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff"> </td></tr></tbody></table></td></tr></tbody></table><table align="center" border="0" cellpadding="0" cellspacing="2"><tbody><tr height="24"><td id="vzorec" height="24" width="24"> </td><td valign="bottom"><p>Kode warna : <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p></td></tr></tbody></table> </form></center>
    Cara pasang kode warna sebagai posting blog :
    • Yang pasti, anda buat posting baru terlebih dahulu
    • Copy lalu paste Kode Warna tersebut pada posting anda
    • Berikan judul posting yang sesuai
    • Jangan lupa untuk memberi label posting
    • Kemudian terbitkan postingan
    • Selesai
    Cara pasang kode warna di halaman utama (homepage) blog :
    • Masuk ke menu Elemen Halaman
    • Klik Tambah Gadget
    • Pilih tambahkan HTML/JavaScript
    • Copy lalu paste Kode Warna tersebut di dalamnya.
    • Berikan judul atau nama gadget
    • Klik tombol Simpan
    • Silahkan tempatkan gadget kode warna dengan men-drag ke tempat yang sesuai
    • Klik tombol Simpan
    • Selesai
    Sekarang widget kode warna sudah hadir di blog anda. Selamat mencoba dan mudah-mudahan bermanfaat.
Read more »
Diposting oleh di Tidak ada komentar:
Label: , , , ,

Cara Pasang Iklan di Posting

Bagaimana cara memasang iklan di posting?
Sebenarnya ada beberapa cara yang dapat dilakukan misalkan menanamkan langsung code script ke posting baik itu di awal posting ataupun dibawah posting, namun cara ini tentunya sangat merepotkan karena setiap posting kita disibukkan untuk meng copas code script iklan tersebut. Berikut ini adalah cara yang lebih efektif untuk menanamkan iklan kedalam posting dan otomatis muncul pada setiap posting secara otomatis tanpa harus meng kopas kode script ke dalam posting.
  1. Siapkan Code Script Iklan yang akan dipakai (PPC/Adsense)
  2. Parse /Encode Code tersebut dengan program HTML Encode
  3. Login ke account blogger ANDA
  4. Klik Layout - Edit HTML
  5. Jangan Lupa centang Expand Widget Templates
  6. Cari tag post.body (dengan F3 atau Ctrl+F)
  7. Copy Paste Code Scrip iklan yang tadi sudah di Parse/Encoding diatas atau dibawah tag post.body. Diatas: iklan akan tampil diatas posting Dibawah : iklan akan tampil dibawah posting.
  8. Oya...awali dengan <p&gt; dan akhiri dengan </p>, maksudnya supaya ada alinea paragram baru untuk space iklan.
  9. Klik SAVE TEMPLATE dan Selesai...
Selamat Mencoba Mudah-Mudahan Bermanfaat



Read more »
Diposting oleh di 2 komentar:
Label: ,

Membuat Link Banner

Link Banner adalah sebuah banner atau image yang mewakili identitas blogger. Sebenarnya tidak harus memiliki Link Banner, namun dengan memiliki LinkBanner akan tampak lebih menarik. Untuk membuat Link Banner kita harus mempersiapkan :
  1. Memiliki gambar banner yang tersimpan dalam sebuah situs penyimpan foto/gambar (image hosting).
  2. Membuat Gambar Banner, bisa memakai aplikasi CorelDraw, Photoshop, atau aplikasi lain atau dapat juga membuatnya melalui situs CoolText, Da Button Factory, dan lain-lain
Berikut ini ada code script untuk membuat kotak LINK BANNER : (copas aja)

Sedangkan untuk menampilkan previewnya


Condoh hasilnya dapat dilihat di DEMO
Keterangan :
  • URL Situs : Situs Blog ANDA
  • Keterangan Situs : Deskripsi Situs ANDA
  • Nama Situs : Nama Blog ANDA
  • Url Gambar Banner : Image yang disimpan di Image Hosting ANDA yang akan dijadikan Banner

Mudah kan????
diambil dari Blog Tutorial
Read more »
Diposting oleh di Tidak ada komentar:
Label: ,

Memunculkan Status YM di Blog

Untuk Memunculkan status offline/online Yahoo Messeger tidaklah sulit, ikuti copy Scrip dibawah ini :
<a href="ymsgr:sendIM?ID YM ANDA"></a><a href="ymsgr:sendIM?ID YM ANDA"><img style="width: 80%; height: 25px;" src="http://opi.yahoo.com/online?u=ID YM ANDA&m=g&t=2&1=us" /></a>
Keterangan :

Yang Berwarna Merah Dapat dirubah ID YM ANDA dan angka 2 adalah image yang muncul adalah gambar image no.2

Contoh Status YM Saya :
<a href="ymsgr:sendIM?qcux80"></a><a href="ymsgr:sendIM?qcux80"><img style="width: 100px; height: 25px;" src="http://opi.yahoo.com/online?u=qcux80&amp;m=g&amp;t=2&amp;1=us" /></a>
Maka Tampilan yang muncul :

Dengan Kode 2


Dengan Kode 1


Dengan Kode 3


Dengan Kode 4


Dengan Kode 5

dan lain sebagainya, anda tinggal mengganti kode angkanya...
Semoga berguna

Read more »
Diposting oleh di Tidak ada komentar:
Label: ,

Menghilangkan Judul Blog

Mungkin dalam suatu waktu kita ingin menghilangkan judul blog untuk dipasang gambar atau apapun yang diinginkan. Untuk menghilangkan "Judul di Blog" Ikuti Caranya berikut ini :

Masuk Ke Tata Letak--> HTML lalu cari kode yang mirip dibawah :
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: normal normal 200% Georgia, Serif;
}
Sisipkan kode visibility:hidden; dan jadinya seperti di bawah ini :
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: normal normal 200% Georgia, Serif;
visibility:hidden;
}
Selesai... Save Template dan Lihat Hasilnya! Just Simple
Read more »
Diposting oleh di Tidak ada komentar:
Label: ,

Membuat Efek Membesar dan Berpijar pada Link

Satu Lagi Trik untuk mempercantik Blog, yaitu memperbesar dan ada efek berpijar pada Tulisan Link yang ditunjuk. Caranya :
  1. Login dahulu ke Akun blogger
  2. Buka tata letak/Layout
  3. Edit html
  4. Expand template widget
Cari aja kode yang ini :
/* global link attributes */ a {color: $mainLinkColor; text-decoration: underline;} a:hover {color: $mainHoverLinkColor; text-decoration: underline;} a:visited {color: $mainVisitedLinkColor; text-decoration: underline;} a:hover {
kemudian tambahkan kode ini
color: #000fff; text-transform: uppercase; font-weight: bolder; font-size: 15px; background-image: url(http://i909.photobucket.com/albums/ac297/heryymanjala/th_stars1.gif); }
Sehingga keseluruhannya menjadi :
/* global link attributes */
a {color: $mainLinkColor; text-decoration: underline;}
a:hover {color: $mainHoverLinkColor; text-decoration: underline;}
a:visited {color: $mainVisitedLinkColor; text-decoration: underline;}
a:hover {
color: #000fff; text-transform: uppercase; font-weight: bolder; font-size: 15px; background-image: url(http://i909.photobucket.com/albums/ac297/heryymanjala/th_stars1.gif); }
Oya sebelum di simpan (simpan template) ada baiknya di pratinjau dulu siapa tau ada error... setelah semua beres baru deh di simpan dan lihat hasilnya.

Selamat Mencoba!
Read more »
Diposting oleh di Tidak ada komentar:
Label: , ,

Memasang Widget Google Translate 1

Memasang translete pada blog sangat perlu karena mungkin saja ada pengunjung dari negara asing yang nyasar keblog anda, tapi yang harus diperhatikan agar tidak terjadi kesalahan translate maka blog anda harus menggunakan bahasa yang resmi, bukan bahasa pasaran atau gaul.
Nah caranya:
  1. Seperti biasa sign in dulu ke blogger.
  2. Masuk/ klik tombol layout/ tataletak.
  3. Klik tombol elemen halaman/ page elemen=>tambah gadget=>HTML/ Java script.
  4. Beri nama/ isi titel dengan kalimat translate atau dengan kalimat yang anda sukai. Kemudian Copi kode berikut dan paste dikolom HTML/ Java Script.

Susunan Translate 2 Baris
Maka Hasilnya akan Seperti :
Mau Seperti Ini?
Arabic Korean Japanese Chinese Simplified Russian Portuguese
English French German Spain Italian Dutch


Susunan Translate 3 Baris
Hasilnya Seperti :
Mau Seperti Ini?
Arabic Korean Japanese Chinese Simplified
Russian Portuguese English French
German Spain Italian Dutch


Susunan Translate 4 Baris
Maka Hasilnya Seperti :

Arabic Korean Japanese
Chinese SimplifiedRussian Portuguese
English French German
Spain Italian Dutch


Pilih yang sesuai dengan kondisi template Anda!
Selamat Mencoba...!

Read more »
Diposting oleh di Tidak ada komentar:
Label: , ,
Langganan: Postingan (Atom)