Site Meter
adv
Photobucket

58 Widget Pilihan Untuk Mempercantik Blog Anda

Widget jika berhubungan dengan web ataupun blog maka yang dimaksud adalah sebuah tool (alat yang berguna) dalam memaksimalkan keindahan, kecantikan, serta “kenarsisan” blog Anda. *heuheu* Widget sendiri merupakan sebuah elemen yang berguna dan mudah digunakan baik yang telah disediakan oleh penyedia layanan blog yang Anda gunakan maupun berasal dari third party atau pihak ketiga.
Penggunaan serta pemasangan widget telah sangat dimudahkan oleh pihak-pihak penyedia layanan, sehingga yang Anda perlukan *biasanya* hanya mendaftar atau bahkan ada yang tidak perlu mendaftar sama sekali, cukup mengcopy scrift yang telah disediakan dalam element blog Anda. Nah berikut ini 58 widget pilihan untuk mempercantik tampilan blog Anda.
Note: Saya sarankan jangan terlalu berlebihan memasang widget karena selain agama juga melarang *kesannya* memasang widget yang berlebih-lebihan *terlalu banyak* bisa mengakibatkan blog jadi terkesan kumuh dan membebani loading halaman blog Anda sehingga tidak menutup kemungkinan terjadi PLP.


MyBlogLog’s Recent Readers – Widget satu ini sejak kehadirannya didunia lain blog langsung mendapat sambutan meriah layaknya seleb baru yg lagi naek daun. Widget ini memperlihatkan avatar dari para pengunjung blog Anda. Dan dengan kepopuleran widget satu ini sampai-sampai manajemen MyBloglog mampu meyakinkan Yahooo (baca: yahuu) untuk membeli sahamnya. *Mantab sangad* So, yang Anda perlukan untuk mendapat widget ini adalah mempunyai account yahuu. 

Mashable – Widget ini menyediakan semacam newsreel (headline news) dalam element blogger yang memberikan cuplikan berita/postingan dari sosial networking. Bedanya ada pilihan warna untuk disesuaikan dengan layout blog Anda. 

Headline News – Seperti widget mashable, widget ini pun menampilkan cuplikan headline berita dari situs-situs di seluruh penjuru dunia.

Flickr Flash Photo Stream Badge – Widget ini menampilkan photo-photo dari profil flickr Anda secara berurutan dan dengan sentuhan flash. Flickr merupakan bagian dari yahoo jadi untuk mendapatkan widget ini Anda memerlukan account yahoo seperti pada widget MyBlogLog di atas. 

Preview Anywhere – sudah cukup terkenal juga nama snapshots bagi pengguna blogger bahkan untuk wordpress widget ini menjadi rekomendasi khusus dalam dashbord admin penggunanya. Fungsinya untuk melihat preview link keluar dengan tampilan popup yang tidak terlalu besar ketika pengunjung mengarahkan mouse pada teks atau banner yang “mengandung” link. Pro-kontra memang selalu ada; sebagian menganggap widget ini berguna karena menandakan kejujuran kita selaku pemilik blog, namun ada juga yang mencap kambing hitam sebagai biang lojalabo. *heuheu* 

Twitter Badge – Jika dalam keseharian hidup Anda banyak hal-hal menarik dan begitu penuh warna dengan segudang aktifitas serta ingin agar orang lain tahu dan menampilkan cuplikan kalimat-kalimat pendek *satu paragraf misalnya* (140 karakter) Anda sedang melakukan kegiatan ini, Anda sedang berada dimana, Anda sedang bersama siapa, Anda sedang, sedang, dan sedang lainnya…. Maka widget ini cocok untuk dipasang pada blog Anda. Daripada bikin sendiri element blogger/wordpress *secara manual* menuliskan teks sebagai pesan kepada pengunjung blog Anda bahwa Anda sedang ini-itu, saya sarankan lebih baik menggunakan widget ini. Widget ini akan menampilkan “tweet” terbaru Anda. Dan untuk pengguna WP sudah ada plugin untuk memposting twitter langsung dari blog Anda, contohnya di sidebar blog ini ada celotehan saya sekedar catatan apa yang tengah saya kerjakan menggunakan plugin tersebut.

Digg News – Widget ini manampilkan Link terakhir yang masuk ke Digg sebuah social bookmarking yang sudah “kakoncara” dijagat perbloggan mah lah… *halaaah* Pilihan theme dan warna mudah untuk Anda atur agar sesuai dengan template blog Anda.

FEEDJIT – Widget ini paling wuenak diantara widget lainnya, misalkan kalo kita lagi cape, lesu, sendi-sendi lagi nggak enak, otot kaku, badan pegal, masuk angin… maka suruh aja si mbok untuk feedjit *oooh itu pijit ya* heuheu. Feedjit merupakan layanan real time traffic pada blog Anda. Ada empat pilihan widget Feedjit yang bisa Anda gunakan, silahkan kunjungi saja Feedjit dan lihat empat widget apa saja yang tersedia.

LineBuzz – Komentar dalam widget inline untuk Blog Anda. Widget ini sangat berguna bagi blog yang memiliki frekuensi di atas 900 Mhz tinggi dalam menerima komentar, sehingga memudahkan berkomentar jika terjadi diskusi yang berkepanjangan *waaah keren euy*. Hanya sayang, pengunjung harus terdaftar LineBuzz dulu untuk berkomentar *bikin berabe juga*

Flixn – Jika kompi atau laptop Anda terpasang webcam, maka widget ini bisa digunakan untuk memperlihatkan ekspresi “narsis” Anda langsung melalui blog Anda *heuheu* . Jadi pengunjung blog tidak hanya membaca postingan Anda tapi bisa menyaksikan “konser” Anda didepan monitor, mirip webcam yahoo.

3Jam – Widget ini memudahkan pengunjung blog untuk berinteraksi dengan Anda dengan mengirimkan SMS pada henpun Anda tanpa mereka tahu nomor HP Anda.

Jaxtr – Seperti halnya widget 3jam di atas, dengan menggunakan widget Jaxtr ini, pengunjung blog bisa menghubungi HP Anda tanpa mereka tahu nomor HP Anda. *nomor HP Anda dijamin kerahasiaannya*

LinkedInABox – Menampilkan profile Anda di LinkedIn. Dan widget ini sangat cocok untuk blog personal.

Box Widget – Dengan widget ini, memudahkan pengunjung blog Anda untuk mengupload file ke tempat penyimpanan online box.net melalui widget box.net pada blog Anda.

Price of gas – Menampilkan harga bahan bakar kendaraan bermotor secara online (US$), kalo di Indonesia mungkin seperti harga Bensin premium, pertamax dan solar. “sangat cocok” untuk pengunjung blog Anda yang mobilitasnya tinggi. *terasa aneh* tapi kalo blog Anda memang membahas masalah gas bumi, bahan bakar dan yang sejenis maka widget ini sangat cocok, lagian tidak perlu mendaftar hanya mengcopas scrift yang disediakan Gas-Cost.Net.

iBegin Weather Widget – Menampilkan laporan cuaca untuk wilayah Kanada dan Amerika. Seperti widget Price of Gas di atas widget ini hanya cocok untuk blog yang memang membahas masalah yang sama.

ClockLink – Sepertinya widget ini yang paling banyak diminati dan digunakan para blogger yang peduli dengan manajemen waktu *ekhm* seperti namanya clock, widget ini menampilkan petunjuk waktu atau jam pada blog Anda.

Film Loops – Menampilkan kesimpulan filem terakhir yang Anda tonton melalui account FilmLoops Anda.

Daily Painters – Widget ini sangat cocok bagi Anda yang berjiwa seni tinggi karena widget ini menampilkan lukisan-lukisan dari pelukis terkenal di dunia.

WhoLinked – Memperlihatkan kepada pengunjung blog Anda situs-situs yang telah melink pada blog Anda. tidak perlu mengupdate karena WhoLinked ini secara teratur mengupdate sendiri web/blog yang melink blog Anda.

Criteo AutoRoll – Widget ini memperlihatkan link menuju blog-blog yang sehaluan dengan blog Anda. Sehaluan…? Secara…! Heuheu.

Calender – Berbeda dengan wordpress yang sudah mempunyai widget ini di dalamnya, untuk pengguna blogger widget kalender belum tersedia, oleh karenanya jika Anda ingin menampilkan kalender maka widget satu ini pantas di perhitungkan.

Bitty Browser – Menampilkan web browser “mini” pada sidebar blog Anda. Tapi mesti hati-hati sama yang namanya “mini” ada rok mini, metro mini, dan mini-mini yang lainnya… *beuh ga nyambung*

Leafletter – Ini juga sama masih masalah mini, widget ini membuat website mini dan menyimpannya pada blog Anda.

WikiSeek – Menampilkan widget untuk pencarian pada Wikipedia.

FeedCount – Menampilkan jumlah pengunjung blog Anda melalui banner kecil dan widget ini berhubungan dengan account feedburner Anda.

Technorati Link Count – Menampilkan reaksi jumlah link yang menuju blog Anda dari salah satu directory blog terbesar dan terpopuler abad ini… dialaaaaaaah Technoraaaaati. *juara tinju dunia kita* halaaaah.

MyPageRank – Inilah cara lain untuk sombong menunjukkan betapa hebat dan bermanfaatnya blog Anda dengan menampilkan Ranking Google atau Google PageRank (PR). Penilaian PR google ini seperti saat kita SD dulu ada rangking 1 sampe 10, bedanya PR yang baik menurut google itu yang lebih besar alias 10, kalo baru satu berarti belum besar-besar amat blog Anda.

CheckPageRank – Pilihan lain untuk menampilkan PR blog Anda, namun kelebihannya widget ini menampilkan juga ranking Alexa.

Counter Statistic – Bagi Anda yang ingin melihat jumlah pengunjung Anda sehari-hari, maka widget ini adalah salah satu yang menyediakan fasilitas tersebut.

Web/Blog Counter – Widget ini datangnya dari Histats.Com yang memungkinkan Anda bisa melacak pengunjung datang dari mana saja, lewat pintu mana saja, dan menghitung jumlah pengunjung blog Anda sehari-hari berapa, referer dari blog mana saja, dan jika melalui search engine semisal google, yahoo, msn menggunakan keyword apa. Jika Anda ingin melihat IP Address pengunjung blog Anda, widget histats ini yang bisa saya rekomendasikan.

BlinkxIt – Widget mantab sangad karena menampilkan banner kecil dibawah setiap postingan blog Anda, ketika banner BlikxIt itu di klik maka keluar mini popup seperti snapshot dan menampilkan video yang berhubungan dengan postingan blog Anda.

Skype button – Seperti widget menampilkan status online YM pada blog Anda, widget ini pun hampir sama cuma bedanya status online/offline pada account skype Anda yang ditampilkan.

RockYou Horoscope – Saya tidak menganjurkan widget ini pada blogger muslim, soalnya ini berupa ramalan yang sudah jelas-jelas dilarang oleh agama kita sodara-sodara! Konsekuensinya jika Anda percaya ramalan maka 40 hari shalat Anda tidak diterima *mode galak* Heuheu…

Bravenet Horoscope – Seperti halnya widget di atas, bravenet pun menyediakan widget horoscope untuk blog Anda.

del.icio.us Tagometer – Widget ini menampilkan berapa banyak pengguna del.icio.us membookmark blog Anda.

del.icio.us Linkrolls – Widget ini menampilkan bookmark terakhir Anda dari del.icio.us.

Timelines – Perlu membuat timeline untuk blog Anda? Maka widget cukup mudah digunakan, hanya perlu memasukan RSS blog Anda lalu memasukkan ukuran lebar dan tingginya.

PollDaddy – PollDaddy memberikan Anda kemudahan membuat sebuah poling atau survey
.
Vizu – Pilihan widget lain untuk membuat poling pada blog Anda, kelebihannya widget ini cocok dengan platform blog manapun.

AnswerTips – Memperlihatkan jawaban dari Answers.com untuk berbagai macam istilah yang terdapat pada blog Anda *berguna jika pengunjung blog Anda adalah mas tukul*. pis mas… Heuheu.

AnswerBoxes – Masih widget dari Answer.Com hanya saja widget ini memberikan kesempatan pada pengunjung blog Anda untuk memasukan istilah yang tidak dimengerti dan mendapat jawaban  dari Answer.Com.

Now Playing – Jika Anda ingin sharing playlist musik yang sedang Anda dengarkan dan ingin agar pengunjung blog Anda juga mendengarkan, nah Signamp menawarkan widget ini, biar signamp yang melakukan trik bagaimana hal itu mungin terjadi.

BuzzBoost – Menampilkan headline dari RSS FeedBurner blog Anda pada blog Anda sendiri ataupun blog Anda yang lain atau juga pada blog teman Anda atau mungkin blognya sodara Anda atau juga pada blognya dia, mereka dan dirinya. *jangan maksa deh*

LibraryThing – Tampilkan buku terakhir yang telah Anda baca wahai kutu buku!

Plaxo Address Book – Izinkan pengunjung setia yang telah Anda percayai untuk mengakses buku tamu mereka langsung dari blog Anda.

AuctionAds – Widget yang menampilkan pelelangan barang dari eBay, dan memberikan kesempatan pada untuk mendapat persentase *uang denger gitu loh* dengan catatan pengunjung blog Anda membeli barang lelang tersebut.

aStore – Hampir mirip dengan AuctionAds di atas, hanya saja widget ini datangnya dari Amazon. Widget ini memungkinkan Anda menampilkan “warung sederhana” tapi jika ada yang beli lewat warung Anda tersebut Anda mendapatkan keuntungan dari Amazon. Btw, sudah daftar amazon belum? Kalo belum Klik Disini untuk daftar dan langsung buat “warung sederhananya”. Heuheu.

Deal of The Day – Masih dari Amazon ini merupakan widget paling anyar yang dirilis amazon. Yang menarik dari widget ini adalah diskon besar-besaran yang ditawarkan untuk pengunjung blog Anda. Dan jika ada yang membeli barang dari widget tersebut tentu Anda mendapat persenan dari amazon, lumayanlah buat beli kacang goreng. Heuheu.

Plazes – Widget ini menampilkan dimana posisi Anda, apakah sudah PW atau belum…? Kalo belum PW cari dulu deh tempat yg nyaman buat ngeblog biar PW . Nah widget ini menampilkan lokasi peta dimana kamu berada. *nyambungkah?*

Stockalicious – Perlihatkan portfolio Anda dengan widget ini, dan sharing dengan blogger lain. Biar semua orang tahu berapa banyak dana yang telah Anda keluarkan untuk ngeblog. *mudah2an ada yg mau nyumbang* heuheu.

Yahoo! For Good – Widget ini untuk membuat “kotak amal” dan akan didonasikan kepada yang berhak menerimanya. *kata Yahoo* Jadi bagi Anda yang berjiwa sosial, rasanya widget ini perlu, anggap saja blog Anda warung atau toko yang menerima penitipan kotak amal. ^_^

Giftspace – Sahabat ataupun teman blogger akan memberi hadiah di hari Ultah Anda tapi mereka tidak tahu harus membeli hadiah apa yang sekiranya Anda inginkan. Nah melalui widget ini biarkan mereka tahu kado apa yang sebenarnya Anda inginkan. *meski diberi nawar boleh donks* heuheu.

MixMap – Dari widget ini Anda bisa melihat pengunjung profile MySpace Anda dari sebuah Peta.

Google Map Widget – Perlihatkan pencarian pada peta google dari blog Anda.

Google Video Search – Tampilkan form pencarian video dari video pilihan pada blog Anda.

This Day in History – Widget ini menampilkan cuplikan bahwa hari ini ada sejarah apa pada masa lalu.

Shoutbox – Fungsi shoutbox adalah untuk menampung pesan singkat teman atau para blogger yang tengah blogwalking. Untuk shoutbox banyak pilihan yang bisa Anda gunakan diantaranya, Shoutmix, Cbox, atau kalo Anda berorientasi nasionalis dan cinta produk dalam negeri Anda bisa memilih Oggix. Dan awal 2008 ini oggix pun meluncurkan versi blognya, jika Anda ingin berpindah layanan atau sekedar mencoba blognya oggix silahkan daftar. Pssst jangan bilang kalo saya udah nyoba blognya oggix, klik disini untuk melihat blog oggix punya saya *heuheu*

Demikian diantara widget yang bisa digunakan untuk mempercantik blog Anda. Pilih saja yang sekiranya bermanfaat dan cocok untuk blog Anda. Ingat! Kebanyakan widget bisa mengesankan blog Anda kumuh dan membuat lojalabo dan berakibat pengunjung malas untuk datang kedua kali.
Kalo mau menambahkan widget lain yang Anda temukan silahkan tambahkan pada kolom komentar. Terimakasih

Sumber dari : hakimtea.com


Read More »
19.10 | 0 komentar
0 komentar
Label:

Baca ini juga :

Belajar Kode Html ( part II )

Dalam HTML seperti pemformatan text berupa tebal,miring,garis bawah,membuat tabel,dll,dapat di lakukan dengan kode-kode.Bagi anda yang belum begitu mengerti HTML
Di bawah ini ada beberapa kode-kode untuk mewakili pemformatan text maupun mebuat berbagai object dalam halaman anda,meskipun sekarang sudah banyak pembuatan halaman HTML dengan software instant seperti Dreamweaver dll.
Membuat Center,gunakan kode : <p align="center">Belajar</p> hasilnya seperti:
Belajar
Membuat Posisi kekanan gunakan kode : <p align="right">Belajar</p> hasilnya seperti :
Belajar
Membuat Posisi kekiri gunakan kode: <p align="left">Belajar</p> hasilnya seperti :
Belajar
Membuat Huruf Tebal gunakan kode: <b>Belajar</b> hasilnya seperti :
Belajar
Membuat Huruf Garis Bawah gunakan kode : <u>Belajar</u> hasilnya seperti :
Belajar
Membuat Huruf bercetak Miring gunakan kode : <i>Belajar</i> hasilnya seperti :
Belajar
Membuat Kombinasi huruf tebal,miring,garisbawah,gunakan kode :
<b><i><u>Belajar</u></i></b> hasilnya seperti :
Belajar
Membuat Huruf tebal strong gunakan kode : <srong>Belajar</strong> hasilnya seperti :
Belajar
Membuat Huruf Hidden gunakan kode : <span style="visibility: hidden">Belajar</span> hasilnya seperti :
Belajar
Namanya juga hidden..ya..ga keliatan..
Membuat Huruf Besar semua (uppercase) gunakan kode :
<span style="text-transform: uppercase">Belajar</span> hasilnya seperti :
Belajar
Membuat Huruf Small caps gunakan kode:
<span style="font-variant: small-caps">Belajar</span> hasilnya seperti ini:
Belajar
Membuat Huruf Subscribe / kecil di bawah gunakan kode:
<p>4<sub>2</sub></p>hasilnya seperti ini:
42
Membuat Huruf Superscribe / pangkat gunakan kode:
<p>4<sup>2</sup></p> hasilnya seperti ini:
42
Membuat Huruf bergaris atas gunakan kode:
<span style="text-decoration: overline">Belajar</span> hasilnya seperti ini:
Belajar mengganti huruf
Membuat Huruf bergaris tengah gunakan kode:
<strike>Belajar</strike> hasilnya seperti ini:
Belajar
Menentukan jenis huruf gunakan kode:
<p><font-family="Arial" >Belajar</font></p> hasilnya seperti ini:
Belajar
Menentukan ukuran huruf gunakan kode:
<p><font-size="3" >Belajar</font></p> hasilnya seperti ini:
Belajar
Menentukan warna huruf gunakan kode:
<p style="color: green; >Belajar</p> hasilnya seperti ini:
Belajar
Membuat bullet dot bolong gunakan kode:
<ul type="circle">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
  • DOT 1
  • DOT 2
  • DOT 3
Membuat bullet dot kotak gunakan kode:
<ul type="square">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
  • DOT 1
  • DOT 2
  • DOT 3
Membuat bullet dot bulat gunakan kode:
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
  • DOT 1
  • DOT 2
  • DOT 3
Mengatur posisi bullet gunakan kode:
<blockquote>
<blockquote>
<blockquote>
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
</blockquote>
</blockquote>
</blockquote>
hasilnya seperti ini:
  • DOT 1
  • DOT 2
  • DOT 3
Menentukan kombinasi warna,jenis,dan ukuran huruf gunakan kode:
<p><font style="color: red; font-family: courier new; font-size: 15px;" >Belajar</font></p>
hasilnya seperti ini:
Belajar
Membuat tabel border solid gunakan kode:
<table border="1" width="200">
<tr>
<td style="border-style: solid">Text</td>
</tr>
</table>
hasilnya seperti :
Text

Membuat tabel border dot gunakan kode:
<table border="1" width="200"
style="border-style: dotted">
<tr>
<td border="2" style="border-style:
dotted">Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

Membuat tabel border dashed gunakan kode:
<table border="1" width="200" style="border-style: dashed">
<tr>
<td style="border-style: dashed">Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

Membuat tabel border groove gunakan kode:
<table border="1" width="200" style="border-style: groove">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

Membuat tabel border Ridge gunakan kode:
<table border="1" width="200" style="border-style: ridge">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
Text

Membuat tabel border Insert gunakan kode:
<table border="1" width="200" style="border-style: inset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
Text

Membuat tabel border Outset gunakan kode:
<table border="1" width="200" style="border-style: outset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
Text

Membuat Tabel Biasa gunakan kode :
<table border="1"width="200"><td>Text</td></table>
hasilnya seperti:
Text

Membuat Tabel berwarna gunakan kode :
<table border="1"width="200"bgcolor="green"><td>Text</td></tabel> hasilnya seperti :
Text

Membuat Tabel berwarna tak berbingkai gunakan kode :
<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel> hasilnya seperti:
Text

Untuk kode-kode HTML yang lain anda bisa mengulik lewat software-software web designer atau situs-situs penyedia layanan HTML.

**Tabel-tabel diatas,akan terlihat sempurna jika dibuka pada browser IE (Internet Explorer)

Read More »
18.52 | 0 komentar
0 komentar
Label:

Baca ini juga :

Belajar Kode Html ( part I )

Hypertext Markup Language (HTML) adalah standarisai kode dalam pembangunan website dan menampilkan berbagai informasi di dalam sebuah web browser. Pada dulunya HTML bermula dari SGML (Standart Generalized Markup Language) yang sebelumnya banyak digunakan penerbit dan percetakan.

Versi HTML terakhir pada saat ini adalah HTML 4.01, meskipun lebih cendrung berkembang ke arah XHTML (Extensible Hypertext Markup Language) yang nantinya akan saya bahas di artikel yang lainnya.

Attention!!!

Bagi anda yang masih Newbie atau Pemula usahakan hindari kebiasaan What I See, That's What I Copy (WISTWIC). Maksudnya jangan copy semua code yang saya contohkan kepada anda, tapi cobalah mengetik sendiri dan mulailah untuk menghafalkannya.

Langkah Awal(Pengenalan Kode HTML)

Silahkan buka Notepad, dan cobalah untuk mengetikkan kata - kata di bawah ini :

<i> adalah kode untuk memiringkan sebuah text.
<b> adalah kode untuk menebalkan sebuah text
<u> adalah kode untuk menggaris bawahi sebuah text.
Semua tag - tag atau kode html tersebut haruslah diberi penutup / seperti kode di bawah ini

<i>Hello</i> <b>My name is Kenny</b>, <u>What is your name?</u> 

(Ingat diketik jangan Copy Paste). Lalu simpan dengan nama TEST.HTML bukan test.html.text atau test.text.

Cobalah klik 2 kali pada TEST.HTML, maka akan keluar browser dengan tampilan sebagai berikut :

Hampir semua tag html memiliki tag penutup yang harus ditambahkan /, jadi untuk tag penutup maka anda tinggal menambahkan / seperti contoh : <i>, maka tag penutupnya </i>, dan <u>, maka tag penutupnya adalah </u>, ingat hanya menambahkan /.

Standalone Tag
Walau hampir semua tag memiliki tag penutup, akan tetapi ada beberapa tag / kode html yang tidak memiliki tag penutup.Contoh : <hr> yang memberikan baris dan <br> yang memberikan jarak pada baris. Jika anda ingin mengetahuinya silahkan buka kembali file TEST.HTML 
Caranya :
  • Klik kanan pada file
  • Open with
  • Pilih Notepad
  • Taruh kode <br> di bawah kode semula
  • Kemudian taruh kode <hr> di bawah kode <br&gt.
  • Save.
Coba anda buka kembali kode dengan cara yang sama dengan yang di atas, maka akan terlihat perbedaan , seperti jarak antara text dengan baris yang agak jauh, dan adanya garis di bawahnya.

HTML Entity 
Jika anda ingin memberi spasi antar text lebih dari satu , tentunya tidak akan bisa didalam sebuah template blog atau web , walaupun anda menekan spasi berkali - kali tetap akan dihitung satu spasi. Untuk itulah diperlukan kode khusus. Contoh coba tambahkan kode &nbsp; dan spasi yang banyak pada yang satunya lagi, sehingga
<i>Hello</i> &nbsp&nbsp&nbsp;,<b>My name is Kenny</b>,              <u>What is your name?</u>
anda perhatikan pasti ada bedanya antara yang memakai  &nbsp dengan yang spasi. yang perlu diingat bahwa kode entity selalu di awali dengan (&) dan diakhiri dengan (;) (tidak termasuk kurung).

Atribut HTML
Atribut adalah tambahan dalam tag - tag HTML, baik yang jenis standalone maupun yang biasa. 
Contoh 1 kode 
<div align="center"> Contoh text </div> 
sebenarnya hanya <div> dan </div>, maka align="center" adalah atribut tambahan. Tampilan 
Contoh text

Contoh 2 kode 
<font face="georgia" size="3" color="red">Contoh....!!!!</font>
Tampilan
Contoh....!!!!
 
Teks & Paragraph
Di dalam html ada yang namanya tag , tag tersebut berguna untuk menentukan ukuran text secara praktis, dan juga dapat membantu search engine untuk menentukan seberapa penting text dari suatu blog / web. Contoh :
<h1>Sebesar Apakah Text Ini?</h1>
<h2>Sebesar Apakah Text Ini?</h2>
<h3>Sebesar Apakah Text Ini?</h3>
<h4>Sebesar Apakah Text Ini?</h4>
<h5>Sebesar Apakah Text Ini?</h5>
<h6>Sebesar Apakah Text Ini?</h6>
Tampilan

Untuk lebih jelasnya, coba kita buat kode seperti ini dan save dengan nama Budi.html :
<p>Halo, nama saya <b>Budi</b> dan
saya senang bermain bola</p>
<p>Tutorial ini merupakan <i>Pelajaran pertama saya dalam HTML</i> dan saya ingin <u>Memodiifikasi </u> teks dalam HTML agar lebih menarik </p>

<h3>Terima kasih </h3>

Tampilan


Langkah Kedua (Struktur HTML)

Apakah anda pusing membaca pengenalan diatas?, yah sejujurnya pasti bagi seorang pemula hal tersebut sangat memusingkan, tetapi hal dasar janganlah dilewatkan. Untuk itu sebaiknya anda mengerti baik - baik apa yang saya sampaikan diatas barulah ke tahap selanjutnya.

Struktur HTML

<html>
<head>
<title>Judul</title>
</head>
<body bgcolor="blue"> <i>TEST TEST 1 2 3</i>,<b> ada orang di sini?</b>
</body>
</html>

Text yang berwarna biru adalah text struktur, sedangkan yang berwarna hitam adalah tambahan. Maka tampilannya seperti di bawah ini


Coba lihat pada kata judul yang saya lingkari dan saya beri tanda panah, hal tersebut terjadi karena saya menambahkan <title>Judul</title> di antara kode <head> dan </head>. Jika anda ingin menggantinya tinggal hapus text judul menjadi judul yang anda inginkan.
Jika anda masih tidak percaya coba anda buat notepad baru dengan nama struktur.html, lalu tes lagi seperti cara - cara sebelumnya.
Perlu diketahui di dalam struktur HTML, semua kode HTML ditulis di dalam tag <body>. Tidak boleh di tulis di dalam tag <head>.
Anda bisa mempraktekkan dengan menulis semua kode HTML yang telah saya ajarkan ke dalam tag <body> tag html anda </body>.
Mengapa hal ini menjadi penting?, karena di dalam mengedit template blog maupun di web, anda akan menggunakan kode - kode html tersebut. Setidaknya anda pelajari konsep - konsep di atas dengan cermat dan teliti, maka saya yakin anda pasti bisa. Nantikan Juga artikel berikutnya yang merupakan lanjutan dari artikel ini.

Read More »
18.48 | 0 komentar
0 komentar
Label:

Baca ini juga :

Cara Membuat Tulisan Berjalan [ Marquee ]

tulisan berjalan
Cara membuat tulisan berjalan (marquee) – Mungkin anda pernah mengunjungi sebuah blog atau website yang terdapat tulisan berjalan dan dalam hati anda bertanya, bagaimana cara membuat tulisan berjalan seperti itu yah?

Cara membuat tulisan berjalan (marquee)

Untuk membuat tulisan berjalan itu sangat mudah karena hanya dengan kode HTML sederhana sudah akan tercipta sebuah tulisan berjalan. Kode HTML untuk membuat tulisan berjalan di kenal dengan perintah Marquee. Kode dasar perintah marquee adalah sebagai berikut :
<marquee>Tulisan disini akan berjalan</marquee>
Selain kode dasar marquee, ada perintah lain (umumnya disebut sebagai atribut) yang disisipkan untuk mengatur keindahan tampilan tulisan yang berjalan. Atribut yang sering di gunakan dalam kode marquee adalah :

bgcolor="warna" » Untuk mengatur warna background (latar belakang) teks

direction="left/right/up/down" » Mengatur arah gerakan teks

behavior="scroll/slide/alternate" » Untuk mengatur perilaku gerakan

Scroll » teks bergerak berputar

Slide » teks bergerak sekali lalu berhenti

Alternate » teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)

title="pesan" » Pesan akan muncul saat mouse berada di atas teks

scrollmount="angka" » mengatur kecepatan geraka, semakin besar angka semakin cepat gerakannya.

scrolldelay="angka" » Untuk mengatur waktu tunda gerakan dalam mili detik

loop="angka|-1|infinite" » Mengatur jumlah loop

width="lebar" » Mengatur lebar blok teks dalam pixel atau persen


Agar lebih jelas akan Kang Rohman sertakan contohnya :

Contoh marquee dari gerakan : 
<marquee align="center" direction="left" height="200" scrollamount="2" width="30%"> marquee dari kanan ke kiri </marquee>

Contoh hasilnya :

marquee dari kanan ke kiri

ganti kata "left" dengan keinginan anda yaitu bisa : right,  up, down .

Contoh marquee dengan variasi hurup dan warna latar belakang : 

<div align="left"><font face="georgia" color="White"><strong><marquee bgcolor="red" width="70%" scrollamount="3" behavior="alternate"> 
</marquee></strong></font></div>
Contoh hasilnya :

marquee dengan variasi hurup


Agar lebih menarik, kode marquee juga bisa dipadukan dengan javascript sederhana, seperti onmouseover="this.stop()" onmouseout="this.start()" . Dengan kode javascript tersebut, tulisan berjalan akan seketika berhenti apabila pointer mouse komputer pengunjung blog kita mengarah ke tulisan yang berjalan, dan akan berjalan kembali apabila pointer mouse dipindah ke tempat lain.

Contoh, silahkan arahkan pointer mouse anda ke area marquee di bawah ini :

Contoh kodenya :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center"> silahkan tunjuk ke sini </marquee>

Contoh hasilnya :

silahkan tunjuk ke sini

Contoh kode marquee yang di dalam nya terdapat link : 
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center"> 
<a href=" http://www.krtutorplus.com/">cara membuat blog</a><br/> 
<a href="http://krtutorplus.com/2007/04/bikin-blog.html">Membuat blog </a><br/> 
<a href="http://www.krtutorplus.com/2007/08/membuka-program-periklanan.html">Pasang Iklan </a><br/> 
</marquee> 

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="down" width="100%" height="100" align="center"> 
<a href="http://www.krtutorplus.com/2007/08/membuka-program-periklanan.html">Pasang Iklan </a>
<a href="http://krtutorplus.com/2007/04/bikin-blog.html">Membuat blog </a><br/> 
<a href=" http://www.krtutorplus.com/">cara membuat blog</a><br/> 
</marquee>
Contoh hasilnya :

cara membuat blog
Membuat blog
Pasang Iklan Pasang Iklan
Membuat blog
cara membuat blog

Itu adalah beberapa contoh variasi kode marquee yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta variasi-variasi dari marquee ini.

Cara memasang tulisan berjalan di blog

Bila anda bertanya, sesudah membuat kode marquee lalu untuk di pasang di blognya bagaimana? Tentu jawabannya ya terserah anda mau di pasang di mana. Namun, sebagai contoh berikut adalah cara memasang kode marquee di sidebar blogger.
  1. Silahkan login ke blogger dengan akun anda.
  2. Klik pada nama blog anda.
  3. Klik menu Tata Letak
    tata letak
  4. Klik Tambah Gadget
  5. Klik pada widget HTML/Javascript html widget
  6. Pasanglah kode marquee yang telah anda buat sesuai degan yang Kang Rohman terangkan diatas. kode marquee
  7. Klik tombol Simpan
  8. Selesai.

Read More »
18.45 | 0 komentar
0 komentar
Label:

Baca ini juga :

Cara Membuat Link

link
Cara membuat link – Bila anda adalah seorang blogger, anda tentu harus mengerti bagaimana cara membuat link, karena ini adalah hal yang sangat penting terutama jika anda di masa mendatang tertarik dengan ilmu SEO (Search Engine Optimization).

Link atau dalam bahasa Indonesia disebut dengan tautan adalah tulisan atau gambar yang apabila di klik akan menuju halaman tertentu sesuai dengan yang di tentukan oleh pembuat link. Sebagai contoh silahkan anda klik tulisan berikut ini : cara membuat blog, maka apabila anda klik akan menuju halaman depan blog ini.

Cara membuat link

Ada banyak cara membuat link, tergantung aplikasi web yang anda gunakan. Jika anda menggunakan blogger, kode yang digunakan adalah kode HTML. Apa yang harus anda persiapkan ketika membuat link? Yang harus anda persiapkan adalah :
  1. Kode HTML untuk membuat link.
  2. Kata-kata yang ingin di jadikan link. Contoh : membuat blog
  3. Alamat tujuan link apabila nanti di klik. Contoh alamat link : http://www.krtutorplus.com/2007/04/bikin-blog.html
Kode HTML dasar untuk membuat link :
<a href="alamat_link">kata yang di jaikan link</a>

Setiap halaman yang bisa anda buka di internet, halaman tersebut pada dasarnya pasti mempunyai alamat link. Alamat link bisa anda lihat di address bar browser internet anda. Contoh untuk halaman yang sedang anda baca saat ini alamat linknya adalah : http://www.krtutorplus.com/2007/04/membuat-link-1.html

Contoh gambar kenapa kang Rohman bisa menuliskan alamat tersebut :

alamat link
Jadi, jangan bertanya lagi bagaimana cara mengetahui suatu alamat link.

Kembali kepada cara membuat link, sebagai contoh untuk membuat sebuah alamat link dengan alamat tujuan :

http://www.krtutorplus.com/2007/04/bikin-blog.html

Sedangkan kata yang ingin dijadikan link adalah :

membuat blog

Maka kode HTMl yang harus di buat adalah sebagai berikut :
<a href="http://www.krtutorplus.com/2007/04/bikin-blog.html">membuat blog</a>
Dan berikut adalah contoh hasil dari kode tersebut :

membuat blog

Hanya itu saja, mudah tidak?

Cara membuat link dalam postingan blogger


Sebuah software blog di rancang agar mudah untuk digunakan, dalam membuat link pun sebenarnya anda tidak di tuntut untuk bisa membuat link menggunakan kode HTML, karena sudah tersedia fasilitas untuk membuat link.

Hal yang sering membuat link adalah dalam sebuah artikel, oleh karenanya berikut adalah cara membuat link dalam postingan blogger.

  1. Silahkan login ke blogger, lalu buatlah sebuah postingan baru.
  2. Silahkan isi dengan artikel yang anda inginkan.
  3. Tandai kata-kata yang ingin anda buat link (tautan).
  4. Klik tool untuk membuat link, lihat gambar di bawah : cara membuat link
  5. Isilah dengan alamat link tujuan yang anda inginkan. Lanjutkan dengan klik OK. membuat link
  6. Silahkan publikasikan jika anda rasa semua telah siap.
  7. Silahkan lihat hasilnya. Seharusnya kata-kata tadi menjadi sebuah link.
  8. Selesai,

Cara membuat link di sidebar

Untuk memasang link di kolom samping blog anda (sidebar) beda lagi caranya. Ada dua cara, yaitu menggunakan kode HTML melalui widget HTML/Javascript atau menggunakan widget daftar link.

Membuat link melalui widget HTML/Javascript

  1. Silahkan login ke blogger dengan akun anda.
  2. Klik pada nama blog anda.
  3. Klik menu Tata Letak
    tata letak
  4. Klik Tambah Gadget
  5. Klik pada widget HTML/Javascript html widget
  6. Buat kode HTML untuk membuat link yang telah Kang Rohman terangkan diatas. kode link
  7. Klik tombol Simpan
  8. Selesai.

Membuat link melalui widget Daftar Link
  1. Silahkan login ke blogger dengan akun anda.
  2. Klik pada nama blog anda.
  3. Klik menu Tata Letak
    tata letak
  4. Klik Tambah Gadget
  5. Klik pada widget Daftar Link
    daftar link widget
  6. Masukkan alamat link pada form isian URL Situs Baru, masukkan kata-kata yang ingin di jadikan link ke form isian Nama Situs Baru. Lanjutkan dengan klik Tambah Tautan
    daftar link
  7. Klik tombol Simpan
  8. Selesai.

Kekurangan membuat link melalui widget daftar link adalah tampilan link yang kaku membentuk list (daftar), sedangkan melalui widget HTML/Javascript lebih leluasa sesuai dengan keinginan.

Kode Link pada berbagai aplikasi web

Aplikasi web bukan hanya blogger, namun masih banyak yang lainnya. Cara membuat link pada masing-masing aplikasi sungguh berbeda. Beberapa contoh kode membuat link yang populer :

<a href="alamat_link">kata yang di jaikan link</a>

[url=alamat_link]kata yang di jaikan link[/url]
[link=alamat_link]kata yang di jaikan link[/link]
[alamat_link kata yang di jaikan link]
Kode-kode diatas hanya contoh saja, karena masih banyak variasi lainnya yang tentu saja tidak dapat di terangkan karena artikel ini akan terlalu panjang untuk di baca.

Read More »
18.43 | 1 komentar
1 komentar
Label:

Baca ini juga :

Upload Gambar dan Photo Profile

Agar posting artikel pada blog lebih menarik untuk dilihat, maka sebaiknya kita menyisipkan gambar di antara poting-an kita tersebut, di samping untuk lebih memperjelas apa yang kita sampaikan. Misalkan kita sedang menerangkan sesuatu, maka dengan adanya gambar akan lebih memperjelas maksud dari topik yang sedang kita jelaskan kepada para pembaca artikel kita. Bagi anda-anda yang masih bingung bagaimana caranya untuk memasukan gambar atau istilah resminya yaitu upload gambar, maka akan saya ulas langkah-langkahnya :
  1. Login seperti biasa dengan id anda
  2. Klik Posts
  3. Klik New Post (bila sebelumnya anda telah mempunyai posting-an)
  4. Klik toolbar yang bergambar seperti ini
  5. Beri tanda tik/cek pada radio button pada pilihan Choose a layout, bila anda menginginkan posisi gambar bisa di tempatkan di mana saja, pilih pada radio button None, bila posisi gambar di sebelah kiri pilih left, bila ingin di tengah pilih Center, bila ingin di kanan pilih Right.
    6. Beri tanda tik/cek pada Image size, bila ingin gambar yang di upload hasilnya kecil pilih Small, bila ingin sedang pilih Medium, bila ingin besar pilih Large
  6. Beri tanda ceklis di samping tulisan Use this layout every time bila anda menginginkan setiap upload gambar settingnya seperti semula
  7. Tekan tombol Browse, lalu masukan gambar dari komputer anda yang ingin di upload.
  8. Klik Add another image bila gambar yang ingin di upload lebih dari satu gambar
  9. Klik tombol UPLOAD IMAGE, tunggu beberapa saat sampai proses upload selesai
  10. Klik Tombol Done untuk mengakhiri proses upload
Setelah proses upload anda selesai, untuk melihat gambar tadi, klik tombol Compose. Nah disini anda bisa melihat gambar yang anda upload tadi sekaligus dapat mengatur kembali ukuran dari gambar ini, caranya yaitu klik gambar tersebut sampai gambar anak panah mouse anda berubah menjadi gambar panah empat penjuru. Arahkan mouse pada garis samping gambar sampai gambar mouse berubah menjadi panah dua arah, tekan tombol mouse lalu tahan dan gerakan kearah kiri atau kanan untuk merubah lebar gambar, bila susah sesuai dengan yang anda inginkan lepas tombol yang anda tahan tadi. Untuk mengatur tinggi gambar, arahkan mouse pada tepi bawah atau atas gambar sampai gambar mouse berubah menjadi anak gambar panah dua arah, tekan mouse lalu tahan kemudian gerakan mouse keatas atau kebawah untuk mengatur tinggi gambar, lepaskan mouse bila ukuran gambar sudah sesuai dengan yang anda inginkan.

Nah sekarang bagaimana cara memasukan foto untuk mengisi Profile kita?, caranya sama seperti langkah-langkah di atas, cuma ada sedikit perbedaan yaitu kamu harus menghapus beberapa kode tersebut. Jika foto kamu sudah selesai di upload (langkahnya sama seperti di atas). Tekanlah menu Edit HTML untuk melihat kode HTML dari Foto anda tadi, copy / paste kode HTML tersebut kedalam program notepad (agar lebih mudah) atau bisa juga ditulis di kertas. Kemudian klik publish. Untuk memasukan foto kedalam Profile kita, silahkan ikuti langkah berikut:

  1. Setelah upload gambar, klik menu Dasboard
  2. Klik menu Edit Profile
  3. Di dalam form - form isian profile ada tulisan Photo URL, nah disini paste kode HTML yang telah anda copy tadi ke dalam notepad tapi jangan semuanya, yaitu yang di paste adalah kode setelah tulisan [src="] yaitu link yang di mulai dengan [http://] dan berakhir dengan [.jpg] atau [.jpeg]
  4. Klik Save Profile, maka foto anda yang cantik dan ganteng sudah terpampang di blognya dan bisa dilihat oleh seluruh dunia
  5. Selesai
Sebenarnya ada cara lain untuk mengisi foto Profile kita, yaitu dengan cara meng-upload (memasukkan) foto kita pada hosting lain, dan baru kemudian link URL foto yang kita dapat dari hosting tersebut di copy/paste ke profile yang ada di blogger/blogspot. Saya ambil contoh, biasanya saya menyimpan foto-foto saya di http://photobucket.com. jika anda mau silahkan daftarkan diri anda (gratis ko), apabila sudah selesai daftar dan bisa login, silahkan upload photo anda. Setelah proses upload foto selesai, maka secara otomatis foto tersebut akan di beri PHOTO URL, copy alamat link URL foto tersebut lalu paste di Profile Blogger.com pada kolom Photo URL setelah itu tinggal SAVE CHANGES dan REPUBLISH. Selesai, selamat mencoba.

Read More »
18.43 | 0 komentar
0 komentar
Label:

Baca ini juga :

Cara Membuat Menu Dropdown

Dalam konsep blog, setiap posting kita akan terarsip otomatis secara rapi setiap bulan. Setiap memasuki bulan baru, seperti Januari, maka arsip bulan Desember akan tampil di sidebar. Masalahnya, kalau kita sudah ngeblog setahun, maka arsip dari Januari sampai Desember akan berjejer di sidebar kita. Bagaimana kalau dua dan tiga tahun lagi? Langkah praktis mengatasi hal ini adalah dengan membuat pull-down menu seperti di bawah ini:



Jadi, berapa bulan/tahun kita blogging di blogger/blogspot, menu bulan-bulan tsb tidak akan memenuhi dan berjejer panjang di sidebar kita. Yg tampak hanya nama "Archives", baru setelah di klik, akan muncul nama bulan arsip-arsip kita.

Untuk membuat arsip pulldown ini ada dua yakni untuk blogger dengan template klasik, dan template baru. Untuk template klasik langkahnya yaitu :

  1. Login ke blogger.com dg id Anda
  2. Klik Template
  3. Di bagian sidebar blog Anda bagian archives, ada kode html sbb:
    4. &<BloggerArchives> 
<a href="<$BlogArchiveURL$"$gt;'><$BlogArchiveName$></a>
</BloggerArchives>
  4. Nah, ganti kode di atas dg kode html di bawah ini: 
    5. <select name="archivemenu"
    
onchange="document.location.href=this.options[this.selectedIndex].value;">

<option selected>- Archives -</option>

<BloggerArchives>

<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>

</BloggerArchives>
    </select>
  1. Apabila selesai, klik SAVE CHANGES. Bila sudah DONE, klik REPUBLISH.
  2. Selesai.
Untuk anda yang memakai template baru, langkahnya lebih mudah yaitu :
  1. login dulu, tentunya dengan id anda
  2. klik LAYOUT
  3. Klik PAGE ELEMENTS, cari element (kotak) yang bertuliskan Blog Archive
  4. Klik Edit pada kotak Blog Archive tadi
  5. Di samping tulisan Style ada beberapa radio button, pilih radio button yang bertuliskan Dropdown Menu dengan cara memberi tanda tik/cek
  6. Klik Save Changes
  7. Selesai
Nah keterangan di atas tadi merupakan langkah-langkah untuk membuat menu Dropdown untuk Arsip, Sekarang bagai mana caranya membuat menu dropdown yang di dalam nya ada linknya, saya ambil contoh untuk menu Dropdown milik saya pribadi yang berada di sebelah kanan atas yang berisi tulisan “ blog tutorial “. Untuk membuatnya silahkan anda copy kode HTML di bawah :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected>tulisan disini yang akan muncul duluan</OPTION>

<option value="isi dengan addres yang ingin di tuju">tulisan di sini yang akan muncul</option> </select></form>

Sebagai contoh untuk menu Dropdown milik saya :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option>- Blog Tutorial -</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html">Membuat Blog</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/cara-setting-blog.html">setting Blog</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/memilih-template.html">Memilih Template</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/mengatur-hurup-dan-warna.html">warna & hurup</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/cara-memposting-artikel.html">Posting Artikel</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/membuat-read-more-1.html">Read more (1)</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/membuat-text-area.html">Text area</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/blogger-emoticons.html">Blogger Emoticons</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-emoticons.html">Yahoo!Emoticons</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/download-gratis.html">Download Gratis</option>

</select></form> Hasilnya akan seperti ini :


Mudah bukan?   Selamat mencoba !

Ingin pintar dalam bahasa HTML silahkan download ebook nya di sini .
Ingin pintar membuat Website sendiri, klik di sini.

Read More »
18.42 | 0 komentar
0 komentar
Label:

Baca ini juga :

Membuat Text Area

Apa itu text area?. Untuk memudahkan anda memahami apa itu text area, silahkan alihkan perhatian anda ke kolom sebelah kanan layar, di bawah tulisan Mau tuker link, ada sebuah kotak yang di dalamnya berisi text kode-kode HTML, itulah yang di sebut text area. Nah dengan melihat contoh tadi, maka dapat kita katakan bahwa Text area adalah area atau tempat untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh para pengunjung.

Untuk membuat text area, silahkan anda Copy kode di bawah ini :

<p align="center"><textarea name="code" rows="6" cols="20"> Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area </textarea></p>

Sebagai contoh :



Keterangan : rows="6", menunjukan tinggi dari text area, jadi jika anda menginginkan text area yang tinggi maka silahkan ganti angka " 6 tadi dengan angka yang lebih tinggi nilainya.

Cols="20", menunjukan lebar dari text area. Jika anda menginginkan text area yang lebar maka silahkan ganti angka " 20 " tadi dengan angka yang lebih tinggi nilainya.

Text Area dengan memakai HighLight

Ada variasi lain dari membuat text area ini, yakni text area dengan menggunakan tombol highlight. dengan adanya tombol highlight ini akan memudahkan bagi para pengunjung untuk mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna tatkala text ataupun kode-kode yang di berikan dalan jumlah yang sangat banyak dan ini akan mengurangi resiko tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk membuat text area dengan menggunakan highlight ini silahkan anda copy kode HTML di bawah :

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">simpan tulisan anda di sini, maka tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para pengunjung</textarea></p></div></form>

Sebagai contoh :



Agar anda lebih memahami kode di atas, sedikit akan saya uraikan. Kode di atas mempunyai dua elemen bagian, yakni elemen kode untuk membuat tombol yang bertuliskan Highlight All, dan yang kedua adalah elemen kode untuk membuat text area.

Elemen tombol highlight All :

  1. <div align="center"> --> kata center menunjukan bahwa posisi tombol akan berada di tengah, jadi jika anda ingin posisi tombol berada di tepi sebelah kiri, tinggal ganti dengan kata left. Dan jika ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right.
  2. <input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> --> kode ini artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di blok), jadi anda jangan merubah tulisan ini.
  3. Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.
Element text area :

  1. <p align="center"> --> ini menunjukan bahwa text area akan berada di tengah, nah jika anda ingin text area anda berada di tepi kiri, ganti kata center dengan kata left, bila ingin di tepi kanan, ganti dengan kata right.
  2. <text style="WIDTH: 300px">-->kata "WIDTH:300px" menunjukan lebar dari text area tersebut sebanyak 300 pixel, jadi jika anda ingin memperpendek atau memperpanjang lebar text area, anda tinggal menggantinya dengan angka yang anda inginkan. misal: "WIDTH:700px;"
  3. HEIGHT: 144px --> angka "144px" menunjukan bahwa text area akan mempunyai tinggi sebesar 144 px, jadi jika anda ingin merubahnya tinggal ganti angka tersebut dengan angka yang anda inginkan. Misal : HEIGHT:160px.

Contoh text area yang memakai tombol highlight diatas, memuat skript untuk melindungi dari right click para pengunjung. makeityourring diamond engagement rings skript ini di pakai apabila anda tidak ingin tulisan-tulisan anda di copy paste oleh pengunjung. bagi yang berminat silahkan copy lalu pasang pada kode HTML anda antara kode <HEAD> dan </HEAD> selamat mencob

Read More »
18.41 | 0 komentar
0 komentar
Label:

Baca ini juga :

Cara Memposting Artikel

Bagi anda yang mengalami sedikit kendala tentang tata cara memposting suatu artikel kedalam blog, maka kali ini akan di bahas tentang tata cara posting di blogger.com. Di dalam menu posting ada beberapa toolbar yang bisa anda gunakan.Jika anda sudah terbiasa menggunakan microsoft Word ataupun microsoft Excel tentu barangkali tidak akan mengalami kesulitan ketika memposting suatu artikel, tapi mungkin tidak ada salahnya bila saya bahas sekilas tentang ini, barangkali ada di antara teman kita yang masih bingung. makeityourring diamond engagement rings

Toolbar yang ada ketika posting :

--> Untuk merubah jenis hurup yang di gunakan

--> Untuk merubah ukuran hurup (heading)

--> Untuk Menebalkan hurup

--> Untuk memiringkan hurup

--> Untuk merubah warna hurup

--> Untuk membuat link

--> Untuk membuat artikel menjadi rata kiri

--> Untuk membuat tulisan menjadi di tengah

--> Untuk membuat artikel menjadi rata kanan

--> Untuk membuat artikel menjadi rata kiri dan rata kanan

--> Untuk membuat sub bahasan oleh angka

--> Untuk membuat sub bahasan oleh bullet

--> Untuk mengecek spelling

--> Untuk memasukan gambar(upload gambar)

--> Untuk membuat artikel dalam kode HTML

--> Untuk membuat artikel dalam mode Compose (biasa)

--> Untuk me review (melihat) artikel

Cara penggunaan toolbar di atas adalah blok (beri tanda) terlebih dahulu tulisan yang akan di edit, kemudian tekan tombol toolbar yang di inginkan.

Langkah-langkah dalam memposting suatu artikel:

  1. Sebaiknya klik terlebih dahulu “ Edit HTML”,jika langsung di mode “Compose”, sering terjadi hang pada komputer (pengalaman saya pribadi). Copy artikel yang telah anda buat sebelumnya, kemudian paste di area posting. Edit sesuai dengan kemauan anda.
  2. Klik tombol “ compose “ untuk melakukan editing (jika anda masih bingung dengan kode HTML).
  3. Klik tombol tool yang berlambang “ panorama” berwarna biru, jika anda ingin memasukan gambar ataupun photo untuk menghiasi posting-an anda.
  4. Klik tombol “ Preview “ untuk melihat hasil posting-an anda yang nantinya akan tampil di dalam blog, barangkali masih ada yang perlu di edit.
  5. Klik tombol “ publish “. Selesai. Tulisan hasil karya anda akan bisa dilihat dan di baca oleh seluruh dunia.

Read More »
18.40 | 0 komentar
0 komentar
Label:

Baca ini juga :

Cara Mengganti Template Blog

mengganti template
Cara mengganti template blog – Apa sih sebenarnya template blog itu? Template blog atau website adalah desain-desain halaman blog ataupun website beserta seluruh komponennya (misal : gambar, stylesheet, dsb) baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web. Seperti yang anda lihat saat ini di blog kang rohman, bahwa terlihat tatanan gambar serta tulisan di layar monitor anda, itulah yang dinamakan template.

Di blogger atau blogspot, anda dapat dapat mengganti template blog anda secara leluasa sesuai dengan selera dan keinginan masing-masing. Jika anda telah mahir membuat template sendiri, anda dapat menggunakan template tersebut untuk blog anda. Namun, jika anda masih awam dalam membuat template, pihak blogger atau blogspot sendiri telah menyediakan beberapa template yang bisa anda pilih sesuai dengan keinginan.

Selain itu, anda dapat pula mengunduh atau mendownload template blogger gratis dari penyedia template blogger, salah satu contoh website yang menyediakan template blogger tersebut adalah beralamat di http://www.blogspottutorial.com, disana terdapat ratusan template blogger yang bisa anda gunakan secara gratis. Namun, jika anda menggunakan template gratis, syarat yang harus ditaati adalah tidak boleh menghapus atau menghilangkan credit link dari pembuat template tersebut. Dengan tidak membuang link credit pembuat template, itu adalah sebagai apresiasi atas kerja keras mereka dalam menyediakan template secara gratis.

Cara mengganti template blog

Langsung ke topik utama, cara mengganti template di blogspot atau blogger ada dua cara, yaitu mengganti template dengan yang disediakan blogger, atau mengganti template dengan template yang didapat dari penyedia template. Berikut ulasannya :

Ganti Template dengan yang disediakan blogger

Berikut cara-cara untuk mengganti template dengan template yang telah disediakan blogger:
  1. Silahkan login ke blogger dengan ID anda.
  2. Klik pada nama blog anda.
  3. Klik menu template.
    menu template
  4. Klik tombol Ubahsesuaikan
  5. Klik pada pilihan template yang tersedia. Selain itu, anda dapat pula memilih background atau gambar latar belakang dari template tersebut. Jika sudah cocok dengan salah satu template,  klik Terapkan ke Blog.
    ganti template
  6. Selesai.

Ganti Template dengan template dari penyedia template

Berikut cara-cara untuk mengganti template dengan template dari penyedia template :
  1. Download terlebih dahulu template yang anda sukai pada website penyedia template blog gratis. Salah satu contoh anda bisa download di http://www.blogspottutorial.com.
  2. File template yang di download, biasanya masih dalam bentuk terkompresi (zip atau rar), oleh karenanya anda perlu mengekstrak atau menguraikan file tersebut dengan software ekstraktor seperti WinZip atau WinRar, Namun jika anda tidak memiliki software tersebut, anda bisa mengekstraknya secara online di http://wobzip.org.
    ekstrak template
  3. Yang nanti di upload atau di unggah ke blogger hanyalah file yang berekstensi .xml.
  4. Silahkan login ke blogger dengan ID anda.
  5. Klik pada nama blog anda.
  6. Klik menu Template.
    menu template
  7. Klik tombol Cadangkan/Pulihkan yang ada dibagian atas kanan monitor.
    cadangkan template
  8. Disarankan untuk membuat backup terlebih dahulu, klik pada tombol Unduh Template Lengkap.
  9. Klik tombol Choose File,  pilih file template yang tadi didownload dan telah diekstrak ( file ekstensi .xml saja ). Kemudian klik tombol Unggah.
    ganti template blog
  10. Tunggu beberapa saat hingga proses selesai
  11. Selesai.

Kini tampilan blog anda  lebih terasa fresh dibanding sebelumnya

Read More »
18.39 | 0 komentar
0 komentar
Label:

Baca ini juga :
Langganan: Postingan (Atom)