Kamis, 01 Desember 2011

Edit Posted by with No comments
Komponen Penyusun Motherboard

Motherboard komputer, khususnya motherboard komputer PC disusun atas berbagai komponen yang diperlukan dalam membangun sebuah sistem komputer. Komponen-komponen yang umumnya ada dalam sebuah motherboard adalah:
Sumber foto: http://www.thgtr.com/motherboard/20041125/images/board-big.jpg
  1. Soket Prosesor. Soket ini merupakan tempat dimana prosesor dipasang. Jenis soket menentukan prosesor apa yang bisa dipasang pada soket tersebut. Jadi soket tertentu hanya bisa dipasang prosesor tertentu saja.
  2. Slot Memori. Slot ini digunakan untuk memasang memori utama komputer. Jenis slot memori juga berbeda-beda, tergantung sistem yang digunakannya.
  3. Northbridge, merupakan sebutan bagi komponen utama yang mengatur lalu lintas data antara prosesor dengan sistem memori dan saluran utama motherboard.
  4. Southbridge, sebutan untuk komponen pembantu northbridge yang menghubungkan northbridge dengan komponen atau periferal lainnya.
  5. Slot PCI Express x16, merupakan slot khusus yang bisa dipasangi kartu VGA generasi terbaru.
  6. Slot PCI Express x1, merupakan slot untuk memasang periferal (kartu atau card) lainnya selain kartu VGA.
  7. Slot AGP, merupakan slot khusus untuk memasang kartu VGA generasi sebelum adanya slot PCI Express.
  8. Slot PCI, merupakan slot umum yang biasa digunakan untu memasang kartu atau card dengan kecepatan di bawah slot AGP dan PCI Express.
  9. BIOS (Basic Input-Ouput System). Merupakan program kecil yang dimasukkan ke dalam IC ROM atau Flash yang digunakan untuk menyimpan konfigurasi dari sebuah motherboard.
  10. Baterai CMOS, baterai khusus untuk memberikan daya pada BIOS.
  11. Port SATA, merupakan antarmuka untuk media penyimpanan generasi terbaru. Port SATA bisa digunakan untuk menghubungkan Hard Disk dengan sistem komputer.
  12. Port IDE, merupakan antarmuka media penyimpanan sebelum generasi SATA.
  13. Port Floppy Disk, digunakan untuk menghubungkan media removable atau media penyimpanan yang bisa dicopot yaitu Disket atau Floppy Disk.
  14. Port Power, yaitu port untuk memberikan daya kepada sistem komputer.
  15. Back Panel, merupakan kumpulan port yang biasanya diletakkan di belakang casing atau wadah komputer PC. Port atau colokan yang biasanya ada di belakang casing komputer PC adalah:
  16. Port PS/2 Mouse, untuk menghubungkan mouse dengan komputer.
  17. Port PS/2 Keyboard, untuk memasang keyboard.
  18. Port Paralel, untuk memasang periferal kecepatan rendah dengan lebar data delapan bit. Biasanya digunakan untuk memasang printer sebelum generasi USB.
  19. Port Serial, digunakan untuk memasang periferal kecepatan rendah dengan mode transfer data serial. Namun saat ini jarang digunakan.
  20. Port SPDIF, digunakan untuk menghubungkan komputer dengan periferal audio seperti home theatre.
  21. Port Firewire, untuk menghubungkan peralatan eksternal kecepatan tinggi seperti video capture atau streaming video.
  22. Port RJ45, digunakan untuk menghubungkan komputer dengan jaringan LAN.
  23. Port USB, digunakan untuk antarmuka dengan periferal atau peralatan eksternal generasi baru yang menggantikan port paralel dan Serial.
  24. Port Audio, digunakan untuk menghubungkan komputer dengan sistem audio seperti speaker, mikrofon, line-in dan line-out.
Sumber foto: http://i31.tinypic.com/jhqweg.jpg

Follow Me @Novi_priell

Rabu, 30 November 2011

Edit Posted by with No comments

Cara memasang gambar animasi lucu di pojok blog (widget animasi blog gratis)


Cara menampilkan gambar animasi di pojok blog. Terkadang untuk menghias blog agar tampak lebih menarik maka bisa memasang gambar animasi di blog.Bisa ditempatkan di pojok atas (kiri dan kanan), pojok bawah kiri dan kanan, atau semua pojok diisi gambar lucu-lucu.

Untuk menampilkan gambar lucu, cukup copy salah satu script html di bawah ini kemudian masukkan ke dalam gadget html. Script ini saya buat menggunakan kode html ditambah gambar dari situs sweetim.

Contoh dan scriptnya bisa dilihat di bawah ini :
1.Gajah loncat



Script:

<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>




2. Boring


Script :
<div style="position: fixed; bottom: 0px; left: 20px;width:80px;height:120px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002016B.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>

3.Tuyul ketawa


Script:

<div style="position: fixed; bottom: 0px; right: 20px;width:82px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002031F.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>


4.Boneka joget


Script :

<div style="position: fixed; bottom: 0px; left: 20px;width:82px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002013F.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>


5. Panda main bola


Script :

<div style="position: fixed; bottom: 0px; right: 30px;width:160px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002032D.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi-Blog</a></center></small></div>



6. Tuyul baring


Script :
<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:100px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/0002031E.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Free-Widget-Animasi</a></center></small></div>

7. Panda biru



Script

<div style="position: fixed; bottom: 0px; left: 20px;width:100px;height:100px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/0002033D.gif" title="Click to get more." /></a>
<small><center><a href="http://www.komputerseo.com" target="_blank">Free-Widget-Animasi</a></center></small></div>

8. Panah



Script:

<div style="position: fixed; bottom: 0px; left: 10px;width:210px;height:120px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020236.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>




9. Bunga




Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020322.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>


10.Anjing laut


Script:

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203B5.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>


11.Lumba-lumba


Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BA.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

12.Kucing tidur



Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:140px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203C0.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

13.Kelinci


Script :
<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203A0.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>


14.Dragon


Script:

<div style="position: fixed; bottom: 0px; left: 10px;width:150px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020478.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>


15.Ikan


Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020479.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>


16.Pinguin


Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020484.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

17. Helikopter


Script :
<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

Anda bisa memilih salah satu script di atas kemudian masukkan ke gadget html/javascript. Jika menggunakan blog wordpress gratisan / blogdetik bisa copy script di atas ke widget text html.

Cara memasang widget animasi ke blog :

1. Pilih script yang tersedia

2. Di Dashboard blogger pilih Rancangan - Elemen halaman

3. Pilih Tambah Gadget

4. Pilih HTML/Javascript

5. Masukkan script animasi ke dalam kotak kontent HTML/Javascript


Follow Me @Novi_priell

Rabu, 23 November 2011

Edit Posted by with No comments

Cara membuat Galery Photo pada Bloger

Karena kodenya panjang sekali maka langsung saja kita mulai membuat gallery foto pada blogger.  Dalam hal ini kita mempergunakan 16 buah foto.
Cara pembuatan :
  1. upload foto ke hosting (picasa, atau photobucket, atau yang lainnya)
  2. dapatkan url foto yang telah diupload
  3. bikin postingan dalam mode HTML (bukan Compose)
  4. masukkan kode di bawah ini pada postingan
  5. publish dan lihat hasilnya

membuat-galery-foto-blogspot

<div class="snap_preview">
<div>
<span style="color: #0066ff;font-size: medium;">Seribu Wajah Gayus</span></div>
<style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:25%;} .gallery-caption { margin-left: 0; }</style>
<div class="gallery snap_nopreview">

<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="http://www.google.co.id/imgres?q=novi+aprian+dewi&um=1&hl=id&client=firefox-a&sa=N&rls=org.mozilla:en-US:official&channel=s&biw=1024&bih=584&tbm=isch&tbnid=ZJGsyw3SIFbk3M:&imgrefurl=http://www.facebook.com/permalink.php%3Fstory_fbid%3D10150178777379881%26id%3D52472954880&docid=Gv9JiGItwI3w1M&imgurl=http://profile.ak.fbcdn.net/hprofile-ak-snc4/274999_100001453692316_436829105_q.jpg&w=50&h=50&ei=cbTMTqLINMqqrAfbkYnpDA&zoom=1&iact=hc&vpx=428&vpy=220&dur=625&hovh=50&hovw=50&tx=81&ty=32&sig=110723411762616835356&page=1&tbnh=50&tbnw=50&start=0&ndsp=18&ved=1t:429,r:2,s:0 " width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgREbdoA4zAnXc6DeNFlblYq-eLvW0aKLG8v9RccwY0HxJiqf3RJoe0qjfljyWqX_IK820uBAiyi2y5OnmbHbG3LRpw6ThWV7gQXVfGGEfCX2ZQPb_L4-bB0d1E8RhT_hiZTO4bSyHiD14/s320/bieeen.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZc84iXTnFWJvD5-HkhzCnm9WtQJhGVhSwYfYjEeeR5oyt7_GkVfKrCt4mvvKjwc-1BY_NeJdWx0GXiO9F0409Ml3s9zT-n0IY3AraHN1nd59Ox4Bld8_OFArwCNHDozNYOJYZHTqmjFM/s320/blankon.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYSB8BpQMC6ZlO5VeZH4GPW5TEi-ncrLaYf7gP0XFsWVvvLYWu-R9_n9IYYe-MexLpuwEnLnUMOt6LFxT3Z9turaI53vL62e2WvnChP9rFNZ1z-FhLYCoR_gtCJV7bQkUWu-JIKEuEqJ4/s320/boxing.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdIp5GxHEo80TtKtDBRE5lrmf8zcX5JJ9mxM8Y88EDRALcdOCGqoVtV_TTgC9b7G_R70Vtikb1dBtafOtGifwj9CO-qJNWotVFroJDdwAn7pnNOC0X_tgzxM18PH-3wEKv5csIo5eu2ug/s320/duits.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV_CeYcFF2PqwPG-r7wP8Bisyf7rG6uKV33CZayQmb6KpTa4o8iTOoC5TBkYiZr1epz5Xl3n4Fym2J-ydwcZ5bwI7y3zhGCrMyXSw5LvPQ7VR5twsldw0WZM2Vl7FX2cbwfQTIHeu7Q9U/s320/goyang.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcr5otuTdSQZS95GbqiCSO6eu3PXsloBL6hOXCsp_jLmrvUykRRU29XxAvoH5xFroJTAVqxf-laiA1LJh03JSlOtDLDqjcUkmhpXE8GowLIXkN1ILaURT3SmAnyQ0qh1FsBwVXCbKzmxk/s320/hormat.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWhBi9IsJfscR1LVNE1WJxeaZU1R_c2uCp-CH4rqwApbWQj9DCSz6cHntYyUYtvhvCZrBcWygUKfnnGsp_TXoNBEYG9vXO0fUCC0qVCUc0Ys3HD_WKfGkRQ7wB3hUwcyIPdfaDlk1uG2s/s320/jendr.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVILYIF0hQdaA412VAD7nSfXXFvVglBn2mBy_qsx3jQiVHHZvspSLBrrOTPLQ0dOU3paRBESoEsXZR6hvpgkVZbFmoI3iE-tFaqHlvDUVgyoKNNw-Dj52szCdBL1h7_COq4oVeqKzbLck/s320/koran.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGn5znOiGR0PzzqczJZlWtAqjgQkIKoZi1cAuQVzkwMNsXBKrx506IkZbN4Z8eeWAIYtijqpIuxuY7TQf1hB6volcjxc-zlJ4gvLCSPf9L0w_AuFqNNX8k4g9pJ-z_cv1S5pG1QkAx_Cc/s320/samar.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi025oejgVBd5SW8I_LLt9DlAIO7JEiPi8fjprJBGlkTummeoM1ArdjWysFr8G_def2JdpvtfOW1Q6cl_U0k09YXfrccYWMR7lBTOVdKFc5LQgAbsR1QjaG3oFthyphenhyphenYXC1smnx4laYTFU_g/s320/seribu.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh32thqp4cfVcKdNCxpdbHB7i4D1W7wBDmhH-MK40DI_yq874cohYFIjL68m-kTLFR6JYQZ8VEiQPpWZzf5mstw1U5_tNiwEzqVS4P1FR9KMXUX81w6ybcOhykYkq7P8ohO7vaKSSfE_Hc/s320/silat.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXynPuFOCYalfYgHGrXa-NSykqmPtknEPp6Ve3Hi0BKFwHEtxHUiG-ZmUgErZimQMR55l3iCGUULPogNUI9vRPrjEFmWBBzZ9OpBEfk7M_GsJMv858TItAN094Kwzg3PVYg-hb-XOs-rw/s320/wig1.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5jaPc7tpCFgkTuWWLzxdaGbOzKyHxsB-t2dm-OzwNIyv4VbQo-IqYz-ZifbfVPU6nwBDY7iw8q3f54uDifkp5jK7VPhPQlCsRZmjSbtWlA-nH2DjVulvJA1BtJ3WDC3FKhpw4Ht9w-7A/s320/tenis.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTrFDGWWaFuDsH84fyETX_htXPORNfADomo22j5jwlJZPdDxWz_NF9jS2Ym9nkVr_q2GUncA6UXmwigMzFUAuzZPqRquH5sW6wDK7AAhuvl3z1o1RLwFiUitqhIKIzqo0p4osIzav36xs/s320/santai.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWSsHhiVfELOI-t7ac-GiweTaKQiWnQ8TGa-KgxLNR7mNVdM7xHDsSqVcVqYohSz9hyCVT0qSLdlKekhyphenhyphenhsEvoBXlnhSmNt9pyRqefbPhI88qAd-ytxb2o6xcbtrXimFTnpcV6iKeuS18/s320/kacamata.jpg" width="200" /></a>
</dt>
</dl>
</div>
</div>
Catatan Penting :
  1. Kode yang berwarna merah adalah url foto yang didapatkan dari hosting setelah foto diupload.
  2. Ukuran foto bisa diganti dengan merubah angka 150 dan 200.
  3. Angka 25% adalah prosentase untuk membuat foto berjajar menyamping 4 kolom (rumusnya: 100% dibagi 4 = 25%)
  4. Bila ingin menambah jumlah foto tinggal copy saja mulai kode <dl class="gallery-item"> sampai dengan kode </dl> demikian pula jika ingin menguranginya.
  5. Dalam menuliskan kode harus benar-benar rapat, jangan menggunakan enter, bila masih terdapat ruang kosong maka fungsikanlah backspace untuk menghapusnya sehingga kode menjadi rapat.
  6. Kalau semuanya sudah dilakukan dengan benar, hasilnya bisa dilihat  disini.

Edit Posted by with No comments
Pasang Tombol Like Facebook dan Twetter

Seperti diketahui kalau tombol share atau berbagi berguna untuk memudahkan para pengunjung blog yang ingin membagikan artikel yang telah dibacanya ke jaringan mereka. Facebook Like, Twitter Tweet dan Google +1 merupakan layanan berbagi yang populer saat ini. AddThis membuatnya mudah bagi Anda untuk memilih versi terbaik dan menambahkannya ke blog Anda. Anda bisa mendapatkan tombol share dari AddThis ini tanpa perlu mendaftar terlebih dahulu. Namun, bila Anda mendaftar maka Anda akan mendapat AddThis Analytics Summary secara berkala.
Berikut ini langkah-langkah dalam memasang tombol share versi tersebut di Blogger.
1. Masuk ke akun Blogger Anda.
2. Kunjungi AddThis di http://www.addthis.com/
3. Klik Join Now bila ingin mendaftar atau langsung pilih tombol share seperti gambar di bawah ini lalu klik Blogger, WordPress anda more options.

4. Pada menu Options, pilih Platform Blogger.
5. Klik tombol Install Blogger Widget.
6. Kemudian klik lagi tombol Install Blogger Widget.
7. Klik tombol MENAMBAH WIDGET.
8. Selanjutnya pindahkan elemen tersebut ke area di bawah kolom Posting Blog.
9. Klik tombol SIMPAN.
10. Selesai.


Follow Me @Novi_priell

Edit Posted by with No comments
Cara Pasang Kotak Penelusuran di Blogs

Kotak pencarian merupakan suatu elemen yang dapat memudahkan pengunjung untuk mencari artikel-artikel yang ada di blog tersebut. Dengan memasukkan kata kunci atau keyword lalu mengeklik tombol "Cari" atau menekan tombol "Enter" pada keyboard maka akan muncul link-link artikel yang berhubungan dengan kata kunci tersebut. Bila pada template Blogger Anda tidak tersedia kotak pencarian, Anda dapat menambahkannya sendiri karena fitur ini sudah disediakan oleh Blogger.

Nah, bila Anda ingin menambahkan kotak penelusuran yang didukung oleh Google ini pada blog, silakan simak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan >> Elemen Laman >> Tambah Gadget.

3. Pilih Kotak Penelusuran.

4. Silakan konfigurasikan widget sesuai keinginan Anda, seperti Judul, Tab yang ingin ditampilkan, lalu klik tombol SIMPAN.



5. Pindahkan elemen ke tempat yang Anda inginkan.

6. Klik tombol SIMPAN.

7. Selesai.
Follow Me @Novi_priell

Edit Posted by with No comments
Cara Mmebuat Warna Kotak Komentar 
 
Maksud dari judul di atas adalah kita akan memberi warna serta border pada kolom komentar admin sehingga pengunjung dapat dengan mudah membedakan mana komentar admin dan mana komentar pengunjung lain. Warna kotak komentar yang berbeda ini akan terjadi saat kita berkomentar jika kita selaku admin blog telah sign in di Blogger. Contohnya seperti kotak komentar admin di blog ini yang terlihat berbeda dengan komentar lainnya.


Bila tertarik untuk mengaplikasikan trik ini pada template blog Sobat, silakan simak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Sobat.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk berjaga-jaga kalau nanti terjadi kesalahan kita dapat dengan mudah mengembalikan template seperti semula.

4. Beri tanda centang di Expand Template Widget.

5. Cari kode ]]></b:skin>. Tekan Ctrl + F lalu isikan kode untuk mempercepat pencarian.

6. Copy kode di bawah ini lalu paste di atas kode tersebut.

.comment-body-author {
background: #fee6e6; /* Warna Background */
border:2px dotted #d31111; /*Border*/
margin:0;
padding:0 0 0 0px;
}
  • #fee6e6 merupakan warna untuk latar belakang, silakan ganti kode warnanya untuk mengubah warnanya.
  • 2px dotted #d31111 adalah border style dot dengan ketebalan 2 piksel dan berwarna #d31111. Silakan diubah sesuai keinginan Sobat.
7. Cari kode seperti di bawah ini.

<b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>  
          </dt>

          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>

          <dd class='comment-footer'>

8. Tambahkan kode:
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
di bawah kode:
<data:commentPostedByMsg/>  
          </dt>
dan kode </b:if> di bawah kode:
<dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
sehingga hasilnya menjadi seperti di bawah ini.

<b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>  
          </dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
</b:if>
          <dd class='comment-footer'>

9. Klik tombol SIMPAN TEMPLATE.


Follow Me @Novi_priell

Edit Posted by with No comments
Cara Pasang Update Twitter di Blogs

 Bagaimana cara pasang update Twitter di blog. Nah, buat Sobat-sobat lain yang juga ingin memasang update Twitter di Blogger, silakan simak langkah-langkahnya di bawah ini.

1. Silakan pergi ke halaman http://twitter.com/about/resources/widgets

2. Kemudian klik tab My Website, lalu klik Profil Widget.



3. Selanjutnya isikan username Twitter Sobat pada tab Settings, lalu klik tombol Test Settings untuk melihat pratinjaunya.


4. Untuk mengatur penampilan widget silakan klik tab Preferences, untuk mengatur warna di Appearance sedangkan untuk mengatur ukuran widget di Dimensions. Silakan diatur sesuai keinginan masing-masing. Klik tombol Test Settings untuk melihat preview-nya.

5. Jika sudah selesai semuanya, silakan klik tombol Finish & Grab Code untuk mendapatkan kodenya.


6. Masuk ke akun Blogger Anda.

7. Klik tombol Add to Blogger. (Sobat juga bisa meng-copy paste kodenya secara manual)


8. Klik tombol MENAMBAH WIDGET.

9. Pindahkan elemen Twitter tadi ke tempat yang Sobat inginkan.

10. Klik tombol SIMPAN.


Follow Me @Novi_priell

Edit Posted by with No comments
 Cara Membuat Daftar Isi Per Label dengan Sroll Box

Untuk membuat daftar isi per label dengan scroll box di sidebar blog, kita dapat menggunakan dua cara. Cara yang pertama adalah dengan membuatnya secara manual. Sedangkan cara yang kedua kita bisa menggunakan sebuah script. Setiap cara memiliki kelebihan dan kekurangannya masing-masing.

Bila kita membuat daftar isi secara manual, maka kita harus memasukkan link dari judul-judul posting satu per satu. Hal ini akan membutuhkan banyak waktu untuk mengerjakannya jika link judul posting yang harus dimasukkan sudah cukup banyak. Namun, dengan cara manual ini tidak begitu memperlambat loading blog.

Sedangkan jika kita menggunakan sebuah script, maka waktu yang diperlukan akan lebih singkat. Namun, pemasangan script ini berpotensi memperlambat loading blog. Script ini saya dapat dari Blog Viky dengan perubahan di bagian scroll box-nya. Dengan script ini kita dapat membuat daftar isi berdasarkan satu label saja atau beberapa label sekaligus. Script ini akan menempatkan posting terbaru pada urutan teratas.

Untuk membuat daftar isi berdasarkan satu label tertentu saja, silakan perhatikan langkah-langkahnya di bawah ini.

1. Setelah Sobat masuk di Blogger, klik Rancangan > Elemen Laman > Tambah Gadget. Kemudian pilih HTML/JavaScript.

2. Berikan judul, lalu copy kode di bawah ini dan paste di Konten.

<div style="overflow:auto; width:auto; height:100px; padding:5px; border:1px solid #e6e4e3;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>

<ol>
<script src="http://www.klikmunadi.blogspot.com/feeds/posts/default/-/Jejaring%20Sosial?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>
  • width:auto; menunjukkan lebar scroll box akan mengikuti lebar sidebar.
  • height:100px; menunjukkan tinggi scroll box setinggi 100 piksel. Silakan diganti angkanya untuk mengubah tingginya.
  • border:1px solid #e6e4e3; menunjukkan garis keliling (border) scroll box bergaya solid setebal 1 piksel berwarna #e6e4e3. Silakan disesuaikan dengan keadaan template Sobat.
  • <ol> menunjukkan numbered list, kalau ingin menjadi bullet list silakan diganti dengan <ul>.
  • Ganti klikmunadi.blogspot.com dengan alamat blog Sobat.
  • Ganti Jejaring%20Sosial dengan label yang Sobat inginkan. Penulisan label harus sesuai dengan yang tertera di blog. Perhatikan huruf besar-kecilnya dan spasi diganti dengan %20.
3. Klik tombol SIMPAN.

4. Pindahkan elemen tadi ke tempat yang Sobat inginkan.

5. Klik tombol SIMPAN.

Script di atas hasilnya akan menjadi seperti di bawah ini.


Jika ingin menampilkan lebih dari satu label, silakan ditambahkan script untuk labelnya. Misalnya saya akan menampilkan label Alexa dan Link maka script-nya akan menjadi seperti di bawah ini.

<div style="overflow:auto; width:auto; height:100px; padding:5px; border:1px solid #e6e4e3;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>

<h3>Alexa</h3>
<ol>
<script src="http://www.klikmunadi.blogspot.com/feeds/posts/default/-/Alexa?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
<br/>

<h3>Link</h3>
<ol>
<script src="http://www.klikmunadi.blogspot.com/feeds/posts/default/-/Link?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>

Hasilnya menjadi seperti di bawah ini.


    Alexa

    1. Tiga Tiga Satu Satu Satu Satu
    2. Cara Daftar dan Pasang Meta Tag Alexa di Blog
    3. Cara Memasang Alexa Site Stats Button di Blogger
    4. Cara Mengatur Blog Menjadi Homepage
    5. Tips Meningkatkan Peringkat Alexa Sebuah Blog
    6. Cara Memasang Alexa Toolbar di Browser Firefox
    7. Seputar Peringkat Alexa
    8. Cara Pasang Alexa Traffic Rank Button

    Link

    1. Cara Membuat Link "klik di sini" di Blogger
    2. Cara Membuat Link Text Menjadi Huruf Miring Saat Disorot Mouse
    3. Cara Membuat Link Saat Berkomentar di Blogger
    4. Cara Membuat Link di Gmail
    5. Cara Membuat Link atau Tombol Reply Komentar
    6. Cara Membuat Tombol Link
    7. Cara Membuat Semua Link Membuka di Tab Baru
    8. Cara Menghilangkan Garis Bawah pada Link di Blogger
    9. Cara Membuat Link Berkedip-kedip
    10. Cara Membuat Link yang Membuka di Dua Tab Baru
    11. Cara Membuat Link yang Membuka di Tab Baru
    12. Cara Membuat Link Banner Membuka Sendiri Saat Tersentuh Kursor Mouse
    13. Cara Membuat Link di Blogger

Cara di atas merupakan cara yang menggunakan script. Jika Sobat tertarik untuk menggunakan cara manual seperti yang saya terapkan pada blog ini, silakan simak langkah-langkahnya di bawah ini. Sebelum mengikuti cara ini, silakan Sobat memasang widget daftar isi karya Abu Farhan seperti yang terpasang di blog ini.

1. Buka daftar isi blog Sobat.

2. Blok posting-posting dari label mana yang akan di ambil. Misalnya saya mengambil label Jejaring Sosial juga seperti contoh menggunakan script. Setelah diblok, lalu klik kanan dan pilih Lihat Kode Sumber Teks yang Dipilih. (Saya menggunakan Firefox 5.0)


3. Copy semua teks yang muncul di jendela Sumber DOM yang Dipilih.

4. Masuk ke akun Blogger Sobat.

5. Klik Rancangan > Elemen Laman > Tambah Gadget.

6. Pilih HTML/JavaScript.

7. Beri judul, paste kode tadi di Konten. Silakan diedit dan hapus kata-kata yang tidak diperlukan (seperti kata "New" dan lain-lain) sehingga susunannya akan menjadi seperti di bawah ini.

<ol><li><a href="http://klikmunadi.blogspot.com/2011/06/cara-buat-facebook-page-dan-pasang-like.html">Cara Buat Facebook Page dan Pasang Like Box di Blog</a></li>
<li><a href="http://klikmunadi.blogspot.com/2011/05/cara-membuat-akun-facebook.html">Cara Membuat Akun Facebook</a></li>
<li><a href="http://klikmunadi.blogspot.com/2011/06/cara-membuat-akun-twitter.html">Cara Membuat Akun Twitter</a></li>
<li><a href="http://klikmunadi.blogspot.com/2011/06/cara-membuat-akun-di-salingsapacom.html">Cara Membuat Akun di SalingSapa.com</a></li>
<li><a href="http://klikmunadi.blogspot.com/2011/07/cara-menghapus-sebuah-halaman-facebook.html">Cara Menghapus Sebuah Halaman Facebook</a></li>
<li><a href="http://klikmunadi.blogspot.com/2011/02/salingsapacom-situs-jejaring-sosial.html">Salingsapa.com, Situs Jejaring Sosial Islami</a></li></ol>

8. Kemudian berikan kode untuk scroll box-nya, sehingga hasilnya akan menjadi seperti ini.

<div style="overflow:auto; width:auto; height:100px; padding:5px; border:1px solid #e6e4e3;">
<ol><li><a href="http://klikmunadi.blogspot.com/2011/06/cara-buat-facebook-page-dan-pasang-like.html">Cara Buat Facebook Page dan Pasang Like Box di Blog</a></li>
<li><a href="http://klikmunadi.blogspot.com/2011/05/cara-membuat-akun-facebook.html">Cara Membuat Akun Facebook</a></li>
<li><a href="http://klikmunadi.blogspot.com/2011/06/cara-membuat-akun-twitter.html">Cara Membuat Akun Twitter</a></li>
<li><a href="http://klikmunadi.blogspot.com/2011/06/cara-membuat-akun-di-salingsapacom.html">Cara Membuat Akun di SalingSapa.com</a></li>
<li><a href="http://klikmunadi.blogspot.com/2011/07/cara-menghapus-sebuah-halaman-facebook.html">Cara Menghapus Sebuah Halaman Facebook</a></li>
<li><a href="http://klikmunadi.blogspot.com/2011/02/salingsapacom-situs-jejaring-sosial.html">Salingsapa.com, Situs Jejaring Sosial Islami</a></li></ol>
</div>

9. Klik tombol SIMPAN.

10. Pindahkan elemen ke tempat yang Sobat inginkan.

11. Klik tombol SIMPAN.

Hasilnya menjadi seperti di bawah ini.



Follow Me @Novi_priell

Edit Posted by with No comments
Cara Memasang Mega Tab Google di Bloger

Menanggapi pertanyaan Sobat David Prasetiawan pada komentar posting yang berjudul Cara Daftar dan Pasang Meta Tag Yahoo! di Blog yang menanyakan tentang pemasangan meta tag Google di blog, maka pada kali ini saya akan coba membahasnya. Dengan memasang meta tag Google ini pada blog, kita berharap Google dapat mengindeks blog kita dengan baik.

Nah, berikut ini adalah langkah-langkah untuk memasang meta tag Google pada Blogger.

1. Silakan kunjungi halaman Webmaster Tools di http://www.google.com/webmasters/tools/

2. Kemudian Sign In dengan menggunakan akun Google.

3. Selanjutnya klik tombol Tambahkan situs yang dipilih pada blog yang ingin ditambahkan meta tag.



4. Klik segitiga hitam pada link Kelola dan klik link Tambahkan atau hapus pemilik.


5. Selanjutnya klik link Verifikasikan dengan menggunakan metode yang berbeda.


6. Pilih Tambahkan tag meta ke beranda situs Anda kemudian copy meta tag yang diberikan oleh Google.


7. Masuk ke akun Blogger Anda.

8. Klik Rancangan > Edit HTML.

9. Paste kode meta tag tadi di bawah kode <head> sebelum bagian <body> pertama, kalau saya sih biasanya meletakkannya di bawah kode <b:include data='blog' name='all-head-content'/>.

10. Klik tombol SIMPAN TEMPLATE.

11. Kembali lagi ke halaman verifikasi tadi dan klik tombol Verifikasi.



Follow Me @Novi_priell

Edit Posted by with No comments
Memasang Tombol Follow Me On Twetter

Apakah Sobat mempunyai sebuah akun di Twitter? Bila ya, promosikan saja akun Twitter Sobat dengan memasang tombol Follow Me on Twitter di blog. Tombol Follow ini dapat memudahkan pengunjung yang ingin menjadi follower akun Twitter Sobat.
Tombol Follow yang akan kita pasang ini bentuknya seperti di bawah ini.



Ayo diklik tombol Follow di atas untuk menjadi follower klik_munadi di Twitter. Untuk memasang tombol Follow seperti di atas, silakan ikuti langkah-langkahnya di bawah ini.

1. Silakan kunjungi halaman http://twitter.com/about/resources/followbutton

2. Isikan username Sobat.

3. Pilih warna latar belakang yang akan digunakan.

4. Tentukan apakah Sobat mau menampilkan jumlah follower atau tidak di sebelah tombol.

5. Pilih bahasa yang ingin digunakan.



6. Pratinjau atau preview tombol dapat Sobat lihat di sebelah kanan.


7. Selanjutnya copy kode tombol Follow yang muncul.


8. Paste kode tersebut di blog Sobat. Penempatannya terserah Sobat, apakah pada halaman posting atau di sidebar, yang penting dapat dilihat dengan jelas oleh pengunjung blog.

Follow Me @Novi_priell

Edit Posted by with No comments
Cara Mmembuat Indent Pada Baris Pertama di Blogs


Ada beberapa cara yang dapat kita lakukan saat membuat posting di Blogger agar tampilan teksnya tampak seperti artikel yang ada di koran atau majalah. Misalnya saja dengan membuat drop cap atau membuat posting menjadi dua kolom. Selain itu, kita juga bisa membuat indent kiri pada baris pertama sebuah alinea atau paragraf. Di MS Word indent jenis ini biasa dikenal dengan istilah "First Line Indent".
Untuk membuat "First Line Indent" ini saat membuat posting di Blogger kita perlu menambahkan kode <div style="text-align: justify; text-indent: 0.5in;">teks atau tulisan</div> pada mode Edit HTML. "Justify" menunjukkan perataan teks akan rata kanan-kiri. "0.5in" menunjukkan jarak indent. Ketikkan alinea atau paragraf di teks atau tulisan.


Follow Me @Novi_priell

Edit Posted by with No comments
Cara Membuat Lencana Facebok Terbuka di Blogs


Bila kita memasang Lencana Facebook di blog Blogger, maka bila diklik Lencana atau Badge tersebut akan terbuka di tab yang sama. Hal ini akan membuat pengunjung kehilangan halaman blog kita karena tergantikan oleh halaman hasil pengeklikan Lencana tersebut. Agar pengunjung tidak kehilangan halaman blog kita, buat saja Lencana tersebut jika diklik akan terbuka di tab baru.

Bagaimana caranya? Caranya cukup mudah yaitu dengan menambahkan kode Lencana Facebook tersebut dengan kode target="_blank" persis seperti kita membuat link terbuka di tab baru. Kode sebuah Lencana Facebook atau Badge kurang lebih seperti di bawah ini.

<!-- Facebook Badge START --><a href="http://www.facebook.com/people/Klik-Munadi/100002086096239" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Klik Munadi">Klik Munadi</a><br/><a href="http://www.facebook.com/people/Klik-Munadi/100002086096239" target="_TOP" title="Klik Munadi"><img src="http://badge.facebook.com/badge/100002086096239.1187.982418615.png" style="border: 0px;" /></a><br/><a href="http://www.facebook.com/badges/" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Make your own badge!">Create Your Badge</a><!-- Facebook Badge END -->

Anda ganti saja semua kode target="_TOP" yang ada di kode Lencana dengan kode target="_blank" agar bila diklik link-linknya akan terbuka di tab baru.


Follow Me @Novi_priell

Edit Posted by with No comments
Cara Memasang Jadwal Shalat di Blogs
Pada postingan terdahulu di blog ini telah dibahas mengenai pemasangan jadwal sholat di blog. Kali ini blog Klik Munadi akan membahas hal yang serupa dan jadwal sholat tersebut masih bersumber dari Republika. Namun, jadwal sholat yang berikut ini memiliki beberapa perbedaan bila dibanding dengan jadwal sholat dari Republika lainnya.


Ukuran jadwal sholat ini tingginya jauh lebih rendah dari yang sebelumnya. Jadwal sholat ini dilengkapi dengan hari, tanggal, dan tahun serta jam kapan jadwal sholat tersebut diakses. Selain itu, tampilannya disertai dengan pesan sponsor. Jadwal sholat ini memuat waktu sholat untuk 56 wilayah atau kota di Indonesia. Embed dari jadwal sholat tersebut adalah:
<iframe src="http://www.republika.co.id/jadwal_sholat/index.php" scrolling="no" width="300" height="130" frameborder="no" framespacing="0"> </iframe>

Jadwal sholat yang satu ini cocok dipasang di sidebar sebuah blog yang mempunyai lebar 300 piksel atau lebih. Namun, bila ingin tetap menaruhnya di sidebar yang kurang dari 300 piksel, kita dapat menggunakan fungsi scroll untuk menyiasatinya. Misalnya, kita akan memasang jadwal sholat ini pada sidebar yang mempunyai lebar 262 piksel atau kurang dari itu, maka kita apit embed jadwal sholat tersebut dengan kode <div style="overflow:auto; width:100%px;"> dan </div>. Sehingga kodenya menjadi seperti di bawah ini.

<div style="overflow:auto; width:100%px;"><iframe src="http://www.republika.co.id/jadwal_sholat/index.php" scrolling="no" width="300" height="130" frameborder="no" framespacing="0"> </iframe></div>

Maka hasilnya adalah seperti di bawah ini:


Untuk memasangnya di sidebar, silakan masuk ke akun Blogger >> Rancangan >> Elemen Laman >> Tambah Gadget >> HTML/JavasScript. Lalu masukkan kodenya di Konten dan Simpan.


Follow Me @Novi_priell

Edit Posted by with No comments
Cara Memasang Kalender Di Blogs
Bila sobat ingin memasang sebuah kalender di blog, sobat dapat memanfaatkan beragam situs penyedia kalender gratisan. Mereka menyediakan tampilan kalender-kalender yang menarik untuk dilihat sehingga dapat mempercantik tampilan blog sobat. Salah satu situs yang menyediakan kalender adalah Free Blog Content. Untuk memasang kalender di blog silakan sobat ikuti langkah-langkahnya di bawah ini.

  • Kunjungi situs http://www.free-blog-content.com
  • Pilih kategori kalender yang diinginkan.
  • Klik kanan mouse di area kode kalender yang disukai.
  • Klik Pilih Semua (Select All).
  • Klik kanan mouse di area kode yang telah ter-highlight.
  • Klik Salin (Copy).
  • Masuk ke akun Blogger sobat.
  • Di Dasbor, klik Rancangan.
  • Pilih Elemen Laman.
  • Klik Tambah Gadget.
  • Pada Dasar-dasar pilih HTML/Java Script.
  • Isikan Judul yang diinginkan.
  • Klik kanan mouse di kolom Konten kemudian pilih Tempel (Paste).
  • Klik tombol SIMPAN.
  • Pindahkan Elemen ke tempat yang diinginkan.
  • Klik tombol SIMPAN.
  • Klik Lihat Blog untuk melihat hasilnya.

Follow Me @Novi_priell