cara ngatur blog: Juni 2011

Cara Menyisipkan gambar dipostingan blogspot

Untuk menambah keindahan postingan pada blog, serta untuk menguatkan kandungan isi blog tentu saja harus dilengkapi dengan gambar. Nah untuk menambahkan gambar kehalaman blog kita harus memahami prinsip dasarnya. Apakah prinsip yang paling mendasar tersebut ? Format gambar yang direkomendasikan untuk halaman blog haruslah berformat .jpg, .png dan .gif. Sedangkan untuk format lain seperti, .bmp tidaklah dianjurkan, karena memiliki kapasitas file yang besar sehingga proses loading akan makin lambat. Jika telah memahami prinsipnya, berikutnya adalah bagaimana cara memasukkannya kedalam halaman blog.

Saya berasumsi bahwa rekan-rekan semua telah menuliskan teks postingan terlebih dahulu. Jika sudah, letakkan pointer mouse ditempat yang ingin disisipkan gambar. Lalu klik icon Insert Image atau yang ditunjukkan dengan panah.

Akan muncul tampilan seperti gambar dibawah ini :

Lalu klik tombol Choose files. Carilah gambar yang ingin disisipkan pada komputer rekan-rekan. Klik tombol Open untuk memasukkannya. Tampilan akan berubah menjadi seperti dibawah ini :

Kemudian klik tombol Add selected. Gambar akan masuk kedalam postingan.

Aturlah opsi untuk gambar. Pilih ukuran gambar pada tulisan Small, Medium, Large, X-Large atau Original size. Lalu pilih opsi peletakkan gambar pada tulisan Left, Center dan Right. Jika ingin menambahkan keterangan pada gambar, klik tulisan Add caption.

Hasil akhirnya kira-kira seperti gambar dibawah ini :

Cara Membuat Daftar List pada Blog

BulletsandNumbers Jika anda pernah menggunakan Microsoft Word tentu saja akan sangat mengenal dengan istilah bullet dan numbering. Pada blog, juga menggunakan istilah ini. Hanya saja cara menuliskannya berbeda.

Secara umum daftar list dibagi menjadi 2, yaitu daftar list numbering atau biasa dikenal dengan ordered list. Dan daftar list yang kedua berupa bullet (simbol) atau biasa dikenal dengan unordered list.

Sebagai contoh silahkan dilihat bedanya dibawah ini :

Ordered List / Numbering

Baris Pertama

Baris Kedua

Baris Ketiga

Dan Seterusnya

Unordered List / Bullet

Baris Pertama

Baris Kedua

Baris Ketiga

Dan Seterusnya

Bagaimana cara menuliskannya pada HTML atau Blog ? Untuk menuliskannya kita harus berada pada mode HTML. Secara umum, bentuk penulisannya adalah sbb :

Ordered List / Numbering :

<ol> 
  <li>Baris Pertama</li>  
  <li>Baris Kedua</li>  
  <li>Baris Ketiga</li> 
  <li>Dan Seterusnya</li> 
</ol>

Untuk menuliskan ordered list kita memulainya dengan TAG <ol></ol>. Dan untuk menuliskan baris isinya ditulis dengan tag <li>Teks Anda</li>

Unordered List / Bullet :

<ul> 
  <li>Baris Pertama</li>  
  <li>Baris Kedua</li>  
  <li>Baris Ketiga</li> 
  <li>Dan Seterusnya</li> 
</ul>

Untuk menuliskan unordered list kita memulainya dengan TAG <ul></ul>. Dan untuk menuliskan baris isinya ditulis dengan tag <li>Teks Anda</li>

Diantara kedua list ini bisa disisipkan atau digabungkan menjadi bagian yang komplek, seperti contoh dibawah ini :

Baris Pertama

Baris Kedua
- Sub Baris Pertama
- Sub Baris Kedua
  1. Sub Sub Baris Pertama
  2. Sub Sub Baris Kedua
- Sub Baris Ketiga

Baris Ketiga

Cara penulisannya adalah sebagai berikut :

<ol>
  <li>Baris Pertama </li>
  <li>Baris Kedua 
    <ul>
      <li>Sub Baris Pertama </li>
      <li>Sub Baris Kedua 
        <ol>
          <li>Sub Sub Baris Pertama </li>
          <li>Sub Sub Baris Kedua </li>
        </ol>
      </li>
      <li>Sub Baris Ketiga </li>
    </ul>
  </li>
  <li>Baris Ketiga </li>
</ol>

Blue Ice Blogger Template

	Template Name :
	Blue Ice
	Template Author :
	New Blogger Templates / http://buymythemes.com/
	Description :
	Blue Ice Blogger Template is a free blogger templates adapted from CSS Template to Blogger Template with nice blue background. It's a 2 column blogger template with right sidebar, 2 column footer and suitable for business blogs.

PREVIEW - DOWNDLOAD

Zero Gravity Blogger Template

	Template Name :
	Zero Gravity
	Template Author :
	http://www.dhetemplate.com
	Description :
	Features Zero gravity Blogger Template : 2 column, 3 column footer, Magazine style, Featured content slider, css3 properties, Tabview ready, Ads ready

PREVIEW - DOWNDLOAD

Techmiem Blogger Template

	Template Name :
	Techmiem
	Template Author :
	xmlbloggertemplates
	Description :
	Techmiem is a good looking layout for personal blogs. It’s clean and pleasing to the eye. You can use the template on any other blogs that you run. Fiture template : 1 Right Sidebar, 2 Column, Ads Ready, Blogger, Bookmark Ready, Brown, Elegant, Fixed, Web 2.0, Wordpress Look

PREVIEW - DOWNDLOAD

Cara Menampilkan Postingan Berdasarkan Label

widget-feed-label Untuk menampilkan postingan yang hanya pada label tertentu, kita bisa memanfaatkan jasa LABEL pada blogspot. Sebagai contoh, saya memiliki blog yang dikelompokkan kedalam beberapa label, salah satunya berlabel Widget. Dan saya ingin menampilkan widget artikel yang berisikan artikel dalam label Widget saja. Jadi artikel dengan label lain tidak diikutsertakan.

Nah bagaimana cara membuatnya ? Berikut triks singkat untuk membuatnya :

Login ke Blogger anda. Pilih menu Design > Page Elements.
Kemudian klik Add a gadget.
Lalu cari widget yang bertuliskan Feed. Klik pada tulisannya atau pada gambar bersimbol (+).
Lalu akan muncul form isian seperti dibawah ini :

- Ketikkan alamat ini pada form :
http://alamat-blog-anda.blogspot.com/feeds/posts/default/-/Widget
Ubahlah teks alamat-blog-anda menjadi alamat blog anda.
- Jika menggunakan nama labelnya lebih dari satu kata seperti “Widget Saya”, maka harus menambahkan %20 diantara kedua kata label tersebut. Hasilnya menjadi :
http://alamat-blog-anda.blogspot.com/feeds/posts/default/-/Widget%20Saya
- Untuk menampilkan urutan postingan dari yang terbaru ke yang lama, ubah menjadi
http://alamat-blog-anda.blogspot.com/feeds/posts/default/-/Widget?orderby=updated
Klik tombol SAVE.

Cara Menambahkan Widget Label / Kategori

widget-label Sebelumnya kita haruslah tahu dengan Istilah Label pada blog. Label merupakan pengelompokkan postingan kedalam kategori-kategori tertentu. Jika beberapa postingan diberikan label yang sama, maka artinya postingan tersebut termasuk kedalam kategori yang sama pula.

Widget Label merupakan widget standard bawaan blogspot. Dengan menambahkan widget label ini, akan memudahkan pengunjung untuk mencari artikel berdasarkan label / kategori tertentu.

Berikut Langkah-langkah menambahkan Widget Label :

Login ke Blogger anda, lalu pilih Design > Page Elements.
Kemudian klik pada Tulisan Add a Gadget.
Lalu cari widget yang bertuliskan Labels. Klik pada tulisannya atau pada gambar bersimbol (+).
Aturlah konfigurasi seperti yang anda inginkan. Sebagai contoh bisa dilihat pada gambar dibawah ini :

Title : Tuliskan judul widget yang anda inginkan, bisa anda tulis dengan Kategori, Menu, Kompetensi, dll.
Show : Terdapat 2 pilihan dibagian ini. Jika ingin menampilkan semua label yang ada, silahkan pilih All Labels, jika hanya ingin menampilkan Label-label tertentu saja silahkan pilih Selected Labels.
Sorting : Pilih metode pengurutan label yang muncul berdasarkan Alphabetically (Abjad) atau berdasarkan By Frequency (berdasarkan jumlah artikel terbanyak pada label).
Display : Jika anda ingin menampilkan label secara berurutan dari atas kebawah, pilihlah opsi List. Tetapi jika ingin menampilkan dari kiri ke kanan, pilihlah opsi Cloud.
Pada tulisan Show number of posts per label boleh dipilih atau tidak, tergantung kebutuhan anda.
Klik tombol SAVE.

Widget label akan muncul disidebar anda. Klik gambar Obeng untuk melakukan perubahan opsi yang diinginkan.

HTML : Mengenal Tag Hyperlink <A>

Hyperlink atau biasa dikenal dengan Link adalah sebuah kata, kalimat atau gambar yang mengarah kesebuah halaman atau alamat tertentu pada halaman web. Tujuan tersebut bisa mengarah ke halaman web itu sendiri, ke halaman lain dalam web tersebut atau juga ke alamat web lain.

Secara umum penulisan tag hyperlink ditandai dengan tag <a>. Bentuk penulisannya sangat simpel dan mudah, yaitu :

CONTOH bisa dilihat dibawah ini

Penulisannya : <a href=”http://kolom-blogger.blogspot.com”>Tutorial Blogspot</a>
Hasilnya : Tutorial Blogspot

Pada kode diatas terdapat tag tambahan HREF, yang berarti bagian ini berisikan alamat tujuan tertentu baik itu url web ataupun email.

CONTOH PENERAPAN :

<a href=”http://www.belajarpc.info”>Contoh link menuju URL</a>
Apakah anda ingin Menjadi Teknisi Komputer yang Handal ?
<a href=”index.html”>Contoh link langsung ke File dalam web tersebut</a>
Contoh link langsung ke File
<a href=”#bawah”>Contoh link pada halaman yang sama</a>
Klik tulisan ini untuk menuju ke Paragraph 20
Paragraph 1
Paragraph 2
Paragraph 3
Paragraph 4
Paragraph 5
Paragraph 6
Paragraph 7
Paragraph 8
Paragraph 9
Paragraph 10
Paragraph 11
Paragraph 12
Paragraph 13
Paragraph 14
Paragraph 15
Paragraph 16
Paragraph 17
Paragraph 18
Paragraph 19
Paragraph 20
<a href=”mailto:oki.helfiska@yahoo.com”>Contoh link ke Email</a>
“Jika anda ingin mengirim kritik dan saran silahkan Email saya”

ATRIBUT TAMBAHAN

TARGET
Penambahan atribut target kedalam tag link akan menentukan tujuan dibukanya alamat dalam web browser
Contoh Penulisan :
<a href=”http://www.belajarpc.info” target=”_blank”>Belajar Komputer</a>
Artinya, alamat www.belajarpc.info akan dibuka pada halaman baru atau tab baru pada web browser.
Atribut lainnya :
_blank : membuka dokumen terkait di jendela baru atau tab
_self : membuka dokumen terkait pada frame yang sama ( default )
_parent : membuka dokumen terkait dalam frameset induk
_top : membuka dokumen terkait dalam jendela utama.
TITLE
Penambahan atribut title berfungsi untuk menambahkan informasi tambahan pada link ketika mouse over diatas link.
Contoh Penulisan :
<a href=”http://www.belajarpc.info” target=”_blank” title=”Visit Blog Belajar PC>Belajar Komputer</a>
Hasilnya :
Belajar Komputer (Arahkan mouse diatas teks disamping)

LINK MENGGUNAKAN GAMBAR

Selain menggunakan teks, link juga bisa diterapkan pada gambar.

Contoh penulisan :

Hasilnya :

Cara mengganti Template Blogspot

Setelah anda berhasil Membuat Blog, silahkan untuk merubah template blog tersebut. Template merupakan bentuk tampilan dan tata letak dari sebuah blog. Agar tampilan blog yang kita miliki sesuai dengan keinginan kita dan disukai oleh pengunjung, tampilan tentu saja harus menarik. Selain itu template juga berfungsi untuk memudahkan pengunjung lain dalam berselancar artikel-artikel yang ada pada blog.

Untuk mengganti template pada blogspot dapat dilakukan dengan 2 cara, yaitu :

Dengan menggunakan Template Designer atau
Dengan menggunakan Template dari Layanan Pihak ketiga / template hasil karya para blogger yang lain.

Pada tulisan kali ini saya hanya membahas Cara mengganti Template Blogspot karya para blogger. Sebelum melakukan penggantian template, silahkan anda download terlebih dahulu template yang akan digunakan. Sebagai referensi, anda dapat mencari Template Blog disini. Atau disitus penyedia template yang popular seperti : BTemplates dan ZoomTemplate.

Langkah-langkah apa saja yang dilakukan untuk mengganti template ?

Login ke Blogger anda, lalu pilih menu Design > Edit HTML.
Kemudian pada bagian Backup / Restore Template pilih tombol Browse.
Carilah letak file template yang telah di download sebelumnya. Format file yang akan diupload harus berformat .xml.
Setelah itu klik tombol Upload.
Blogger akan meminta kita untuk mengkonfirmasi penghapusan gadget pada template yang sebelumnya. Klik tombol DELETE WIDGETS untuk menghapusnya.
Proses merubah template telah berhasil dilakukan. Klik link View Blog untuk melihat hasil perubahan dari template.

Lakukan langkah yang sama jika anda masih ingin merubah templatenya.

Cara Mengganti Kursor Mouse pada Blog

cursor-mouse Apakah Anda merasa bosan dengan kursor default pada blog anda? Jika iya, anda dapat merubahnya dengan mudah. Merubah kursor mouse pada blog berbeda dengan merubah kursor pada sistem operasi. Keunggulannya kursor pada blog bisa divariasikan, baik itu menggunakan format .cur, .ani maupun .gif.

Selain itu, penggunaan cursor juga bisa diterapkan hanya pada bagian tertentu saja, misalnya hanya pada Hyperlink (URL), Table, TD, DIV, SPAN, dll.

Bagaimana Cara Mengganti Kursor Mouse pada Blog ?

Cara 1 :

Klik Menu Design > Page Elements > Add Gadget

Pilih gadget "HTML/Java Script"

Copy kode dibawah ini kedalamnya :

<style type="text/css">
body {cursor:url("http://cursors3.totallyfreecursors.com/thumbnails/4.gif"),default} 
</style>

Tekan tombol Save.

Anda dapat mengganti alamat kursor yang lain pada bagian URL.

Cara 2 :

Klik Menu Design > Edit HTML

Carilah kode ]]></b:skin>, lalu paste-kan kode dibawah ini sebelum kode tersebut :

body, a, a:hover {cursor: url(http://cursors3.totallyfreecursors.com/thumbnails/4.gif), default;}

Simpan Template anda.

Sebagai referensi kursor anda bisa mengunjungi situs :

Totally Free Cursors

Cursors @ Fun Utilities

Free Cursors 4U

123 Cursors.com

Beberapa contoh gambar kursor yang bisa anda gunakan :

Tukaran Link Otomatis Yuk

Mau Tukaran Link Secara Otomatis dengan Blog ini ? Disinilah tempatnya. Cukup Masukkan Nama Anda dan URL dari Blog anda, langsung jadi deh :)

Cara Mematikan Fungsi Klik Kanan Mouse dengan JQuery

disable-right-click Klik kanan pada web browser memiliki fungsi yang cukup banyak. Diantaranya adalah mencopy teks, memblok sebagian teks, menyimpan gambar, mengambil url link, dll. Sebagian blogger sengaja mematikan fungsi ini untuk menghindari agar artikel dan gambarnya tidak bisa di copas alias copy + paste. Nah sobat blogger yang belum mengetahui triks ini tentu saja juga bisa menerapkannya pada blog sobat.

Mau tahu caranya ?

1. Login ke blogger sobat, lalu klik > Design > Edit HTML

2. Menggunakan Ctrl + F, carilah tag </head>.

3. Copy-kan kode dibawah ini sebelum tag </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});

//]]>
</script>

4. Langkah terakhir klik pada tombol Save Template.