Edit template web dengan notepad part 1

Setelah saya menulis artikel tentang domain gratis dan hosting gratis,sekarang saya akan menulis artikel cara merubah tempalte web dengan note pad,ini agak ribet emang,ga seperti kita pakai dream weaver.agan harus ngerti sedikit soal html ato css,karena tiap web content-nya beda,tergantung tampilan web-nya.okay kita mulai,gini caranya gan,sebelumnya agan download dulu template webnya,terserah agan mau download dimana,kalo ga mau ribet agan klik disini aja nah sekarang agan bakal nemuin tampilan kaya gini nih.

sekarang agan pilih yang free template untuk template yang biasa,ato free flash template untuk yang pakai flash,tapi kalo boleh saya saranin pilih yang biasa aja,kalo yang flash ngedit-nya agak ribet.kalo udah nanti agan nemuin tampilan kaya gambar dibawah.

Nah..!! sekarang tinggal agan pilih dah tuh template yang pas buat web agan,untuk contoh saya ambil yang red pattern,inget gan,tiap template tuh beda isinya tapi yang jelas kode html-nya pasti sama.Kalo agan udah download tempalte-nya sekarang agan tinggal buka dah tuh file yang tadi agan download.tapi agan extract dulu tuh file,karena filenya zip.kalo udah agan klik kanan file index ini untuk tampilan awal ( home ) open with,notepad,kaya gambar dibawah ni.

agan bakalan nemuin tampila kaya gini nih gan,

Nah..sekarang agan tinggal rubah dah tuh,,caranya ?,,hehe lanjut ke part 2 gan.

Selamat mencoba terus menulis artikel yang bermanfaat,dan ingat komentar dengan sopan...

Daftar Hosting Gratis

Kalo agan udah punya domain.com gratis,atau domain .co.cc,biar tampilan web bisa agan oprak oprek sesuai dengan yang agan mau,maka agan harus punya hosting dulu,kalo hosting sih banyak yang gratisan,mau yang lokal ato pun luar,tapi kalo ane sih pake ini ni www.000webhost.com soalnye menurut ane,do sini yang paling gampang manage-nya,OK dah kita mulai aja,klik disini tampilan kaya gambar di bawah ni,,,

agan klik sign up,tampilan kaya gambar ni,

nah agan isi dah tuh semua kolom yang tersedia,kalo udah masukin kode accapta-nya,centang I Agree,kemudian klik create my account,maka tampilan seperti gambar berikut

sekarang agan buka email agan,"di sarankan account gmail"terus konfirmasi dah tuh email yang dari www.000webhost.com,nahh,,sekarang agan dah punya hosting,sekarang agan coba login,cara login-nya gini gan,agan buka www.000webhost.com tampilan kaya pas pertama agan mau buat account,

tapi sekarang agan bukan klik sign up,tapi agan klik member area,tampilan bakal kaya gene neh gan,,

masukin tuh email agan yang tadi di pake daftar sama password-nya juga,terus ketik juga tuh kodenya,klik submit,tampilan bakal kaya gmbar di bawah ni,

nah gan,sekarang hosting agan dah aktif dan siap untuk digunakan,sekarang agan tinggal setting domain agan yang udah di buat,biar hosting sama domainnya bisa link,OK,langsung aja agan klik disini

domain.com gratis

Setelah sekian lama ane kaga nulis artikel,sekarang ane mau share soal domain.com graatis,cuma setaon sih gan,tapi lumayan kan buat kita-kita yang masih pada belajar bikin web,ane juga dah punya domain.com,viqdesign.com tuh web ane yang pake domain.com gratisan,agan tertariiikkkk ????
Mari kita mulai,Tapi sebelum mulai agan harus punya account email dulu,klik disni tapi kalo agan dah punya,agan lewatin aja bagian ini,pertama agan klik disni maka akan tampil seperti gambar di bawah ne,,,

agan klik sign up buat daftar, bakalan tampil kaya gambar ini

nah agan isi dah semuanya tu,kalo dah selese agan klik continue,agan bakalan nemuin gambar kaya gene neh,,,

agana isi dah semuanya tuh,kalo agan ga punya credit card,agan isi aja di bagian Credit Card Number: 4067424205414109 , Expiration Date: isi dengan 02/13 pada bagian Card Security Number isi dengan 145 (kalo belum di block Insya Allah bisa)terus  agan klik,click here to finish,jangan lupa agan centang dulu di bagian I AGREE-nya,kalo dah selesai agan tunggu bentar,tampilan bakal kaya gambar di bawah ne,,

agan klik choose my web address,bakalan nongol tampilannya kaya gambar di bawah,,

 nah..agan ketik aja tuh alamat web agan yang agan mau,terus klik check avalaibelity,kalo domain agan belum ada maka akan ada tulisan

Your domain is available! Continue to register your domain.dodolketan.com, Nah agan klik dah get domain,nanti bakalan tampil kaya gambar ini,

agan klik save and continue,nah,,sekarang domain.com agan udah jadi,agan tinggal nunggu biasanya 1x24  jam,kaya tamu wajib lapor 1 x 24 jam,hehehe,,,,habis tu agan tinggal setting dah tuh domain,tapi sebelum agan setting tuh domain,agan harus punya hosting dulu klik disini untuk daftar hosting gratis

Selamat mencoba dan teruslah menulis artikel yang bermanfaat & berkomentarlah dengan sopan,,,

membuat border melengkung pada halaman blog

Setelah saya menulis artikel mengenai cara membuat border melengkung pada blog widget,sekarang saya akan menjelaskan bagaimana cara membuat border melengkung pada halaman blog,yang ini jauh lebih mudah gan,berikut langkah-langkahnya ;

agan masuk ke blog agan,kemudian pilih entri baru,sebelum agan menulis artikel untuk diposting,agan copy dulu kode html di bawah ini ;

<div style="-moz-border-radius: 5px; background: #001112; border: 3px solid #000000; height: auto; padding: 10px; width: 100%;">

 caranya agan pilih dulu edit html,lalu baru paste kode yang ada di atas,Nah,,sekarang agan tinggal nulis artikelnya,jika sudah selesai tambahkan </div>  di akhir artikel agan

contoh ;


 <div style="-moz-border-radius: 5px; background: #001112; border: 3px solid #000000; height: auto; padding: 10px; width: 100%;">
disini artikel yang agan tulis,terserah agan mau nulis artikel apa saja. 
</div> 

kalo artikel agan sudah ada atau sudah jadi,agan tetep masih bisa menambahkan border kok,caranya agan copy saja kode yang diatas lalu paste tepat diatas artikel agan,lalu tambahkan
 </div> dibawah artikel agan.Nah,,!!agan lihat hasilnya

O iya gan,,!! kalo agan mau rubah warna background ato ukuran ketebalan bordernya bisa kok gan,agan juga bisa merubah warna bordernya dan ukuran radiusnya sesuai dengan keinginan agan.

background: #00111 :mengganti warna background
border: 3px solid #000000 :mengganti warna border dan ketebalan border
-moz-border-radius: 5px :mengganti ukuran radius border


kalo agan tidak tahu dengan kode-kode warna,agan tidak perlu bingung,agan tinggal  klik disini   agan tinggal pilih warna yang agan inginkan,lalu gantilah kode warna di atas dengan kode warna yang sesuai dengan keinginan agan.

selamat mencoba,teruslah menulis artikel yang bermanfaat.

membuat border melengkung pada blog widget

Membuat Border pada setiap blog widget memang membuat blog agan jadi tampil lebih rapi dan menarik,sehingga dapat membuat nyaman mata sang pengunjung blog,beda jika tampilan blog kita acak acakan,pengunjung blog-pun akan bosan melihatnya,sehingga tidak betah berlama-lama di blog kita,jika sang pengunjung blog bisa betah berlama-lama di blog kita,tentunya ini akan sangat menguntungkan buat kita,karena akan meningkatkan page rank blog kita.

Cara membuatnya cukup mudah,

•  langkah 1

masuk ke blog agan,kemudian pilih rancangan,kemudian pilih tmbah gadget,pilih daftar link,beri judul daftar link agan misalnya arsip blog,agar memudahkan pencarian,jika sudah selesai,agan pilih edit html,klik expan widget yang ada di sisi kanan atas,kemudian cari kode seperti di bawah ini,

]]></b:skin>

gunakan ctrl+f untuk memudahkan pencarian,

•  langkah 2

copy kode css dibawah ini,

.membuatbordermelengkung {border: 3px solid #000000;
padding: 6px;
background:#001112;-moz-border-radius:8px;over flow:auto;scrol}

.membuatbordermelengkung {background:#;}
img.float-right {margin: 3px 0px 0 3px;}
img.float-left {margin: 3px 3px 0 0px;

paste tepat di atas kode :

]]></b:skin>

• lankah 3

agan cari kode seperti di bawah ini:

</b:widget>
<b:widget id='TextList1' locked='false' title='arsip blog' type='TextList'>
<b:includable id='main'>
 <h2><data:title/></h2>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:items' var='item'>
       <li><data:item/></li>
     </b:loop>
   </ul>
</div>

• langkah 4

gantilah teks yang berwarna merah dengan kode di bawah ini:

<div class='membuatbordermelengkung'>

lalu tambahkan </div> di bawah teks yang berwarna biru.kemudian simpan template.
lihatlah blog agan,hasilnya akan seperti ini ;

Oh ya,,!!untuk kode css bisa juga dengan cara ini gan,kalo agan males nyari kode  ]]></b:skin>
dari rancangan tadi agan pilih saja perancang template,kemudian pilih advance,geser scroll kebawah,lalu pilih add css,nah agan paste-lah kode css yang di atas di tempat yang sudah di sediakan.lihat gambar di bawah ;

  kemudian pilih apply to blog,

note :
mungkin punya agan hasilnya tidak ada scrollnya,kalo agan mau ada scrollya,
agan klik disini
selamat mencoba,teruslah menulis artikel yang bermanfaat

membuat dropdown menu dengan flash

Setelah saya menulis artikel tentang cara membuat menu dengan css,berikut adalah cara membuat menu dropdown dengan flash,yang ini jauh lebih menarik gan,agan pasti tertarik,lihat gambar di bawah,

 tapi kalo boleh saya anjurkan sih sebaiknya agan jangan terlalu banyak pake flash di blog atau di web,soalnya ini membuat blog kita jadi berat di bukanya,dan ngkong google tidak suka itu,cara membuatnya tidak beda jauh dengan membuat menu flash yang pernah saya jelasin,cuma bedanya agan harus memilih menu dropdown,masih ingatkan cara membuat menu dengan flash,,??
yang ini loh,,!!

kalo agan masih belum ngerti juga klik disini aja nah dari tampilan gambar yang diatas,agan pilih Drop Down Flash Menu lihat gambar di bawah,

setelah itu agan pilih menu yang sesuai dengan kebutuhan agan,mau vertikal atau horizontal terserah agan,selanjutnya sama seperti agan membuat menu dengan flash yang kemarin.

selamat mencoba.teruslah menulis artikel yang bermanfaat.

membuat dropdown menu dengan css

Ada lagi cara untuk mempercantik tampilan menu pada blog agan,yaitu dengan cara membuat menu dropdown dengan menggunakan css.agan lihat gambar di bawah ini,

Berikut cara membuatnya,

Masuklah keblog agan,kemudian pilih rancangan,pilih tambah gadget yang ada di bawah header,kemudian pilih HTML/JavaScript.lalu copy paste tag html di bawah ini,


<div id="menugua">
<ul>
<li><a href="URL 1">MENU 1</a>
<ul>
<li><a href="URL sub 1">Sub menu 1</a></li>
<li><a href="URL sub 2">Sub menu 2</a></li>
<li><a href="URL sub 3">Sub menu 3</a></li>
</ul>
</li>
<li><a href="URL 2">MENU 2</a></li>
<li><a href="URL 3">MENU 3</a></li>
</ul>
</div>

ganti  teks yang berwarna merah diatas dengan link punya agan,dan ganti teks yang warna biru dengan menu punya agan,

contoh,


<div id="menugua">
<ul>
<li><a href="http://studytrial.blogspot.com/">home</a>
<ul>
<li><a href="http://studytrial.blogspot.com/2011/07/membuat-accoun-gmail.html">membuat account gmail</a></li>
<li><a href="http://studytrial.blogspot.com/2011/07/membuat-blog.html">membuat blog</a></li>
<li><a href="http://studytrial.blogspot.com/2011/07/membuat-dropdown-menu-dengan-css.html">membuat dropdown menu dengan css</a></li>
</ul>
</li>
<li><a href="URL 2">MENU 2</a></li>
<li><a href="URL 3">MENU 3</a></li>
</ul>
</div>


kemudian simpan,setelah itu pilih perancang template,lihat gambar di bawah,

maka tampilan akan menjadi seperti di bawah ini,

pilih advance,lalu geser scroll ke bawah,pilih add css,kemudian copy paste tag css dibawah ini,

#menugua ul {
list-style: none;
}
#menugua li {
float: left;
}
#menugua ul ul {
visibility:hidden;
width:144px;
}
#menugua ul li:hover ul,
#menugua ul a:hover ul{
visibility:visible;
}
#menugua li a {
background-color:#000000;
height: 1em;
width: 100px;
display: block;
border: 0.1em solid #dcdce9;
color: #ffffff;
text-decoration: none;
text-align: center;
}

klik apply to blog di bagian sisi kanan atas,nah,,, sekarang hasilnya sudah bisa agan lihat.

Selamat mencoba,teruslah menulis artikel yang bermanfaat.

membuat dropdown menu

Agar blog terlihat rapi dan menghemat ruang di blog salah satunya yaitu dengan dropdown menu,seperti apakah drop down menu ?
drop down menu itu yang seperti ini lo, Arsip Blog Text 1 Text 2

Nah,,!!agan dah tau kan,,?

Bagaimanakah cara membuatnya,,??

Masuk ke blog agan,kemudian pilih rancangan,pilih lalu pilih tambah gadget,pilih HTML/JavaScript,kemudian copy paste tag html dibawah ini,

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

Gantilah teks yang berwarna merah dengan link agan,dan ganti teks yang berwarna biru dengan nama link agan,maka hasilnya akan seperti di bawah ini,

Arsip Blog membuat account gmail membuat blog

Selamat mencoba,teruslah menulis artikel yang bermanfaat.

membuat menu dengan flash

Saya punya cara yang sangat mudah untuk membuat menu dengan menggunakan flash,berikut langkah-langkahnya :

masuklah agan ke flashvortex.com maka agan akan melihat tampilan seperti di bawah ini,

kemudian pilihlah menu yang agan inginkan ,basic menu,pull down menu atau apapun terserah agan,tapi disini saya akan menggunakan basic menu sebagai contoh,lihatlah gambar di bawah ini,

klik menus,kemudian pilih menu yang sesuai dengan kebutuhan agan,kemudian klik tulisan click here to edit ,maka tampilah gambar seperti di bawah ini :

jika agan pikir menu ini tidak cocok dengan keinginan agan,agan tidak perlu khawatir,agan klik saja tulisan  What others are doing with this generator > hasilnya akan seperti ini,

cari dan pilihlah menu yang benar benar agan inginkan,kemudian klik tulisan CLICK HERE TO EDIT THIS tampilan akan menjadi seperti di bawah ini,

gantilah tulisan yang ada di kolom pertama dengan daftar menu agan,
contoh :

• home
• blog
• html
• css
• java script dsb,

jika sudah selesai,isi kolom bawah dengan daftar link agan,misalnya :

• http://studytrial.blogspot.com/
• http://studytrial.blogspot.com/2011/07/blog-pendahuluan.html
• http://studytrial.blogspot.com/2011/07/membuat-accoun-gmail.html 
• dst

setelah semua terisi kemudian klik tombol generate animation  seperti gambar di bawah ini,

owh ya,,!! agan juga bisa merubah warna background dan jumlah barisnya dengan merubah parameter yang ada diatas.setelah agan mengklik tombol generate animation maka tampilan akan menjadi seperti ini :

copy paste cody yang saya lingkari di atas ke blog agan,
caranya,,,???
owh,,,caranya seperti berikut,
pastikan agan sudah masuk ke blog agan,kemudian klik rancangan,lalu klik tambah gadget,lihat gambar di bawah,

setelah itu akan tampil seperti gambar berikut ini,

pilih HTML/Java Sript,maka akan tampil seperti berikut,

copy dan paste-lah kode yang tadi disini,dan klik simpan,kemudian klik tulisan lihat blog lihat gambar di bawah,

nah,,,!! sekarang menu flash agan sudah jadi,lihatlah gambar di bawah,

selamat mencoba,teruslah menulis artikel artikel yang bermanfaat,

<< sebelumnya

membuat postingan baru

Untuk membuat artikel atau entri baru yang mau agan posting,agan klik aja entri baru yang ada di sisi kanan atas,

kemudian akan tampil seperti gambar di bawah ini,

ketikan artikel yang akan agan posting,jika sudah selesai, kemudian klik terbitkan entri seperti yang pertama agan lakukan pada postingan pertama agan.lalu pilih lihat entri jika agan ingin melihat hasilnya.

Selamat mencoba,teruslah menulis artikel yang bermanfaat.

<< sebelumnya                                                    selanjutnya >>

Membuat postingan

Setelah blog agan jadi,agan tinggal menulis artikel untuk di posting di blog agan

Ingat,,,!!

Pikirkan artikel apa yang akan agan buat untuk di posting,buatlah artikel dengan kalimat yang pantas,jangan sampai artikel yang sudah agan buat,agan rubah rubah,saya cuma khawatir akan terjadi missing link antara blog agan sama si ngkong google.

Ketiklah sebuah artikel yang agan inginkan sesuai dengan tujuan blog agan,jika agan sudah selesai mengetik sebuah artikel lalu klik terbitkan entri lihat gambar di bawah,

setelah itu pilih lihat entri untuk menampilkannya.lihat gambar di bawah,

Nah,,!!sekarang agan sudah memiliki artikel yang sudah di posting dan semua orang bisa melihat artikel agan.

Selamat mencoba,teruslah menulis artikel yang bermanfaat


<< sebelumnya                                                 selanjutnya >>