WORK ART WIGDEGRAF

Mempercepat Koneksi Internet

Mempercepat Koneksi Internet

Dari kemarin M.A telah bahas tutorial blogspot dan supaya tidak terlalu monoton maka pada kali ini M.A akan bahas artikel lain yang tidak kalah menariknya dari artikel lainnya.
Bila dahulu M.A telah membahas Trik Mempercepat Internet maka pada kali ini M.A akan menggulas kembali beberapa sofware yang di claim mampu meningkatkan koneksi internet.

Sofware Onspeed 6.0.9 bisa meningkatkan speed internet anda hingga 10x lipat. Untuk Dial-up bisa bertambah sampai 10x lipat, Broadband 5x lipat, Modem Hp 8x lipat. Tiap PC maupun Koneksi Mobile yang anda gunakan pasti akan berbeda-beda hasilnya, karena itu saya sarankan untuk langsung mencobanya sendiri.

Dibawah ini M.A berikan beberapa link untuk anda download. Pilih saja salah satu diantaranya.
Sofware Onspeed 6.0.9
Download 1, Download 2,

Selain sofware diatas M.A masih punya koleksi yang lainnya yang bisa digunakan untuk mempercepat koneksi internet anda. Silakan download sofware dibawah ini.

1. Internet Turbo ► DownloadUntuk mempercepat koneksi internet anda

2. CFosSpeed ► Download
Sofware ini cocok sekali untuk anda yang koneksinya lambat

3. Dsl Speed ► DownloadMemepercepat Koneksi Dsl anda

4. Flash Speed 200% ►Download
Untuk mengoptimalkan koneksi internet anda hingga 200%

5. Internet Turbo ► Download
Untuk meningkatkan kecepatan internet anda

6. Modem Boster ► Download

7. Firefox Ultimate Optimizer ► DownloadUntuk mengoptimalkan kinerja browser firefox

8. Fasterfox ► Download
Add-ons untuk browser firefox

9. Full Speed 2.7 ► Download
Untuk meningkatkan kecepatan internet anda

10. Google Web Accelerator ►Download
Untuk menghemat waktu browsing

Selamat Mencoba

Mempercepat Koneksi Internet

Dari kemarin M.A telah bahas tutorial blogspot dan supaya tidak terlalu monoton maka pada kali ini M.A akan bahas artikel lain yang tidak kalah menariknya dari artikel lainnya.
Bila dahulu M.A telah membahas Trik Mempercepat Internet maka pada kali ini M.A akan menggulas kembali beberapa sofware yang di claim mampu meningkatkan koneksi internet.

Sofware Onspeed 6.0.9 bisa meningkatkan speed internet anda hingga 10x lipat. Untuk Dial-up bisa bertambah sampai 10x lipat, Broadband 5x lipat, Modem Hp 8x lipat. Tiap PC maupun Koneksi Mobile yang anda gunakan pasti akan berbeda-beda hasilnya, karena itu saya sarankan untuk langsung mencobanya sendiri.

Dibawah ini M.A berikan beberapa link untuk anda download. Pilih saja salah satu diantaranya.
Sofware Onspeed 6.0.9
Download 1, Download 2,

Selain sofware diatas M.A masih punya koleksi yang lainnya yang bisa digunakan untuk mempercepat koneksi internet anda. Silakan download sofware dibawah ini.

1. Internet Turbo ► DownloadUntuk mempercepat koneksi internet anda

2. CFosSpeed ► Download
Sofware ini cocok sekali untuk anda yang koneksinya lambat

3. Dsl Speed ► DownloadMemepercepat Koneksi Dsl anda

4. Flash Speed 200% ►Download
Untuk mengoptimalkan koneksi internet anda hingga 200%

5. Internet Turbo ► Download
Untuk meningkatkan kecepatan internet anda

6. Modem Boster ► Download

7. Firefox Ultimate Optimizer ► DownloadUntuk mengoptimalkan kinerja browser firefox

8. Fasterfox ► Download
Add-ons untuk browser firefox

9. Full Speed 2.7 ► Download
Untuk meningkatkan kecepatan internet anda

10. Google Web Accelerator ►Download
Untuk menghemat waktu browsing

Selamat Mencoba

Mempercepat Koneksi Internet

Dari kemarin M.A telah bahas tutorial blogspot dan supaya tidak terlalu monoton maka pada kali ini M.A akan bahas artikel lain yang tidak kalah menariknya dari artikel lainnya.
Bila dahulu M.A telah membahas Trik Mempercepat Internet maka pada kali ini M.A akan menggulas kembali beberapa sofware yang di claim mampu meningkatkan koneksi internet.

Sofware Onspeed 6.0.9 bisa meningkatkan speed internet anda hingga 10x lipat. Untuk Dial-up bisa bertambah sampai 10x lipat, Broadband 5x lipat, Modem Hp 8x lipat. Tiap PC maupun Koneksi Mobile yang anda gunakan pasti akan berbeda-beda hasilnya, karena itu saya sarankan untuk langsung mencobanya sendiri.

Dibawah ini M.A berikan beberapa link untuk anda download. Pilih saja salah satu diantaranya.
Sofware Onspeed 6.0.9
Download 1, Download 2,

Selain sofware diatas M.A masih punya koleksi yang lainnya yang bisa digunakan untuk mempercepat koneksi internet anda. Silakan download sofware dibawah ini.

1. Internet Turbo ► DownloadUntuk mempercepat koneksi internet anda

2. CFosSpeed ► Download
Sofware ini cocok sekali untuk anda yang koneksinya lambat

3. Dsl Speed ► DownloadMemepercepat Koneksi Dsl anda

4. Flash Speed 200% ►Download
Untuk mengoptimalkan koneksi internet anda hingga 200%

5. Internet Turbo ► Download
Untuk meningkatkan kecepatan internet anda

6. Modem Boster ► Download

7. Firefox Ultimate Optimizer ► DownloadUntuk mengoptimalkan kinerja browser firefox

8. Fasterfox ► Download
Add-ons untuk browser firefox

9. Full Speed 2.7 ► Download
Untuk meningkatkan kecepatan internet anda

10. Google Web Accelerator ►Download
Untuk menghemat waktu browsing

Selamat Mencoba

Dari kemarin M.A telah bahas tutorial blogspot dan supaya tidak terlalu monoton maka pada kali ini M.A akan bahas artikel lain yang tidak kalah menariknya dari artikel lainnya.
Bila dahulu M.A telah membahas Trik Mempercepat Internet maka pada kali ini M.A akan menggulas kembali beberapa sofware yang di claim mampu meningkatkan koneksi internet.

Sofware Onspeed 6.0.9 bisa meningkatkan speed internet anda hingga 10x lipat. Untuk Dial-up bisa bertambah sampai 10x lipat, Broadband 5x lipat, Modem Hp 8x lipat. Tiap PC maupun Koneksi Mobile yang anda gunakan pasti akan berbeda-beda hasilnya, karena itu saya sarankan untuk langsung mencobanya sendiri.

Dibawah ini M.A berikan beberapa link untuk anda download. Pilih saja salah satu diantaranya.
Sofware Onspeed 6.0.9
Download 1, Download 2,

Selain sofware diatas M.A masih punya koleksi yang lainnya yang bisa digunakan untuk mempercepat koneksi internet anda. Silakan download sofware dibawah ini.

1. Internet Turbo ► DownloadUntuk mempercepat koneksi internet anda

2. CFosSpeed ► Download
Sofware ini cocok sekali untuk anda yang koneksinya lambat

3. Dsl Speed ► DownloadMemepercepat Koneksi Dsl anda

4. Flash Speed 200% ►Download
Untuk mengoptimalkan koneksi internet anda hingga 200%

5. Internet Turbo ► Download
Untuk meningkatkan kecepatan internet anda

6. Modem Boster ► Download

7. Firefox Ultimate Optimizer ► DownloadUntuk mengoptimalkan kinerja browser firefox

8. Fasterfox ► Download
Add-ons untuk browser firefox

9. Full Speed 2.7 ► Download
Untuk meningkatkan kecepatan internet anda

10. Google Web Accelerator ►Download
Untuk menghemat waktu browsing

Selamat Mencoba

WORK ART WIGDEGRAF

A

A

Ringkasan ini tidak tersedia. Harap klik di sini untuk melihat postingan.

Ringkasan ini tidak tersedia. Harap klik di sini untuk melihat postingan.

Read More Versi baru

Bagi para sobat yang gemar menyingkat artikel dengan fasilitas Read more atau Baca selengkapnya seperti yang telah saya terangkan pada artikel terdahulu, Sekarang ada cara membuat menu Read more yang saya sebut dengan Read more versi baru. Kenapa demikian? karena menu Read more kali ini sedikit berbeda dengan yang saya terangkan pada artikel yang telah lalu.

Fasilitas Read more kali ini di buat oleh Ramani dan Hans. Kelebihannya yaitu ketika pembaca mengklik link Read more, maka keseluruhan artikel bisa terbuka tanpa harus me-loading ulang yang terkadang membuat BT pembaca yang koneksi internetnya rada lelet ( jadi malu, padahal blog saya berat banget untuk di loading), selain itu untuk artikel yang pendek, tulisan readmore nya bisa di hapus sehingga tidak mengganggu pemandangan seperti yang di keluhkan sobat yuki beberapa waktu lalu yang merasa terganggu karena tulisan readmore selalu muncul walaupun pada artikel yang pendek.

Tapi sayang kode-kode berikut ini hanya berlaku bagi sobat yang memakai template baru saja dan untuk yang memakai template klasik saya ucapkan Kaciaaaaaan deeeeehhh (padahal blog ini pun pake template klasik jadi ga bisa pake ini).

Untuk menyingkat tulisan agar tidak terlalu dipenuhi dengan intermezo yang sedikit membuat bete and ngeselin, langsung saja untuk membuat read more versi baru ini silahkan ikuti langkah-langkah berikut ini :

1. Sig in di blogger dengan id sobat
2. Klik menu layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template lengkap, silahkan save dulu template sobat, ini untuk mencegah resiko apabila terjadi kesalahan dalam melakukan kesalahan dalam proses editing template
5. Klik kotak kecil di samping tulisan Expand Template Widget, sekali lagi jangan lupa untuk memberi tanda centang dulu yah
6. Tunggu beberapa saat sampai proses selesai
7. Copy kode berikut, lalu paste tepat di atas kode </head>
<script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />
8. Tambahkan kode berikut pada kode template sobat, yang berwarna hitam adalah kode asli dari kode template dan yang berwarna merah adalah kode yang harus di tambahkan :
<h3 class='post-title'> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h3> </b:if> <div class='post-header-line-1'/> <div class='post-body' expr:id='"post-" + data:post.id'> <b:if cond='data:blog.pageType == "item"'> <p><data:post.body/></p> <b:else/> <style>#fullpost {display:none;}</style> <p><data:post.body/></p> <span id='showlink'> <p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p> </span> <span id='hidelink' style='display:none'> <p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan saja...</a></p> </span> <script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script> </b:if> <div style='clear: both;'/> <!-- clear for photos floats --> </div> </div> .... rest of template code ....
9. Klik tombol SIMPAN TEMPLATE

Langkah selanjutnya :

1. Klik menu Pengaturan
2. Klik menu Format
3. Copy kode berikut lalu paste pada kotak kosong yang berada di samping tulisan Template posting
<span id="fullpost"> </span>
4. Klik tombol Simpan Setting
5. Selesai.

Cara posting artikel :

Pada saat berada pada menu posting, pilih tombol yang Edit HTML jangan pilih yang tombol Compose, maka akan secara otomatis terlihat kode tadi di atas yaitu :


<span id="fullpost">



</span>


Simpan artikel yang mau di tampilkan di muka (ringkasannya) di atas kode <span id="fullpost">, dan sisa keseluruhan artikel di simpan sesudah kode <span id="fullpost"> dan sebelum kode </span>.


Untuk artikel yang pendek, sobat tinggal menghapus kode tadi dan nanti artikel muncul tanpa ada kode [+/-] Selengkapnya... dan [+/-] Ringkasan saja....

Untuk contoh nyata saya sudah membuat blog yang sudah memakai sistem ini, silahkan sobat klik tulisan [+/-] Readmore... untuk membuka keseluruhan artikel, dan klik tulisan [+/-] Summary only... Untuk melihat ringkasan artikel. Silahkan sobat klik di sini !.


Selamat mencoba !

Bagi para sobat yang gemar menyingkat artikel dengan fasilitas Read more atau Baca selengkapnya seperti yang telah saya terangkan pada artikel terdahulu, Sekarang ada cara membuat menu Read more yang saya sebut dengan Read more versi baru. Kenapa demikian? karena menu Read more kali ini sedikit berbeda dengan yang saya terangkan pada artikel yang telah lalu.

Fasilitas Read more kali ini di buat oleh Ramani dan Hans. Kelebihannya yaitu ketika pembaca mengklik link Read more, maka keseluruhan artikel bisa terbuka tanpa harus me-loading ulang yang terkadang membuat BT pembaca yang koneksi internetnya rada lelet ( jadi malu, padahal blog saya berat banget untuk di loading), selain itu untuk artikel yang pendek, tulisan readmore nya bisa di hapus sehingga tidak mengganggu pemandangan seperti yang di keluhkan sobat yuki beberapa waktu lalu yang merasa terganggu karena tulisan readmore selalu muncul walaupun pada artikel yang pendek.

Tapi sayang kode-kode berikut ini hanya berlaku bagi sobat yang memakai template baru saja dan untuk yang memakai template klasik saya ucapkan Kaciaaaaaan deeeeehhh (padahal blog ini pun pake template klasik jadi ga bisa pake ini).

Untuk menyingkat tulisan agar tidak terlalu dipenuhi dengan intermezo yang sedikit membuat bete and ngeselin, langsung saja untuk membuat read more versi baru ini silahkan ikuti langkah-langkah berikut ini :

1. Sig in di blogger dengan id sobat
2. Klik menu layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template lengkap, silahkan save dulu template sobat, ini untuk mencegah resiko apabila terjadi kesalahan dalam melakukan kesalahan dalam proses editing template
5. Klik kotak kecil di samping tulisan Expand Template Widget, sekali lagi jangan lupa untuk memberi tanda centang dulu yah
6. Tunggu beberapa saat sampai proses selesai
7. Copy kode berikut, lalu paste tepat di atas kode </head>
<script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />
8. Tambahkan kode berikut pada kode template sobat, yang berwarna hitam adalah kode asli dari kode template dan yang berwarna merah adalah kode yang harus di tambahkan :
<h3 class='post-title'> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h3> </b:if> <div class='post-header-line-1'/> <div class='post-body' expr:id='"post-" + data:post.id'> <b:if cond='data:blog.pageType == "item"'> <p><data:post.body/></p> <b:else/> <style>#fullpost {display:none;}</style> <p><data:post.body/></p> <span id='showlink'> <p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p> </span> <span id='hidelink' style='display:none'> <p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan saja...</a></p> </span> <script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script> </b:if> <div style='clear: both;'/> <!-- clear for photos floats --> </div> </div> .... rest of template code ....
9. Klik tombol SIMPAN TEMPLATE

Langkah selanjutnya :

1. Klik menu Pengaturan
2. Klik menu Format
3. Copy kode berikut lalu paste pada kotak kosong yang berada di samping tulisan Template posting
<span id="fullpost"> </span>
4. Klik tombol Simpan Setting
5. Selesai.

Cara posting artikel :

Pada saat berada pada menu posting, pilih tombol yang Edit HTML jangan pilih yang tombol Compose, maka akan secara otomatis terlihat kode tadi di atas yaitu :


<span id="fullpost">



</span>


Simpan artikel yang mau di tampilkan di muka (ringkasannya) di atas kode <span id="fullpost">, dan sisa keseluruhan artikel di simpan sesudah kode <span id="fullpost"> dan sebelum kode </span>.


Untuk artikel yang pendek, sobat tinggal menghapus kode tadi dan nanti artikel muncul tanpa ada kode [+/-] Selengkapnya... dan [+/-] Ringkasan saja....

Untuk contoh nyata saya sudah membuat blog yang sudah memakai sistem ini, silahkan sobat klik tulisan [+/-] Readmore... untuk membuka keseluruhan artikel, dan klik tulisan [+/-] Summary only... Untuk melihat ringkasan artikel. Silahkan sobat klik di sini !.


Selamat mencoba !

Tips Mengganti Background Blog

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

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

Mengganti Warna Background

Untuk template minima klasik :

1. Sign in
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data
5. Rubahlah kode warna asli template dengan kode warna yang sobat sukai (yang warna merah adalah kode yang harus di rubah) :
body { background:#fff; margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; } Misalkan jika ingin menjadi warna abu-abu terang, kodenya jadi seperti ini : body { background:#E7E3E3; margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; }
6. Klik tombol Pratinjau untuk melihat perubahan
7. Jika sudah OK, klik tombol Simpan Perubahan Template
8. Selesai.

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


Untuk template minima baru :

1. sign in
2. Klik menu Layout
3. Klik menu Fon dan Warna
4. Pada gambar teks area sebelah kiri, pilih yang Warna latar Belakang Halaman (biasanya yg pertama sih langsung ini, jadi tidak usah di pilih lagi)
5. Klik warna yang sobat sukai pada gambar warna-warna yang di tampilkan, lalu lihat perubahannya pada gambar di sebelah bawah
6. Jika merasa sudah cocok, klik tombol SIMPAN PERUBAHAN
7. Selesai.

Mudah bukan?

Mengganti Background Dengan Image

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

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

alamat gambarnya adalah

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

gambarnya seperti ini :



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

Untuk cara instalasinya, silahkan ikuti langkah-langkah berikut !

Untuk template minima klasik :

1. Sign in
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data
5. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :
body { background:#fff url('http://amen24.googlepages.com/pattern_096.gif'); margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; }
6. Klik tombol Pratinjau untuk melihat perubahan
7. Jika sudah OK, klik tombol Simpan Perubahan Template
8. Selesai.

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


Untuk template minima baru :

1. Sign in
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
5. Klik kotak kecil di samping tulisan Expand Template Widget
6. Tunggu beberapa saat sampai proses selesai
7. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :
body { background:$bgcolor url('http://amen24.googlepages.com/pattern_096.gif'); margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; }
8. Klik tombol Pratinjau untuk melihat perubahan
9. Bila sudah OK, klik tombol SIMPAN TEMPLATE
10. Selesai.

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

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


Selamat mencoba !

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

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

Mengganti Warna Background

Untuk template minima klasik :

1. Sign in
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data
5. Rubahlah kode warna asli template dengan kode warna yang sobat sukai (yang warna merah adalah kode yang harus di rubah) :
body { background:#fff; margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; } Misalkan jika ingin menjadi warna abu-abu terang, kodenya jadi seperti ini : body { background:#E7E3E3; margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; }
6. Klik tombol Pratinjau untuk melihat perubahan
7. Jika sudah OK, klik tombol Simpan Perubahan Template
8. Selesai.

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


Untuk template minima baru :

1. sign in
2. Klik menu Layout
3. Klik menu Fon dan Warna
4. Pada gambar teks area sebelah kiri, pilih yang Warna latar Belakang Halaman (biasanya yg pertama sih langsung ini, jadi tidak usah di pilih lagi)
5. Klik warna yang sobat sukai pada gambar warna-warna yang di tampilkan, lalu lihat perubahannya pada gambar di sebelah bawah
6. Jika merasa sudah cocok, klik tombol SIMPAN PERUBAHAN
7. Selesai.

Mudah bukan?

Mengganti Background Dengan Image

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

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

alamat gambarnya adalah

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

gambarnya seperti ini :



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

Untuk cara instalasinya, silahkan ikuti langkah-langkah berikut !

Untuk template minima klasik :

1. Sign in
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data
5. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :
body { background:#fff url('http://amen24.googlepages.com/pattern_096.gif'); margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; }
6. Klik tombol Pratinjau untuk melihat perubahan
7. Jika sudah OK, klik tombol Simpan Perubahan Template
8. Selesai.

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


Untuk template minima baru :

1. Sign in
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
5. Klik kotak kecil di samping tulisan Expand Template Widget
6. Tunggu beberapa saat sampai proses selesai
7. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :
body { background:$bgcolor url('http://amen24.googlepages.com/pattern_096.gif'); margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; }
8. Klik tombol Pratinjau untuk melihat perubahan
9. Bila sudah OK, klik tombol SIMPAN TEMPLATE
10. Selesai.

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

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


Selamat mencoba !

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 !

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 !

Tips Mengganti Background Blog

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

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

Mengganti Warna Background

Untuk template minima klasik :

1. Sign in
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data
5. Rubahlah kode warna asli template dengan kode warna yang sobat sukai (yang warna merah adalah kode yang harus di rubah) :
body { background:#fff; margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; } Misalkan jika ingin menjadi warna abu-abu terang, kodenya jadi seperti ini : body { background:#E7E3E3; margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; }
6. Klik tombol Pratinjau untuk melihat perubahan
7. Jika sudah OK, klik tombol Simpan Perubahan Template
8. Selesai.

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


Untuk template minima baru :

1. sign in
2. Klik menu Layout
3. Klik menu Fon dan Warna
4. Pada gambar teks area sebelah kiri, pilih yang Warna latar Belakang Halaman (biasanya yg pertama sih langsung ini, jadi tidak usah di pilih lagi)
5. Klik warna yang sobat sukai pada gambar warna-warna yang di tampilkan, lalu lihat perubahannya pada gambar di sebelah bawah
6. Jika merasa sudah cocok, klik tombol SIMPAN PERUBAHAN
7. Selesai.

Mudah bukan?

Mengganti Background Dengan Image

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

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

alamat gambarnya adalah

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

gambarnya seperti ini :



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

Untuk cara instalasinya, silahkan ikuti langkah-langkah berikut !

Untuk template minima klasik :

1. Sign in
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data
5. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :
body { background:#fff url('http://amen24.googlepages.com/pattern_096.gif'); margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; }
6. Klik tombol Pratinjau untuk melihat perubahan
7. Jika sudah OK, klik tombol Simpan Perubahan Template
8. Selesai.

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


Untuk template minima baru :

1. Sign in
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
5. Klik kotak kecil di samping tulisan Expand Template Widget
6. Tunggu beberapa saat sampai proses selesai
7. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :
body { background:$bgcolor url('http://amen24.googlepages.com/pattern_096.gif'); margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; }
8. Klik tombol Pratinjau untuk melihat perubahan
9. Bila sudah OK, klik tombol SIMPAN TEMPLATE
10. Selesai.

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

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


Selamat mencoba !

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

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

Mengganti Warna Background

Untuk template minima klasik :

1. Sign in
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data
5. Rubahlah kode warna asli template dengan kode warna yang sobat sukai (yang warna merah adalah kode yang harus di rubah) :
body { background:#fff; margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; } Misalkan jika ingin menjadi warna abu-abu terang, kodenya jadi seperti ini : body { background:#E7E3E3; margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; }
6. Klik tombol Pratinjau untuk melihat perubahan
7. Jika sudah OK, klik tombol Simpan Perubahan Template
8. Selesai.

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


Untuk template minima baru :

1. sign in
2. Klik menu Layout
3. Klik menu Fon dan Warna
4. Pada gambar teks area sebelah kiri, pilih yang Warna latar Belakang Halaman (biasanya yg pertama sih langsung ini, jadi tidak usah di pilih lagi)
5. Klik warna yang sobat sukai pada gambar warna-warna yang di tampilkan, lalu lihat perubahannya pada gambar di sebelah bawah
6. Jika merasa sudah cocok, klik tombol SIMPAN PERUBAHAN
7. Selesai.

Mudah bukan?

Mengganti Background Dengan Image

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

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

alamat gambarnya adalah

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

gambarnya seperti ini :



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

Untuk cara instalasinya, silahkan ikuti langkah-langkah berikut !

Untuk template minima klasik :

1. Sign in
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data
5. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :
body { background:#fff url('http://amen24.googlepages.com/pattern_096.gif'); margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; }
6. Klik tombol Pratinjau untuk melihat perubahan
7. Jika sudah OK, klik tombol Simpan Perubahan Template
8. Selesai.

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


Untuk template minima baru :

1. Sign in
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
5. Klik kotak kecil di samping tulisan Expand Template Widget
6. Tunggu beberapa saat sampai proses selesai
7. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :
body { background:$bgcolor url('http://amen24.googlepages.com/pattern_096.gif'); margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; }
8. Klik tombol Pratinjau untuk melihat perubahan
9. Bila sudah OK, klik tombol SIMPAN TEMPLATE
10. Selesai.

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

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


Selamat mencoba !

Read More Versi baru

Bagi para sobat yang gemar menyingkat artikel dengan fasilitas Read more atau Baca selengkapnya seperti yang telah saya terangkan pada artikel terdahulu, Sekarang ada cara membuat menu Read more yang saya sebut dengan Read more versi baru. Kenapa demikian? karena menu Read more kali ini sedikit berbeda dengan yang saya terangkan pada artikel yang telah lalu.

Fasilitas Read more kali ini di buat oleh Ramani dan Hans. Kelebihannya yaitu ketika pembaca mengklik link Read more, maka keseluruhan artikel bisa terbuka tanpa harus me-loading ulang yang terkadang membuat BT pembaca yang koneksi internetnya rada lelet ( jadi malu, padahal blog saya berat banget untuk di loading), selain itu untuk artikel yang pendek, tulisan readmore nya bisa di hapus sehingga tidak mengganggu pemandangan seperti yang di keluhkan sobat yuki beberapa waktu lalu yang merasa terganggu karena tulisan readmore selalu muncul walaupun pada artikel yang pendek.

Tapi sayang kode-kode berikut ini hanya berlaku bagi sobat yang memakai template baru saja dan untuk yang memakai template klasik saya ucapkan Kaciaaaaaan deeeeehhh (padahal blog ini pun pake template klasik jadi ga bisa pake ini).

Untuk menyingkat tulisan agar tidak terlalu dipenuhi dengan intermezo yang sedikit membuat bete and ngeselin, langsung saja untuk membuat read more versi baru ini silahkan ikuti langkah-langkah berikut ini :

1. Sig in di blogger dengan id sobat
2. Klik menu layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template lengkap, silahkan save dulu template sobat, ini untuk mencegah resiko apabila terjadi kesalahan dalam melakukan kesalahan dalam proses editing template
5. Klik kotak kecil di samping tulisan Expand Template Widget, sekali lagi jangan lupa untuk memberi tanda centang dulu yah
6. Tunggu beberapa saat sampai proses selesai
7. Copy kode berikut, lalu paste tepat di atas kode </head>
<script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />
8. Tambahkan kode berikut pada kode template sobat, yang berwarna hitam adalah kode asli dari kode template dan yang berwarna merah adalah kode yang harus di tambahkan :
<h3 class='post-title'> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h3> </b:if> <div class='post-header-line-1'/> <div class='post-body' expr:id='"post-" + data:post.id'> <b:if cond='data:blog.pageType == "item"'> <p><data:post.body/></p> <b:else/> <style>#fullpost {display:none;}</style> <p><data:post.body/></p> <span id='showlink'> <p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p> </span> <span id='hidelink' style='display:none'> <p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan saja...</a></p> </span> <script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script> </b:if> <div style='clear: both;'/> <!-- clear for photos floats --> </div> </div> .... rest of template code ....
9. Klik tombol SIMPAN TEMPLATE

Langkah selanjutnya :

1. Klik menu Pengaturan
2. Klik menu Format
3. Copy kode berikut lalu paste pada kotak kosong yang berada di samping tulisan Template posting
<span id="fullpost"> </span>
4. Klik tombol Simpan Setting
5. Selesai.

Cara posting artikel :

Pada saat berada pada menu posting, pilih tombol yang Edit HTML jangan pilih yang tombol Compose, maka akan secara otomatis terlihat kode tadi di atas yaitu :


<span id="fullpost">



</span>


Simpan artikel yang mau di tampilkan di muka (ringkasannya) di atas kode <span id="fullpost">, dan sisa keseluruhan artikel di simpan sesudah kode <span id="fullpost"> dan sebelum kode </span>.


Untuk artikel yang pendek, sobat tinggal menghapus kode tadi dan nanti artikel muncul tanpa ada kode [+/-] Selengkapnya... dan [+/-] Ringkasan saja....

Untuk contoh nyata saya sudah membuat blog yang sudah memakai sistem ini, silahkan sobat klik tulisan [+/-] Readmore... untuk membuka keseluruhan artikel, dan klik tulisan [+/-] Summary only... Untuk melihat ringkasan artikel. Silahkan sobat klik di sini !.


Selamat mencoba !

Bagi para sobat yang gemar menyingkat artikel dengan fasilitas Read more atau Baca selengkapnya seperti yang telah saya terangkan pada artikel terdahulu, Sekarang ada cara membuat menu Read more yang saya sebut dengan Read more versi baru. Kenapa demikian? karena menu Read more kali ini sedikit berbeda dengan yang saya terangkan pada artikel yang telah lalu.

Fasilitas Read more kali ini di buat oleh Ramani dan Hans. Kelebihannya yaitu ketika pembaca mengklik link Read more, maka keseluruhan artikel bisa terbuka tanpa harus me-loading ulang yang terkadang membuat BT pembaca yang koneksi internetnya rada lelet ( jadi malu, padahal blog saya berat banget untuk di loading), selain itu untuk artikel yang pendek, tulisan readmore nya bisa di hapus sehingga tidak mengganggu pemandangan seperti yang di keluhkan sobat yuki beberapa waktu lalu yang merasa terganggu karena tulisan readmore selalu muncul walaupun pada artikel yang pendek.

Tapi sayang kode-kode berikut ini hanya berlaku bagi sobat yang memakai template baru saja dan untuk yang memakai template klasik saya ucapkan Kaciaaaaaan deeeeehhh (padahal blog ini pun pake template klasik jadi ga bisa pake ini).

Untuk menyingkat tulisan agar tidak terlalu dipenuhi dengan intermezo yang sedikit membuat bete and ngeselin, langsung saja untuk membuat read more versi baru ini silahkan ikuti langkah-langkah berikut ini :

1. Sig in di blogger dengan id sobat
2. Klik menu layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template lengkap, silahkan save dulu template sobat, ini untuk mencegah resiko apabila terjadi kesalahan dalam melakukan kesalahan dalam proses editing template
5. Klik kotak kecil di samping tulisan Expand Template Widget, sekali lagi jangan lupa untuk memberi tanda centang dulu yah
6. Tunggu beberapa saat sampai proses selesai
7. Copy kode berikut, lalu paste tepat di atas kode </head>
<script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />
8. Tambahkan kode berikut pada kode template sobat, yang berwarna hitam adalah kode asli dari kode template dan yang berwarna merah adalah kode yang harus di tambahkan :
<h3 class='post-title'> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h3> </b:if> <div class='post-header-line-1'/> <div class='post-body' expr:id='"post-" + data:post.id'> <b:if cond='data:blog.pageType == "item"'> <p><data:post.body/></p> <b:else/> <style>#fullpost {display:none;}</style> <p><data:post.body/></p> <span id='showlink'> <p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p> </span> <span id='hidelink' style='display:none'> <p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan saja...</a></p> </span> <script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script> </b:if> <div style='clear: both;'/> <!-- clear for photos floats --> </div> </div> .... rest of template code ....
9. Klik tombol SIMPAN TEMPLATE

Langkah selanjutnya :

1. Klik menu Pengaturan
2. Klik menu Format
3. Copy kode berikut lalu paste pada kotak kosong yang berada di samping tulisan Template posting
<span id="fullpost"> </span>
4. Klik tombol Simpan Setting
5. Selesai.

Cara posting artikel :

Pada saat berada pada menu posting, pilih tombol yang Edit HTML jangan pilih yang tombol Compose, maka akan secara otomatis terlihat kode tadi di atas yaitu :


<span id="fullpost">



</span>


Simpan artikel yang mau di tampilkan di muka (ringkasannya) di atas kode <span id="fullpost">, dan sisa keseluruhan artikel di simpan sesudah kode <span id="fullpost"> dan sebelum kode </span>.


Untuk artikel yang pendek, sobat tinggal menghapus kode tadi dan nanti artikel muncul tanpa ada kode [+/-] Selengkapnya... dan [+/-] Ringkasan saja....

Untuk contoh nyata saya sudah membuat blog yang sudah memakai sistem ini, silahkan sobat klik tulisan [+/-] Readmore... untuk membuka keseluruhan artikel, dan klik tulisan [+/-] Summary only... Untuk melihat ringkasan artikel. Silahkan sobat klik di sini !.


Selamat mencoba !

Random Banner Header

 Menjawab pertanyaan mba Ati beberapa hari yang lalu yang di ajukan melalui shoutbox mengenai cara membuat random banner header atau gambar banner yang ada di header bisa bergantian atau berubah-berubah. Sepertinya memang lebih menarik apabila banner yang ada di header bisa bergantian sehingga suasana akan lebih fresh karena tidak monoton seperti blog saya ini , tapi tidak apa-apa, mungkin suatu hari nanti blog inipun headernya bisa bergantian .

Untuk membuat random banner ada beberapa langkah yang harus sobat lakukan, yaitu :

Langkah pertama

Langkah pertama yang harus dilakukan tentunya sobat wajib membuat beberapa banner, bisa tiga, empat, lima, dan seterusnya tergantung dari keinginan sobat. Untuk membuatnya sobat bisa menggunakan program-program semisal adobe photoshop atau coreldraw serta kawan-kawannya yang lain. Akan tetapi karena saya tidak terlalu mahir masalah program untuk desain gambar, maka tidak akan saya terangkan cara pembuatannya. Jika sobat ingin berkonsultasi mengenai program adobe photoshop, silahkan kunujungi http://jaloee.blogspot.com miliknya kang jaloee, beliau ini pakarnya kalau masalah photoshop.

langkah kedua

Langkah kedua yang harus dilakukan adalah mengupload banner-banner tersebut pada hosting tempat menyimpan gambar, saya ambil contoh www.photobucket.com untuk cara upload pada situs ini sudah saya terangkan pada postingan terdahulu, jika masih bingung silahkan klik di sini.

Jika proses upload selesai, copy URl address banner-banner tersebut lalu paste pada program notepad guna nanti untuk di masukan kedalam kode/script yang akan saya berikan.

Langkah ketiga

Langkah ketiga yaitu memasukan script kedalam kode template yang sobat miliki. Script dasarnya adalah :


<script type="text/javascript">
var banner= new Array()
banner[0]="bannerURL0"
banner[1]="bannerURL1"
banner[2]="bannerURL2"
banner[3]="bannerURL3"
banner[4]="bannerURL4"
banner[5]="bannerURL5"
banner[6]="bannerURL6"
banner[7]="bannerURL7"
banner[8]="bannerURL8"
banner[9]="bannerURL9"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>



Terlihat diatas bahwa jumlah banner yang diberikan adalah 10 buah, akan tetapi jumlah ini tidak mutlak yaitu berapa saja yang sobat inginkan yang penting pada kode var random=Mat. jumlahnya harus sesuai dengan jumlah banner.


Lagi-lagi karena template blogger ada dua yaitu template klasik dan template baru maka untuk menempatkan kode/script akan berbeda, Sehingga pembahasannya pun akan saya bagi menjadi dua bagian. Sebelumnya saya akan memberikan contoh kode yang memuat banner yang sudah saya upload dan masing-masing memiliki URL addres sebagai berikut :

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

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

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

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

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

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

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

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

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

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

dan contoh bannernya adalah sebagai berikut (gambar diperkecil) :























Contoh script dari banner-banner ini adalah :


<script type="text/javascript">
var banner= new Array()
banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif"
banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif"
banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif"
banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif"
banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif"
banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif"
banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif"
banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif"
banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif"
banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>



Jika script diatas tulisannya terlalu kecil silahkan klik di sini untuk melihat tulisan yang normal.


Untuk caranya silahkan ikuti langkah-langkah berikut ini.


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 berikut ini lalu paste di bawah kode <div id='header'> (biasanya)
<script type="text/javascript"> var banner= new Array() banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif" banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif" banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif" banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif" banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif" banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif" banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif" banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif" banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif" banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif" var random=Math.floor(10*Math.random()); document.write("<style>"); document.write("#header {"); document.write(' background:url("' + banner[random] + '") no-repeat top left;'); document.write(" }"); document.write("</style>"); </script>

Klik tombol Save Template Changes

Selesai.

Untuk Template baru

1. Sign in di blogger dengan id sobat
2. Klik menu layout
3. Klik menu Page Elements
4. Klik tulisan Add a Page Element
5. Klik tombol ADD TO BLOG di bawah tulisan HTML/JavaScript
6. Copy paste kode berikut kedalamnya
<script type="text/javascript"> var banner= new Array() banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif" banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif" banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif" banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif" banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif" banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif" banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif" banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif" banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif" banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif" var random=Math.floor(10*Math.random()); document.write("<style>"); document.write("#header {"); document.write(' background:url("' + banner[random] + '") no-repeat top left;'); document.write(" }"); document.write("</style>"); </script>
7. Klik tombol SAVE CHANGES
8. Selesai.

Sekedar tambahan (padahal masih banyak ), kode diatas adalah sekedar contoh, silahkan ganti address bannernya dengan yang di miliki sobat.

Mungkin ada beberapa template yang di pakai sobat saat ini banner headernya tidak sesuai dengan keinginan sobat, sebenarnya ukuran tersebut bisa kita ganti. Contoh untuk template minima sebagai berikut :


@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
}


Pada kode diatas terlihat bahwa untuk lebar banner header sebesar 660p(width:660px;), nilai tersebut bisa kita rubah sesuai dengan keinginan. Dan untuk tinggi dari banner header tidak di definisikan, nah agar banner kita sesuai dengan keinginan maka kita harus menyelipkan kode tambahan sebagai definisi, contoh lebar yang di inginkan adalah sebesar 150px, maka kode yang di tambahkan adalah height:150px; sehingga kode di atas menjadi seperti ini :


@media all {
#header {
width:660px;
height:150px;
margin:0 auto 10px;
border:1px solid #ccc;
}


Untuk masing-masing template tentunya akan sangat berbeda, akan tetapi untuk template milik blogger, biasanya untuk bagian header di beri nama #header.


Untuk melihat contoh nyata dari efek script diatas, saya sudah membuat satu blog sebagai percontohan, blog tersebut sudah di pasang 10 banner seperti yang saya terangkan di atas, untuk melihat perubahannya sobat harus mengklik susuatu agar layar browser menjadi berubah baru, saya beri contoh dengan mengklik judul arsip atau yang lainnya. Untu melihat contoh silahkan lihat di sini

Selamat mencoba !!!!

 Menjawab pertanyaan mba Ati beberapa hari yang lalu yang di ajukan melalui shoutbox mengenai cara membuat random banner header atau gambar banner yang ada di header bisa bergantian atau berubah-berubah. Sepertinya memang lebih menarik apabila banner yang ada di header bisa bergantian sehingga suasana akan lebih fresh karena tidak monoton seperti blog saya ini , tapi tidak apa-apa, mungkin suatu hari nanti blog inipun headernya bisa bergantian .

Untuk membuat random banner ada beberapa langkah yang harus sobat lakukan, yaitu :

Langkah pertama

Langkah pertama yang harus dilakukan tentunya sobat wajib membuat beberapa banner, bisa tiga, empat, lima, dan seterusnya tergantung dari keinginan sobat. Untuk membuatnya sobat bisa menggunakan program-program semisal adobe photoshop atau coreldraw serta kawan-kawannya yang lain. Akan tetapi karena saya tidak terlalu mahir masalah program untuk desain gambar, maka tidak akan saya terangkan cara pembuatannya. Jika sobat ingin berkonsultasi mengenai program adobe photoshop, silahkan kunujungi http://jaloee.blogspot.com miliknya kang jaloee, beliau ini pakarnya kalau masalah photoshop.

langkah kedua

Langkah kedua yang harus dilakukan adalah mengupload banner-banner tersebut pada hosting tempat menyimpan gambar, saya ambil contoh www.photobucket.com untuk cara upload pada situs ini sudah saya terangkan pada postingan terdahulu, jika masih bingung silahkan klik di sini.

Jika proses upload selesai, copy URl address banner-banner tersebut lalu paste pada program notepad guna nanti untuk di masukan kedalam kode/script yang akan saya berikan.

Langkah ketiga

Langkah ketiga yaitu memasukan script kedalam kode template yang sobat miliki. Script dasarnya adalah :


<script type="text/javascript">
var banner= new Array()
banner[0]="bannerURL0"
banner[1]="bannerURL1"
banner[2]="bannerURL2"
banner[3]="bannerURL3"
banner[4]="bannerURL4"
banner[5]="bannerURL5"
banner[6]="bannerURL6"
banner[7]="bannerURL7"
banner[8]="bannerURL8"
banner[9]="bannerURL9"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>



Terlihat diatas bahwa jumlah banner yang diberikan adalah 10 buah, akan tetapi jumlah ini tidak mutlak yaitu berapa saja yang sobat inginkan yang penting pada kode var random=Mat. jumlahnya harus sesuai dengan jumlah banner.


Lagi-lagi karena template blogger ada dua yaitu template klasik dan template baru maka untuk menempatkan kode/script akan berbeda, Sehingga pembahasannya pun akan saya bagi menjadi dua bagian. Sebelumnya saya akan memberikan contoh kode yang memuat banner yang sudah saya upload dan masing-masing memiliki URL addres sebagai berikut :

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

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

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

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

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

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

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

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

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

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

dan contoh bannernya adalah sebagai berikut (gambar diperkecil) :























Contoh script dari banner-banner ini adalah :


<script type="text/javascript">
var banner= new Array()
banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif"
banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif"
banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif"
banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif"
banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif"
banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif"
banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif"
banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif"
banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif"
banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>



Jika script diatas tulisannya terlalu kecil silahkan klik di sini untuk melihat tulisan yang normal.


Untuk caranya silahkan ikuti langkah-langkah berikut ini.


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 berikut ini lalu paste di bawah kode <div id='header'> (biasanya)
<script type="text/javascript"> var banner= new Array() banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif" banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif" banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif" banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif" banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif" banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif" banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif" banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif" banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif" banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif" var random=Math.floor(10*Math.random()); document.write("<style>"); document.write("#header {"); document.write(' background:url("' + banner[random] + '") no-repeat top left;'); document.write(" }"); document.write("</style>"); </script>

Klik tombol Save Template Changes

Selesai.

Untuk Template baru

1. Sign in di blogger dengan id sobat
2. Klik menu layout
3. Klik menu Page Elements
4. Klik tulisan Add a Page Element
5. Klik tombol ADD TO BLOG di bawah tulisan HTML/JavaScript
6. Copy paste kode berikut kedalamnya
<script type="text/javascript"> var banner= new Array() banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif" banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif" banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif" banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif" banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif" banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif" banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif" banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif" banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif" banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif" var random=Math.floor(10*Math.random()); document.write("<style>"); document.write("#header {"); document.write(' background:url("' + banner[random] + '") no-repeat top left;'); document.write(" }"); document.write("</style>"); </script>
7. Klik tombol SAVE CHANGES
8. Selesai.

Sekedar tambahan (padahal masih banyak ), kode diatas adalah sekedar contoh, silahkan ganti address bannernya dengan yang di miliki sobat.

Mungkin ada beberapa template yang di pakai sobat saat ini banner headernya tidak sesuai dengan keinginan sobat, sebenarnya ukuran tersebut bisa kita ganti. Contoh untuk template minima sebagai berikut :


@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
}


Pada kode diatas terlihat bahwa untuk lebar banner header sebesar 660p(width:660px;), nilai tersebut bisa kita rubah sesuai dengan keinginan. Dan untuk tinggi dari banner header tidak di definisikan, nah agar banner kita sesuai dengan keinginan maka kita harus menyelipkan kode tambahan sebagai definisi, contoh lebar yang di inginkan adalah sebesar 150px, maka kode yang di tambahkan adalah height:150px; sehingga kode di atas menjadi seperti ini :


@media all {
#header {
width:660px;
height:150px;
margin:0 auto 10px;
border:1px solid #ccc;
}


Untuk masing-masing template tentunya akan sangat berbeda, akan tetapi untuk template milik blogger, biasanya untuk bagian header di beri nama #header.


Untuk melihat contoh nyata dari efek script diatas, saya sudah membuat satu blog sebagai percontohan, blog tersebut sudah di pasang 10 banner seperti yang saya terangkan di atas, untuk melihat perubahannya sobat harus mengklik susuatu agar layar browser menjadi berubah baru, saya beri contoh dengan mengklik judul arsip atau yang lainnya. Untu melihat contoh silahkan lihat di sini

Selamat mencoba !!!!

Text Berjalan di Bar menu

Text Berjalan di Bar menu

Sobat Ochim beberapa hari yang lalu mengirimkan email kepada saya yang isinya menanyakan tentang cara membuat text berjalan yang ada pada bar menu bawah seperti halnya pada blog milik saya ini. Pertanyaan tersebut sudah saya jawab langsung melalui email juga dan sekarangpun pada saat artikel ini di buat, sobat Ochim sudah berhasil membuat bar menu blognya ada tulisan berjalan.

Seperti biasanya, jika ada pertanyaan melalui email maka jawaban dari pertanyaan tersebut akan saya posting melalui blog ini. Nah jika sobat sama-sama tertarik ingin membuat text berjalan tersebut, silahkan baca artikel ini sampai tuntas.

Karena template blogger terbagi menjadi dua yaitu template klasik dan template baru, maka untuk cara membuat text berjalan tersebutpun akan berbeda, oleh karenanya pembahasannya pun akan saya bagi menjadi dua bagian. Akan tetapi perlu saya sampaikan, contoh yang akan saya berikan kali ini hasilnya tidak persis seperti pada blog ini yaitu text berjalan dari arah kanan kekiri, akan tetapi saya akan memberi contoh text berjalan dari kiri ke arah kanan serta ada jeda waktu antara tulisan yang petama dengan yang kedua dan juga tulisan berikutnya.

Untuk template klasik silahkan ikuti langkah-langkah berikut ini :

1. Sign 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 berikut ini lalu paste di atas kode </head>
<script language='javascript'> message = "Tulis text pertama yang ingin muncul disini ^" + "Tulis text kedua disini ^" + "Tulis text ketiga disini ^" + "Tulis text keempat disini ^" scrollSpeed = 130 lineDelay = 0 // Do not change the text below // txt = "" function scrollText(pos) { if (message.charAt(pos) != '^') { txt = txt + message.charAt(pos) status = txt pauze = scrollSpeed } else { pauze = lineDelay txt = "" if (pos == message.length-1) pos = -1 } pos++ setTimeout("scrollText('"+pos+"')",pauze) } scrollText(0) </script>
6. Klik tombol Save Template Changes
7. Selesai.

Untuk template baru silahkan ikuti langkah-langkah berikut ini :

1. Sign in di blogger dengan id sobat
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template
5. Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang. Sekali lagi jangan lupa klik kotak kecil di samping tulisan Expand Widget Templates
6. Tunggu beberapa saat sampai proses selesai
7. Simpan kode berikut di bawah kode </body> , kode ini letaknya berada paling bawah sebelum kode </html>
<script language='javascript'> message = "Tulis text pertama yang ingin muncul disini ^" + "Tulis text kedua disini ^" + "Tulis text ketiga disini ^" + "Tulis text keempat disini ^" scrollSpeed = 130 lineDelay = 0 // Do not change the text below // txt = "" function scrollText(pos) { if (message.charAt(pos) != '^') { txt = txt + message.charAt(pos) status = txt pauze = scrollSpeed } else { pauze = lineDelay txt = "" if (pos == message.length-1) pos = -1 } pos++ setTimeout("scrollText('"+pos+"')",pauze) } scrollText(0) </script>
8. Klik tombol SAVE TEMPLATE
9. Selesai

sedikit clue, pada kode diatas ada tulisan yang saya buat merah, nah tulisan tersebut harus sobat ganti dengan tulisan yang sobat inginkan. contoh : selamat datang di blog saya. atau apa saja yang menurut sobat layak untuk di tulis di situ. contoh yang saya berikan diatas memuat pesan atau text sebanyak empat tulisan, jika sobat ingin lebih banyak itu bisa dilakukan dengan menambah baris tulisan seperti kode sebelumnya.Untuk kode --> scrollSpeed = 130 . angka "130" merupakan kecepatan dari text berjalan, semakin kecil nilainya semakin cepat text berjalan, dan semakin besar nilainya maka text akan semakin lambat. Silahkan sesuaikan dengan keinginan sobat.


Seperti yang saya katakan di awal artikel bahwa kode yang saya berikan di atas hasil efeknya tidak sama dengan yang ada di blog ini, untuk melihat hasil nyatanya, silahkan sobat klik di sini.

Selamat mencoba !!!

Text Berjalan di Bar menu

Sobat Ochim beberapa hari yang lalu mengirimkan email kepada saya yang isinya menanyakan tentang cara membuat text berjalan yang ada pada bar menu bawah seperti halnya pada blog milik saya ini. Pertanyaan tersebut sudah saya jawab langsung melalui email juga dan sekarangpun pada saat artikel ini di buat, sobat Ochim sudah berhasil membuat bar menu blognya ada tulisan berjalan.

Seperti biasanya, jika ada pertanyaan melalui email maka jawaban dari pertanyaan tersebut akan saya posting melalui blog ini. Nah jika sobat sama-sama tertarik ingin membuat text berjalan tersebut, silahkan baca artikel ini sampai tuntas.

Karena template blogger terbagi menjadi dua yaitu template klasik dan template baru, maka untuk cara membuat text berjalan tersebutpun akan berbeda, oleh karenanya pembahasannya pun akan saya bagi menjadi dua bagian. Akan tetapi perlu saya sampaikan, contoh yang akan saya berikan kali ini hasilnya tidak persis seperti pada blog ini yaitu text berjalan dari arah kanan kekiri, akan tetapi saya akan memberi contoh text berjalan dari kiri ke arah kanan serta ada jeda waktu antara tulisan yang petama dengan yang kedua dan juga tulisan berikutnya.

Untuk template klasik silahkan ikuti langkah-langkah berikut ini :

1. Sign 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 berikut ini lalu paste di atas kode </head>
<script language='javascript'> message = "Tulis text pertama yang ingin muncul disini ^" + "Tulis text kedua disini ^" + "Tulis text ketiga disini ^" + "Tulis text keempat disini ^" scrollSpeed = 130 lineDelay = 0 // Do not change the text below // txt = "" function scrollText(pos) { if (message.charAt(pos) != '^') { txt = txt + message.charAt(pos) status = txt pauze = scrollSpeed } else { pauze = lineDelay txt = "" if (pos == message.length-1) pos = -1 } pos++ setTimeout("scrollText('"+pos+"')",pauze) } scrollText(0) </script>
6. Klik tombol Save Template Changes
7. Selesai.

Untuk template baru silahkan ikuti langkah-langkah berikut ini :

1. Sign in di blogger dengan id sobat
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template
5. Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang. Sekali lagi jangan lupa klik kotak kecil di samping tulisan Expand Widget Templates
6. Tunggu beberapa saat sampai proses selesai
7. Simpan kode berikut di bawah kode </body> , kode ini letaknya berada paling bawah sebelum kode </html>
<script language='javascript'> message = "Tulis text pertama yang ingin muncul disini ^" + "Tulis text kedua disini ^" + "Tulis text ketiga disini ^" + "Tulis text keempat disini ^" scrollSpeed = 130 lineDelay = 0 // Do not change the text below // txt = "" function scrollText(pos) { if (message.charAt(pos) != '^') { txt = txt + message.charAt(pos) status = txt pauze = scrollSpeed } else { pauze = lineDelay txt = "" if (pos == message.length-1) pos = -1 } pos++ setTimeout("scrollText('"+pos+"')",pauze) } scrollText(0) </script>
8. Klik tombol SAVE TEMPLATE
9. Selesai

sedikit clue, pada kode diatas ada tulisan yang saya buat merah, nah tulisan tersebut harus sobat ganti dengan tulisan yang sobat inginkan. contoh : selamat datang di blog saya. atau apa saja yang menurut sobat layak untuk di tulis di situ. contoh yang saya berikan diatas memuat pesan atau text sebanyak empat tulisan, jika sobat ingin lebih banyak itu bisa dilakukan dengan menambah baris tulisan seperti kode sebelumnya.Untuk kode --> scrollSpeed = 130 . angka "130" merupakan kecepatan dari text berjalan, semakin kecil nilainya semakin cepat text berjalan, dan semakin besar nilainya maka text akan semakin lambat. Silahkan sesuaikan dengan keinginan sobat.


Seperti yang saya katakan di awal artikel bahwa kode yang saya berikan di atas hasil efeknya tidak sama dengan yang ada di blog ini, untuk melihat hasil nyatanya, silahkan sobat klik di sini.

Selamat mencoba !!!

membuat kelelawar terbang di blog

Atas Usulan beberapa sobat blogger, saat ini saya akan membuat tutorial tentang cara membuat kelelawar terbang di blog. Kelelawar termasuk binatang malam yang aktif pada malam hari. Kelelawar dalam bahasa inggris disebut “bat” sedangkan dalam bahasa jowo disebut “lowo”. Kelelawar adalah mamalia yang dapat terbang yang berasal dari ordo Chiroptera dengan kedua kaki depan yang berkembang menjadi sayap. Sudah dulu perkenalannya dengan kelelawar ya....

Cara membuat “kelelawar” atau “lowo” atau “bat” terbang di blog hampir sama dengan cara membuat kupu-kupu terbang di blog, Java scriptnya pun sama. Yang beda adalah kalau membuat kupu – kupu terbang di blog, hewannya adalah kupu – kupu. Sedangkan apabila membuat kelelawar terbang di blog, hewannya adalah kelelawar. Ya Iya lah!!!. Langsung tahu perbedaanya kan…? Hehehe :)



Langkah – langkah pembuatannya adalah sebagai berikut
1. Login ke Blogger
2. Klik Tata letak
3. Klik Tambah Gadget
4. Pilih HTML/Java Script
5. Masukkan kode Java script seperti di bawah ini.

<script src="http://h1.ripway.com/forantum/javascript/lawa.js" type="text/javascript">

O…ya sebaiknya file Java script diatas anda simpan di webhosting sobat sendiri. Karena apabila ada banyak sobat blogger yang menggunakan Java script diatas maka dikhawatirkan bandwidth web hosting file Java script diatas akan habis. Sehingga Java script tidak akan bekerja lagi. Java script dapat sobat simpan di http://ripway.com. Untuk lebih jalasnya silakan sobat baca postingan saya tentang solusi hosting Java script. Kalo belum bisa, silakan gunakan saja Java script diatas. Kalau Java scriptnya sudah tidah bekerja silakan lapor ke kantor polisi terdekat @dmin f0r 4nTuM.

6. Simpan.
7. Buka blog milik sobat. Dan lhatlah ada sesosok makhluk nan mengagumkan terbang di blog kesayangan anda.

Semoga berhacil ya...^_^

Atas Usulan beberapa sobat blogger, saat ini saya akan membuat tutorial tentang cara membuat kelelawar terbang di blog. Kelelawar termasuk binatang malam yang aktif pada malam hari. Kelelawar dalam bahasa inggris disebut “bat” sedangkan dalam bahasa jowo disebut “lowo”. Kelelawar adalah mamalia yang dapat terbang yang berasal dari ordo Chiroptera dengan kedua kaki depan yang berkembang menjadi sayap. Sudah dulu perkenalannya dengan kelelawar ya....

Cara membuat “kelelawar” atau “lowo” atau “bat” terbang di blog hampir sama dengan cara membuat kupu-kupu terbang di blog, Java scriptnya pun sama. Yang beda adalah kalau membuat kupu – kupu terbang di blog, hewannya adalah kupu – kupu. Sedangkan apabila membuat kelelawar terbang di blog, hewannya adalah kelelawar. Ya Iya lah!!!. Langsung tahu perbedaanya kan…? Hehehe :)



Langkah – langkah pembuatannya adalah sebagai berikut
1. Login ke Blogger
2. Klik Tata letak
3. Klik Tambah Gadget
4. Pilih HTML/Java Script
5. Masukkan kode Java script seperti di bawah ini.

<script src="http://h1.ripway.com/forantum/javascript/lawa.js" type="text/javascript">

O…ya sebaiknya file Java script diatas anda simpan di webhosting sobat sendiri. Karena apabila ada banyak sobat blogger yang menggunakan Java script diatas maka dikhawatirkan bandwidth web hosting file Java script diatas akan habis. Sehingga Java script tidak akan bekerja lagi. Java script dapat sobat simpan di http://ripway.com. Untuk lebih jalasnya silakan sobat baca postingan saya tentang solusi hosting Java script. Kalo belum bisa, silakan gunakan saja Java script diatas. Kalau Java scriptnya sudah tidah bekerja silakan lapor ke kantor polisi terdekat @dmin f0r 4nTuM.

6. Simpan.
7. Buka blog milik sobat. Dan lhatlah ada sesosok makhluk nan mengagumkan terbang di blog kesayangan anda.

Semoga berhacil ya...^_^

Membuat kupu-kupu terbang di blog

Dulu saya memberikan tutorial cara  membuat kupu kupu terbang di blog akan tetapi ada sobat blogger yang belum berhasil membuatnya oleh karena itu saya akan memberikan tutorial membuat kupu kupu terbang di blog 2 dengan cara yang lebih mudah.


Ingin tahu gimana caranya membuat kupu kupu terbang di blog 2. Kayak di blog ini. simaklah tutorial saya berikut ini yaa....

Caranya cukup mudah anda cukup memasukkan java sript untuk memunculkan kupu-kupu indah di blog anda. Baiklah langsung saja akan saya tuliskan cara membuatnya :

1. Login ke Blogger
2. Klik Tata letak
3. Klik Tambah Gadget
4. Pilih HTML/Java Script
5. Masukkan kode Java script seperti di bawah ini.

<script src="http://h1.ripway.com/forantum/javascript/kupu.js" type="text/javascript">

 6. Save...buka blog anda dan refresh browser....sekarang ada sesosok binatang yang indah menawan di blog anda....

O…ya sebaiknya file Java script diatas anda simpan di webhosting sobat sendiri. Karena apabila ada banyak sobat blogger yang menggunakan Java script diatas maka dikhawatirkan bandwidth web hosting file Java script diatas akan habis. Sehingga Java script tidak akan bekerja lagi. Java script dapat sobat simpan di http://ripway.com. Untuk lebih jalasnya silakan sobat baca postingan saya tentang solusi hosting Java script. Kalo belum bisa, silakan gunakan saja Java script diatas. Kalau Java scriptnya sudah tidah bekerja silakan lapor ke kantor polisi terdekat @dmin f0r 4nTuM.

Baca juga Membuat Kelelawar Terbang di Blog

Artikel yang Berhubungan

Efek

• Efek Link: Link Terbuka Tanpa Di Klik
• Typewriter Effect - Tulisan Bergaya Mengetik
• Membuat Roaming effect Blogger
• Mengganti Tulisan Newer Post , Older Post dan Home dengan Gambar
• Membuat gambar loading tampil di blog
• Judul Blog Bergerak atau Berjalan
• Membuat Slide Headlines
• Membuat Tulisan Terbalik
• memberi efek blur pada gambar
• Membuat tulisan berkedip
• Membuat Efek Marque ( teks berjalan )
• Membuat Gambar Melayang di Blog
• Message Alert
• Membuat Kupu-kupu Terbang di blog

Java Script Blog

• Membuat Roaming effect Blogger
• Efek Java Script: Gambar Membesar
• Membuat Kelelawar Terbang di Blog
• Membuat Widget Multi Halaman/TabView
• Solusi Java Sript yg Tidak Bekerja
• Message Alert
• Membuat Kupu-kupu Terbang di blog

Dulu saya memberikan tutorial cara  membuat kupu kupu terbang di blog akan tetapi ada sobat blogger yang belum berhasil membuatnya oleh karena itu saya akan memberikan tutorial membuat kupu kupu terbang di blog 2 dengan cara yang lebih mudah.


Ingin tahu gimana caranya membuat kupu kupu terbang di blog 2. Kayak di blog ini. simaklah tutorial saya berikut ini yaa....

Caranya cukup mudah anda cukup memasukkan java sript untuk memunculkan kupu-kupu indah di blog anda. Baiklah langsung saja akan saya tuliskan cara membuatnya :

1. Login ke Blogger
2. Klik Tata letak
3. Klik Tambah Gadget
4. Pilih HTML/Java Script
5. Masukkan kode Java script seperti di bawah ini.

<script src="http://h1.ripway.com/forantum/javascript/kupu.js" type="text/javascript">

 6. Save...buka blog anda dan refresh browser....sekarang ada sesosok binatang yang indah menawan di blog anda....

O…ya sebaiknya file Java script diatas anda simpan di webhosting sobat sendiri. Karena apabila ada banyak sobat blogger yang menggunakan Java script diatas maka dikhawatirkan bandwidth web hosting file Java script diatas akan habis. Sehingga Java script tidak akan bekerja lagi. Java script dapat sobat simpan di http://ripway.com. Untuk lebih jalasnya silakan sobat baca postingan saya tentang solusi hosting Java script. Kalo belum bisa, silakan gunakan saja Java script diatas. Kalau Java scriptnya sudah tidah bekerja silakan lapor ke kantor polisi terdekat @dmin f0r 4nTuM.

Baca juga Membuat Kelelawar Terbang di Blog

Artikel yang Berhubungan

Efek

• Efek Link: Link Terbuka Tanpa Di Klik
• Typewriter Effect - Tulisan Bergaya Mengetik
• Membuat Roaming effect Blogger
• Mengganti Tulisan Newer Post , Older Post dan Home dengan Gambar
• Membuat gambar loading tampil di blog
• Judul Blog Bergerak atau Berjalan
• Membuat Slide Headlines
• Membuat Tulisan Terbalik
• memberi efek blur pada gambar
• Membuat tulisan berkedip
• Membuat Efek Marque ( teks berjalan )
• Membuat Gambar Melayang di Blog
• Message Alert
• Membuat Kupu-kupu Terbang di blog

Java Script Blog

• Membuat Roaming effect Blogger
• Efek Java Script: Gambar Membesar
• Membuat Kelelawar Terbang di Blog
• Membuat Widget Multi Halaman/TabView
• Solusi Java Sript yg Tidak Bekerja
• Message Alert
• Membuat Kupu-kupu Terbang di blog

Mempromosikan blog

Ringkasan ini tidak tersedia. Harap klik di sini untuk melihat postingan.

Ringkasan ini tidak tersedia. Harap klik di sini untuk melihat postingan.

Mengubah ukuran templates blog

Jika kamu telah memiliki sebuah blog, pastinya kamu pingin buat blogmu menjadi blog yang memiliki penampilan yang semenarik mungkin kan?. salah satu cara untuk membuat tampilan blog menarik adalah dengan menggunakan template yang bagus, tapi ada lagi nih masalahnya, jika aja kamu udah cari muter-muter sampek berkunjung dari satu website ke website yang lain, dan akhirnya dapet template yang cocok, tapi ukuran kotak postingan, sidebar, Header dan Footernya yang gak cocok sesuai keinginan kamu jadinya bakal jelek kan dan bikin kita jengkel kan jadi buat ngebenerinnya, kamu gak usah mencari-cari template lain lagi, soalnya bakal butuh waktu yang lama dan di sini saya bakal kasih solusinya, untuk mengubah ukuran Halaman Blog, Halaman postingan, side bar, Header dan Footer Blog agar bisa di tampilkan sesuai keinginan kita cukup dengan mengedit Code HTML Blog mu.

Untuk itu ikuti langkah-langkah berikut ini :
1. Login ke Blog Kamu
2. Klik tata Letak
3. Klik Edit HTML
4. Disarankan sebelum mengedit Kode Html kamu,silahkan kamu membackup Code HTML kamu, demi keamanan, jika terjadi sesuatu yang tidak di inginkan.

• Untuk mengedit ukuran Halaman Blog

Cari kode di bawah ini:

 #outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar halaman blog, kamu cukup merubah angka pada width sesuai dengan keinginan kamu.

• Untuk mengedit ukuran Halaman Posting

Cari kode di bawah ini:

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */
}

Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar Halaman Posting, kamu cukup merubah angka pada width sesuai dengan keinginan kamu.

• Untuk mengedit ukuran Sidebar Blog

Cari Code di bawah ini:

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar Side Bar Blog, kamu cukup merubah angka pada width sesuai dengan keinginan kamu.

• Untuk mengedit ukuran Header Blog,

Cari Code di bawah ini:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar Header Blog, kamu cukup merubah angka pada width sesuai dengan keinginan kamu.

• Untuk mengedit ukuran Footer Blog

Cari Code di bawah ini:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar Footer Blog, kamu cukup merubah angka pada width sesuai dengan keinginan kamu.

Catatan:
Jika lebar salah satu dari kelima elemen yang telah di sebut di atas (Halaman Blog, Halaman Posting, Side Bar Blog, Header Blog, dan Footer Blog) diubah, maka akan mempengaruhi Keserasian elemen yang lain. Oleh karena itu, jika Anda ingin merubah lebar salah satu elemen, maka anda juga harus menyesuaikan dengan lebar elemen yang lain, karena jika antara satu elemen yang satu dengan yang lain tidak serasi, maka tampilan blog anda akan menjadi kacau, anda tidak mau kan. Kalau tujuan anda yang mulanya ingin mempercantik blog anda justru ujung-ujungnya malah merusak blog anda sendiri maka dari itu. Hati-hati,,,

~Selamat mencoba, semoga Berhasil~

Sumber: http://teoringeblog.blogspot.com

Jika kamu telah memiliki sebuah blog, pastinya kamu pingin buat blogmu menjadi blog yang memiliki penampilan yang semenarik mungkin kan?. salah satu cara untuk membuat tampilan blog menarik adalah dengan menggunakan template yang bagus, tapi ada lagi nih masalahnya, jika aja kamu udah cari muter-muter sampek berkunjung dari satu website ke website yang lain, dan akhirnya dapet template yang cocok, tapi ukuran kotak postingan, sidebar, Header dan Footernya yang gak cocok sesuai keinginan kamu jadinya bakal jelek kan dan bikin kita jengkel kan jadi buat ngebenerinnya, kamu gak usah mencari-cari template lain lagi, soalnya bakal butuh waktu yang lama dan di sini saya bakal kasih solusinya, untuk mengubah ukuran Halaman Blog, Halaman postingan, side bar, Header dan Footer Blog agar bisa di tampilkan sesuai keinginan kita cukup dengan mengedit Code HTML Blog mu.

Untuk itu ikuti langkah-langkah berikut ini :
1. Login ke Blog Kamu
2. Klik tata Letak
3. Klik Edit HTML
4. Disarankan sebelum mengedit Kode Html kamu,silahkan kamu membackup Code HTML kamu, demi keamanan, jika terjadi sesuatu yang tidak di inginkan.

• Untuk mengedit ukuran Halaman Blog

Cari kode di bawah ini:

 #outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar halaman blog, kamu cukup merubah angka pada width sesuai dengan keinginan kamu.

• Untuk mengedit ukuran Halaman Posting

Cari kode di bawah ini:

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */
}

Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar Halaman Posting, kamu cukup merubah angka pada width sesuai dengan keinginan kamu.

• Untuk mengedit ukuran Sidebar Blog

Cari Code di bawah ini:

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar Side Bar Blog, kamu cukup merubah angka pada width sesuai dengan keinginan kamu.

• Untuk mengedit ukuran Header Blog,

Cari Code di bawah ini:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar Header Blog, kamu cukup merubah angka pada width sesuai dengan keinginan kamu.

• Untuk mengedit ukuran Footer Blog

Cari Code di bawah ini:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar Footer Blog, kamu cukup merubah angka pada width sesuai dengan keinginan kamu.

Catatan:
Jika lebar salah satu dari kelima elemen yang telah di sebut di atas (Halaman Blog, Halaman Posting, Side Bar Blog, Header Blog, dan Footer Blog) diubah, maka akan mempengaruhi Keserasian elemen yang lain. Oleh karena itu, jika Anda ingin merubah lebar salah satu elemen, maka anda juga harus menyesuaikan dengan lebar elemen yang lain, karena jika antara satu elemen yang satu dengan yang lain tidak serasi, maka tampilan blog anda akan menjadi kacau, anda tidak mau kan. Kalau tujuan anda yang mulanya ingin mempercantik blog anda justru ujung-ujungnya malah merusak blog anda sendiri maka dari itu. Hati-hati,,,

~Selamat mencoba, semoga Berhasil~

Sumber: http://teoringeblog.blogspot.com

WORK ART WIGDEGRAF

Cara menambah fotter 3 kolom di blogger

Template Blogger kian banyak macamnya. Mulai dari yang berkonsep minimalis, hingga magazine style. Beberapa template baru memiliki footer (letaknya di bawah, karena foot itu artinya kaki..hehehe) tiga kolom, seperti blog ini. Nah, bagaimana cara menambah footer 3 kolom di Blogger atau Blogspot? Bagi anda yang malas ganti template atau sudah sreg dengan template sekarang dan ingin menambah footer 3 kolom, tips ini mungkin berguna.
Oke, langsung saja ke tutorialnya:

1. Masuk Layout, Edit HTML, beri centang (jangan lupa back up dulu buat jaga-jaga).

2. Cari kode: <div id="footer-wrapper">
Ket: pada beberapa template kodenya: footer atau footer-section.

3. Geser ke bawah (biasanya dua baris ke bawah) sampai ketemu kode: </div>

4. Tambahkan kode berikut ini di bawahnya:

<div id="footer">
<div id="footer2" style="margin: 0pt; width: 30%; float: left; text-align: left;">
<b:section class="footer-column" id="col1" preferred="yes" style="float: left;">
</b:section></div>
<div id="footer3" style="margin: 0pt; width: 40%; float: left; text-align: left;">
<b:section class="footer-column" id="col2" preferred="yes" style="float: left;">
</b:section></div>
<div id="footer4" style="margin: 0pt; width: 30%; float: right; text-align: left;">
<b:section class="footer-column" id="col3" preferred="yes" style="float: right;">
</b:section></div>
<div style="clear: both;">
<p>
</p><hr align="center" color="#5d5d54" width="90%"><p></p>
<div id="footer-bottom" style="padding: 10px; text-align: center;">
<b:section class="footer" id="col-bottom" preferred="yes">
</b:section>
</div>
<div style="clear: both;">
</div>

5. Simpan, lalu klik Layout dan lihat hasilnya: akan muncul tiga kolom di bawah (bagian footer).

Apabila muncul galat, wakakaka....tenang. Kembalikan template dengan back up template yang telah kita buat dan ulangi semua tahap. tapi coba dengan jangan centang expand widget template.

Semoga barhasil...

( Sumber : http://wawanwae.blogspot.com )

Template Blogger kian banyak macamnya. Mulai dari yang berkonsep minimalis, hingga magazine style. Beberapa template baru memiliki footer (letaknya di bawah, karena foot itu artinya kaki..hehehe) tiga kolom, seperti blog ini. Nah, bagaimana cara menambah footer 3 kolom di Blogger atau Blogspot? Bagi anda yang malas ganti template atau sudah sreg dengan template sekarang dan ingin menambah footer 3 kolom, tips ini mungkin berguna.
Oke, langsung saja ke tutorialnya:

1. Masuk Layout, Edit HTML, beri centang (jangan lupa back up dulu buat jaga-jaga).

2. Cari kode: <div id="footer-wrapper">
Ket: pada beberapa template kodenya: footer atau footer-section.

3. Geser ke bawah (biasanya dua baris ke bawah) sampai ketemu kode: </div>

4. Tambahkan kode berikut ini di bawahnya:

<div id="footer">
<div id="footer2" style="margin: 0pt; width: 30%; float: left; text-align: left;">
<b:section class="footer-column" id="col1" preferred="yes" style="float: left;">
</b:section></div>
<div id="footer3" style="margin: 0pt; width: 40%; float: left; text-align: left;">
<b:section class="footer-column" id="col2" preferred="yes" style="float: left;">
</b:section></div>
<div id="footer4" style="margin: 0pt; width: 30%; float: right; text-align: left;">
<b:section class="footer-column" id="col3" preferred="yes" style="float: right;">
</b:section></div>
<div style="clear: both;">
<p>
</p><hr align="center" color="#5d5d54" width="90%"><p></p>
<div id="footer-bottom" style="padding: 10px; text-align: center;">
<b:section class="footer" id="col-bottom" preferred="yes">
</b:section>
</div>
<div style="clear: both;">
</div>

5. Simpan, lalu klik Layout dan lihat hasilnya: akan muncul tiga kolom di bawah (bagian footer).

Apabila muncul galat, wakakaka....tenang. Kembalikan template dengan back up template yang telah kita buat dan ulangi semua tahap. tapi coba dengan jangan centang expand widget template.

Semoga barhasil...

( Sumber : http://wawanwae.blogspot.com )