Panduan Membuat Website/ Landing Page dengan...

16
Copyright http://vemmanggisindo.weebly.com By Lekat, VeMMA Indonesia Diamond Leader Brand Partner Panduan Membuat Website/ Landing Page dengan memanfaatkan Web Editor Gratisan Yola 1. Ketik di Browser internet anda http://yola.com Klik Get started Ketik Nama anda Ketik Email anda Ketik Email anda sekali lagi Ketik Password yg baru Klik Get started now

Transcript of Panduan Membuat Website/ Landing Page dengan...

Page 1: Panduan Membuat Website/ Landing Page dengan …vemmanggisindo.weebly.com/uploads/4/6/4/9/4649188/panduan_membuat...Icon yang ada disini sama dengan icon yg ada di microsoft word Untuk

Copyright http://vemmanggisindo.weebly.com By Lekat, VeMMA Indonesia Diamond Leader Brand Partner

Panduan Membuat Website/ Landing Page

dengan memanfaatkan Web Editor Gratisan Yola

1. Ketik di Browser internet anda http://yola.com

Klik Get started

now

Ketik Nama anda

Ketik Email anda

Ketik Email anda sekali lagi

Ketik Password yg baru

Klik Get started now

Page 2: Panduan Membuat Website/ Landing Page dengan …vemmanggisindo.weebly.com/uploads/4/6/4/9/4649188/panduan_membuat...Icon yang ada disini sama dengan icon yg ada di microsoft word Untuk

Copyright http://vemmanggisindo.weebly.com By Lekat, VeMMA Indonesia Diamond Leader Brand Partner

Pilih Personal

Ketik Judul Web Anda

Klik Next .....

Page 3: Panduan Membuat Website/ Landing Page dengan …vemmanggisindo.weebly.com/uploads/4/6/4/9/4649188/panduan_membuat...Icon yang ada disini sama dengan icon yg ada di microsoft word Untuk

Copyright http://vemmanggisindo.weebly.com By Lekat, VeMMA Indonesia Diamond Leader Brand Partner

Pilih Free Styles

Pilih salah satu Styles

Klik Layout

Pilih Layout sesuai

bentuk web Anda

Page 4: Panduan Membuat Website/ Landing Page dengan …vemmanggisindo.weebly.com/uploads/4/6/4/9/4649188/panduan_membuat...Icon yang ada disini sama dengan icon yg ada di microsoft word Untuk

Copyright http://vemmanggisindo.weebly.com By Lekat, VeMMA Indonesia Diamond Leader Brand Partner

Klik Page

Hapus 2 Page

ini Klik Page yg

mau dihapus

Klik Delete Page

Klik OK

Page 5: Panduan Membuat Website/ Landing Page dengan …vemmanggisindo.weebly.com/uploads/4/6/4/9/4649188/panduan_membuat...Icon yang ada disini sama dengan icon yg ada di microsoft word Untuk

Copyright http://vemmanggisindo.weebly.com By Lekat, VeMMA Indonesia Diamond Leader Brand Partner

Drag Icon Text

Ketik Text seperti ini

Drag Icon Picture jika

ingin menyisipkan photo

Icon yang ada disini

sama dengan icon yg

ada di microsoft word

Untuk merubah ukuran dan warna

huruf, blog dulu teks yang akan di rubah

baru klik salah satu icon di atas

Sekarang saatnya membuat Form

Registrasi, Drag Icon HTML

Page 6: Panduan Membuat Website/ Landing Page dengan …vemmanggisindo.weebly.com/uploads/4/6/4/9/4649188/panduan_membuat...Icon yang ada disini sama dengan icon yg ada di microsoft word Untuk

Copyright http://vemmanggisindo.weebly.com By Lekat, VeMMA Indonesia Diamond Leader Brand Partner

Copy Paste HTML dibawah ini ke NotePade lalu ganti VID dengan VID Anda

Lihat pada text yang berwarna merah :

( Kalo gak mau repot download saja form registrasi di

http://vemmanggisindo.weebly.com anda tinggal ganti VID anda)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<body id="sys_background">

<div class="container">

<div id="content">

<div style="margin: 0px; padding: 0px; width: 100%;"

class="layout_1-column">

<div id="layout_row1">

<div

style="margin-top: 0px; margin-bottom: 0px; padding-top: 5px; padding-bottom: 5px; vertical-align:

top; line-height: normal; min-width: 100px;"

class="zone_top">

<div id="I6"

style="display: block; clear: both; text-align: center;"

class="HTML_Default">

<div id="I6_html">

<div class="container">

<div id="content">

<div class="layout_1-column"

style="margin: 0px; padding: 0px; width: 100%;">

<div id="layout_row1">

<div class="zone_top" id="sys_region_1"

Page 7: Panduan Membuat Website/ Landing Page dengan …vemmanggisindo.weebly.com/uploads/4/6/4/9/4649188/panduan_membuat...Icon yang ada disini sama dengan icon yg ada di microsoft word Untuk

Copyright http://vemmanggisindo.weebly.com By Lekat, VeMMA Indonesia Diamond Leader Brand Partner

style="margin: 0px; padding: 5px; vertical-align: top; line-height: normal; min-width: 100px;">

<div class="Layout1_Default" id="I67"

style="margin: 0pt; display: block; clear: both;">

<table style="width: 100%;" border="0" cellpadding="0"

cellspacing="0">

<tbody>

<tr>

<td id="Left_I67"

style="text-align: left; vertical-align: top; width: 55.1963%;">

<div class="HTML_Default" id="I74"

style="display: block; clear: both; text-align: center;">

<div id="I74_html">

<div id="I9_html">

<div style="text-align: center;">

<div class="widget-content">

<center>

<form action="http://www.vemmabuilder.com/948846905/wito"

method="post"

id="app106878476015645_form_4d3ee7debb3ba2a37812595"><input

name="fb_sig_profile" value="110328749035821"

type="hidden"><input name="fb_sig_is_admin"

value="0" type="hidden"><input name="fb_sig_type"

value="PAGE" type="hidden"><input

name="fb_sig_is_fan" value="1" type="hidden"><input

name="fb_sig_locale" value="en_US" type="hidden"><input

name="fb_sig_in_new_facebook" value="1" type="hidden"><input

name="fb_sig_time" value="1295968222.7666" type="hidden"><input

Page 8: Panduan Membuat Website/ Landing Page dengan …vemmanggisindo.weebly.com/uploads/4/6/4/9/4649188/panduan_membuat...Icon yang ada disini sama dengan icon yg ada di microsoft word Untuk

Copyright http://vemmanggisindo.weebly.com By Lekat, VeMMA Indonesia Diamond Leader Brand Partner

name="fb_sig_added" value="0" type="hidden"><input

name="fb_sig_country" value="my" type="hidden"><input

name="fb_sig_page_id" value="110328749035821"

type="hidden"><input name="fb_sig_page_added"

value="1" type="hidden"><input

name="fb_sig_api_key" value="0bb5ab00c466eefc94389724799844a1"

type="hidden"><input name="fb_sig_app_id"

value="106878476015645" type="hidden"><input

name="fb_sig" value="19b9acb9b6e204f8a79bc3f5526641cb"

type="hidden">

<table bordercolordark="#ffffff"

bordercolorlight="#ffffff" class="formfont"

style="width: 430px; height: 163px;" align="center"

bordercolor="#ffffff" cellpadding="0" cellspacing="0"

width="350">

<tbody>

<tr>

</tr>

<tr>

<td class="formfont" width="144">Nama

Depan</td>

<td class="item" width="181"><input

name="surveyFirstName" size="25" maxlength="50"

value="" align="left" type="text"></td>

</tr>

<tr>

<td class="formfont">Nama Belakang</td>

Page 9: Panduan Membuat Website/ Landing Page dengan …vemmanggisindo.weebly.com/uploads/4/6/4/9/4649188/panduan_membuat...Icon yang ada disini sama dengan icon yg ada di microsoft word Untuk

Copyright http://vemmanggisindo.weebly.com By Lekat, VeMMA Indonesia Diamond Leader Brand Partner

<td class="item"><input

name="surveyLastName" size="25" maxlength="50"

value="" align="left" type="text"></td>

</tr>

<tr>

<td class="formfont">Phone:</td>

<td class="item"><input name="surveyPhone"

size="25" maxlength="30" value="" align="left"

type="text"></td>

</tr>

<tr>

<td class="formfont">E-Mail:</td>

<td class="item"><input name="surveyEmail"

size="25" maxlength="50" value="" align="left"

type="text"></td>

</tr>

<tr>

<td class="formfont">Confirm E-Mail:</td>

<td class="item"><input

name="surveyConfirmEmail" size="25" maxlength="50"

value="" align="left" type="text"></td>

</tr>

<tr>

<td class="formfont">Negara Asal</td>

<td class="item">

<select name="surveyCountry" class="formfont">

<option value="">Pilih Negara</option>

Page 10: Panduan Membuat Website/ Landing Page dengan …vemmanggisindo.weebly.com/uploads/4/6/4/9/4649188/panduan_membuat...Icon yang ada disini sama dengan icon yg ada di microsoft word Untuk

Copyright http://vemmanggisindo.weebly.com By Lekat, VeMMA Indonesia Diamond Leader Brand Partner

<option value="1">United States</option>

<option value="12">Australia</option>

<option value="13">Austria</option>

<option value="36">Canada</option>

<option value="78">Germany</option>

<option value="98">Indonesia</option>

<option value="99">Ireland</option>

<option value="103">Japan</option>

<option value="123">Malaysia</option>

<option value="147">New Zealand</option>

<option value="163">Philippines</option>

<option value="183">Singapore</option>

<option value="184">Slovenia</option>

<option value="197">Taiwan</option>

<option value="213">United Kingdom</option>

</select>

</td>

</tr>

<tr>

<td class="formfont">Pilih extra income yang

di inginkan</td>

<td class="item">

<select name="surveyIncomeGoal" class="formfont">

<option value="">Pilih salah satu</option>

<option value="0">Less than $1,000 per month</option>

<option value="1">$1,000 per month</option>

<option value="2">$3,000 per month</option>

Page 11: Panduan Membuat Website/ Landing Page dengan …vemmanggisindo.weebly.com/uploads/4/6/4/9/4649188/panduan_membuat...Icon yang ada disini sama dengan icon yg ada di microsoft word Untuk

Copyright http://vemmanggisindo.weebly.com By Lekat, VeMMA Indonesia Diamond Leader Brand Partner

<option value="3">$5,000 per month</option>

<option value="4">$10,000 per month or more</option>

</select>

</td>

</tr>

</tbody>

</table>

<div align="center">

<p><font color="#9966ff"><input

onclick="exit=false" name="surveysubmit"

value="Daftar Gratis" type="submit"></font></p>

</div>

</form>

</center>

</div>

</div>

</div>

</div>

</div>

</td>

</tr>

</tbody>

</table>

</div>

</div>

</div>

</div>

Page 12: Panduan Membuat Website/ Landing Page dengan …vemmanggisindo.weebly.com/uploads/4/6/4/9/4649188/panduan_membuat...Icon yang ada disini sama dengan icon yg ada di microsoft word Untuk

Copyright http://vemmanggisindo.weebly.com By Lekat, VeMMA Indonesia Diamond Leader Brand Partner

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Setelah VIDnya diganti dengan VID Anda, barulah anda Copy Paste ke kolom

dibawah ini :

Copy Paste HTML di ruangan ini

Klik Save

Page 13: Panduan Membuat Website/ Landing Page dengan …vemmanggisindo.weebly.com/uploads/4/6/4/9/4649188/panduan_membuat...Icon yang ada disini sama dengan icon yg ada di microsoft word Untuk

Copyright http://vemmanggisindo.weebly.com By Lekat, VeMMA Indonesia Diamond Leader Brand Partner

Ini Hasilnya

Klik Publis jika webnya

sudah selesai

Page 14: Panduan Membuat Website/ Landing Page dengan …vemmanggisindo.weebly.com/uploads/4/6/4/9/4649188/panduan_membuat...Icon yang ada disini sama dengan icon yg ada di microsoft word Untuk

Copyright http://vemmanggisindo.weebly.com By Lekat, VeMMA Indonesia Diamond Leader Brand Partner

Ketik nama web anda

disini, dan perhatikan

ketersediaannya

Klik Next

Klik link web anda

Page 15: Panduan Membuat Website/ Landing Page dengan …vemmanggisindo.weebly.com/uploads/4/6/4/9/4649188/panduan_membuat...Icon yang ada disini sama dengan icon yg ada di microsoft word Untuk

Copyright http://vemmanggisindo.weebly.com By Lekat, VeMMA Indonesia Diamond Leader Brand Partner

Page 16: Panduan Membuat Website/ Landing Page dengan …vemmanggisindo.weebly.com/uploads/4/6/4/9/4649188/panduan_membuat...Icon yang ada disini sama dengan icon yg ada di microsoft word Untuk

Copyright http://vemmanggisindo.weebly.com By Lekat, VeMMA Indonesia Diamond Leader Brand Partner

Ini adalah langkah dasar dalam

membuat website/ LandingPage

Untuk pengembangan ke arah

yang lebih bagus lagi silahkan

kembangkan sendiri ..

Semoga Panduan Ini Bermanfaat

Regards

Lekat

Diamond Leader