Popular Posts

Rabu, 06 Oktober 2010

Bikin Sendiri bar Menu di Blogspot

Bikin Sendiri bar Menu di Blogspot

Di blogspot (blogger.com) kita tidak akan menemukan fasilitas untuk menambah halaman, karena semua artikel yang telah diposting masuk dalam satu halaman. Nah, bagaimana jika kita menginginkan tampilan blog Kita “terlihat” memiliki banyak halaman?
Sebenarnya..di blogspot sudah disediakan “widget” untuk menjawab kebutuhan ini, yaitu widget Label tetapi letaknya yang berada disamping (sidebar) mungkin terlalu biasa, cara sederhana agar blog di blogspot terlihat memiliki banyak halaman yaitu membuat sendiri menu bar blogspot.
Caranya sebagai berikut :
Persiapan :
Artikel blog sebaiknya dibagi dalam beberapa kategori, dimana kategori tersebut akan kita jadikan sebagai halaman samaran, misalnya kategori/label : Tips n Trick , Tutorial, News dan seterusnya..(tergantung kebutuhan blog).
Setting banyak artikel yang ditampilkan dalam satu halaman sebaiknya tidak lebih dari 2 posting per halaman.
Setelah persiapan selesai, kemudian...
Buat kode html di notepad :
Buka notepad di komputer Anda kemudian masukkan kode seperti ini :

Kemudian untuk meilhat hasilnya sebelum di upload ke blog, sebaiknya uji dulu dengan “save as” kode di notepad tadi dengan extensi “.html”, setelah itu buka file yang di”save as” menggunakan I.E jika benar hasilnya akan seperti gambar dibawah ini :

Jika tampilah diatas sudah muncul berarti kode yang dibuat sudah bisa di upload ke blogger.
Cara Upload Kode Navigasi Bar ke Blog :
Setelah masuk ke halaman dashboard blogger, pilih : layout >>> add element page/ tambah elemen halaman >>> pilih widget TEXT.
Setelah muncul jendela baru widget TEXT, pilih “edit html” dan copy kode pada notepad yang dibuat tadi dan pastekan ke dalam widget TEXT.
Simpan dengan menekan tombol save.
Selesai, simpan perubahan ini dan coba lihat hasilnya dengan menekan tombol “Preview” atau “Pratinjau” di halaman Layout.
Semoga artikel ini bermanfaat dan jika ada pertanyaan seputar artikel ini silahkan masukkan ke dalam artikel blog ini dan akan saya jawab semampu dan secepatnya kecuali saya juga tidak tahu (coz saya juga masih newbie n modal trial error sih .

UPDATE:

jika cara ini kurang asik dimata anda, silahkan ikut cara terbaru bikin navigasi bar caranya mudah dan muantabfhz..

he..he..bahasanya iklan buange .

Artikel menyangkut modikasi di blogspot :

Modifikasi isi mainbar dan sidebar . modifikasi template blog . bikin sendiri header untuk blog di blogspot.

Menambah Dropdown Menu dalam Horizontal Navigasi

Menambah Dropdown Menu dalam Horizontal Navigasi

Diposting trik blogger terdahulu OB telah menulis tentang membuat menu horizontal. Dimana pengkodeannya menggunakan CSS yang disadur dari blog Kang Rohman. Selanjutnya tinggal bagaimana trik menambahkan dropdown menu di dalam kode tersebut. Betulkan... Seandainya OB jeli mengamati kode menu horizontal tersebut, mungkin ini tidak akan menjadi sebuah posting. Ternyata ada hikmahnya juga, karena faktor ketidaktelitian tersebut he..he..he.. Kalau dropdown menunya agak kurang enak dipandang menurut penglihatan dan perasaan kamu, maka diperlukan beberapa optimasi kode CSS-nya, terutama yang memiliki atribut #nav li li. Jadi memodifikasinya terserah pada yang punya blog (ingin seperti apa dan bagaimana).

Berikut trik menambahkan dropdown menu dalam horizontal navigasi :
  • Login ke account blogger kamu.
  • Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".
Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
  • Cari kode HTML di bawah ini yang posisinya diantara <body> ... <body>.
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
</ul>
</div>
</div>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.
  • Tambah kode berikut di nav link yang kamu inginkan, letakkan sebelum </li>.
<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>

Contoh :
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</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='http://Link_yang_dituju'>
Add Link</a></li>
<li><a href='
http://Link_yang_dituju'>Add Link</a></li>
</ul>
</div>
</div>

Catatan :
  1. Perhatikan peletakkan kode untuk menambah menu dropdown, ditandai dengan warna hijau.
  2. Ganti kode yang berwarna merah dengan alamat link dan teks yang kamu inginkan.
  • Jangan lupa disimpan.


Tambahan : Kode CSS #nav li li yang perlu kamu optimasi adalah sebagai berikut.

#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px; <!-- lebar dropdown menu -->
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff; <!-- warna latar dropdown menu -->

width: 160px; <!-- lebar dropdown menu, ketika disentuh korsur/mouse -->

float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff; <!-- garis tepi bawah dropdown menu -->

border-left: 1px solid #ffffff; <!-- garis tepi kiri dropdown menu -->

border-right: 1px solid #ffffff; <!-- garis tepi kanan dropdown menu -->

<!-- atau kamu bisa mengganti kode border-bottom, left, dan right dengan kode
border: 1px solid #ffffff; -->
}
#nav li li a:hover, #nav li li a:active {
background: #c06000; <!-- warna latar dropdown menu , ketika disentuh korsur/mouse -->

padding: 7px 30px 7px 10px;
}



Selamat berdropdown dengan menu horizontal...

Cara Membuat Menu bar Multi Level 2

Langsung tutorialnya :

• Login di blogger dengan account/id Anda

• Klik menu Layout

• Klik Tab Edit HTML

• Klik tulisan Download Full Template, lalu save data tersebut. Untuk backup template blog kita apabila terjadi kesalahan dalam mengedit kode template.

• Cari kode seperti ini </b:skin>dan letakkan kode dibawah ini sebelum kode </b:skin> tersebut :

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

• Temukan kode berikut </head>
• Letakkan kode dibawah ini sebelum kode </head>tersebut.

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src=' http://h1.ripway.com/anshul555/slidemenu_horiz.js ' type='text/javascript'/>


• Kemudian temukan kode dibawah ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Testing templates (Header)' type='Header'/>
</b:section>
</div>

• Letakkan kode dibawah ini persis di bawah kode diatas :

<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li><a href='http:langsungtutorial.blogspot.com'>Home</a></li>
<li><a href='#'>Daftar Isi</a></li>
<li><a href='#'>Tutorial Blog</a>
<ul>
<li><a href='#'>Sub Item 1.1</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
</ul>
</li>
<li><a href='#'>Islam</a></li>
<li><a href='#'>Folder 2</a>
<ul>
<li><a href='#'>Sub Item 2.1</a></li>
<li><a href='#'>Folder 2.1</a>
<ul>
<li><a href='#'>Sub Item 2.1.1</a></li>
<li><a href='#'>Sub Item 2.1.2</a></li>
<li><a href='#'>Folder 3.1.1</a>
<ul>
<li><a href='#'>Sub Item 3.1.1.1</a></li>
<li><a href='#'>Sub Item 3.1.1.2</a></li>
<li><a href='#'>Sub Item 3.1.1.3</a></li>
<li><a href='#'>Sub Item 3.1.1.4</a></li>
<li><a href='#'>Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href='#'>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://langsungtutorial.blogspot.com'>Tukar Link</a></li>
</ul>
<br style='clear: left'/>
</div>

• Lalu simpan/save template.

• Lihat hasilnya.

Silahkan ganti kata Home, Daftar isi, Tip dan Triks, Template GratisTukar Link dan beberapa submenu dengan nama menu yang anda inginkan sebagai navigasi blog.

Selamat mencoba. . . .

Cara Membuat Menu bar Multi Level

Cara Membuat Menu bar Multi Level Drop Down

Posting kali ini Trieck69 aka membahas tentang Bagaimana Membuat Multi Level Drop Down di blog anda.Karena pernah ada yang nanya tentang membuat menu bar yang berbobot maka kali ini aku akan menjawab pertanyaan itu aku sendiri bingung mau jawab apa soalnya aku juga kurang mengerti apa sebenarnya dari maksud pertanyaan itu. jadi kupikir mungkin yang dimaksud adalah Menu bar multi level drop down kali yaaaa...????
Baiklah buat temen temen yang suka ngotak atik bolg yang masih belum mengerti tentang cara Menu bar multi level drop juga boleh untuk mengikuti tutorial ini


Caranya sangat lah mudah, ikuti  saja langkah berikut:
  1. Login dulu ke bloger.com
  2. Ke menu rancangan  >---->>Lalu pilih edit html
  3. Sebelum mengedit template Anda, Anda sebaiknya menyimpan sebuah salinan dari template tersebut
  4. Lalu cari kode </head> di kotak html,jika susah mencari anda bisa menekan Ctrl+f untuk mengeluarkan menu pencarian huruf  pada halaman Mozilla Firefox.
  5. Letakkan kode berikut persis diatas kode </head>:






    <link rel="stylesheet" type="text/css" href="http://dsai.588.googlepages.com/slidemenu_hori.css" />

    <!--[if lte IE 7]>
    <style type="text/css">
    html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
    </style>
    <![endif]-->

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript" src="http://dsai.588.googlepages.com/slidemenu_horiz.js"></script>
  6. Simpan template yang sudah dipaste kan sesuai dengan yang diatas
  7. Setelah di save sekarang menuju menu Tata letak dan pilih menu Elemen halaman Lalu tambah gadget halaman dengan 






    HTML/JavaScript
    HTML/JAVASCRIPT

    Tambahkan fungsional pihak ketiga atau kode lainnya ke blog Anda.
    Oleh 
    Blogger 
  8. copy kode berikut dan pastekan ke dalam gadget HTML/JAVASCRIPT Anda:






    <div id="myslidemenu" class="jqueryslidemenu">
    <ul>
    <li><a href="http://trieck69.blogspot.com">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Folder 1</a>
    <ul>
    <li><a href="#">Sub Item 1.1</a></li>
    <li><a href="#">Sub Item 1.2</a></li>
    <li><a href="#">Sub Item 1.3</a></li>
    <li><a href="#">Sub Item 1.4</a></li>
    </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Folder 2</a>
    <ul>
    <li><a href="#">Sub Item 2.1</a></li>
    <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
    <ul>
    <li><a href="#">Sub Item 3.1.1.1</a></li>
    <li><a href="#">Sub Item 3.1.1.2</a></li>
    <li><a href="#">Sub Item 3.1.1.3</a></li>
    <li><a href="#">Sub Item 3.1.1.4</a></li>
    <li><a href="#">Sub Item 3.1.1.5</a></li>
    </ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="http://trieck69.blogspot.com">Item</a></li>
    </ul>
    <br style="clear: left" />
    </div>

  9. simpan gadget trus letakan gadgate persis dibawah header save template dan lihatlah
  10. Anda juga bisa menambah dan mengganti nama menu sesuka hati, Saya ambilkan contoh dimenu yang pertama






    Menu yang belum dirubah

    <div id="myslidemenu" class="jqueryslidemenu">
    <ul>
    <li><a href="
    http://trieck69.blogspot.com">Item 1</a></li>

    perhatikan kode yang diberi warna hijau,karena warna hijau lah yang akan kita rubah
    menjadi

    Menu yang sudah dirubah


    <div id="myslidemenu" class="jqueryslidemenu">





    <ul>
    <li><a href="
    http://URL BLOG ANDA.blogspot.com">HOME</a></li>

    PERUBAHAN
       URL MASUKAN SESUAI DENGAN ALAMAT YANG MAU DITUJU
      TEXT ITEM 1 SAYA GANTI MENJADI HOME

  11. Terimakasih, Dan kini Anda telah memiliki Menu bar Multi Level Drop Down di Blog Anda.....
Pembelajaran selesai semoga blog yang anda buat jadi tambah cantik........

dropdown

Dropdown menu adalah menu yang berisi sekumpulan teks atau link yang disingkat menjadi sebuah menu tunggal.

Contoh tampilannya seperti ini:



Isinya hanya akan tampil jika anda mengklik pada menu tersebut sehingga bisa hemat ruangan blog. Cara ini bisa dijadikan sebagai alternatif blogroll atau kebutuhan lainnya.

Nah untuk membuatnya, caranya sangat mudah:

1. Login ke Blogger. Klik menu Design-> Page Elements
2. Klik Add a Gadget -> HTML/ Javascript
3. Masukkan kode dibawah ini kedalam kotak

<select onChange="document.location.href=this.options[this.selectedIndex].
value;">
<option value="http://alamatblog.com/#" selected>Blogroll</option>
<option value="http://alamatLink.com/">Nama Link</option>

<option value="http://alamatLink.com/">Nama Link</option>

<option value="http://alamatLink.com/">Nama Link</option>

</select>

Jika anda ingin menambah link baru lagi tambahkan kode

<option value="http://alamatLink.com/">Nama Link</option> diatas
</select>

Ganti alamatblog dengan dengan alamat blog anda.
Ganti teks berwarna merah dengan alamat link yang ingin dipasang.
Ganti teks berwarna biru dengan nama link yang ingin ditampilkan.


4. Jika sudah klik Save. Selesai


Catatan:

kode diatas untuk membuka link dalam halaman yang sama. Jika anda ingin membuka link pada halaman baru. Ganti kode

<select onChange="document.location.href=this.options[this.selectedIndex].
value;">
Menjadi

<select onchange="javascript:window.open(this.options[this.selectedIndex].
value);">

Selamat mencoba..

Senin, 16 Agustus 2010

membuat back to top dengan css

Back To Top mungkin hampir semua blogger sudah mengenalinya. Tools yang satu ini memang bisa dibilang dapat menyamankan para pengunjung blog kita karena dengan adanya tools ini maka apabila pengunjung blog sedang berada di paling bawah blog maka hanya dengan mengklik tombol Back To Top ini pengunjung dapat dengan mudahnya langsung kembali ke atas.

lagi pula tanpa dijelaskan juga mungkin sobat semua dapat mengetahui manfaat tools ini dari namanya yaitu Back To Top. Memang semua blogger atau para master blogger semua sudah membagikan ilmu tentang ini namun kebanyakan menggunakan javascript nah sedangkan banyak orang yang bilang kalau memakai javascipt itu membuat blog kita menjadi berat atau lambat untuk di akses. Setelah muncul opini yang seperti itu maka saya mempunyai inisiatif untuk membuat tools ini ringan, namun bagaimana? akhirnya saya menemukannya yaitu dengan tidak menggunakan javascript namun menggunakan CSS dan HTML saja, untuk melihat demonya sobat dapat melihat di pojok kanan bawah yang bergambar panah ke atas, silahkan tekan tombol itu. sekarang kita lihat cara pembuatannya.


  1. Login ke blogger
  2. lalu masuk ke Tata Letak >> Rancangan >> Edit HTML
  3. setelah itu cari kode ]]></b:skin> lalu tambahkan kode di bawah ini tepat di atasnya


    #csstop {
    overflow: hidden;
    float:right;
    width:50px;
    height:50px;
    clear:both;
    }


  4. setelah itu cari kode </body> lalu tambahkan pula kode di bawah ini tepat di atasnya

    <a id="csstop" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqCP6M7k9cslDI4A1a7Vn8G4f-S9CbjZ9aNN9Kq9RX4V-H0r0huG_rWk0dzZJR77Giw028INvh6lfyfVByNM3-exF_iH5QQTHdDyT0SU47P__ZxtTx3XOD5thmsgMxr8JHsmTna0Qv90s/s400/1280228738_Upload.png" alt="oketrik.blogspot.com"/></a>

  5. Setelah itu sobat dapat menyimpannya dan melihat hasilnya
Back To Top dengan CSS dengan Back To Top dengan Javascript? lebih baik yang mana menurut sobat semua? silahkan tinggalkan pesan atau pendapat sobat di kotak komentar yang sudah di sediakan di bawah ini. Terima kasih dan Happy Blogging.

Kamis, 12 Agustus 2010


Waktu dalam dunia ini sangat penting apalagi buat seorang bisnisman yang selalu ber prinsip "Waktu adalah Uang" tapi bagaimana dengan seorang blogger? Disini saya akan memberikan script atau kode waktu untuk blog sobat, mungkin sebagian blogger script ini tidak terlalu penting tapi gak apa-apalah kalau saya berikan script ini, siapa tahu bermanfaat untuk kalian semua. oiya seperti biasa saya akan memberikan screenshout atau demo di setiap trik yang ada disini. Untuk melihat Demo dari Script Waktu Untuk Blogger bisa sobat lihat di bawah ini.


Kamis, 12 Agustus 2010


Nah script atau kodenya bisa sobat ambil di bawah ini :


<script src='http://oketrik.googlecode.com/files/scripttanggal.js'
type='text/javascript'></script>


Kode diatas bisa sobat taruh di atas </head> lalu di save, agar script itu berjalan sobat harus menaruh kode <script>tampiltanggal();</script> ditempat yang ingin sobat tampilkan. Script Waktu Untuk Blogger ini bisa sobat taruh di mana saja. Mungkin hanya sekian saja yang bisa saya bagikan. Terima kasih dan Happy Blogging.

Buat Kolom Dibawah Header Pada Magazine Template 2

Jika sebelumnya kang Rohman telah membuat tutorial tentang , maka pada kesempatan kali ini mencoba alternatif lain yaitu membuat kolom dibawah kolom header. Ini tentunya berguna bagi anda yang suka menyimpan iklan langsung di bawah header.
Jika menilik pada desain asli magazine template 2, maka anda tentu saja tidak dapat menyimpan iklan atau apa saja langsung di bawah header. Berikut desain asli dari :
kolom-bawah-header_03

Dan kita akan membuatkan kolom baru yang langsung berada di bawah kolom header, berikut contoh ilustrasi dari penempatan iklan langsung di bawah kolom header :
kolom-dibawah-header_03

Tertarik ingin membuat kolom langsung di bawah header? berikut adalah cara lengkapnya :
  1. Silahkan login ke Blogger dengan ID anda.
  2. Klik Tata Letak
  3. Klik tab Edit HTML.
  4. Klik tulisan Download Template Selengkapnya.
  5. Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.
  6. Cari kode ]]>.
  7. Copy paste kode berikut persis di atas kode  ]]>. .adscolumn{
    width:933px;
    padding:10px 3px;
    background:#fff;
    margin:5px 10px 0px 10px;
    text-align:center;
    border:1px solid #C0C0C0;
    }
    .adscolumn .widget{
    }
  8. Lihat ke bagian bawah, lalu cari kode berikut :

  9. Copy paste kode berikut persis di atas kode
    :
  10. Klik tombol SIMPAN TEMPLATE.
  11. Selesai.

Langkah selanjutnya, silahkan klik tab Elemen Halaman, maka anda akan melihat tata letak template menjadi seperti contoh gambar berikut :
layout

Sekarang anda sudah bisa memasukan apa saja langsung di bawah kolom header.  Selamat mencoba!
Jangan lupa juga untuk mengunjungi para sponsor Blog Kang rohman yang ada di bawah kolom header serta di bawah posting ini agar kang Rohman rajin membuat tutorial baru !