Menambah emotion pada post comentar

hello pengunjung sabar_s.com  . . .kali ini saya berbagi tips memasang emaotion dikotak komentar ,karena Dengan adanya emoticon di kotak komentar tentunya akan membuat blog menjadi lebih hidup. Para komentator menjadi lebih bisa mengekspresikan perasaannya melalui icon2 (emoticon). tips ini saya kutip dari blognya mas kendhiAda dua jenis emoticon yaitu emoticon yahoo dan emoticon kucing, contohnya ada di bawah ini :
Emoticon Yahoo :



Emoticon Kucing :


Gini nih cara membuatnya :

1. Pertama login ke blogger, trus ke "Layout (Tataletak) --> Edit HTML "
2. Beri tanda centang pada kotak "expand widget template"
3. Lalu letakkan script berikut sebelum kode  </body>

Untuk Emoticon Yahoo : ==========================================================
 <script src='http://kendhin.890m.com/emoticon/smile1.js' type='text/javascript'/>

==========================================================

Untuk Emoticon Kucing :

=========================================================

 <script src='http://kendhin.890m.com/emoticon/smile2.js' type='text/javascript'/>

==========================================================

4. Kemudian cari kode berikut ini : 

==========================================================

    <p class='comment-footer'>
    <b:if cond='data:post.embedCommentForm'>
    <b:include data='post' name='comment-form'/>
    <b:else/>
    <b:if cond='data:post.allowComments'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
    </b:if>
    </p>

 ==========================================================

5. Kalo sudah ketemu letakkan kode2 berikut setelah kode <p class='comment-footer'>
==========================================================
    <b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
    :))
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
    :)]
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
    ;))
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
    ;;)
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
    :D
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
    ;)
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
    :p
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
    :((
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
    :)
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
    :(
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
    :X
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
    =((
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
    :-o
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
    :-/
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
    :-*
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
    :|
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
    8-}
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
    ~x(
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
    :-t
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
    b-(
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
    :-L
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
    x(
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
    =))
    </b>
==============================================================

Kalo mo yang emoticon kucing pake yang ini :
========================================================

    <b><img border='0' src='http://kendhin.890m.com/emoticon/capek.gif'/>
    :f
    <img border='0' src='http://kendhin.890m.com/emoticon/bigsmile.gif'/>
    :D
    <img border='0' src='http://kendhin.890m.com/emoticon/hi.gif'/>
    :)
    <img border='0' src='http://kendhin.890m.com/emoticon/kagum.gif'/>
    ;;)
    <img border='0' src='http://kendhin.890m.com/emoticon/love.gif'/>
    :x
    <img border='0' src='http://kendhin.890m.com/emoticon/malu.gif'/>
    :$
    <img border='0' src='http://kendhin.890m.com/emoticon/marah.gif'/>
    x(
    <img border='0' src='http://kendhin.890m.com/emoticon/bingung.gif'/>
    :?
    </b>
    <br/>
    <b>
    <img border='0' src='http://kendhin.890m.com/emoticon/mumet.gif'/>
    :@
    <img border='0' src='http://kendhin.890m.com/emoticon/muntah.gif'/>
    :~
    <img border='0' src='http://kendhin.890m.com/emoticon/mentok.gif'/>
    :|
    <img border='0' src='http://kendhin.890m.com/emoticon/ngakak.gif'/>
    :))
    <img border='0' src='http://kendhin.890m.com/emoticon/sedih.gif'/>
    :(
    <img border='0' src='http://kendhin.890m.com/emoticon/senang.gif'/>
    :s
    <img border='0' src='http://kendhin.890m.com/emoticon/tolong.gif'/>
    :((
    <img border='0' src='http://kendhin.890m.com/emoticon/wow.gif'/>
    :o <a href='http://www.oktri.co.cc/'>.</a></b>
========================================================

6. Kalo sudah trus di "save" dan coba lihat hasilnya

Tambahan
* Kadang-kadang ada beberapa template memiliki kode yang beda. Kalau caranya sudah dilaksanakan dengan benar tapi hasilnya tidak terjadi apa2 atau kodenya tidak berubah menjadi emoticon, kemungkinan itu karena Kode untuk templatenya berbeda atau bisa juga karena mungkin hosting untuk menaruh file emoticon dan javascriptnya sedang bermasalah
 

Cara Membuat Menu navigasi : Dynamic-FX Slide-In Menu

Kali saya akan berbagi Tips Membuat yang ada diblog saya tersebut di namakan dengan Dynamic-FX Slide-In Menu (v 6.5), original source code serta contoh dari menu tersebut bisa anda lihat di  Apa keunikan dari Dynamic-FX Slide-In Menu (v 6.5)? keunikanya yaitu menu atau navigasi tersembunyi di sebelah kiri layar monitor dan yang terlihat hanyalah bar menu nya saja, apabila menu tersebut di sorot oleh mouse komputer maka keluarlah menu-menu yang ada di dalamnya. Yang lebih menarik perhatian adalah menu tersebut selalu bergerak mengikuti gerakan scrolling sehingga akan selalu muncul di layar sebelah kiri layar monitor.

Tertarik membuat menu tersebut di blog anda, saya bagi tuliskan tutorial cara membuatnya :

Silahkan download dahulu source code yang nanti akan anda pakai. Klik  di bawah : 
DOWNLOAD DISINI


Setelah anda download file yang tadi, silah di ekstrak terlebih dahulu dengan software ekstraktor seperti winzip atau winrar. 

Apabila file tersebut sudah diekstrak, maka akan menghasilkan dua buah file java seperti yang tampak pada ilustrasi gambar di atas. dua buah file java tersebut mempunyai nama ssm.js dan ssmItems.js, yang harus anda lakukan sebelum file tersebut di upload ke file server adalah melakukan editing untuk file ssmItems.js yaitu mengganti link-link yang ada dengan link yang anda inginkan untuk di simpan pada menu tersebut. Bagaimana cara mengedit file tersebut? agar tidak terlalu repot, maka saya akan menerangkan mengedit file tersebut dengan hanya menggunakan notepad, caranya adalah seperti ini : 

1. Klik kanan pada file yang bernama ssmItems.js, kemudian pilih open with lalu pilih notepad karena yang akan di gunakan adalah software tersebut.
2. Setelah itu anda akan melihat file seperti ini :

<!--

/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=150; // no quotes!!
XOffset=0;
staticYOffset=30; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=150; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#170088";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#FFFF99";
linkTarget="_top";
linkAlign="Left";
barBGColor="#444444";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=20; // no quotes!!
barText="OKTRI MENU"; // <IMG> tag supported. Put exact html for an image to show.

///////////////////////////

// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=["MENU"] //create header
ssmItems[1]=["Home", "http://www.oktri.co.cc", ""]
ssmItems[2]=["Daftar Isi", "http://www.oktri.co.cc/search?max-results=%2080",""]
ssmItems[3]=["Tips Blog", "http://www.oktri.co.cc/search/label/Tips%20Blogger", ""]
ssmItems[4]=["Forum", "http://oktri.forumsmotion.com/", "_new"]
ssmItems[5]=["Submit Script", "http://www.dynamicdrive.com/submitscript.htm", ""]
ssmItems[6]=["Link to Us", "http://oktridarmadi.blogspot.com", ""]

ssmItems[7]=["FAQ", "#nogo", "", 1, "no"] //create two column row
ssmItems[8]=["Email", "ok3darmadi@gmail.com", "",1]

ssmItems[9]=["External Links", "", ""] //create header
ssmItems[10]=["Blog oktri", "http://www.oktri.co.cc", ""]
ssmItems[11]=["Darmajaya", "http://www.darmajaya.ac.id", ""]
ssmItems[12]=["Tips", "http://oktridarmadi.blogspot.com", ""]

buildMenu();

//-->

Pada prinsip dasarnya, kode-kode di atas adalah untuk mengatur tampilan dari Dynamic-FX Slide-In Menu (v 6.5) semisal warna tulisan warna background, bentuk hurup, besarnya hurup dan lain-lain. Akan tetapi karena keterbatasan waktu (cape dhenk kalo di bahas atu-atu mah), maka kang rohman hanya akan menerangkan acara mengganti tulisan menu serta link yang ada dengan link yang anda inginkan untuk dipasang pada menu ini, untuk kreasi yang lainnya silahkan explor sendiri oleh anda. Untuk mempermudah pengeditan, pada kode di atas sengaja kang rohman bedakan, ada yang berwarna hijau, biru serta warna merah. Tulisan yang berwarna hijau dengan tulisan SIDE MENU adalah tulisan yang akan muncul pada bar menu tersebut, anda bisa mengubahnya sesuka hati anda, misal mengganti tulisan tersebut dengan MY MENU, MENU GUE, NAVIGASI atau apa sajalah terserah anda. Tulisan yang berwarna biru adalah tulisan link yang akan muncul pada menu tersebut, tulisan-tulisan ini tentu saja bebas untuk anda ubah sendiri sesuai dengan keinginan, misal tulisan Home anda ingin ubah menjadi Depan atau apa saja. 


Tulisan yang biru ini akan berpasangan dengan tulisan yang berwarna merah yang ada di sampingnya. Tulisan yang berwarna merah adalah link target yang anda inginkan, misal : tulisan Home apabila di klik ingin menuju halaman yang beralamat http://www.oktri.co.cc, nah alamat http://www.oktri.co.cc harus di ubah dengan alamat yang anda inginkan. Mudah-mudah dapat di mengerti. 

Apabila anda sudah mengedit kode-kode di atas tadi, maka langkah selanjutnya adalah menyimpan file tersebut, caranya adalah klik pada file yang ada di bar menu, kemudian klik Save.
Setelah anda melakukan semua hal-hal yang saya tulis di atas, langkah yang harus anda lakukan adalah mengupload kedua file java tersebut ke server,terserah anda akan upload dihosting mana,heheheheh...
Kalau sudah di upload, jangan lupa untuk meng copy alamat URL kedua file tersebut.  

Sekarang kita waktunya untuk beraksi, silahkan ikuti langkah-langkah berikut ini :

1. Silahkan logi ke blogger dengan ID anda.
2. Klik Tata Letak.
3. 
   
   
4. Klik Edit HTML.
5. Copy paste kode berikut di atas kode </head>

<style type="text/css">
<!--
A.ssmItems:link {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//-->
</style>

<SCRIPT SRC="http://h1.ripway.com/oktri/ssm.js" language="JavaScript1.2">
//Dynamic-FX slide in menu v6.5 (By maXimus, http://maximus.ravecore.com/)
//Updated July 8th, 03' for doctype bug
//For full source, and 100's more DHTML scripts, visit http://www.dynamicdrive.com

</SCRIPT>
<SCRIPT SRC=" http://h1.ripway.com/oktri/ssmItems.js" language="JavaScript1.2"></SCRIPT>

 

6. Gantilah kode yang berwarna merah dengan kode milik anda (file yang tadi di upload).
7. Klik tombol SIMPAMN TEMPLATE.
8. Selesai. Silahkan lihat hasilnya.

Semoga Membantu   . . . . .  !!!!

Membuat tulisan address bar yang gokil

saya akan berbagi tips cara membuat Tulisan bergerak pada blog,mungkin tips ini dah kuno,bagi anda yng sudah lama berkecimpung didunia blogger,,,
Pada sebelumnya saya berbagi tips membuat Menu scroll dan Membuat efek roll yang mungkin anda sudah bosen ingin mencoba sesuatu hal yang baru pa bagaimana begitu...
oke langsung saja Berikut ini langkah-langkahnya :
1. Masuk ke akun Blogger Anda.

2. Klik Tata Letak.

3. Klik Tambah Gadget.

4. Pilih HTML/JavaScript.
lalu copy kan script dibwah ini pada HTML/javascript

<script>
function tb8_makeArray(n){
this.length = n;
return this.length;
}
tb8_messages = new
tb8_makeArray(3);
tb8_messages[0] = "ISI KAN DENGAN PESAN SAUDARA";
tb8_messages[1] = "iSI KAN DENGAN PESAN SAUDARA";
tb8_messages[2] = "SI KAN DENGAN PESAN SAUDARA";
tb8_rptType = 'infinite'; tb8_rptNbr = 5; tb8_speed = 125; tb8_delay = 1000; var tb8_counter=1; var tb8_currMsg=0; var tb8_tekst =""; var tb8_i=0; var tb8_TID = null; function tb8_pisi(){ tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1); document.title = tb8_tekst; tb8_sp=tb8_speed; tb8_i++; if (tb8_i==tb8_messages[tb8_currMsg].length){ tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay; } if (tb8_currMsg == tb8_messages.length){ if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){ clearTimeout(tb8_TID); return; } tb8_counter++; tb8_currMsg = 0; } tb8_TID = setTimeout("tb8_pisi()", tb8_sp); } tb8_pisi() </script><br />

catatan :
-. Ubah Nomor / Angka yang berwarna kuning dengan jumlah baris pesan yang akan di tampilkan.
-. Sesuaikan pesan yang bercetak merah dengan pesan yang akan ditampilkan.
-. Untuk menambah baris pesan copy tb8_messages[2] = "Isi pesan"; , tambahkan kode tersebut di bawahnya,  jangan lupa untuk mengurutkan nomor yang ada di dalam kurung.

9. Selanjutnya jangan lupa untuk mengklik tombol Simpan.

10. Selesai...

Cara membuat teks berjalan pada blog

 1) Tulisan berjalan 

<marquee behavior="scroll">Tulisan berjalan</marquee>

2)Tulisan berjalan dengan background

<marquee bgcolor="grey" style="color:white;">Tulisan berjalan dengan background.</marquee>

3)Tulisan berjalan dengan gambar
 

<marquee behavior="scroll">
<img src="images/em1.gif" width="110" height="84"><br />Dengan gambar
</marquee>

4)Tulisan berjalan kekanan

<marquee behavior="scroll" direction="right">Tulisan berjalan kekanan</marquee>

5)Tulisan berjal;an keatas

<marquee height="30" behavior="scroll" direction="up">Tulisan berjalan ketas</marquee>

5)Tulisan mantul 

<marquee width="200" behavior="alternate">Tulisan mantul</marquee>

6)Tulisan zig-zag

<marquee behavior="alternate" direction="up" height="50px">
<marquee direction="right">Zig-zag</marquee>
</marquee>

7)Tulisan bouncing kode]

<marquee behavior="alternate" direction="up" width="300" height="100">
<marquee direction="right" behavior="alternate">Bouncing around</marquee>
</marquee>

Terimakasih . . . ! ! !

Membuat menu scroll pada blog

Dengan membuat menu scroll untuk menyimpan catatan kita, link, atau banner akan menghemat tempat pada blog kita. Apa menu scroll itu? Baiknya langsung saja liat contoh kolom tutorial blogger diblog ini
Nah Cara buat menu scroll seperti itu:
Copi code berikut:

<div style="padding-right: 10px; padding-left: 10px; padding-bottom: 10px; overflow: auto; width: 255px; padding-top: 10px; height: 141px" 1px="1px" solid="solid">   <ul>
    <p><a href="http://amatullah83.blogspot.com/2009/07/cara-membuat-related-post-tulisan.html">Cara membuat related post</a> </p>
    <p><a href="http://amatullah83.blogspot.com/2009/07/mungkin-teman-teman-sudah-pernah.html">ngeblog offline tanpa terhubung keinternet</a> </p>
    <p><a href="http://amatullah83.blogspot.com/2009/07/merubah-read-more-dengan-icon-image.html">Mengganti Read More Dengan Image</a> </p>
    <p><a href="http://amatullah83.blogspot.com/2009/07/cara-membuat-recent-post-postingan.html">Cara membuat Recent Post</a> </p>

  </ul>
</div>

Setelah itu paste pada tempat yang anda inginkan di blog anda, apakah pada postingan, sidebar dll. Untuk alamat URLnya anda ganti dan sesuaikan sendiri!
Untuk memasangnya pada postingan anda harus berada dalam tab edit HTML, sedangkan untuk memasangnya pada sidebar caranya (untuk yang belum tahu ni):

• Login ke blogger
• Pada bagian dasbor pilih menu layout/ tata letak
• Klik elemen halaman
• Tambah gadget pada sidebar yang anda ingin tampilkan menu scroolnya!
• Pilih tambah HTML/JavaScript
• Beri titel, simpan codenya dalam konten
• Save, lihat hasilnya diblog anda!

Jika ingin menambahkan icon disampingnya link, ganti code <p> dan </p> dengan <li> dan </li>
Semoga bermanfaat!

Lagi bete enggak ada kerjaan lebih baik membuat postingan lagi, berhubung sekarang lagi sedang ngetrend-nya membuat buku tamu tersembunyi di samping kiri atau kanan monitor, saatnya saya tulis lagi untuk sekedar menambah koleksi artikel saya.

Script ini hampir sama seperti yang pernah saya pernah buat silahkan di baca dulu javascript melayang di blog jika anda ingin memasang buku tamu tersembunyi anda harus bedakan kode-nya dengan script melayang tersebut (jika di blog anda memasang script melayang atau iklan melayang)

Silahkan Anda ikuti langkah-langkah berikut ini.
>> Login Blogger
>> Klik Rancangan/Design
>> Tambah Gadget / Add a Gadget

>> Anda pilih HTML/javascript
(Gambar, Cara membuat buku tamu di pinggiri kiri monitor, buku tamu di samping layar monitor)
Kemudian Copy paste kode di bawah ini di dalam Html/javascript tadi.

Letakkan disini kode Shoutbox, Iklan, Menu Dll

[tutup]

Yang saya cetak merah dapat anda ganti posisi-nya tapi anda harus mengatur juga dari style-nya. Dan yang berwarna biru bisa anda letakkan kode buku tamu, iklan dan terserah.

Seharusnya tadi pagi postingan ini udah jadi, berhubung ke habisan sinyal buat posting (enggak konek), ya udah deh terpaksa di tunda.
Selamat Mencoba dan Semoga Bermanfaat.

Membuat buku tamu pada blog

Untuk memperkaya tampilan blog , kita bisa memasang buku tamu atau shoutbox yang memang banyak kegunaannya salah satunya tentu untuk berinteraksi dengan pengunjung. Pesan-pesan penting dan singkat bisa ditulis di gadget satu ini, trus para pengunjung juga bisa mengungkapkan isi hati mereka mungkin saja pujian, kritik, permohonan dsb.

Bagi yang belum memasangnya n berminat caranya gampang, cuma beberapa langkah aja kok. mau ???. nih gini caranya :

Daftar dulu di http://www.shoutmix.com, nanti akan keluar tampilan seperti screen short di bawah ,kemudian klik tulisan " Create Your Shoutmix Now", isi data anda seperti nama, password dan email anda. Jangan lupa centang juga tuh Term of Servicenya. Trus klik Continue.

Kemudian lanjutkan

1. Jika anda sudah terdaftar, tinggal login dengan user name dan pasword tadi.
2. Dalam Choose style pilih aja yang di sukai.. disitu ada compact, tag dll. jika udah klik Continue .
3. Kalau mau langsung pasang tinggal klik get kode, kalau mau diseting warna teks, backround, dsb. pilih style & color
4. Copy paste kode HTML nya dan pasang di blog anda
5. Agar shoutbox nya sesuai ukuran lebar sidebar , anda bisa merubah ukuran lebar ataupun tinggi dari shoutbox , caranya tinggal merubah angka Width (untuk lebar) dan Height (untuk tinggi) dari dalam kode HTML shoutbox tersebut.
6. Cara pasang di blognya seperti ini :

Untuk blogger dengan template klasik :

1. Log in ke blogger.com dengan id anda
2. Klik menu Template
3. Klik Edit HTML
4. Paste kode HTML shoutbox yg telah di copy itu di tempat yang anda inginkan
5. Untuk jelasnya saya ambil contoh dengan shoubox milik saya, untuk menempatkannya tinggal klik Edit pada browser lalu pilih Find (on this page).. trus tuliskan kata buku tamu lalu klik find, maka kita akan langsung di bawa ke tulisan tersebut. Jika sudah ketemu tulisan tadi silahkan paste kode HTML shoutbox nya.
6. Klik tombol Preview untuk melihat perubahan yang kita buat.
7. Jika sudah cocok dengan perubahan tadi, klik Save Template Changes
8. Selesai

Untuk Blogger baru :

1. Silahkan Login ke blogger dengan id anda
2. Klik menu Layout
3. Klik Page Element
4. Klik Add a Page Element / add Gadget
5. Klik tombol Add to Blog yang berada di bawah tulisan HTML/JavaScript
6. Tuliskan judul shoutbox anda pada form title. Contoh : Buku tamu, atau Silahkan Isi Buku Tamu atau apa saja deh
7. Paste kode HTML shoutbox anda di dalam form Content
8. Klik tombol Save Changes
9. Drag & Drop element yang telah anda buat tadi di tempat yang di sukai
10. Tekan tombol Save
11. Selesai

Selamat mencoba !