Cara Membuat Widget Dapat di Scroll Box

Memasang widget/gadget di sidebar merupakan hal yang biasa dilakukan para blogger. Selain dapat mempercantik tampilan blog, widget tersebut juga bermanfaat baik bagi pengunjung maupun pemilik blog itu sendiri. Widget-widget itu berisikan informasi-informasi mengenai blog tersebut sesuai dengan kegunaannya masing-masing.

Bila widget-widget yang dipasang di sidebar cukup banyak dapat membuat sesak ruangan di sidebar. Salah satu solusi untuk menghemat tempat di sidebar adalah dengan memasang widget-widget tesebut ke dalam scroll box. Lalu, bagaimana caranya agar posisi widget-widget tersebut di scroll box menjadi rata tengah sehingga terlihat rapi dan sedap dipandang mata?

Nah, berikut ini akan dijelaskan cara membuat posisi widget menjadi rata tengah di scroll box. Seperti dibahas pada posting terdahulu bahwa untuk membuat scroll box di sidebar, diperlukan script seperti di bawah ini.

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">

ISI/ELEMEN KOTAK

</div>

Agar posisi widget menjadi rata tengah, maka script-nya akan terlihat seperti di bawah ini.

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">
<center>
<script widget 1><br />
<script widget 2><br />
<script widget 3><br />
<script widget 4><br />
<script widget 5><br />
</center>

</div>

• Ganti script widget dengan script widget yang akan dipasang.
• width:100%px; menunjukkan lebar dari kotak yang diinginkan. Ganti sesuai dengan kebutuhan Anda, misalnya 200px atau 300px. Agar lebih mudah menyesuaikan dengan lebar sidebar tentukan saja nilainya dengan 100%px.
• height:200px; menunjukkan tinggi kotak, dapat diubah sesuai keinginan Anda.

Sebagai contoh:
Misalnya, saya mempunyai beberapa script widget yang akan dipasang di scroll box, yaitu:

• <a href="http://bloggers.com/asrul507" rel="dofollow" ><img src="http://bloggers.com/u/108651/p/img_01.png" title="Asrul Nur Rahim - Find me on Bloggers.com" alt="Asrul Nur Rahim - Find me on Bloggers.com" /></a>

• <a href="http://www.ontoplist.com/" target="_blank" title="Online Marketing"><img src="http://www.ontoplist.com/images/ontoplist32.png" alt="Online Marketing" border="0" /></a>

• <a href="http://www.w3-directory.com/vote-w3-directory.php?id_site_vote=25040" target="_blank"><img src="http://www.w3-directory.com/images/logo-w3-world-wide-web-directory.gif" width="125" height="35" border="0" alt="W3 Directory - the World Wide Web Directory" /></a>

• <noscript><a href="http://www.w3-directory.com/directory-Personal-web-sites-Blogs.php">Personal web sites / Blogs directory</a> <a href="http://www.w3-directory.com/directory-Indonesia.php">Indonesia directory</a></noscript>

• <a href="http://indonesia-blogger.com"><img src="http://www.indonesia-blogger.com/img/indonesia-blogger.jpg" border="1"/></a><a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/19.gif" border="0" alt="blog-indonesia.com"/></a>

• <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a>

• <a href="http://www.getrank.org" target="_blank"><img src="http://www.getrank.org/prbutton/pagerank-display.php?s=59" title="Pagerank" alt="PageRank Checker" border="0px" /></a>

• <a href="http://feedvalidator.org/check.cgi?url=http%3A//kamu-klik.blogspot.com/feeds/posts/default"><img src="http://feedvalidator.org/images/valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" /></a>

Sekarang kita akan masukkan script-script di atas ke script untuk membuat scroll box, maka script-nya menjadi seperti di bawah ini.

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">

<center> 

<a href="http://bloggers.com/asrul507" rel="dofollow" ><img src="http://bloggers.com/u/108651/p/img_01.png" title="Asrul Nur Rahim - Find me on Bloggers.com" alt="Asrul Nur Rahim - Find me on Bloggers.com" /></a><br/>

<a href="http://www.ontoplist.com/" target="_blank" title="Online Marketing"><img src="http://www.ontoplist.com/images/ontoplist32.png" alt="Online Marketing" border="0" /></a><br/>

<a href="http://www.w3-directory.com/vote-w3-directory.php?id_site_vote=25040" target="_blank"><img src="http://www.w3-directory.com/images/logo-w3-world-wide-web-directory.gif" width="125" height="35" border="0" alt="W3 Directory - the World Wide Web Directory" /></a><br/>

<noscript><a href="http://www.w3-directory.com/directory-Personal-web-sites-Blogs.php">Personal web sites / Blogs directory</a> <a href="http://www.w3-directory.com/directory-Indonesia.php">Indonesia directory</a></noscript><br/>

<a href="http://indonesia-blogger.com"><img src="http://www.indonesia-blogger.com/img/indonesia-blogger.jpg" border="1"/></a><br/>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/19.gif" border="0" alt="blog-indonesia.com"/></a><br/>

<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a><br/>

<a href="http://www.getrank.org" target="_blank"><img src="http://www.getrank.org/prbutton/pagerank-display.php?s=59" title="Pagerank" alt="PageRank Checker" border="0px" /></a><br/>

<a href="http://feedvalidator.org/check.cgi?url=http%3A//kamu-klik.blogspot.com/feeds/posts/default"><img src="http://feedvalidator.org/images/valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" /></a><br/>

</center>

</div>

Bila diletakkan di sidebar, maka hasilnya akan tampak seperti di bawah ini.

ntuk memasang scroll box di sidebar, berikut ini langkah-langkahnya:

• Masuk ke akun Blogger
• Klik Rancangan > Elemen Laman > Tambah Gadget.
• Kemudian pilih HTML/JavaScript.
• Berikan judul dan isi kolom Konten dengan script scroll box.
• Klik tombol SIMPAN.
• Atur posisi widget ke tempat yang diinginkan.
• Klik tombol SIMPAN. 

Okelah demikian cara-cara tersebut yang saya tahu.. selamat mencoba dan semoga berhasil :)

Situs Untuk Upload Gambar Tanpa Mendaftar / Menjadi Membership

Selama ini untuk menyimpan gambar-gambar yang ada didalam Blog CC ini hanya memakai bawaan blogger. Ada kekuatiran jika beberapa situs tersebut ada masalah maka gambar-gambar dalam blog kita tidak akan dapat tampil, untuk mengantisipasi hal tersebut sebaiknya Anda harus memiliki banyak alternative situs-situs untuk upload gambar Anda.

Ini beberapa situs yang bisa anda gunakan untuk upload gambar/image, situs-situs dibawah ini tidak memerlukan mempership :


http://www.tinypic.com/

http://www.burn-blue.com/

http://image-bb.com/

http://pic-hoster.net

http://tammzak.ta.funpic.org/photo/

http://www.1pix.org/


http://www.filecache.de/

http://www.foto-genius.com

http://www.freeimagehosting.net/

http://www.imagebanana.com/

http://www.imagefilez.com/

http://www.imagehosting.evonet.ro/

http://www.imagehosting.ro/

http://www.imageiso.com/

http://www.imageknight.com/

http://www.imagesforme.com/

http://www.imagesocket.com/

http://www.imagespeech.com/

http://www.imagetag.co.uk/

http://www.image-upload.net/

http://www.imagevenue.com/

http://www.imghaven.com/

http://www.img.xtremshare.com/

http://www.lookpic.com/

http://www.paintedover.com/

http://www.photodump.com/

http://www.picfreak.us/

http://www.picfront.org/

http://www.picoodle.com

http://www.pictiger.com/

http://www.pictransfer.de

http://www.pix-hoster.com/

http://www.qfqy.com/

http://www.radikal.ru/

http://www.simpload.com/

http://www.spazshare.com/

http://www.superfilehosting.com/

http://www.theimagehosting.com/

http://www.upit.cc/

http://www.upl0ad.org

http://www.willhostforfood.com/

http://www.xs.to/

http://www.yourupload.com

Jika artikel ini bermanfaat

Mohon klik tombol Thank dibawah

Thank

Blogger Template Creator

Banyak sekali situs yang menyediakan template Blogger gratis, download kemudian upload kembali template tersebut, jadi deh template baru. Agar terlihat rapih dan sesuai dengan keinginan, sedikit setingan diperlukan untuk menyempurnakan template Blogspot baru tersebut.

Pada template blogger baru biasanya tidak semua widget berada pada posisi sebelumnya. Contoh, follower yang asalnya di sidebar kiri dapat berpindah ke footer atau sebaliknya, demikian juga blogroll yang tadinya di sidebar kanan dapat berubah ke kiri.

Untuk mengatasi perubahan itu diperlukan beberapa setingan pada bagian desain page elements dengan memindahkan widget sesuai posisi yang diinginkan. Sedangkan pengaturan tombol menu utama dilakukan pada bagian Design Edit HTML dengan mengedit kode HTML dan CSS yang diperlukan.

Ketika pengguna men-download template dalam format .zip atau rar, biasanya terdapat file readme.txt sebagai keterangan (help) untuk membantu pengguna melakukan perubahan. Satu hal yang selalu ada pada template tersebut yang tidak boleh dirubah atau dihapus adalah kredit si pembuat template yang biasa diletakan pada footer sebagai bentuk apresiasi.

Keuntungan yang akan diperoleh designer adalah backlink, itulah sebabnya mereka berani memberikan template blogspot gratis. Makin banyak pengguna template makin banyak one way banklink yang mereka peroleh. yang akan menjadi nilai plus di mata search engine.

Sobat ingin mendapat backlink seperti itu? Jawabnya gampang-gampang susah deh, yang jelas harus bisa membuat template Blogspot sendiri kemudian submit ke situs-situs yang menerima blogger template. Tapi ingat pada footer harus dicantumkan URL situs Anda.

Lalu bagaimana cara membuat template Blogspot karya sendiri?

1. Pertama harus menguasai HTML Dasar.
   Untuk belajar HTML dapat dilakukan online misalnya di W3C School. Di sana dipelajari cara penulisan HTML dasar sampai tingkat lanjut disertai praktek langsung.
2. Kedua mempunyai kemampuan seni desain layout.
   Seni desain layout sebenarnya merupakan bakat dan penilaian Anda sendiri terhadap seni. 
3. Ketiga kemampuan dekorasi untuk mempercantik template agar lebih menarik.
   Untuk yang satu ini dapat dilakukan dengan Photoshop tetapi tentu saja bakat seni harus Anda miliki. Dekorasi ini nantinya dapat ditampilkan melalui background, gambar header, blockquote, buller, background heading, dan sebagainya.

Di bawah ini adalah beberapa program online gratis yang dapat sobat gunakan untuk membuat template Blogspot. Anda dapat mencoba membuat template blogspot sendiri tanpa harus menguasai kode HTML secara luas karena kode-kode tersebut langsung dibuat oleh software. Selanjutnya tinggal copas atau download sebagai file template.xml.

1. Pimp-My-Profile
   
2. PsycHo
   
3. Trix TG v2
   

Disamping tool tersebut, masih ada program pembuatan template Blogspot, bahkan di antaranya ada yang dapat dilakukan secara offline kemudian dapat di-export ke beberapa CMS seperti Blogger, Joomla, Wordpress, Drupal, dll tetapi kebanyakan tidak gratis alias berbayar :D

Langkah-langkah pembuatan template blogspot tersebut dapat Anda lihat dan praktekan sendiri pada situs yang bersangkutan.

Sumber : http://www.linksukses.com/2011/03/blogger-template-creator.html 

Kalau Menurut Anda Bermanfaat, Mohon Klik THANK dibawah :

THANK

Kumpulan Situs Penyedia Background Gambar

Background atau gambar merupakan salah satu nilai keindahan sebuah website dan salah satu hal yang paling susah dalam desain web atau bahkan mungkin menulis blog personal harian adalah menemukan gambar berkualitas yang dapat anda gunakan tanpa takut menyalahi aturan copyright atau legal. Apalagi menemukan gambar atau background itu hanya dari search engine saja bukanlah hal yang mudah, di bawah ini adalah review situs-situs dimana anda bisa menemukan background, foto dan gambar tersebut dengan bebas untuk mempermudah pencarian anda.

Background/Latar Belakang

1. Background-Graphics

http://www.background-graphics.com
Grafis-grafis background gratis berkualitas tinggi disini bisa anda dapatkan dengan gratis dan hanya membutuhkan backlink di situs anda sebagai tanda terima kasih anda menggunakannya. Tersedia untuk penggunaan pada situs pribadi atau komersial.

2. BackGround Image Maker
http://lab.rails2u.com/bgmaker
Pada situs ini anda bisa membuat background untuk website anda sendiri dengan petunjuk mudah disertai warna dan tekstur yang bervariasi.

3. GamingTextures
http://www.gamingtextures.com
Ratusan tekstur dapat anda download dan gunakan sebagai background anda disini.

4. Gradient Image Maker
http://tools.dynamicdrive.com/gradient
Anda dapat memilih dua warna dan membentuk background ber-gradien untuk keperluan anda.

5. Kollermedia.at
http://www.kollermedia.at/index.php/pattern4u
Situs ini menawarkan lebih dari 250 tekstur background untuk anda gunakan tanpa biaya.

6. Pixel Patterns
http://k10k.net/pixelpatterns
Lebih 900 tekstur piksel gratis untuk anda bisa anda gunakan di situs anda. Banyak tersedia untuk penggunaan komersial dan personal.

7. SquidFingers
http://www.squidfingers.com/patterns
Lebih dari 150 model tekstur bisa anda gunakan di situs anda, pemilik situs ini hanya meminta backlink sebagai tanda terima kasih.

8. StripGenerator
http://www.stripegenerator.com
Situs ini membantu anda untuk membuat striped background dan kemudian bisa anda download pada file CSS yang siap anda gunakan.

Foto dan Gambar

9. Aarinfreephoto
http://aarinfreephoto.com
Situs ini memiliki lebih dari 900 foto digital yang gratis untuk anda gunakan untuk keperluan website, iklan cetak, brosur dan lain-lain.

10. Alamy
http://www.alamy.com
Mesin pencari ini memiliki hampir 10juta foto di database-nya baik itu gratis ataupun berbayar dengan kualitas bagus dan ukuran yang bervariasi.

11. DesignPacks
http://www.designpacks.com
Paket desain gratis ini memiliki lebih dari 15 theme umum dengan gambar beresolusi tinggi yang bisa anda download bebas.

12. Flickr
http://flickr.com
Flickr ini adalah tempat dimana anda bisa mencari foto-foto berlisensi umum kreatif yang di-sharing oleh banyak orang dan dapat anda gunakan di situs ini.

13. FreeFoto
http://www.freefoto.com
Disini lebih dari 100.000 foto gratis dengan kualitas yang tinggi bisa anda gunakan dan download.

14. FreePhotoBank
http://www.freephotobank.org/main.php
Lebih dari 4000 foto gratis bisa anda gunakan dari situs ini.

15. FreePixels
http://www.freepixels.com
Ada sekitar 3.000 foto yang bisa anda download dan gunakan untuk proyek personal atau komersial anda.

16. FreeRangeStock
http://www.freerangestock.com
Keanggotaan dan foto gratis dari situs ini semuanya memiliki ukuran resolusi minimum 2400x1600 piksel.

17. FreeStockPhotography
http://www.adigitaldreamer.com/gallery
Situs ini memiliki 800 foto gratis yang bisa anda download dengan mudah dan cepat.

18. FreeWebPhoto
http://www.freewebphoto.com
Ada lebih dari 800 gambar untuk anda gunakan secara bebas dari situs ini.

19. ImageAfter
http://imageafter.com
Gambar dan background gratis dengan ukuran 1600x1200 hingga 2560x1920 bisa anda download dan gunakan untuk keperluan pribadi atau komersial.

20. MorgueFile
http://www.morguefile.com
Situs kumpulan foto ini menawarkan hasil fotografi 100% gratis untuk proyek kreatif anda.

21. OpenStockPhotography
http://www.openstockphotography.org
Mesin pencari ini hampir memiliki database lebih dari 1 juta gambar dari wikimedia.

22. Photogen
http://www.photogen.com
Situs ini memiliki 60 halaman foto digital yang benar-benar gratis untuk penggunaan anda pada produk atau apapun.

23. PixelPerfectDigital
http://www.pixelperfectdigital.com/free_stock_photos/
Ada lebih dari 5.500 foto digital gratis dan juga tekstur untuk penggunaan background.

24. SierraStock
http://www.sierrastock.com
Situs kumpulan foto ini bisa anda gunakan dengan kemudahan mencari berdasarkan isi jenis foto atau warnanya.

25. Stockvault
http://www.stockvault.net
Lebih dari 8ribu foto beroyalti grtis bisa anda gunakan untuk keperluan proyek yang berhubungan dengan edukasi atau personal.

26. SXC.hu
http://www.sxc.hu
Salah satu repositori kumpulan fotografi gratis dan mungkin terbesar di internet.

27. VintagePixels
http://www.vintagepixels.com
Memiliki lebih dari 900 foto bertema vintage gratis yang bisa anda gunakan dengan kualitas pixel tinggi. 

Kalau Menurut Anda Bermanfaat, Mohon Klik THANK dibawah :

THANK

Download Koleksi Tombol Read more Plus Animasi

Dalam postingan kali ini admin akan share tombol “Read more” buat Sobat CC...
Dengan berbagai macam pilihan dan juga berbagai macam tombol read more animasi yang Admin cari semaleman suntuk dengan ditemani secangkir susu jahe biar gak ngantuk hehehe....

Example tombol animasi read more :

Dengan tombol read more ini tampilan Blog menjadi semakin Cantik dan Elegant apabila Sobat CC tertarik dengan salah satu tombol dengan contoh gambar diatas silahkan di download dengan link di bawah artikel ini, semuanya free alias gratis tiss gak usah pake ribet tinggal di klik dan di upload ke imageshack atau photobucket dan laen-laen terserah anda saja mau di upload kemana jika sudah tinggal di pakai gan....
Huft...ternyata capek juga ngomong panjang lebar silahkan langsung saja klik link download di bawah ini...

• Download Tombol ReadMore
• Download Tombol Animasi Read more  

Kalau Menurut Anda Bermanfaat, Mohon Klik THANK dibawah :

THANK

Rating pada setiap postingan diBlogger

hmm, udah lama ya ga update design blog. Kira-Kira design blog ini udah bagus ga ?

Kali ini admin akan share kepada sobat CC adalah Widget Rating pada setiap postingan di Blogger. Karena Blogger mempunyai kelemahan pada fitur postingan ane kasih tau gan caranya buat rating pada setiap postingan.

seperti yang di bawah ini :

Mau...?? caranya gampang,Sobat CC ikuti saja tutorial di bawah ini..

1.SIGN IN ke situs Blogger.com

2.Jika telah masuk ke halaman Dashboard, klik link Layouts/Rancangan,lalu pilih Edit HTML.

3.Berikan tanda ceklist pada opsi Expand Widget templates

4.cari kode berikut pada kolom HTML

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
</div>

5.Jika sudah tambahkan Script berikut tepat dibawahnya

<script language='JavaScript'>var OB_platformType = 1; var OB_demoMode = false;var OB_langJS =&#39;http://widgets.outbrain.com/lang_en.js&#39;;</script><script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'/>

Maka susunannya akan menjadi seperti ini

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
</div>
<script language='JavaScript'>var OB_platformType = 1; var OB_demoMode = false;var OB_langJS =&#39;http://widgets.outbrain.com/lang_en.js&#39;;</script><script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'/>

6.yang terakhir klik "SAVE"

Lihatlah Blog anda, sekarang visitor bisa memilih tipe rating yang di kehendaki.
Selamat mencoba.

Cara Membuat Posting Terjadwal Secara Otomatis pada blogspot.

Cara Membuat Posting Terjadual Secara Otomatis pada blogspot. Membuat jadwal posting secara teratur merupakan salah satu faktor yang disukai oleh google, hal ini dapat dilihat dengan meningkatnya jumlah artikel yang keindeks oleh google. Tetapi melakukan update artikel secara rutin sangat sulit dilakukan karena kesibukan lainnya. Seperti om onny yang beberapa hari ini disibukkan oleh optimasi keyword Jasa SEO Murah.

Bagaimana agar artikel bisa diupdate secara otomatis tanpa harus publish pada setiap artikel. Simak Cara Membuat Posting Terjadwal Secara Otomatis pada blogspot berikut ini ;


1. Siapkan beberapa artikel yang akan di publish atau di posting.

2. Masuk ke akun blogger anda.

3. Klik " New Post "

4. Copy dan pastekan artikel yang sudah anda siapkan

5. Klik " post Options " yang terletak dibawahlabels

6. Pilih " Post date and time "

7. Klik " Scheduled at "

8. Kemudian silahkan atur tanggal dan waktu artikel yang akan diupdate secara otomatis.

9. Lalu Klik " Publish Post  "
10. Artikel anda akan terposting secara otomatis atau terjadwal.

11. Lakukan hal yang sama untuk artikel-artikel lainnya.

Cara Membuat Posting Terjadwal Secara Otomatis pada blogspot,ini sangat berguna bila anda mempunyai beberapa buah blog. Anda akan tidak perlu pusing melakukan update artikel secara manual, anda bisa menyiapkan beberapa artikel dan melakukan pengaturan jadwal posting. Semoga bermanfaat

Kalau Menurut Anda Bermanfaat, Mohon Klik THANK dibawah :

THANK