Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

Tuesday, September 1, 2009

Memasang Cumulus pada Blogspot Blog

Cumulus adalah suatu kumpulan tag dan category dalam animasi flash (Contoh nya dapat anda lihat pada sidebar di blog ini). Jika kita mengunakan Joomla atau Wordpress, maka kita tinggal pasangkan Plugin pada Wordpress atau sejenis Module pada Joomla. Namun, untuk blospot tidak semudah itu memasangnya, tapi bukan berarti sulit.

Sebenarnya pemasangan pada blogspot juga sama mudahnya dengan pemasangan pada Joomla dan Wordpress, hanya saja caranya memang sedikit berbeda.

Jika anda tertarik memasang Tag cloud yang seperti biasa, silakan ikuti langkah-langkah membuat tag cloud pada blogger disini atau jika anda tertarik untuk memasang Cumulus pada blogspot blog anda, maka silakan ikuti langkah-langkah berikut ini. (Sebelumnya Backup dulu template anda).

  1. Buatlah widget label standar blogspot terlebih dahulu. Caranya klik “Add a Gadget” pada menu “Layout > Page Element
    Isi Title sesuai dengan keinginan anda, contoh “Labels in Cloud”, dan biarkan opsi lainnya seperti apa adanya.
  2. Kemudian masuk ke menu “Edit HTML” dan centang “Expand Widget Templates”, temukan kode-kode berikut ini:
    <b:widget id='Label1' locked='false' title='Labels in Cloud' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
    <ul>
    <b:loop values='data:labels' var='label'>
    <li>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
    <span dir='ltr'>(<data:label.count/>)</span>
    </b:if>
    </li>
    </b:loop>
    </ul>
    <b:else/>
    <b:loop values='data:labels' var='label'>
    <span expr:class='&quot;label-size-&quot; + data:label.cssSize'>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
    <span dir='ltr'>(<data:label.count/>)</span>
    </b:if>
    </span>
    </b:loop>
    </b:if>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>

    Note: ini adalah kode dari widget label yang kita buat tadinya.

  3. Ganti kode tersebut dengan kode dibawah ini.
    <b:widget id='Label1' locked='false' title='Labels in Cloud' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
    <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
    <script type='text/javascript'>
    var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
    // uncomment next line to enable transparency
    //so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
    so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
    so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
    so.addVariable(&quot;distr&quot;, &quot;true&quot;);
    so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
    so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
    so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
    so.write(&quot;flashcontent&quot;);
    </script>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>
  4. Sekarang “Save Template” dan selesai sudah Cumulus untuk blogger anda.

Ada beberapa poin yang perlu diperhatikan untuk mengedit Widget Cumulus tersebut. Perhatikan tulisan berwarna dalam penggalan kode dibawah ini.

<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&amp;quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&amp;quot;, &amp;quot;tagcloud&amp;quot;, &amp;quot;240&amp;quot;, &amp;quot;300&amp;quot;, &amp;quot;7&amp;quot;, &amp;quot;#ffffff&amp;quot;);

BIRU, lokasi file support (SWF dan JS) untuk menampilkan widget cumulus. File-file tersebut dihosting di http://halotemplates.s3.amazonaws.com. Bisa saja sewaktu-waktu file tersebut hilang. Maka untuk berjaga-jaga silakan download kedua file tersebut disini. Dan jika suatu saat hilang, kita dapat mengantikan alamat url tersebut sesuai tempat host kita nantinya.

Contoh:
http://www.namasitussaya.com/swfobject.js
http://www.namasitussaya.com/tagcloud.swf

HIJAU
, Ukuran lebar (width) Cumulus.
MERAH, Ukuran tinggi (height) Cumulus.
PINK, Warna latar Cumulus.


Selamat mencoba…

img are from: http://wordpress.org

READ MORE - Memasang Cumulus pada Blogspot Blog

Friday, July 31, 2009

Membuat emoticon pada komentar blog

emoticonKali ini kita akan memasukan emoticon bergambar pada bagian komentar, sehingga para pengunjung dapat mengungkapkan emosinya dengan gaya yang menarik, he3… trik cukup gampang dan mudah sekali di implementasikan, ikuti saja langkah-langkahnya dan hanya dalam lima menit blog anda sudah menjadi semakin hidup oleh icon-icon yang imut-imut dan lucu.

    1. Login ke Blogger dan langsung menuju Layout > Edit HTML.

    2. Jangan lupa backup template anda terlebih dahulu, untuk menghindari kesalahan-kesalahan yang tidak disengaja.

    3. Centang Expand Widget Templates, dan temukan kedua baris kode berikut ini, anda bisa melakukanya dengan fungsi pencarian.

      <p class='comment-footer'>
      <b:if cond='data:post.embedCommentForm'>

    4. Kemudian sisipkan kode-kode berikut ini diantar kedua baris diatas, sehingga menjadi seperti ini:

      <p class='comment-footer'>
      <div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
      <b>
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> L(
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> J
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> L
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> K
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> J]
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
      </b>
      </div>

      <b:if cond='data:post.embedCommentForm'>
    5. Nah, sekarang tinggal kita sisipkan kode Scriptnya seperti dibawah ini dan sisipkan sebelum tag </body>
      <script src='http://vishalgkr.googlepages.com/smiley.js' type='text/javascript'/><noscript><a href="http://www.tricksmachine.com" target="_blank">Tricks Machine</a></noscript>
    6. Selesai, simpan kembali template anda. Sekarang dibagian terlihat emotikon dibawah posting, seperti diblog ini neh… he3…

    Sumber Kode, http://www.tricksmachine.com

    READ MORE - Membuat emoticon pada komentar blog

    Thursday, July 2, 2009

    Mengenal CSS Selector lebih dekat lagi.

    Melanjutkan tutorial yang pertama, kini kita akan mengenal selector yang ada pada CSS. Perhatikan kode css pada posting yang pertama. Dalam penulisan kode-kode CSS kita dikenalkan pada selector, dimana selector inilah yang akan mengantarkan format-format dalam file CSS tersebut kedalam dokumen HTML kita. Secara garis besar selector dibagi menjadi dua, yaitu:

    Class dan ID Selector
    Beda kedua jenis selector ini adalah cara penulisannya, bila kita ingin membuat Class selector maka gunakan tanda ”.” (titik) didepan nama class dan bila ingin mengunakan ID Selector kita dapat mengunakan tanda ”#” (pagar) setelah nama ID. Umumnya ID Selector lebih sering digunakan untuk memformat bagian yang hanya muncul satu kali saja. (cth: Top-menu, Main-menu, Left-menu, Background, dan lain-lain). Perbedaan cara penulisannya dapat dilihat seperti berikut ini.

    Struktur ID Selector
    #nama {
    property: value;
    }

    Contoh penulisan:
    #kolom {
    color: blue;
    font-size: 14px;
    }

    Struktur Class Selector
    .nama {
    property: value;
    }

    Contoh penulisan:
    .kolom {
    color: blue;
    font-size: 14px;
    }

    Satu lagi kelebihan CSS adalah kita dapat merubah tampilan tag-tag HTML itu sendiri, baik itu untuk keseluruhan dokumen atau hanya bagian-bagian tertentu saja.

    Untuk keseluruhan dokumen kita dapat menuliskan tag HTML tersebut sebagai penganti nama ID atau Class, tanpa “.” dan “#”. Struktur nya seperti berikut:

    Tag-html {
    property: value;
    }

    Contoh penulisan:
    b {
    Color: red;
    }

    Dan jika kita ingin memformat tag-html pada bagian-bagian tertentu saja, maka kita harus mengkombinasikan tag-tag html tersebut dengan ID dan Class selector, strukturnya akan terlihat seperti berikut (perlakuannya sama untuk ID dan Class):

    #nama tag-html {
    property: value;
    }

    Contoh penulisan:
    #kolom b {
    color: red;
    Font size: 26px;
    }

    untuk yang satu ini penulisan dalam kode HTML harus ditulis dalam format seperti ini:
    <div id=”kolom”><b>Semua tag b dalam bagian ini akan berwarna merah</b></div>

    Untuk penulisan dalam file .css, kita dapat mengabungkan selector-selector yang memiliki format yang sama dengan cara meletakan koma ”,” diantara selector-selector itu.

    Contoh kasus,
    #kolom-kiri {
    color: red;
    font-size: 14px;
    }

    #kolom-kanan {
    color: red;
    font-size: 14px;
    border: 1px solid #ccc;
    }

    Dapat kita lihat kedua ID memiliki property ”color” dan ”font-size” yang sama, maka dapat kita gabungkan keduanya untuk menghindari penulisan property yang sama tersebut. Penulisannya akan menjadi seperti berikut:

    #kolom-kiri, #kolom-kanan {
    color: red;
    font-size: 14px;
    }

    #kolom-kanan {
    border: 1px solid #ccc;
    }

    Penggabungan dapat juga dilakukan antar ID dan Class, misalnya seperti ini.
    #kolom-kiri, #kolom-kanan, .isi, #bawah, #atas h1, .pinggir b {
    Property: value;
    }

    Selesai sudah kita mengenal selector pada CSS, jika ada yang kurang mohon ditambahkan (^_^!), karna ini semua dari pengalaman saya selama ini meng-utak-atik kode-kode tersebut.


    READ MORE - Mengenal CSS Selector lebih dekat lagi.

    Saturday, June 20, 2009

    Daftar gratis, klik iklan dan dibayar Dollar

    Pay To Click, seperti namanya kita dibayar untuk setiap klik iklan yang kita lakukan. Untuk menjalankannya memang gampang-gampang susah, pembayarannya pun tidaklah begitu besar untuk setiap kali klik karena yang harus kita lakukan memang cukup mudah alias sangat simple sekali, tinggal klik saja dan dibayar. Namun begitu, jika kita serius menjalankannya, bukan tidak mungkin ia akan menghasilkan income yang lumayan juga.

    Cukup sediain sedikit waktu ketika sambil surfing untuk klik sana-sini, dan dollar pun mengalir. Kita dibayar oleh penyelenggara dari setiap klik yang kita lakukan, salah satunya adalah Clicksia, bagi yang sudah berpengalaman dengannya mungkin dapat berbagi pengalaman tentangnya diblog ini, dan buat anda yang masih baru namun ingin mengikuti program ini maka silakan ikuti langkah-langkah berikut ini.

    1. Anda dapat mendaftar disini, GRATIS !
    2. Masuklah ke menu View Ads, disini kita bisa melihat program mana bisa kita gunakan dan berapa clik yang bisa kita lakukan. Sering-seringlah membuka menu View Ads karena dari sinilah kita mendapatkan income.
      clip_image002
    3. Jika anda masuk ke menu “Click Links” maka anda akan menemukan iklan untuk diklik sekaligus harga dan waktu yang dibutuhkan untuk setiap klik.
      clip_image004
    4. Kliklah salah satu link dan tunggu hitungan waktu yang telah ditentukan, jika hitungan waktu telah selesai maka akan muncul gambar image anti-spam dibagian atas situs. Silakan klik sesuai gambar yang diperintahkan.
      clip_image005
    5. Kita dapat menerima pembayaran melalui AlertPay ketika pendapatan kita mecapai $1.01 dan melalui PayPal ketika pendapatan kita mencapai $1, jadi silahkan pilih metode mana yang lebih sering anda gunakan.
      clip_image006

    Semoga bermanfaat…

    READ MORE - Daftar gratis, klik iklan dan dibayar Dollar

    Saturday, June 13, 2009

    Menampilkan kode script dalam artikel

    Bila kita membuat suatu artikel tutorial tentang blogger, web design atau apapun yang membutuhkan kita ikut menyertakan kode script kedalam artikel maka kode script tersebut tidak bisa ditulis dengan cara yang biasa. Karena hasil setelah publish tidak akan sama lagi dengan yang kita ketikan sebelumnya.

    Umumnya blog akan membaca “<” sebagai suatu tag pemograman, sehingga kode tersebut malah di execute bukan ditampilkan. Ini yang namanya karakter khusus dalam HTML, untuk itu jika kita ingin menampilkan karakter tersebut maka yang perlu kita ketikan adalah kode pengantinya, berikut beberapa karakter khusus yang sering digunakan dalam HTML.

    &quot;

    Tanda petik (quote)

    "

    &amp;

    Tanda dan (ampersand)

    &

    &frasl;

    Slash

    &lt;

    Kurang dari (less than)

    <

    &gt;

    Lebih dari (greater than)

    >

    &nbsp;

    Spasi


    &copy;

    Copy right

    ©

    Sebagai contoh, jika anda ingin menampilan, <table>
    maka yang seharusnya anda ketik adalah &lt;table&gt;

    Untuk kode yang panjang dan bertele-tele ( banyak sekale…), anda bisa mengunakan Notepad/Wordpad untuk mengkonversi script anda tersebut.

    Cara ne… Copy kan semua script tersebut kedalam Notepad, dan tekan CTRL+H ( atau dari menu Edit>Replace…). Perhatikan gambar berikut:

    menampilkan-kode-script

    Sekarang copykan lagi dari Notepad script yang sudah di “Replace All” tersebut kedalam artikel melalui menu posting “Edit HTML”. Nah, bukankah kode-kode scriptnya sudah tampil sesuai harapan… ^_^!

    READ MORE - Menampilkan kode script dalam artikel

    Saturday, May 30, 2009

    Mulai bekerja dengan CSS

    Pada awal mulai terjun didunia design web, saya sama sekali tidak mengerti apa itu CSS, yang ngerti hanyalah sedikit tag HTML dan beberapa tag table untuk mendesign sebuah situs. Namun semakin ditelusuri ternyata CSS itu asik juga, disamping bisa berdiri sendiri, juga dapat digabungkan dengan tag table juga, CSS menjadi suatu pelengkap yang dinamis dan fleksibel dalam HTML.

    CSS merupakan singkatan dari Cascading Style Sheet. Fungsi utamanya adalah menetapkan aturan-aturan tampilan yang akan digunakan, kontribusinya dalam tampilan website saat ini sudah tidak diragukan lagi. Karena ke-fleksibelan-nya maka kebanyakan template website yang didesign saat ini telah mengunakan CSS untuk mendukung tampilan website nya, walaupun tidak dipungkiri masih ada yang mengunakan table.

    Salah satu keunggulan CSS adalah kita dapat menghemat banyak script HTML. Karena jika CSS ditulis dalam suatu file terpisah, maka file CSS tersebut bisa digunakan oleh beberapa layout/tampilan HTML. Dan jika ingin merubah warna tampilan maka cukup dilakukan di file CSS tersebut saja, tidak perlu layout HTMLnya. Ini akan sangat-sangat menghemat waktu apabila kita mempunyai beberapa layout HTML.

    Sebelum memulai ada baiknya kita mengenali dulu beberapa point penting tentang CSS:

    Extension file:
    namafile.css
    contoh: sytle.css

    Ada tiga metode atau cara dalam menulis script css:
    Pertama, menyisipkan langsung di tag HTMLnya.
    Contoh:
    <p style="color:red;">Tulisan ini merah warnanya</p>

    Kedua, menyisipkan di antara tag <head> dan </head>
    Contoh:
    <html>
    <head>
    <style>
    p {
    color:red;
    }
    </style>
    </head>
    <body>
    <p> Tulisan ini merah warnanya</p>
    </body>
    </html>

    Ketiga, membuat file CSS terpisah dari file HTML. untuk menghubungkan file
    CSS dan HTML, digunakan tag sebagai berikut.
    <link rel="stylesheet" type="text/css" href="namafile.css">
    Sisipkan diantara tag <head> dan </head>
    Contoh: <link rel="stylesheet" type="text/css" href="style.css">

    Metode ketiga termasuk metode yang sering digunakan, karena lebih fleksibel dan bisa digunakan untuk beberapa file HTML sekaligus. Metode kedua biasanya digunakan pada template-template blogger, sedangkan untuk joomla biasanya mengunakan metode ketiga.

    Untuk melihat langsung bagaimana CSS bekerja maka buatlah sebuah file dengan nama style.css isinya sebagai berikut, ( kita akan memakai metode yang ketiga )

    #cssnih {
    font-size: 15px;
    text-decoration: underline;
    font-transform: uppercase;
    }

    Kemudian, buat satu lagi file terpisah dengan nama latihan.html, isikan dengan script berikut:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Gue lagi belajar CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    Baris 1: Ini adalah tulisan yang tidak mengunakan CSS<br/>
    <div id="cssnih"> Baris 2: Dan ini mengunakan CSS</div>
    </body>
    </html>

    Simpan kedua file tersebut dalam folder/lokasi yang sama, kemudian jalankan latihan.html maka yang terjadi adalah.

    Baris 1: Ini adalah tulisan yang tidak mengunakan CSS
    BARIS 2: DAN INI MENGUNAKAN CSS

    Tampilan BARIS 2 mengambil settingan tampilan dari file style.css, sedangkan tampilan untuk baris satu tidak mengunakan settingan CSS. Nah, apakah anda sudah memiliki sedikit gambaran tentang CSS dan cara pemakaiannya?

    Masih belum! Ingin lebih mengenal CSS? Baca Mengenal CSS Selector lebih dekat lagi
    READ MORE - Mulai bekerja dengan CSS