ALAN MAOLANA S: tutorial blog

Tampilkan postingan dengan label tutorial blog. Tampilkan semua postingan

Rabu, 01 Juni 2011

PASANG BANNER DI HEADER BLOG

Beberapa hari yang lalu, sempat ada salah seorang sobat meninggalkan pesan Offline pada YM milik saya yang isinya kira-kira seperti ini :

"Bagaimana caranya menyimpan banner pada header blog"

Sebuah keinginan yang saya anggap wajar bagi seorang pemilik blog, karena sudah barang tentu merupakan suatu kebahagiaan tersendiri apabila banner yang sangat kita sukai dapat di tempatkan pada blog kebanggan kita. Jika ada pertanyaan lain "apakah kita bisa mengganti atau menambahkan banner sendiri kedalam blog?" jawabannya adalah bisa, akan tetapi tentunya kita harus sedikit bercape ria mengotak-atik kode template.

Lagi-lagi karena template terbagi dua yaitu template klasik dan template baru, maka saya akan membagi dua bahasan tentang bagaimana caranya menambahkan atau mengganti banner yang ada di header.

Sebelum menginjak kepada proses editting template, langkah awal tentunya sobat harus mempunyai banner yang akan di pakai. Untuk membuat sebuah banner, sobat bisa menggunakan berbagai program desain grafis yang sobat kuasai, apakah itu photoshop, coreldraw, ataupun program-program yang lainnya yang sejenis yang penting judulnya adalah program yang bisa membuat banner.

Karena template bentuknya ratusan atau bahkan mungkin ribuan, tentunya tulisan ini tidak akan bisa mewakili untuk pemakaian template, akan tetapi mungkin akan sedikit memberi gambaran bagaimana cara menambahkan atau merubah banner yang ada di header. Sebagai proyek percontohan (kaya kerjaan saja ya pake proyek segala), saya akan mengambil contoh template Minima yang di desain oleh Douglas Bowman, dan template ini merupakan template asli blogger.

Untuk Template Klasik

Seperti yang saya sebutkan di awal bahwa langkah pertama yang dilakukan adalah membuat banner, gambar banner terserah kepada sobat, mau gambar pemandangan, laut, atau photo sobat sendiri juga boleh. Langkah kedua adalah meng upload banner tersebut, bisa di upload ke blogger sendiri atau ke hosting lain. Untuk cara upload gambar sudah saya terangkan di sini dan di sini. Sebagai contoh, saya sudah upload banner di www.photbucket.com dan mempunyai alamat banner seperti ini :

http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif

dan gambar bannernya seperti ini ( gambarnya dalam skala kecil):

Untuk cara penempatannya silahkan ikuti langkah-langkah berikut :

Sign in di blogger
Klik menu Template
Klim menu Edit HTML
Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting template
Sisipkan kode berikut pada style sheet css sobat. Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan

background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif) no-repeat top center;

Jika sobat ingin menghapus garis yang berada di tepi banner, sobat harus menghapus kode berikut :

border:1px solid #eee;

border-width:1px 1px 0;

border:1px solid #eee;

border-width:0 1px 1px;

Klik tombol Pratinjau untuk melihat perubahan
Jika sudah OK, klik tombol Simpan Perubahan Template
Selesai.

Untuk template baru

Bagi sobat pengguna template baru, bisa menggunakan dua cara.

Cara pertama :

Sign in di blogger
Klik menu Layout
Klik menu Edit HTML
Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
Klik kotak kecil di samping tulisan Expand Template Widget
Tunggu beberapa saat sampai proses selesai
Tambahkan kode berikut pada style sheet css sobat.Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan

background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif)no-repeat top center;

Klik tombol Pratinjau untuk melihat perubahan yang ada
Bila sudah OK, klik tombol SIMPAN TEMPLATE
Selesai.

Langkahnya diatas sama dengan yang di template klasik.

Cara kedua :

Sign in di blogger
Klik menu Layout
Klik menu Edit HTML
Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
Klik kotak kecil di samping tulisan Expand Template Widget
Tunggu beberapa saat sampai proses selesai
cari kode berikut pada template sobat :
Klik tombol SIMPAN TEMPLATE

Nah itu langkah pertama, langkah selanjutnya adalah :

Klik menu Elemen Halaman
KLik tulisan Edit yang ada pada elemen Header
Tunggu beberapa saat
Pilih radio button yang ada di samping tulisan dari komputer Anda
Klik tombol Browse...
Pilih banner yang telah di buat yang ada pada komputer sobat
Tunggu beberapa saat sampai proses selesai.
Gambar banner sobat akan di tampilkan
Klik tombol SIMPAN PERUBAHAN
Selesai.

Nah silahkan sobat lihat hasilnya!

jika sobat merasa banner tersebut, maka sobat bisa menggantinya lagi, ulangi saja langkah-langkah di atas.

Text Berjalan di Bar menu

temen ane beberapa hari yang lalu mengirimkan email kepada saya yang isinya menanyakan tentang cara membuat text berjalan yang ada pada bar menu bawah seperti halnya pada blog milik saya ini. Pertanyaan tersebut sudah saya jawab langsung melalui email juga dan sekarangpun pada saat artikel ini di buat, sobat Ochim sudah berhasil membuat bar menu blognya ada tulisan berjalan.

Seperti biasanya, jika ada pertanyaan melalui email maka jawaban dari pertanyaan tersebut akan saya posting melalui blog ini. Nah jika sobat sama-sama tertarik ingin membuat text berjalan tersebut, silahkan baca artikel ini sampai tuntas.

Karena template blogger terbagi menjadi dua yaitu template klasik dan template baru, maka untuk cara membuat text berjalan tersebutpun akan berbeda, oleh karenanya pembahasannya pun akan saya bagi menjadi dua bagian. Akan tetapi perlu saya sampaikan, contoh yang akan saya berikan kali ini hasilnya tidak persis seperti pada blog ini yaitu text berjalan dari arah kanan kekiri, akan tetapi saya akan memberi contoh text berjalan dari kiri ke arah kanan serta ada jeda waktu antara tulisan yang petama dengan yang kedua dan juga tulisan berikutnya.

Untuk template klasik silahkan ikuti langkah-langkah berikut ini :

Sign in di blogger dengan id sobat
Klik menu Template
klik menu Edit HTML
Copy seluruh kode HTMl lalu paste pada program notepad kemudian save. Ini di maksudkan untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting template, sobat masih mempunyai data untuk mengembalikannya ke semula
Copy kode berikut ini lalu paste di atas kode </head>

  <script language='javascript'> 
message = "Tulis text pertama yang ingin muncul disini ^" + 
"Tulis text kedua disini ^" + 
"Tulis text ketiga disini ^" + 
"Tulis text keempat disini ^" 

scrollSpeed = 130 
lineDelay = 0 

// Do not change the text below // 

txt = "" 

function scrollText(pos) { 
if (message.charAt(pos) != '^') { 
txt = txt + message.charAt(pos) 
status = txt 
pauze = scrollSpeed 
} 
else { 
pauze = lineDelay 
txt = "" 
if (pos == message.length-1) pos = -1 
} 
pos++ 
setTimeout("scrollText('"+pos+"')",pauze) 
} 
scrollText(0) 
</script>

Klik tombol Save Template Changes
Selesai.

Untuk template baru silahkan ikuti langkah-langkah berikut ini :

Sign in di blogger dengan id sobat
Klik menu Layout
Klik menu Edit HTML
Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template
Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang. Sekali lagi jangan lupa klik kotak kecil di samping tulisan Expand Widget Templates
Tunggu beberapa saat sampai proses selesai
Simpan kode berikut di bawah kode </body> , kode ini letaknya berada paling bawah sebelum kode </html>

  <script language='javascript'> 
message = "Tulis text pertama yang ingin muncul disini ^" + 
"Tulis text kedua disini ^" + 
"Tulis text ketiga disini ^" + 
"Tulis text keempat disini ^" 

scrollSpeed = 130 
lineDelay = 0 

// Do not change the text below // 

txt = "" 

function scrollText(pos) { 
if (message.charAt(pos) != '^') { 
txt = txt + message.charAt(pos) 
status = txt 
pauze = scrollSpeed 
} 
else { 
pauze = lineDelay 
txt = "" 
if (pos == message.length-1) pos = -1 
} 
pos++ 
setTimeout("scrollText('"+pos+"')",pauze) 
} 
scrollText(0) 
</script>

Klik tombol SAVE TEMPLATE
Selesai

sedikit clue, pada kode diatas ada tulisan yang saya buat merah, nah tulisan tersebut harus sobat ganti dengan tulisan yang sobat inginkan. contoh : selamat datang di blog saya. atau apa saja yang menurut sobat layak untuk di tulis di situ. contoh yang saya berikan diatas memuat pesan atau text sebanyak empat tulisan, jika sobat ingin lebih banyak itu bisa dilakukan dengan menambah baris tulisan seperti kode sebelumnya.Untuk kode --> scrollSpeed = 130 . angka "130" merupakan kecepatan dari text berjalan, semakin kecil nilainya semakin cepat text berjalan, dan semakin besar nilainya maka text akan semakin lambat. Silahkan sesuaikan dengan keinginan sobat.

Seperti yang saya katakan di awal artikel bahwa kode yang saya berikan di atas hasil efeknya tidak sama dengan yang ada di blog ini, untuk melihat hasil nyatanya, silahkan sobat klik di sini.

Selamat mencoba !!!

Textarea adalah bagian dari form yang berfungsi sebagai space/ruang bagi teks/konten khusus yang ingin diberi posisi/penempatan tertentu. Ada banyak jenis textarea berdasarkan fungsi form, yaitu untuk mengisi data, submission/pendaftaran, polling, search, dan lain-lain. Namun pada posting kali ini akan dikhususkan pada texarea yang berfungsi sebagai space bagi konten tertentu untuk digunakan olh pengunjung dan bersifat read-only, baik pada posting blog/website maupun pada widget/sidebar.

Pada posting terdahulu, saya pernah berbagi tentang textarea sederhana dengan menggunakan tag div dan beberapa aturan CSS yang sederhana pula. Di posting ini, saya share textarea dengan tag originalnya (textarea tag) dan beberapa sentuhan style CSS3. Posting ini akan dilanjutkan dengan posting-posting selanjutnya tentang textarea dengan berbagai macam styling yang nantinya dapat dipilih dan disesuaikan dengan warna dan template blog sehingga akan tampak lebih indah.

Dasar tag textarea adalah:

<textarea>teks/konten disini</textarea>

Nah, dengan memasukkan beberapa atribut dan style CSS, kita dapat mempercantik tampilan textarea tersebut. Contoh

<textarea style="width: 300px;height:60px; border:1px solid red;" readonly="readonly">teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini</textarea>

Hasilnya:

teks/konten  textarea disini teks/konten textarea disini teks/konten textarea disini  teks/konten textarea disini teks/konten textarea disini teks/konten  textarea disini

Itu adalah sebagian contoh sederhana styling pada text area. Selanjutnya berikut adalah textarea dengan menggunakan styling CSS3 yang sedikit agak rumit. Anda dapat meenggunakan script/kodenya di blog anda dan melakukan beberapa kostumisasi sesuai kebutuhan.

Textarea: LightYellow 3D Hover Effect With Shadow (CSS3 Styling):

teks/konten  textarea disini teks/konten textarea disini teks/konten textarea disini  teks/konten textarea disini teks/konten textarea disini teks/konten  textarea disini teks/konten textarea disini teks/konten textarea disini  teks/konten textarea disini teks/konten textarea disini teks/konten  textarea disini

Cara membuatnya:

1. Copy kode CSS berikut:

<style type="text/css">
.bukarahasia-textarea1 {padding:3px;margin:0;width:400px;height:60px;color:#FFCC00;font:12px arial;background:#000;border:2px outset #FFCC00;-moz-box-shadow: 7px 7px 3px #888;-webkit-box-shadow: 7px 7px 3px #888; box-shadow: 7px 7px 3px #888;}
.bukarahasia-textarea1:hover {color:#FFFF00;border:3px double #FFB200;-moz-box-shadow: 0 0 0; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0;"}
</style>

Kostumisasi: atur nilai width (lebar) dan height (tinggi) sesuai dengan keinginan.

2. Jika ingin menggunakan textarea yang sama pada semua posting/widget, paste kode CSS tersebut tepat di atas </head> pada edit HTML template kemudian save.

3. Jika ingin memakainya pada satu posting saja, masukkan kode CSS di bagian bawah posting melalui menu Edit HTML posting (letaknya di pojok kanan atas kotak editor posting) atau HTML/Javascript pada widget.

4. Kopi kode HTML berikut:

<textarea class="bukarahasia-textarea1" readonly="readonly">teks/konten textarea disini</textarea>

5. Ganti teks/konten textarea disini dengan konten anda.

6. Masukkan ke editor posting melalui melalui menu Edit HTML posting (letaknya di pojok kanan atas kotak editor posting) HTML/Javascript pada widget dimana anda sebelumnya telah memasukkan kode CSS.

7. Done. Anda dapat mempreviewnya langsung melalui "compose".

Membuat Scroll pada Label, Arsip Blog Ataupun Widgets Lainnya

Seperti yang sudah mafhum yang namanya scroll itu adalah sesuatu yang bisa ditarik ke atas dan ke bawah, seperti pada halaman utama blog ini. Atau Pada arsip di blog ini maupun NEW dan Blogger ter'buwel, Yang mana widgets2 tadi adalah widgets yang berupa bawaan dari blogger atau blogspot. Atau bisa juga widget2 lainnya yang memang pengin diberikan scroll... :-)

Dan Langsung ke cara membuatnya yaitu

1.Sign in seperti biasa di blogger
2.Ke Tata letak---> terus ke Edit Html
3.Cari Kode:

<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='HTML6' locked='false' title='Jam' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
<b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>
<b:widget id='HTML7' locked='false' title='Statistik Blog Ini' type='HTML'/>
<b:widget id='HTML1' locked='false' title='Kotak Chatting' type='HTML'/>

4.Lha trus cari nama widgets yang akan anda beri scroll.
Misalkan anda pengin mengasih scrollnya untuk Arsip Blog, maka kodenya kira2 seperti ini

<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>

Nah kode id yang nanti di pakai untuk Arsip blog ini adalah BlogArchive1

5. Kemudian Pastekan Kode dibawah ini di atas kode ]]></b:skin>

#BlogArchive1 .widget-content{
height:200px; /* Tinggi yang diinginkan */
width:auto;
overflow:auto;
}

Kemudian simpan Templete.
Nah kalo berhasil nggak akan Error, dan Arsip Blog kita akan terscrollkan.

Cara ini bisa juga untuk membuat scroll pada label, Seperti contoh script diatas (script no 3) yang mengambarkan id Label yaitu Label1, maka kita tinggal mengganti kata BlogArchive1 pada script nomer 5 dengan Kata Label1.
Sedang Untuk tinggi scroll bisa diatur sesuai selera yang kalo yang diatas itu tulisan 200px ya..

sumber :
http://cah-cikrik.blogspot.com/2010/04/membuat-scroll-pada-label-arsip-blog.html

Senin, 30 Mei 2011

Membuat gambar melayang di pojok blog

Mudah-mudahan ini bisa bermanfaat bagi blogger yang masih baru, jujur saya juga masih dalam tahap belajar, intinya kita saling membantu sesama sapa aja yang mau berlajar, coz berbagi ilmu itu ternyata menyenangkan sobat. .. o_O

1. Login ke blogger trus klik "Layout -->> Edit HTML

2. Cari kode ini ]]></b:skin> kalo dah ketemu taru kode berikut ini di atasnya.

#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

3. Text yang dicetak tebal adalah posisinya, kalo ingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa diganti dengan "top".

4. Langkah selanjutnya yaitu letekkan script berikut ini diatas kode </body>

<div id="trik_pojok">
<a href="http://koDe-Xp.blogspot.com">
<img src="http://i1097.photobucket.com/albums/g344/koDe-xp/IconkoDe-Xp.png" border="0" /></a>
</div>

"http://trik-nyaman.blogspot.com" adalah link. ganti dengan link kamu.
"http://i1097.photobucket.com/albums/g344/koDe-xp/IconkoDe-Xp.png" adalah lokasi gambarmu. ganti dengan lokasi gambar kamu.

5. Jika kamu ingin yang ada disitu bukan gambar tetapi jam/kalender/hit counter/widget-widget yg lain, maka ganti text yang berwarna merah dengan script widget-widget tersebut.

6. Simpan hasil kerja kamu dan lihat hasilnya.

Kamis, 26 Mei 2011

web gratis

Hi semua,
Saya pikir informasi ini dapat berguna bagi Anda. Jika Anda berencana untuk mendapatkan website Anda, di sini adalah salah satu web penyedia hosting gratis baik untuk memilih - 000webhost.com
Mereka menyediakan hosting gratis, ada menangkap ada. Anda mendapatkan 1500 MB disk space dan 100 GB bandwith. Mereka juga telah cPanel control panel yang menakjubkan dan mudah untuk menggunakan website builder. Selain itu, tidak ada apapun dari iklan pada halaman Anda.
Anda dapat mendaftar di sini: http://www.000webhost.com/454606.html

Teks No 2:Halo semua,
Saya ingin memberitahu Anda tentang web hosting gratis layanan yang saya gunakan sekarang.Daftar di sini: http://www.000webhost.com/454606.html

Minggu, 22 Mei 2011

PENGERTIAN vps (virtual private server)

Pengertian VPS (Virtual Private Server)

Virtual Private Server atau VPS adalah sebuah metode untik mempartisi atau membagi sumber daya / resource sebuah server menjadi beberapa server virtual. Server virtual tersebut memiliki kemampuan menjalankan operating system sendiri seperti layaknya sebuah server. Bahkan Anda dapat me-reboot sebuah server virtual secara terpisah (tidak harus mem-reboot server utama).
Dalam sebuah VPS, resource server yang alokasikan adalah meliputi CPU Core, CPU Usage, RAM, dan Storage atau ruang penyimpananan.
Teknologi yang digunakan dalam layanan VPS tersebut adalah teknologi virtualisasi. Rumahweb memilih untuk menggunakan platform teknologi virtualisasi XEN Hypervisor karena XEN Hypervisor dipandang unggul dibandingkan teknologi virtualisasi yang lain di antaranya karena :

XEN memiliki Swap Space seperti halnya server linux biasa
Kontrol yang lebih besar terhadap VPS, diantaranya Anda dapat mengkonfigurasi firewall / iptables secara fleksibel
Loadable Kernel Modules
Akses ke console untuk troubleshooting

Dalam teknologi hosting, fitur - fitur VPS yang seperti layaknya sebuah dedicated server menjadikannya teknologi perantara yang paling fleksibel antara shared hosting dan dedicated server.

DAFTAR DOMAIN GRATIS

Siapa yang tidak ingin membuat website gratis?Domain gratis dan webhosting gratis kini sangat mudah di dapat.Di bawah dapat kalian lihat daftar aneka domain gratis yang bisa kalian gunakan untuk memulai membangun sebuah website.Mudahnya instalasi script dan banyaknya domain gratis serta webhosting gratis membuat makin ramai dunia internet sebab dengan pengetahuan php “0″ dan kantong bokekpun siap punya website.Mari kita telusuri satu persatu aneka domain gratis yang bisa kalian dapat:

Baca selengkapnya »

cara membuat menu tab view

Banyak dari teman-teman Blogger yang tak tahu berada dimana dan ada juga yang mengirimi e-mail kepada saya yang menanyakan cara membuat Tab View seperti pada Blog ini,Menu Tab View memungkinkan menampung banyaknya postingan atau artikel pada blog kita,jadi Tab View ini sangat Efisien digunakan karna tidak memerlukan tempat yang besar.membuatnya sangat sederhana,cara membuat Tab View ini dapat dari blog nya mas Kendhin yang beralamat disini.

Jika tertarik Membuatnya ikuti tutorial berikut ini:

Baca selengkapnya »

Pasang widget alexa di blog

Menyambung pembahasan sebelumnya mengenai Apa itu Peringkat Alexa , tentu Anda sudah memahaminya bukan, kalau masih belum mending baca dulu gih,untuk lebih jelasnya. kali ini kita akan membahas seputar pemasangan Widget Alexa ke Blog . Tutorial ini ditujukan kepada Blogger yang masih awam dalam dunia Blogging, bukan ditujukan kepada Anda yang sudah mahir yang menganggap tutorial ini tidak berguna sama sekali.

Memasang Widget alexa sangatlah mudah,Apakah anda pernah Membuat Sexy Social Bookmarking , atau Membuat Page Navigation atau Cara Membuat Daftar isi Blog , ketiga widget tersebut sangat mudah dibuat begitu juga dengan memasang Widget Alexa.

Kita langsung saja ke permasalahannya.

1.Silahkan tuju ke situs Alexa

2.Klik For site owner untuk memulai pengambilan widget alexa.

3.Lalu pilih Site Widget untuk mengambil Widget nya.

4.Masukan alamat blog anda pada kolom yang disediakan,,lalu Klik Build Widget

5.Lalu pilih Widget mana yang Anda suka dan Ambil Kodenya.

6.Lalu masuk ke Blogger dengan Id Anda

7.Klik Layout >> Elemen Halaman >> Tambah Gadget.

8.Pilih Edit HTML

9.Pastekan Kode Alexa ke dalam kotak HTML yang disediakan

10.Save Template

Selamat Mencoba

Membuat fungsi scroll pada arsip blog

Beberapa hari yang lalu ada teman Uda yang menanyakan cara membuat Fungsi Scroll pada menu/arsip blog, Uda pun sudah menjawabnya silahkan lihat blog teman Uda yang menanyakan Hal tersebut disini. Tapi Uda pikir-pikir tidak ada salahnya untuk posting masalah ini ke blog, jadi bagi yang belum tau caranya bisa jadi tau deh. Untuk membuat arsip blog memiliki fungsi scroll sangat mudah, untuk membuatnya silahkan ikuti langkah-langkah berikut :

Pertama Kita harus membuat dulu Arsip Blog

• Masuk ke blogger
• Klik Tata Letak
• Klik Elemen Halaman
• Tambahkan sebuah elemen halaman=> Tambah elemen Arsip Blog
• Tapi Anda harus pilih gaya Hierarki

Pada Menu Diatas Itu belum terdapat fungsi scroll, untuk membuatnya memiliki fungsi scroll ikuti langkah-langkahnya lagi !

• Setelah itu, klik Edit Html
• Beri tanda centang pada tulisan Expand Widget Template
• Lalu Anda cari kode seperti ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>

Anda akan menemukan kode lengkapnya seperti ini :

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:100px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == "rtl"'>
◄
<b:else/>
►
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

Kode warna merah dan hijau adalah kode yang ditambahkan kedalam script tersebut
Kode warna hijau yang dicetak tebal adalah tinggi dari elemen tadi, silahkan kawan ganti agar sesuai dengan blog kawan
Lalu jangan lupa untuk menyimpannya=> Klik Simpan

Buat logo & image button

Bagi para sobat yang sudah mahir menggunakan program desain grafis semisal adobe photoshop ataupun coreldraw serta teman-temannya yang lain, membuat sebuah logo bukanlah sebuah pekerjaan yang sulit, dan mungkin tutorial ini menjadi tidak menarik untuk di baca. But barangkali ada sebagian dari para sobat sekalian yang satu nasib dengan saya, sebenarnya saya pun boleh di katakan tidak awam banget dengan program-program desain grafis tersebut, akan tetapi tak cukup hanya menguasai tentu saja di perlukan suatu daya kreasi atau imajinasi yang tinggi untuk menciptakan sebuah logo.

Nah kalau ada diantara sobat sekalian yang senasib dan sepenanggungan seperti saya (lho ko jadi ngawur ngomongnya)jangan dulu berkecil hati, seperti biasa ada pepatah mengatakan banyak jalan menuju Roma ((irama)kaya postingan dulu...dah basi)untuk membuat logo kita bisa memakai jasa situs di internet, salah satunya yaitu cooltext.com, Silahkan ikuti langkah-langkah berikut ini :

Silahkan buka alamat http://cooltext.com
Lalu klik tulisan Design a Logo
Klik gambar contoh logo yang sobat sukai
Tulis tulisan yang ingin di jadikan logo di sampimg tulisan Logo Text. Misal : Blog Tutorial
Tulis ukuran yang di inginkan di samping Tulisan Text Size. Misal : 50
Klik logo warna-warni disamping kotak yang ada tulisan Text Color untuk memilih warna tulisan (text).silahkan pilih warna yg sobat sukai
Pilih format image disamping tulisan file format. sebaiknya .JPG atau .GIF
Klik tombol yang bertuliskan Render Logo Design
Tunggu beberapa saat ketika proses pembuatan logo berlangsung
Lihat hasil logo, sudah cocok apa belum? bila belum cocok, klik tulisan Edit this logo ulangi langkah diatas, rubah yang sobat inginkan. Jika sudah cocok, klik tulisan Download Image untuk kita simpan di PC kita
Selesai. Sobat sudah mempunyai sebuah logo.

Agar logo yang kita buat tadi bisa tampil di blog, sobat harus upload gambar tersebut ke blogger.com atau melalui situs lain. Tapi saya lebih suka menyimpannya di situs lain misal www.photobucket.com.

Untuk proses upload di photobucket.com, silahkan ikuti langkah-langkah berikut :

Silahkan buka alamat http://www.photobucket.com,
Jika belum terdaftar di situs ini, silahkan daftar dulu (gratis bo) dengan meng klik tombol yang bertuliskan Join Now pada sudut kanan atas layar
Sekarang saya asumsikan sobat sudah terdaftar (pastilah cara daftarnya bisa kan)
Silahkan Sign In dengan Id sobat
Bila sudah berada pada halaman Account sobat, Klik tombol yang bertuliskan Browse... Silahkan pilih logo yang tadi di buat
Klin tombol yang bertuliskan Upload
Tunggu beberapa saat ketika proses upload berlangsung
Setelah upload selesai, akan di perlihatkan gambar logo serta kode HTML nya
Copy kode HTML yang ada di sebelah tulisan URL Link. Paste pada program notepad
Silahkan klik tulisan Log Out untuk keluar dari account sobat. tutup layar browser sobat

Nah sekarang sobat tinggal memasukan kode gambar tadi ke blog ke blog sobat, cuma ada sedikit kode yang harus di tambahkan, karena kode tadi baru berupa Link Image saja. Contoh kode link image : http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg. Disini sobat harus menambahkan kode <img src="Link URL logo">, sehingga kode tadi menjadi seperti ini :

<img src="http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg">

Maka contoh hasilnya akan seperti ini :

Untuk cara memasukan kode HTML kedalam blog sudah sering di bahas, jika lupa silahkan klik di sini.

Sebagai tambahan, kode HTML di atas adalah kode untuk menampilkan image dengan ukuran yang sebenarnya. Apabila sobat ingin memperbesar atau memperkecil image tersebut, sobat bisa menambahkan beberapa atribut ke dalam kode HTML nya. Contoh : image tadi ingin saya tampilkan dalam ukuran 100px X 40px , maka kode tersebut menjadi seperti ini :

<img src="http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg" width="100" height="40" alt="ini contoh saja">

sedikit clue, kode width="..." yaitu untuk ukuran lebar image, jadi untuk memperbesar atau memperkecil image, sobat tinggal menambah atau mengurangi nilainya. kode height="..." yaitu untuk ukuran tinggi image, sobat tinggal menambah atau mengurangi nilainya. Untuk alt="..." yaitu untuk menampilkan tulisan ketika mouse berada pada image tersebut.

Sebagai contoh, hasil dari kode diatas adalah sebagai berikut, silahkan sorot image tersebut untuk melihat efek kode alt="..." :

Bagaimana sudah bisa kan? pasti bisa, kan sudah di coba. Sekarang bagaimana cara membuat image button? langkahnya sama saja dengan langkah-langkah di atas, cuma pada saat berada di situs cooltext.com yang sobat klik adalah tulisan Desiggen a Button bukan Design a Logo, contoh image button :

Sabtu, 21 Mei 2011

Make Money with website

After you've finished your website, now it's time for you to make money with your website :) You can try to join this program below :

* Affiliate Program :

There are a lot of kinds of affiliate programs, some of them will ask you firstly to pay the regristration fee and so many of them are FREE to join, so i prefer to join the free ones. You can earn commissions from affiliate programs in so many different ways too, you can get paid per sale, paid per qualified sign up or paid per lead, paid per ads impression, paid per clicked ads,etc.

First thing you need to do is finding the appropriate affiliate program, learn the system, run the system, then sit back to wait the cash flow to you even while you are sleeping:)!

For an example : This blog is discussing about making a free website, so i join Bravenet affiliate program, a Webhosting Company. Just imagine how easy it is, this company will pay me US$1 per each user that sign up for Bravenet's FREE services : Free webhosting, free web template, free short url redirection, free hit counter, & other free fantastic webtools. So what i need to do is : putting a banner that provided by Bravenet in to my blog (you can see it below at the corner).

If you want to join Bravenet Affiliate Program, you can sign up here !!! Note : If you are non USA user, choose "Trust Teritories" to identify your "State/Province"

Use the search engine below this blog to help you finding the most appropriate affiliate programs that matches to you! Example : If your website is about music, so use this keyword : "music + affiliate program" Or click this LINK to learn the proven FREE internet income program that has given me hundreds of dolars per month

* Google Adsense :

If you join this program you will get revenue from your website by showing relevant ads that provided by Google. Register your website for this program at www.google.com/adsense

Baca selengkapnya »

Menghilangkan Icon Obeng dan Tang / Quick edit Blogger

jika kita sedang mengedit template dan melihat hasilnya maka pada sudut-sudut element akan terlihat icon bergambar obeng dan tang. berikut contoh screenshotnya :

Icon tersebut di sebut juga dengan icon Quick Edit atau dengan kata lain untuk mengedit secara cepat. Fungsinya jika kita ingin melakukan editing terhadap elemen tersebut tinggal klik saja icon nya dan kita bisa langsung mengeditnya. Icon tersebut sebenarnya hanya bisa di lihat apabila kita sedang login ke blogger saja, sedangkan pengunjung yang lain tidak bisa melihat icon tersebut.
Namun ternyata ada beberapa blogger yang tidak suka dengan kehadiran icon tersebut dan ingin menghapusnya. Apakah kita bisa menghapus icon tersebut? Jawabannya tentu saja bisa, dan sangatlah gampang karena kita hanya melakukan perintah agar icon itu tidak di munculkan dengan hanya manambahkan sedikit kode pada kode CSS template kita. Ingin tahu kodenya seperti apa, nih ini dia kodenya, coba pasang saja di Style Sheet CSS anda :

.quickedit{
display:none;
}

Mudah sekali bukan? atau masih bingung. Ok deh, ini dia cara lengkapnya :

Login ke blogger dengan ID anda tentunya.
Klik Tata Letak.
Klik tab Edit HTML.
Cari kode seperti ini :
]]></b:skin>
Copy paste kode berikut persis di atas kode yang tadi :

.quickedit{
display:none;
}
Klik tombol Simpan template.
Selesai.

Selain langkah di atas, sebenarnya masih ada yang harus anda lakukan yaitu silahkan ucapkan “ Selamat tinggal Obeng dan Tang…dadaaahhhhh “ hehehe….

Selamat mencoba!

Jumat, 20 Mei 2011

Key Logger : Tool pencuri informasi

KEY LOGGER (KEYSTROKE LOGGER) DEFINITION
Adalah suatu program yang berjalan di belakang sistem (Background), merekam semua tombol. Sekali Key Logger dijalankan, maka otomatis akan bersembunyi di dalam mesin untuk mencatat semua data atau mengirimkan datanya secara langsung ke pemilik Key Logger.

Pemilik Key Logger kemudian membaca data yang didapatkan tersebut dengan teliti dengan harapan menemukan kata sandi (Password) atau mungkin informasi lain yang bermanfaat yang bisa digunakan sebagai serangan Social Engineering. Key Logger secara sederhana bisa dikategorikan sebagai Hack Tool Pencuri Informasi. Sebagai contoh, Key Logger dapat mengungkapkan isi dari semua e-mail yang ditulis oleh korban. Program Key Logger biasanya terdapat di dalam rootkit dan trojan.

Key Logger berfungsi untuk merekam (mencatat) semua aktifitas pengguna komputer dengan mengambil input data melalui karakter keyboard yang digunakan oleh user. Jadi jika user mengetikkan kata “SaYa” melalui keyboard maka secara otomatis Key Logger akan mencatatnya pada sebuah LOG file dengan data “SaYa”.

HACK TOOL = UTILITIES = KEY LOGGER?
Jika ada pertanyaan, apakah Key Logger itu termasuk tool jahat? atau sejenis software utilities yang baik? Terus terang hanya Anda yang bisa menjawabnya. Kelebihan manusia dengan makhluk lain adalah mampu membedakan mana hal yang baik dan mana hal yang tidak baik.

A) Angel Style..?
Key Logger sering dipergunakan sebagai parental advisory (kontrol orang tua) untuk mengawasi kegiatan anak-anak mereka saat mempergunakan komputer. Selain itu juga sering dipergunakan oleh pemilik internet cafe (warnet), network sharing, dan lainnya untuk mengawasi aktifitas user. Contoh : Pembatas konten dewasa (pr0n), kontrol orang tua terhadap topik pembicaraan anak di internet, etc.

B) Evil Style..?
Di sisi lain Key Logger jika disalahgunakan akan sangat merugikan sekali, terutama bagi user yang menjadi target penyalahgunaan tool Key Logger. Semua karakter yang diketikkan melalui keyboard akan tercatat dengan baik pada LOG file. Entah itu password, Username, nomer PIN bank, account FTP/Facebook/etc. Dari sini Anda tentu bisa membayangkan apa yang akan terjadi jika Anda dan komputer Anda menjadi target kejahatan ini.

Baca selengkapnya »

cara dapatkan uang di 4 shared

Trik Cara Mudah Mendapatkan Uang Gratis Rp.30.000/bulan Dengan Modal Mouse
Januari 20, 2009
Mendapatkan uang secara gratis sangatlah menyenangkan. Apalagi jika kita mendapatkannya lewat internet. Sembari browsing sambil cari uang. Dan tidak tanggung lo, bisa sampe Rp.30.000/bulan. Seharinya aja bisa Rp.1000. Emang bisa ya mas Adit? Bukan hanya bisa, tapi sudah terbukti. Kalo misalnya ga mau, ya ga papa..tapi rugi banget lo! Toh juga gratis. Kok kliatannya enak banget ya. Sudah gratis, Rp.30.000 lagi! Apakah anda pikir ini scam? atau penipuan? STOP..bukan scam ataupun penipuan sama sekali. Saya sendiri sedang mengumpulkan uang itu. Maksudnya modal mouse adalah hanya anda membutuhkan mouse untuk mendapatkan uang sebanyak itu. Walaupun anda juga butuh monitor, listrik, dan koneksi internet. Tenaga dan Keahlian anda sangat tidak dibutuhkan. Bahkan kesabaran pun juga tidak dibutuhkan. Apabila anda sudah bisa mengakses internet dan sudah bisa memegang mouse, anda sudah bisa mendapatkan uang via internet. Ingatlah kata kata itu. Sebenarnya kalimat itu memang benar. Tapi yg akan saya berikan disini gratis. Bukan cara yg harus bayar dahulu. saya akan memberikan cara ini dengan step by step. Jika anda masih kebingungan, saya siap membantu anda dengan YM kakashi_aditya . Sudah banyak orang yg puas dengan pelayanan blog ini, lalu tunggu apa lagi? ayo dapatkan Rp.1000 rupiah pertamamu.
Tidak ada kata yg tidak mungkin dalam internet, semua hal dan keinginan bisa didapatkan lewat internet. Termasuk uang. Di postingan ini saya akan menunjukkan kepada anda cara mendapatkan uang via internet itu. jangan mengeluh ya, memang gambar2 di blog ini tidak rapi karena themenya. Dan jangan pernah capek. Dijamin anda akan mendapatkan uang di internet.
Ok, cukup sekian bincang-bincangnya. Dan berikut ini adalah caranya :
1. Klik disini dahulu ya.
2. Lalu pada kolom Met datang di klik Aja deh , pilih daftar sekarang di sebelah member info.
3. Lalu isi form pendaftaran tersebut dengan data-data pribadi anda.
4. Setelah berhasil mendaftar, klik log in.
5. Form login ada dibawah sendiri, silahkan isi dengan ID dan Pass ketika kita mendaftar.
6. Setelah berhasil login, klik view ads atau http://klikajadeh.com/surf.php
7. Di bawah, klik judul iklannya. Lalu anda akan dibawa ke halaman / tab baru, biarkan saja.
8. Tunggu sampai proses loading selesai.
9. Setelah proses loading selesai, akan ada timer selama 30detik. Biarkan saja sampai selesai. Setelah melewati 30 detik, akan berubah menjadi OKE. Itu artinya uang telah bertambah Rp.100 di saldo anda.
10. Kembali ke VIEWS ADS atau http://klikajadeh.com/surf.php. Ulangi langkah 7.
11. Lakukan langkah2 ini setiap hari, dijamin anda akan mendapatkan uang saku tambahan.
Minimal Pembayaran adalah RP.50.000. Jadi jika saldo sudah terkumpul RP.50.000, bisa ditransfer langsung ke Bank Kesukaan anda.
How you make money
Anda klik menu View Ads dan selanjutnya pada daftar iklan Anda klik masing-masing iklan satu persatu. Tiap iklan tsb akan tampil selama 30 detik. Setelah 30 detik, maka akan muncul sebuah tanda “OKE deh” atau tanda silang merah. Tanda “OKE deh” pertanda Saldo Anda telah bertambah Rp 100,- dan jika Anda seorang member Premium akan dapatkan Rp 150,-. Tanda X adalah kebalikannya, Saldo Anda tidak bertambah. Tanda X akan tampil jika Anda melihat lebih dari 1 iklan pada waktu yang sama.
Setiap Iklan hanya bisa Anda klik SEKALI dalam 24 JAM .
Contoh penghasilan Member:
» Anda klik 10 iklan per hari = Rp 1000,-
» 20 referral Anda klik 10 iklan per hari = Rp 20.000,-
» Tiap Hari Saldo Anda akan bertambah Rp 21.000,-
» Tiap Minggu = Rp 147.000,-
» Tiap Bulan = Rp 630.000,-
Kalau 1 Tahun? Hitung sendiri aja deh!
Masih bingung dengan langkah- langkah diatas? Oke…saya berikan Tata Cara mendapatkan uangnya lewat screenShot aja ya. supaya lebih mudah. Perhatikan masing-masing gambar panduan / screenshot.

Merubah File jpg ke word

Untuk memenuhi kebutuhan kita dalam menjalankan aktifitas kita di dunia komputer, terkadang kita mengalami berbagai persoalan dan menginginkan sebuah solusi dalam persoalan tersebut. Salah satunya adalah kadang kita mengiginkan supaya pekerjaan ataupun project kita bisa secepatnya terselesaikan dengan mencari sebuah jalan pintas. Seperti halnya tinggal copy file terus di paste. Nah dalam hal ini pada kasus kita ingin merubah sebuah file image atau JPG, ingin di convert atau di rubah ke file Microsoft Office Word. Dengan harapan nantinya kita tinggal copy file kemudian paste file. Maka dari itu tentunya kita memerlukan sebuah software pendukung. Yakni software converter JPG file ke Microsoft Office Word. Caranya silahkan download softwarenya …click disini…, ( passwordnya: www.puisicinta.tk ) Tapi jangan kaget karena file yang sangat besar, tentunya membutuhkan koneksi jaringan yang bagus dan waktunya juga lumayan lama?. Kemudian install dan jalankan. Dan bila sudah terinstal silahkan masukkan file JPG kemudian exstrak. Maka file dengan format JPG tadi akan berubah menjadi file Microsoft Office Word. Mudah bukan? jaman sekarang tidak ada kata yang tidak bisa terjadi, semua bisa kita dapatkan tergantung bagaimana cara usaha kita,..oke sobat silahkan mencoba and semoga sukses. Dan terima kasih atas ilmu ini dari sumber aslinya………

Cara memasang gambar animasi di blog

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.

Baca selengkapnya »

Cara pembuatan animasi

Animasi pada dasarnya merupakan sekumpulan dari gambar diam (statik) yang ditampilkan secara berurutan sehingga menimbulkan ilusi gerakan (animated).
Salah satu contoh bentuk animasi yang paling mudah dikenal adalah film kartun. Pada dasarnya, film kartun adalah sekumpulan gambar yang ditampilkan secara berurutan yang merupakan dasar dari konsep animasi.
Contoh lain, animasi lucu diatas, jika diperhatikan dengan seksama terlihat seperti gerakan yang patah-patah.
Hal tersebut dikarenakan jumlah gambar yang terdapat pada animasi tersebut sangat terbatas karena tujuan penghematan ukuran.
Gambar disebelah kanan merupakan gambar statis, yang digambar atau dibuat berurutan. Menggunakan teknik atau software khusus, gambar tersebut disajikan berulang-ulang sehingga menghasilkan animasi seperti pada gambar sebelah kiri ini.

Tidak jauh berbeda dengan animasi, film yang biasa kita lihat pun merupakan sekumpulan gambar statis yang ditampilkan berurutan seperti animasi. Banyaknya gambar (frame) dalam hitungan detik, membuatnya seperti bergerak sangat nyata.
Hitungan pergerakan per-detik biasa dinyatakan dalam istilah FPS (frame per second) atau frame per-detik. Sebagai informasi, film atau video biasanya memiliki 24 fps hingga 30 fps.

Membuat Judul Blog Menjadi Bergerak

Membuat Blog kamu menjadi lebih bagus banyak caranya. Salah satu cara agar blog anda lebih terlihat cantik, buatlah judul blog kamu menjadi bergerak dari kanan ke kiri...Menarik bukan

Langkah - langkahnya hampir sama pada umumnya dengan mengedit template yang ada, yaitu hanya menambahkan kode - kode tertentu untuk dimasukkan dalam template kamu.

Ikuti petunjuk dibawah ini untuk merubahnya :

1. Login ke blog kamu
2. Masuk ke menu "Layout" > "Edit HTML"
3. Centang "Expand Widget Template"
4. Backup Template kamu kedalam notepad
5. Sekarang kamu bisa cari kode <data:blog.pageTitle/> didalam template
6. Rubahlah kode tersebut dengan kode dibawah ini :

nb: untuk angka 200 (yang berwarna merah), menunjukkan kecepatan bergeraknya dari judul blog kamu, angka tersebut bisa diganti sesuai yang kamu mau

7. Save Template atau Save Changes