Cara Membuat Blog | Website Pemula

Cara Membuat Menu Dropdown CSS3 Di Blog

2014-10-13T11:33:00.000+07:00

Cara Mudah Membuat Menu Dropdown CSS3 Di Blog

Tutorial Terbaru Bagaimana Cara Membuat Menu Dropdown CSS3 Di Blog

Cara Membuat Menu Dropdown CSS3 Di Blog

Hallo Sobat CMWP (Cara Membuat Website Pemula)!!! Kali ini saya akan mencoba membuat sebuah artikel yang sangat sederhana tentang Cara Membuat Menu Dropdown CSS3 Di Blog.

Cara Membuat Menu Dropdown CSS3 ini sebenarnya agak sedikit sangat rumit untuk temen-temen blogger yang masih berstatus pemula (seperti saya juga...hehe...) karena ini banyak berhubungan dengan pengkodean.

Menurut pengalaman saya alangkah lebih baiknya untuk belajar dulu tentang cara membuat menu dropdown dari dasar dulu Cara Membuat Menu Dropdown di Blog . Biar nanti akan lebih mudah untuk memahami dalam menerapkan kode-kode HTML nya.

Oiya silahkan di lihat dulu tampilan yang akan di buat tentang
Cara Membuat Menu Dropdown CSS3 Di Blog ini, silahkan di klik saja gambar "Demo Here" yang ada di bawah ini:

Bagaimana Sobat CMWP menarik kan? coba perhatikan di sana ada menu : Beranda, Top Artikel, Kategori, Panduan Website Pemula,dan Tentang Saya.
Nah bila mouse di arahkan pada menu-menu tersebut maka akan keluar berbagai macam bentuk menu dropdown nya.

Disana memuat paragraf dan bisa dibagi ke dalam maksimal 5 kolom. Jadi nanti setiap kotak yang muncul bisa di atur agar mempunyai 1-5 kolom. Dan di dalam kolom-kolom itu bisa diisi apa saja, baik itu gambar, teks, ataupun link.

Sekarang mari kita menuju langkah-langkah cara pembuatan Menu Dropdown CSS3 Di Blog nya. langkah pertama :

Memasang Kode CSS3 di Template Blog

Silahkan login ke blog dengan ID anda.
Pilih Menu "Template" lalu Klik "Sesuaikan".
Setelah itu akan terbuka laman baru, silahkan pilih menu"Tingkat Lanjut".
Kemudian coba scroll ke bawah, lalu pilih "Tambahkan CSS".
Dan silahkan di Copas kode CSS di bawah, lalu masukan di kotak kosong untuk menaruh kode CSS di bawah ini :

body, ul, li { /* ubah nilai font size untuk merubah ukuran huruf di dalam menu */ font-size:14px; font-family:Arial, Helvetica, sans-serif; line-height:21px; text-align:left; } /* Perintah Untuk Mencegah Drop Down Menu Tertindih Konten */ #iefix { position:relative; z-index:1000; } #menu { list-style:none; /* Ubah nilai width sesuaikan dengan lebar kolom yang anda gunakan */ width:920px; margin:0px; height:43px; /* mengatur margin kiri agar tepat di batas kiri */ margin-left:-15px; /* ubah nilai radius untuk membuat sudut bar yang tumpul */ -moz-border-radius: 0px; -webkit-border-radius: 0px; background: #014464; /* ubah nilai kode hex warna untuk mengubah gradiasi warna bar */ background: -moz-linear-gradient(top, #C47112, #F5A74F); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C47112), to(#F5A74F)); /* ubah warna border dari bar */ border: 1px solid #002232; -moz-box-shadow:inset 0px 0px 1px #edf9ff; -webkit-box-shadow:inset 0px 0px 1px #edf9ff; box-shadow:inset 0px 0px 1px #edf9ff; } #menu li { float:left; text-align:center; position:relative; padding: 4px 10px 4px 10px; margin-right:30px; margin-top:7px; border:none; } #menu li:hover { border: 1px solid #777777; padding: 4px 9px 4px 9px; /* ubah nilai hex untuk mengubah warna gradiasi pada box nama drop down menu */ background: #F4F4F4; background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); /* Ubah nilai radius untuk mengatur ketumpulan sudut kotak nama menu drop down */ -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; } #menu li a { font-family:Arial, Helvetica, sans-serif; font-size:14px; color: #EEEEEE; display:block; outline:0; text-decoration:none; text-shadow: 1px 1px 1px #000; } #menu li:hover a { color:#161616; text-shadow: 1px 1px 1px #FFFFFF; } #menu li .drop { padding-right:21px; background:url("img/drop.png") no-repeat right 8px; } #menu li:hover .drop { background:url("img/drop.png") no-repeat right 7px; } .dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns { margin:4px auto; float:left; position:absolute; left:-999em; text-align:left; padding:10px 5px 10px 5px; border:1px solid #777777; border-top:none; /* ubah nilai hex untuk mengubah nilai gradiasi */ background:#F4F4F4; background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); /* atur ketumpulan sudut kotak isi item drop down */ -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px; } /* atur lebar dari kotak item*/ .dropdown_1column {width: 140px;} .dropdown_2columns {width: 280px;} .dropdown_3columns {width: 420px;} .dropdown_4columns {width: 560px;} .dropdown_5columns {width: 700px;} #menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns, #menu li:hover .dropdown_4columns, #menu li:hover .dropdown_5columns { left:-1px; top:auto; } /* Pengaturan kolom */ .col_1, .col_2, .col_3, .col_4, .col_5 { display:inline; float: left; position: relative; margin-left: 5px; margin-right: 5px; } /* atur lebar dari kolom yang dimasukkan dalam kotak item */ .col_1 {width:130px;} .col_2 {width:270px;} .col_3 {width:410px;} .col_4 {width:550px;} .col_5 {width:690px;} /* Pengaturan Menu Sisi Kanan */ #menu .menu_right { float:right; margin-right:0px; } #menu li .align_right { /* Rounded Corners */ -moz-border-radius: 5px 0px 5px 5px; -webkit-border-radius: 5px 0px 5px 5px; border-radius: 5px 0px 5px 5px; } #menu li:hover .align_right { left:auto; right:-1px; top:auto; } /* Membuat Pengaturan isi dari konten drop down menu */ #menu p, #menu h2, #menu h3, #menu ul li { font-family:Arial, Helvetica, sans-serif; line-height:21px; font-size:12px; text-align:left; text-shadow: 1px 1px 1px #FFFFFF; } #menu h4 { font-size:20px; font-family: Impact; color: #E36A24; margin:7px 0 14px 0; padding-bottom:7px; border-bottom:1px solid #888888; } #menu p { line-height:18px; margin:0 0 10px 0; font-size:11px; } #menu li:hover div a { font-size:12px; color:#015b86; } #menu li:hover div a:hover { color:#029feb; } .strong { font-weight:bold; } .italic { font-style:italic; } .imgshadow { background:#FFFFFF; padding:4px; border:1px solid #777777; margin-top:5px; -moz-box-shadow:0px 0px 5px #666666; -webkit-box-shadow:0px 0px 5px #666666; box-shadow:0px 0px 5px #666666; } .img_left { /* Image sticks to the left */ width:auto; float:left; margin:5px 15px 5px 5px; } #menu li .black_box { background-color:#333333; color: #eeeeee; text-shadow: 1px 1px 1px #000; padding:4px 6px 4px 6px; /* mengatur sudut tumpul dari kotak hitam */ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; /* mengatur bayangan */ -webkit-box-shadow:inset 0 0 3px #000000; -moz-box-shadow:inset 0 0 3px #000000; box-shadow:inset 0 0 3px #000000; } #menu li ul { list-style:none; padding:0; margin:0 0 12px 0; } #menu li ul li { font-size:12px; line-height:24px; position:relative; text-shadow: 1px 1px 1px #ffffff; padding:0; margin:0; float:none; text-align:left; width:130px; } #menu li ul li:hover { background:none; border:none; padding:0; margin:0; } #menu li .greybox li { background:#F4F4F4; border:1px solid #bbbbbb; margin:0px 0px 4px 0px; padding:4px 6px 4px 6px; width:116px; /* mengatur ketumpulan sudut kotak abu-abu */ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #menu li .greybox li:hover { background:#ffffff; border:1px solid #aaaaaa; padding:4px 6px 4px 6px; margin:0px 0px 4px 0px; }

NOTE : Dari kode di atas, kode yang disorot warna pink harus anda rubah agar sesuai dengan lebar template anda. Sedangkan kode yang di sorot warna biru harus anda rubah juga agar warna menu serasi dengan template anda.

Setelah itu silahkan di klik saja "Terapkan Ke Blog" yang terletak di sudut kanan atas . Biar lebih jelasnya lihat gambar di bawah ini :

Cara Membuat Menu Dropdown CSS3 Di Blog

Nah... dengan demikian kode CSS sekarang sudah terpasang di blog anda. Dan untuk langkah yang kedua :

Membuat Kode HTML Menu Dropdown yang Akan Di Pasang di Blog

Nah di sinilah tingkat kesulitan yang akan di hadapi untuk membuat kode HTML nya, karena kita di tuntut untuk bisa merangcang bentuk dan gambar seperti apa yang akan di tampilkan pada menu dropdown nya.

Eit... tapi jangan menyerah dulu sebelum kita mencoba mempelajarinya, mari kita pelajari dasar-dasar untuk membuat kode HTML nya. Pada dasarnya kode HTML untuk rancangan sebuah Menu Dropdown adalah seperti berikut :

<ul>
<li><a href="#" title="">Beranda</a></li>
<li><a href="#" title="">Anchor Text Menu 1</a>
      <li><a href="#" title="">Anchor Text Sub Menu 1-1</a></li>
      <li><a href="#" title="">Anchor Text Sub Menu 1-2</a></li>
      <li><a href="#" title="">Anchor Text Sub Menu 1-3</a></li>
      <li><a href="#" title="">Anchor Text Sub Menu 1-4</a></li>
</li>
<li><a href="#" title="">Anchor Text Menu 2</a>
      <li><a href="#" title="">Anchor Text Sub Menu 2-1</a></li>
      <li><a href="#" title="">Anchor Text Sub Menu 2-2</a></li>
      <li><a href="#" title="">Anchor Text Sub Menu 2-3</a></li>
      <li><a href="#" title="">Anchor Text Sub Menu 2-4</a></li>
</li></ul>

Akan Tetapi menu dropdown kali ini akan sedikit berbeda alias tidak sama persis seperti di atas. Karena bentuk dasar HTML dari drop down menu dengan paragraf ini kurang lebih seperti di bawah ini :

<ul id="menu">

<li><a href="#">Item 1</a>

<div>

Content Menu Drop Down

<div>

</li>

<li><a href="#">Item 2</a>

<div>

Content Menu Drop Down

<div>

</li>

</ul>

Nah Jadi yang perlu sobat CMWP pelajari sebenarnya adalah mengatur elemen div yang akan disisipkan di antara :

<li><a href="URL1">NAMA MENU 1</a>......</li>

agar tampilan yang keluar nanti persis seperti yang dikehendaki.

Jadi sekarang kita akan mempelajari beberapa hal akan di terapkan pada menu dropdown yang akan kita rancang atau kita ciptakan dengan berbagai Variasi seperti yang terlihat pada "DEMO HERE". Ada 4 hal yang akan di pelajari dari menu-menu dropdown tersebut, diantaranya :

Mengatur Posisi Nama Menu pada Menu bar.
Mengatur Lebar Kotak Drop Down.
Mengatur lebar petak di dalam Kotak.
Memberi Style pada Petak.

JADI MULAI SEKARANG KITA AKAN BELAJAR MEMBEDAKAN ANTARA NAMA MENU, KOTAK ITEM DAN PETAK.

Untuk lebih jelasnya lihat pada gambar di bawah ini :


Cara Membuat Menu Dropdown CSS3 Di Blog

Gimana Sobat CMWP, apakah sudah jelas? kalau belum jelas yuk mari kita lanjutkan pembahasannya sampai tuntas...hehe... lanjutkan langkah ketiga:

Mengatur Nama Menu Dropdown Yang Berada Di Sisi Kiri Atau Sisi Kanan Bar

Coba lihat lagi DEMO nya yang ada di atas dan coba perhatikan, di sana terdapat ada menu yang berada di sisi kiri dan juga ada menu yang berada di sisi kanan, dari kedua fungsinya bisa anda pergunakan ataupun tidak di pergunakan itu terserah anda alias abaikan saja.

Untuk membuat menu yang berada di sisi kiri bar, maka kode yang harus di buat adalah seperti di bawah ini :

<li><a href="#" class="drop">Top Artikel</a>

Nah bila anda ingin membuat menu yang akan di pasang di bagian kanan, maka kode yang akan di but adalah seperti contoh di bawah ini :

<li class="menu_right"><a href="#" class="drop">Panduan Website Pemula</a>

Bagaimana Sobat CMWP, mudah tidak? mudah-mudahan sampai di sini sobat CMWP sudah bisa memahaminya tentang perbedaan pembuatan kode HTML nya dan tidak menemui masalah, hehe... :.D.
Ayo kita lanjutkan pada langkah yang ke empat :

Mengatur Lebar Dalam Membuat Kotak Dropdown

Setelah anda memahami bagaimana cara mengatur posisi pada bar, maka selanjutnya anda harus bisa juga memahami membuat lebar kotak yang akan dikeluarkan pada saat kursor melintasi NAMA MENU.

Nah Yang mau di bikin bisa di pilih dulu apakah mau membuat yang lebarnya 1 kolom, apa 2 kolom, 3 kolom, 4 kolom atau bahkan mau 5 kolom?

Contoh di dalam DEMO, menu dropdown nya itu menggunakan 4 kolom, maka kode <div yang harus di gunakan adalah seperti berikut :

<div class="dropdown_4columns">
Kode div dari kolom-kolom
</div>

Dan apabila menu dropdown nya mau menggunakan lebarnya hanya 2 kolom saja, maka kode yang di gunakannya akan seperti ini

<div class="dropdown_2columns">
Kode div dari kolom-kolom
</div>

Bagaimana sobat CMWP apakah sudah bisa di pahami ? mudah-mudahan dengan adanya 2 contok kode di atas sudah bisa di mengerti ya... hehe... :.D
mari Lanjutkan pada langkah ke lima :

Mengatur Ukuran Pada Lebar Dari Petak Entri

Dalam mengatur lebar, Selain KOTAK yang bisa di atur lebarnya, PETAK entri pun sebenarnya bisa juga di atur ukuran lebarnya loh.

Coba perhatikan pada contoh gambar di atas, disana ada KOTAK yang ukuran selebar 5 kolom. Di dalam KOTAK itu ada PETAK selebar 1 kolom (PETAK 1, PETAK 2,PETAK 3,PETAK 4, PETAK 5), Ada juga PETAK yang lebarnya 5 kolom (PETAK 6), Lalu ada juga PETAK yang lebarnya 2 kolom (PETAK 7), Yang terakhir ada PETAK yang lebarnya 3 kolom (PETAK 8).

Nah sekarang bagaimana caranya memasukan 1 PETAK berukuran 2 KOLOM,
dan 2 PETAK berukuran 1 KOLOM ke dalam KOTAK yang ukuranNYA selebar 2 KOLOM? maka kodenya akan nampak seperti di bawah ini :

<div class="dropdown_2columns">
     <div class="col_2">
     ISI DARI PETAK 1....
     </div>
     <div class="col_1">
     ISI DARI PETAK 2....
     </div>
     <div class="col_1">
     ISI DARI PETAK 3....
     </div>
</div>

Nah gimana sobat CMWP sudah bisa di mengerti kan? mudah-mudahan sudah bisa di pahami ya... hehe... :.D

Kalau sudah bisa di pahami berarti kita bisa membuat menu dropdown sendiri dengan 2 NAMA MENU. Biar lebih jelasnya maka kode nya akan seperti di bawah ini :

<div id="iefix"><ul id="menu">
<li><a href="#" class="drop">NAMA MENU 1</a>
<div class="dropdown_2columns">
     <div class="col_2">
     ISI DARI PETAK 1....
     </div>
     <div class="col_1">
     ISI DARI PETAK 2....
     </div>
     <div class="col_1">
     ISI DARI PETAK 3....
     </div>
</div>
</li>
<li><a href="#" class="drop">NAMA MENU 1</a>
<div class="dropdown_2columns">
     <div class="col_2">
     ISI DARI PETAK 1....
     </div>
     <div class="col_1">
     ISI DARI PETAK 2....
     </div>
     <div class="col_1">
     ISI DARI PETAK 3....
     </div>
</div>
</li>
</ul></div>

Nah sekarang sobat CMWP tinggal memikirkan mau di isi apa saja ke setiap ISI DARI PETAK tersebut. Sobat bisa mengisi TEKS BIASA, atau ARTIKEL BLOG, LINK, ataupun GAMBAR dan POTO. dan langkah yang ke enam :

Memberi Style Pada PETAK Di Dalam Menu Dropdown

Gimana sobat CMWP, masih semangat kan untuk membaca artikelnya sampai tuntas? hehe... :.D.

Sekarang silahkan di buka lagi "DEMO HERE" di atas, lalu coba buka satu persatu dari tampilan-tampilan menu dropdownnya, perhatikan di sana ada beberapa macam variasi dan gaya yang berbeda dari masing-masing PETAK.

Pada menu PANDUAN WEBSITE PEMULA di sana ada link-link di dalam petak-petak kecil. Nah untuk membuatnya maka kodenya akan seperti ini :

<div class="col_1">
   <ul class="greybox">
                    <li><a href="#">Buat Gmail</a></li>
                    <li><a href="#">Buat Blog</a></li>
                    <li><a href="#">Setting Menu Dasar</a></li>
                    <li><a href="#">Setting Komentar</a></li>
                    <li><a href="#">More...</a></li>
     </ul>
</div>

Kemudian pada menu TOP ARTIKEL ada petak warna hitam dengan tulisan warna putih, cara untuk membut kodenya seperti di bawah ini :

<div class="col_1"> <p class="black_box">ISI DARI PETAK</p></div>

Dan masih di dalam TOP ARTIKEL di sana ada tulisan yang hurufnya tercetak miring alias italic. Untuk membuatnya maka kodenya seperti di bawah ini :

<div class="col_1"> <p class="italic">ISI DARI PETAK</p></div>

Dan yang di sebelahnya ada tulisan yang hurufnya tercetak tebal, maka untuk membuatnya mudah saja, tinggal mengganti kata "italic" dengan kata "strong", maka untuk kodenya akan nampk seperti ini :

<div class="col_1">
<p class="strong">ISI DARI PETAK</p>
</div

Nah... bagaimana nih sobat CMWP, apakah sudah bisa di pahami artikel yang sangat panjang ini....

Jika sobat CMWP sudah jadi merancang kode-kodenya, maka langkah selanjutnya tinggal menyimpan kode HTML ini ke gadget HTML/JAVASCRIP.

Langkah-langkah untuk menyimpan kode HTML rancangannya adalah :

Login ke blog dengan ID anda.
Silahkan di pilih menu "Tata Letak"
Kemudian di pilih "Tambahkan Gadget".

Cara Membuat Menu Dropdown CSS3 Di Blog

Lalu di "Pilih HTML/JavaScript"

Cara Membuat Menu Dropdown CSS3 Di Blog

Masukan Kode HTML/JavaScript di kotak Konten
Kemudian klik "Simpan".

Cara Membuat Menu Dropdown CSS3 Di Blog

Selesai.

Bagi sobat CMWP yang kesulitan membuat kode-kodenya silahkan download saja yang sudah jadi, di bawah ini :

DOWNLOAD KODE YANG SUDAH JADI

Demikianlah sobat CMWP (Cara Membuat Website Pemula) artikel yang sangat sederhana ini tentang Cara Membuat Menu Dropdown CSS3 Di Blog semoga bermanfaat buat sobat semuanya. Jangan lupa silahkan kumjungi juga Cara Membuat Menu Dropdown Horizontal di Blogl. Terima Kasih telah membaca dan berkunjung di Blog ini. Silahkan tinggalkan jejakmu di komentar blognya.

Cara Membuat Menu Dropdown Horizontal di Blog

2014-10-08T16:56:00.002+07:00

Bagaimana Cara Membuat Menu Dropdown Horizontal di Blog?

Tutorial Terbaru Cara Membuat Menu Dropdown Horizontal di Blog

Cara Membuat Menu Dropdown Horizontal di Blog

Hallo Sobat Blogger CMWP (Cara Membuat Website Pemula), Setelah kemaren membuat artikel yang sangat sederhana tentang Cara Membuat Menu Dropdown di Blog. Kali ini saya akan mencoba untuk membuat artikel yang sangat sederhana juga tentang Cara Membuat Menu Dropdown Horizontal di Blog.

Sekilas tentang menu dropdown horizontal ini yaitu menu navigasi yang apabila di sorot oleh mouse akan secara otomatis mengeluarakan sub menu yang terkandung di dalamnya, tentunya nanti akan keluar berupa sub-sub menu.

Ada beberapa tahapan yang harus di persiapkan yaitu yang pertama adalah menentukan menu utama apakah yang akan di tampilkan? misalnya adalah Home, Belajar Bisnis Online, BELAJAR SEO GOOGLE, CARA MEMBUAT WEBSITE, serta TENTANG SAYA. Yang kedua adalah mempersiapkan sub menu dari menu utama yang akan di tampilkan.

Nah sudah barang tentu dari judul-judul yang saya sebutkan tadi itu mempunyai alamat URL masing-masing, langkah selanjutnya adalah mencatat alamat URL setiap judul yang di pasang dalam menu dropdown horizontal.

Setiap template tentunya akan berbeda kodenya, untuk memberi gambaran saja maka yang saya terangkan adalah template minima dengan pemasangan menu dropdown di bagian header.

Untuk Lebih memahaminya apa yang akan di buat dalam pembahasan artikel ini, silahkan kunjungi Demo dari Cara Membuat Menu Dropdown Horizontal di Blog

Ingin tahu Cara Membuat Menu Dropdown Horizontal di Blog? silahkan baca tutorialnya sampai selesai....

Memasang Kode CSS Menu Drop Down di Blog

Silahkan login ke blogger dengan ID anda.
Pilih Blog yang akan di pasang Menu Dropdown Horizontal.
Kemudian Klik Menu Template.
Lalu lanjutkan dengan mengklik Edit HTML.
Copy seluruh kode template yang ada lalu paste pada notepad kemudian save. ini untuk backup data bila terjadi kesalahan editting.
Kemudian cari kode ]]></b:skin>

*Cara cepat dan mudah untuk mencari kode ]]></b:skin> adalah dengan cara : klik kiri mouse di dalam kode HTML nya, lalu pijit Ctrl+f, maka akan keluar "kotak pencarian", lalu Copas kode ]]></b:skin> di "kotak pencarian" tersebut, kemudian klik "Enter", lihat gambar di bawah ini :

Cara Membuat Menu Dropdown Horizontal di Blog

*Setelah di pijit Enter Maka akan muncul kode ]]></b:skin> nya yang terblok dengan warna kuning, seperti yang terlihat pada gambar di bawah ini :

Cara Membuat Menu Dropdown Horizontal di Blog

Copy paste kode berikut, dan simpan tepat di atas kode ]]></b:skin>

#CmwpMenu {
    background: warna1;
    width: 880px;
    height: 35px;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    color: warna2;
    font-weight: bold;
    margin-bottom: 30px;
    padding: 2px;

}
#Cmwpbox {
    width: 875px;
    float: left;
    margin: 0;
    padding: 0;
}

#punch {
    margin: 0;
    padding: 0;
}
#punch ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#punch li {
    list-style: none;
    margin: 0;
    padding: 0;
}
#punch li a, #punch li a:link, #punch li a:visited {
    color: warna2;
    display: block;
    font-size: 16px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    text-transform: lowercase;
    margin: 0;
    padding: 9px 15px 8px;
}
#punch li a:hover, #punch li a:active {
    background: warna2;
    color: warna1;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
}
#punch li li a, #punch li li a:link, #punch li li a:visited {
    background: warna1;
    width: 150px;
    color: warna2;
    font-size: 14px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    text-transform: lowercase;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
}
#punch li li a:hover, #punch li li a:active {
    background: warna2;
    color: warna1;
    padding: 7px 10px;
}
#punch li {
    float: left;
    padding: 0;
}
#punch li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
}
#punch li ul a {
    width: 140px;
}
#punch li ul ul {
    margin: -32px 0 0 171px;
}
#punch li:hover ul ul, #punch li:hover ul ul ul, #punch li.sfhover ul ul, #punch li.sfhover ul ul ul {
    left: -999em;
}
#punch li:hover ul, #punch li li:hover ul, #punch li li li:hover ul, #punch li.sfhover ul, #punch li li.sfhover ul, #punch li li li.sfhover ul {
    left: auto;
}
#punch li:hover, #punch li.sfhover {
    position: static;
}

Sebelumnya silahkan di ganti dulu kode warna1 dan warna2 dengan kode warna yang anda inginkan,mengikuti warna blog anda, sebagai contoh bisa mengikuti kode di bawah ini:

Menu Hitam
warna1 = #555555
warna2 = #FFFFFF

Menu Biru
warna1 = #66bbdd
warna2 = #004661

Menu Hijau
warna1 = #38761d
warna2 = #FFFFFF

Menu Abu-abu
warna1 = #d4d4d4
warna2 = #555555

Menu Kuning
warna1 = #ffd966
warna2 = #d4812a

Jika sudah mengganti semua kode warna di atas silahkan klik "SIMPAN TEMPLATE" (Ikuti Cara-caranya Seperti yang terlihat pada gambar di atas).

Memasang Kode HTML Menu Drop Down di Tata Letak Blog

Di Dashboard Blog Anda, Silahkan pilih menu "Tata Letak" atau "Layout",
Kemudian klik "Tambahkan Gadget" atau "Add a Gadget".

Cara Membuat Menu Dropdown Horizontal di Blog

Maka akan muncul laman baru, silahkan pilih "HTML/JavaScript".

Cara Membuat Menu Dropdown Horizontal di Blog

Maka akan muncul lagi laman baru, berupa kotak "Mengonfigurasi HTML/JavaScript", silahkan masukan kode di bawah ini :

<div id="CmwpMenu">
       <div id="Cmwpbox">
      <ul id="punch">
        <li><a href="#">Home</a></li>
        <li>
          <a href="#">Sample Page</a>
          <ul>
            <li>
              <a href="#">Sub Page #1</a>
              <ul>
                <li><a href="#">Sub Sub Page #1</a></li>
                <li><a href="#">Sub Sub Page #2</a></li>
                <li><a href="#">Sub Sub Page #3</a></li>
              </ul>
            </li>
            <li><a href="#">Sub Page #2</a></li>
            <li><a href="#">Sub Page #3</a></li>
            <li><a href="#">Sub Page #4</a></li>
            <li><a href="#">Sub Page #5</a></li>
          </ul>
        </li>
        <li><a href="#">Sample Post</a></li>
        <li><a href="#">Blog Page</a></li>
      </ul>
    </div>
</div>

Silahkan di Edit semua nama-nama menu dan submenunya sesuai dengan keinginan anda, jangan lupa untuk tanda # di ganti dengan sebuah link atau URL yang anda inginkan.

Kalau sudah selesai mengedit menu dan submenunya sesuai dengan keinginan anda, silahkan di copas ke kotak kosongnya, kemudian silahkan klik "Simpan" seperti yang terlihat pada gambar di bawah ini:

Cara Membuat Menu Dropdown Horizontal di Blog

*Untuk memastikan apakah sudah benar memasang kode-kode di blognya, lebih baik di lihat dulu dengan "Pratinjau" yang terletak di atas samping kanan postingan blog.

Cara Membuat Menu Dropdown Horizontal di Blog

Oiya... Untuk Menambah atau merubah Item di dalam Menu Dropdown Horizontal tersebut, begini caranya :

Coba silahkan di cari pada bagian akhir ada kode seperti ini:

<li><a href="#">Blog Page</a></li>
</ul>

Nah... di bagian tanda </ul> bisa anda tambahkan menu baru, dan menu baru ini di simpan tepat di atas tanda </ul> maka contohnya akan nampak menjadi seperti di bawah ini :

<li><a href="#">Blog Page</a></li>
<li><a href="Simpan Link URL di sini">Buat Teks Baru di sini</a></li>
</ul>

Kalau anda mau menambahkan menu lebih dari satu, maka contohnya akan seperti di bawah ini :

<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU 1">TEKS BARU 1</a></li>
<li><a href="LINK BARU 2">TEKS BARU 2</a></li>
<li><a href="LINK BARU n">TEKS BARU n</a></li>
</ul>

Kemudian bila anda mau menambahkan dari "menu" kepengen ada beberapa "sub menu" nya, maka perhatikan kode </li> karena kode ini yang akan membuka ruang untuk "sub menu" di bawahnya, agar lebih jelas maka contohnya akan seperti di bawah ini :

<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU 1">TEKS BARU 1</a></li>

<li><a href="LINK BARU 2">TEKS BARU 2</a>

<li><a href="LINK BARU SUB MENU 1">SUB MENU 1</a></li>

<li><a href="LINK BARU SUB MENU 2">SUB MENU 2</a></li>

</li>

<li><a href="LINK BARU n">TEKS BARU n</a></li>
</ul>

Gimana Sobat CMWP, mudah bukan? Selamat membuat variasi-variasi untuk "menu" dan "sub menu" nya ya...

Demikian artikel yang sangat sederhana ini tentang Cara Membuat Menu Dropdown Horizontal di Blog. Silahkan kunjungi juga Cara Membuat Menu Dropdown CSS3 Di Blog. Semoga bermanfaat bagi anda, dan jangan lupa juga kunjungi Cara Membuat Menu Dropdown di Blog.

Terima Kasih telah berkunjung, silahkan tinggalkan jejakmu wahai para blogger di komentar blognya.

Cara Membuat Menu Dropdown di Blog

2014-09-26T13:38:00.000+07:00

Bagaimana Sebenarnya Cara Membuat Menu Dropdown di Blog?

Tutorial Terbaru Cara Membuat Menu Dropdown di Blog

Cara Membuat Menu Dropdown di Blog

Hallo Sobat Blogger CMWP (Cara Membuat Website Pemula)... Kali ini saya akan membuat artikel tentang Cara Membuat Menu Dropdown di Blog.

Dalam konsep blog, setiap posting kita akan terarsip otomatis secara rapi setiap bulan. Setiap memasuki bulan baru, seperti Januari, maka arsip bulan Desember akan tampil di sidebar. Masalahnya, kalau kita sudah ngeblog setahun, maka arsip dari Januari sampai Desember akan berjejer di sidebar kita. Nah, lalu bagaimana kalau dua dan tiga tahun lagi?

Maka langkah praktis mengatasi hal ini adalah dengan membuat pull-down menu seperti di bawah ini:

Jadi, berapa bulan atau berapa tahun kita blogging di blogger atau blogspot, menu bulan-bulan tersebut tidak akan memenuhi dan berjejer panjang di sidebar kita.
Yang tampak hanya nama "Archives", baru setelah di klik, akan muncul nama bulan arsip-arsip kita.

Sekarang bagaimana caranya membuat menu dropdown yang di dalamnya ada linknya?

saya ambil contoh untuk menu Dropdown milik saya pribadi. Untuk membuatnya silahkan anda copy kode HTML di bawah :

<option value=" http://caramembuatwebsitepemuladd.blogspot.com/2014/06/bagaimana-cara-membuat-email-gmail.html"> Cara Membuat Gmail</option>

<option value="http://caramembuatwebsitepemuladd.blogspot.com/2014/07/cara-membuat-blog-gratis.html ">Cara Membuat Blog Gratis</option>

<option value="http://caramembuatwebsitepemuladd.blogspot.com/2014/08/cara-setting-menu-dasar-di-blog.html ">Cara Setting Menu Dasar Di Blog</option>

<option value="http://caramembuatwebsitepemuladd.blogspot.com/2014/08/cara-setting-menu-pos-dan-komentar-di.html ">Cara Setting Menu Pos Dan Komentar Di Blog</option>

<option value="http://caramembuatwebsitepemuladd.blogspot.com/2014/08/cara-setting-menu-seluler-dan-email-di.html ">Cara Setting Menu Seluler Dan Email Di Blog </option>

<option value="http://caramembuatwebsitepemuladd.blogspot.com/2014/08/cara-setting-menu-bahasa-dan_27.html ">Cara Setting Menu Bahasa Dan Pemformatan Di Blog</option>

<option value="http://caramembuatwebsitepemuladd.blogspot.com/2014/09/cara-memposting-artikel-di-blogger_2.html ">Cara Memposting Artikel Di Blog</option>

<option value=" http://caramembuatwebsitepemuladd.blogspot.com/2014/09/cara-membuat-tulisan-berjalan-marquee.html">Cara Membuat Tulisan Berjalan (MARQUEE) Di Blog</option>

<option value="http://caramembuatwebsitepemuladd.blogspot.com/2014/08/cara-membuat-blog-gratis-wordpress.html ">Cara Membuat Blog Gratis WordPress</option>

<option value="http://caramembuatwebsitepemuladd.blogspot.com/2014/06/cara-membuat-website-pemula.html ">Cara Membuat Website Pemula</option>

</select></form>

Maka hasilnya akan nampak seperti di bawah ini :

Gimana Sobat CMWP!!! Mudah bukan ?

Demikian artikel yang sangat sederhana ini tentang Cara Membuat Blog Gratis mengenai tentang Cara Membuat Menu Dropdown di Blog.
Silahkan kunjungi juda artikel tentang Cara Membuat Menu Dropdown Horizontal di Blog, dan buat yang ingin lebih dalam lagi, silahkan kunjungi Cara Membuat Menu Dropdown CSS3 Di Blog Semoga bermanfaat bagi anda, Terima Kasih telah berkunjung, silahkan tinggalkan jejakmu wahai para blogger di komentar blognya.

Selamat mencoba...

Cara Membuat Tulisan Berjalan (Marquee) di Blog

2014-09-17T18:00:00.002+07:00

Bagaimana Sebenarnya Cara Membuat Marquee?

Tutorial Terbaru Cara membuat tulisan berjalan (marquee) di Blog

CARA MEMBUAT TULISAN BERJALAN (MARQUEE) DI BLOG

Cara Membuat Tulisan Berjalan (Marquee) di Blog

Mungkin anda pernah mengunjungi sebuah blog atau website yang terdapat tulisan berjalan & dalam hati anda bertanya, bagaimana cara membuat tulisan berjalan seperti itu yah?

Cara membuat tulisan berjalan (marquee)

Untuk membuat tulisan berjalan itu sangat mudah karena hanya dengan kode HTML sederhana sudah akan tercipta sebuah tulisan berjalan. Kode HTML untuk membuat tulisan berjalan di kenal dengan perintah Marquee. Kode dasar perintah marquee adalah sebagai berikut :

<marquee> TULISAN YANG AKAN BERGERAK </marquee>

Hasilnya akan seperti ini :

TULISAN YANG AKAN BERGERAK

Selain kode dasar marquee, ada perintah lain (umumnya disebut sebagai atribut) yang di sisipkan untuk mengatur keindahan tampilan tulisan yang berjalan. Atribut yang sering di gunakan dalam kode marquee adalah :

bgcolor ="warna" » Untuk mengatur warna background (latar belakang) teks.

direction ="left/right/up/down" » Mengatur arah gerakan teks.

behavior ="scroll/slide/alternate" » Untuk mengatur perilaku gerakan.

Scroll » teks bergerak berputar.

Slide » teks bergerak sekali lalu berhenti.

Alternate » teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo).

title="pesan" » Pesan akan muncul saat mouse berada di atas teks.

scrollmount="angka" » mengatur kecepatan geraka, semakin besar angka semakin cepat gerakannya.

scrolldelay="angka" » Untuk mengatur waktu tunda gerakan dalam mili deti.

loop="angka|-1|invinite" » Mengatur jumlah loop.

width="lebar" » Mengatur lebar blok teks dalam pixel atau persen.

Agar lebih menarik, kode marquee juga bisa dipadukan dg javascript sederhana, seperti "onmouseover="this.stop()" onmouseout="this.start()" .

Agar lebih jelas akan saya sertakan contohnya :

Contoh marquee dari gerakan :

<marquee align="center" direction="left" height="200" scrollamount="2" width="30%"> marquee dari kanan ke kiri </marquee>

Hasilnya akan seperti ini :

marquee dari kanan ke kiri

Ganti kata "left" dengan keinginan anda yaitu bisa : right, up, down .

Contoh marquee dengan variasi hurup dan warna latar belakang :

<div align="left"><font face="georgia" color="White"><strong><marquee bgcolor="red" width="70%" scrollamount="3" behavior="alternate"> </marquee></strong></font></div>

Hasilnya akan seperti ini :

marquee dengan variasi huruf

Tapi selain kode di atas ada beberapa tambahan kode untuk membuat variasi dari marquee.

Ini Marquee dengan memakai waktu, kodenya adalah :

<marquee scrolldelay="500">TEKS BERJALAN DENGAN MEMAKAI WAKTU 0,5 DETIK</marquee>

Hasilnya akan seperti ini :

TEKS BERJALAN DENGAN MEMAKAI WAKTU 0,5 DETIK

kode scrolldelay="angka" digunakan untuk mengatur jeda dalam milidetik, jadi untuk jeda 1 detik masukkan nilai 1000.

Lalu ini Marquee yang hanya memakai Lebar 50%, kodenya adalah :

<marquee width="50%">MARQUEE / TEKS BERJALAN HANYA LEBAR 50 PERSEN SAJA</marquee>

kode width="lebar" digunakan untuk mengatur lebar media teks berjalan, bisa dalam satuan pixel atau persen.

Hasilnya akan seperti ini :

MARQUEE / TEKS BERJALAN HANYA LEBAR 50 PERSEN SAJA

Lalu ini Marquee yang memakai kecepatan, kodenya adalah :

<marquee scrollamount="12"> MARQUEE / TEKS BERJALAN DENGAN KECEPATAN 12!!!</marquee>

kode scrollamount="angka" digunakan untuk mengatur kecepatan pergerakan tulisan semakin besar angkanya maka akan semakin kencang Tulisan Marquee-nya.

Hasilnya akan seperti ini :
MARQUEE / TEKS BERJALAN DENGAN KECEPATAN 12!!!

Lalu ini Marquee Bolak-Balik, kodenya adalah :

<marquee behavior="alternate"> MARQUEE / TEKS BERJALAN YANG BERGERAK BOLAK-BALIK </marquee>

Hasilnya akan seperti ini :
MARQUEE / TEKS BERJALAN YANG BERGERAK BOLAK-BALIK

Lalu ini Marquee Balapan, kodenya adalah :

<marquee scrollamount="6"> MARQUEE / TEKS BERJALAN BALAPAN </marquee><marquee scrollamount="8"> MARQUEE / TEKS BERJALAN BALAPAN </marquee><marquee scrollamount="10"> MARQUEE / TEKS BERJALAN BALAPAN </marquee>

Hasilnya akan seperti ini :
MARQUEE / TEKS BERJALAN BALAPAN 1 MARQUEE / TEKS BERJALAN BALAPAN 2 MARQUEE / TEKS BERJALAN BALAPAN 3

Lalu ini Marquee Memakai Border, kodenya adalah :

<marquee style="border: BLUE 2px SOLID;"> < marquee style="border: blue 2px SOLID; <a href=”http:// caramembuatwebsitepemula.com.com/ “>CARA MEMBUAT TEK BERJALAN / MARQUE BAGIAN 1"> </a><a href=http://www.caramembuatwebsitepemula.com> CARA MEMBUAT TEK BERJALAN / MARQUE BAGIAN 2"> </a></marquee>

Hasilnya akan seperti ini :

CARA MEMBUAT WEBSITE PEMULA BONGKAR SEO GOOGLE

Lalu ini Marquee Bolak-Balik Memakai Gambar atau poto, ini kodenya :

<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()"><a href="<a href=http://www.caramembuatwebsitepemula.com ><a href="http://www.
caramembuatwebsitepemula.com" class="style4" target="_blank"><img src="http://rahasiawebsitepemula.com/member/banner-rwp8.jpg"></a> </a></marquee>

Hasilnya akan seperti ini :

Demikian artikel yang sangat sederhana ini tentang Cara Membuat Blog Gratis mengenai tentang Cara Membuat Tulisan Berjalan (Marquee) di Blog. Semoga bermanfaat bagi anda, Terima Kasih telah berkunjung, silahkan tinggalkan jejakmu wahai para blogger di komentar blognya...

Cara Memposting Artikel di Blogger

2014-09-02T18:44:00.001+07:00

Tutorial Cara Memposting Artikel di Blogger

Cara Memposting Artikel di Blogger

Bagi anda yang mengalami sedikit kendala tentang tata cara memposting suatu artikel kedalam blog, maka kali ini akan di bahas tentang tata cara posting di blogger.com. Di dalam menu posting ada beberapa toolbar yang bisa anda gunakan.Jika anda sudah terbiasa menggunakan microsoft Word ataupun microsoft Excel tentu barangkali tidak akan mengalami kesulitan ketika memposting suatu artikel, tapi mungkin tidak ada salahnya bila saya bahas sekilas tentang ini, barangkali ada di antara teman kita yang masih bingung, terutama bagi para blogger pemula, seperti saya...

Berikut adalah Toolbar yang ada ketika posting :

Cara Memposting Artikel di Blogger

1. JUDUL POS = Untuk memberikan sebuah judul Postingan.

2. COMPOSE = Untuk membuat artikel dalam mode Compose (biasa).

3. HTML = Untuk membuat artikel dalam kode HTML.

4. UNDO = Digunakan untuk membatalkan atau mengulang perubahan satu langkah ke belakang.

5. REDO = Digunakan untuk membatalkan atau mengulang perubahan satu langkah ke depan.

6. FONT = Untuk merubah jenis hurup yang di gunakan.

7.FONT SIZE = Untuk merubah ukuran hurup (heading).

8. FORMAT = Untuk merubah hurup Heading, Subheading, Minor Heading, dan Normal

9. BOLD = Untuk Menebalkan hurup.

10. ITALIC = Untuk memiringkan hurup.

11. UNDERLINE = Untuk memberi garis bawah pada huruf.

12. STRIKETROUGHT = Untuk memberi garis tengah pada huruf.

13. TEXT COLOR = Untuk merubah warna hurup.

14. TEXT BACKGROUND COLOR = Untuk memberikan efek warna background pada huruf. contoh : Kang Deri.

15. ADD OR REMOVE LINK = Untuk membuat atau menghapus link.

16. INSERT IMAGE = Untuk memasukan gambar(upload gambar).

17. INSERT A VIDEO = Untuk memasukan Video (upload Video).

18. INSERT JUMP BREAK = Untuk membuat "read more" secara manual.

19. ALIGMENT = Untuk membuat artikel menjadi rata kiri, rata tengah, serta rata tengah dan kanan.

20. NUMBERED LIST = Untuk membuat sub bahasan oleh angka.

21. BULLET LIST = Untuk membuat sub bahasan oleh bullet.

22. QUOTE = Untuk memberi tanda "kutip" atau tanda "petik".

23. REMOVE FORMATTING = Untuk mengformat/menghapus dari "Font Size".

24. CHECK SPELLING = Untuk mengecek spelling.

25. Area untuk menulis artikel.

26. PUBLIKASIKAN = Untuk mempublikasikan atau menerbitkan artikel blognya.

27. SIMPAN = Untuk menyimpan artikel postingan blog.

28. PRATINJAU = Untuk melihat dulu hasil sementara dari artikel postingan blog sebelum di Publikasikan, kalau ada kesalahan-kesalahan dalam penulisan bisa di edit dulu. Sehingga nanti setelah di publikasikan hasilnya sudah OK.

29. TUTUP = untuk menutup area dalam kegiatan menulis artikel blognya.

30. LIHAT BLOG = Untuk melihat hasil Blognya.

Cara penggunaan toolbar di atas adalah blok (beri tanda) terlebih dahulu tulisan yang akan di edit, kemudian tekan tombol toolbar yang di inginkan.

Langkah-langkah dalam memposting suatu artikel:

Sebaiknya klik terlebih dahulu “ Edit HTML”,jika langsung di mode “Compose”, sering terjadi hang pada komputer (pengalaman saya pribadi). Copy artikel yang telah anda buat sebelumnya, kemudian paste di area posting. Edit sesuai dengan kemauan anda.

Klik tombol “ compose “ untuk melakukan editing (jika anda masih bingung dengan kode HTML).

Klik tombol tool yang berlambang “ panorama” berwarna biru, jika anda ingin memasukan gambar ataupun photo untuk menghiasi posting-an anda.

Klik tombol “ Preview “ untuk melihat hasil posting-an anda yang nantinya akan tampil di dalam blog, barangkali masih ada yang perlu di edit.

Klik tombol “ publish “. Selesai. Tulisan hasil karya anda akan bisa dilihat dan di baca oleh seluruh dunia.

Demikian artikel yang sederhana ini Cara Membuat Blog Gratis mengenai tentang Cara Memposting Artikel di Blogger. Semoga bermanfaat bagi anda, Terima Kasih telah berkunjung, silahkan tinggalkan jejakmu wahai para blogger di komentar blognya...

Cara Setting Menu Bahasa dan Pemformatan di Blog

2014-08-27T19:39:00.002+07:00

Tutorial Cara Setting Menu Bahasa dan Pemformatan di Blog

Cara Setting Menu Bahasa dan Pemformatan di Blog

Blogger mendukung banyak bahasa di dunia, oleh karenanya kita dapat memilih bahasa yang digunakan diblog agar lebih mudah di mengerti. Untuk mengubah bahasa sangat mudah, kita hanya mengaturnya pada menu bahasa dan pemformatan.

Setelah artikel sebelumnya Cara Setting Menu Pos dan komentar di Blogger.
Maka langkah selanjutnya akan di bahas artikel tentang Cara Setting Menu Bahasa dan Pemformatan di Blog. Biar tidak banyak basa-basinya...

**Berikut adalah langkah-langkah setting menu bahasa dan pemformatan:**

Silahkan login ke blogger dengan ID anda.
Lalu pilih Setelen, kemudian Klik Menu Bahasa dan Pemformatan :

Cara Setting Menu Bahasa
dan Pemformatan di Blog

Bahasa
Pilih bahasa yang anda ingin gunakan. Misal: Indonesia

Cara Setting Menu Bahasa dan Pemformatan di Blog

Aktifkan transliterasi
Ini adalah untuk mengaktifkan transliterasi pada saat melakukan posting. Contoh untuk transliterasi ke arab, hindi dan lain-lain. Bila anda tidak memerlukannya, pilih Dinonaktifkan.

Cara Setting Menu Bahasa dan Pemformatan di Blog

Zona Waktu
Pilih zona waktu yang anda inginkan. Misal : GMT+7:00 jakarta.

Cara Setting Menu Bahasa dan Pemformatan di Blog

Format Header Tanggal
Ini untuk mengatur tampilan tanggal, silahkan di pilih sesuai keinginan anda. Misal : Rabu, 27 Agustus 2014

Cara Setting Menu Bahasa dan Pemformatan di Blog

Format Timestamp
Ini untuk mengatur tampilan Timestamp. Misal : 18.03

Cara Setting Menu Bahasa dan Pemformatan di Blog

Format Stempel Waktu Komentar
Ini untuk mengatur tampilan Timestamp komentar. Misal : 27 Agustus 2014 18.03

Cara Setting Menu Bahasa dan Pemformatan di Blog

Akhiri pengaturan dengan klik tombol Simpan setelan yang ada disebelah kanan atas monitor.

Cara Setting Menu Bahasa
dan Pemformatan di Blog

Selesai.

Demikian Artikel yang sederhana ini Cara Membuat Website Pemula tentang Cara Setting Menu Bahasa dan Pemformatan di Blog. Semoga artikel ini bermanfaat bagi anda. Tinggalkan jejakmu di komentar wahai para Blogger...

Cara Setting Menu Seluler dan Email di Blog

2014-08-26T18:10:00.000+07:00

Tutorial Cara setting Menu Seluler dan Email di Blog

Cara Setting Menu Seluler dan Email di Blog

Setelah Melakukan Cara Setting Pada Menu Pos dan Komentar di Blogger, selanjutnya akan saya coba untuk membuat sebuah artikel tutorial bagaimana melakukan Cara Setting Menu Seluler dan Email di Blogger.

anda bahwa untuk mempublikasikan artikel ke blog tidak selalu harus melalui dashboard blogger, namun bisa juga menggunakan hand phone atau email. Yang anda perlukan hanyalah melakukan pengaturan pada menu Seluler and Email.

Berikut langkah-langkah Cara Setting Menu Seluler dan Email di Bloger :

Silahkan login ke blogger dengan ID anda.
Lalu pilih Setelen, kemudian Klik Menu Seluler dan Email .


Cara Setting Menu Seluler dan Email di Blog

Mempublikasikan entri menggunakan SMS/MMS

Klik Tambah perangkat seluler untuk menambahkan hand phone anda. Akan muncul Kode verifikasi. Kirimkan kode tersebut dari hand phone anda ke alamat go@blogger.com (MMS). Bila hand phone anda tidak support MMS, kirimkan kode verifikasi ke 256447 (BLOGGR).

Cara Setting Menu Seluler dan Email di Blog

Mempublikasikan entri menggunakan email

Disini anda harus membuat sebuah alamat email rahasia, isilah form yang kosong dengan kata rahasia yang anda inginkan. Misal : caralain. Ini akan menjadi sebuah alamat email rahasia, formatnya seperti ini :

emailanda.katarahasia@blogger.com

Sebagai contoh karena tadi saya menggunakan kata : jalanpintascaralain, maka
alamat email rahasianya adalah :

caramembuatwebsite.jalanlain@blogger.com

Cara Setting Menu Seluler dan Email di Blog

Untuk selanjutnya, apabila anda ingin membuat posting, buatlah sebuah post kemudian kirim ke alamat email tadi.

Namun, anda perlu memilih opsi yang tersedia:

Segera publikasikan email : ini artinya apabila anda mengirimkan posting ke alamat email rahasia yang tadi dibuat, maka secara otomatis akan di publikasikan ke blog anda.

Simpan email sebagai draf entri : ini artinya apabila anda mengirimkan post ke alamat email rahasia yang tadi dibuat, maka posting tersebut tidak langsung di publikasikan namun di simpan pada post draft. Bila anda ingin mempublikasikan post draft tersebut, anda harus login ke blogger dan publish secara manual.

Dinonaktifkan : ini artinya fitur post dari email di nonaktifkan.

Email Pemberitahuan Komentar

Isi form yang ini dengan alamat email yang diinginkan, apabila ada yang berkomentar, maka akan di kirim pemberitahuan.

Cara Setting Menu Seluler dan Email di Blog

Email entri ke
Ini semacam Carbon copy (CC), jadi apabila anda posting akan otomatis di kirim ke alamat email tersebut.

Cara Setting Menu Seluler dan Email di Blog

Klik Simpan setelan untuk menyimpan pengaturan.

Cara Setting Menu Seluler
dan Email di Blog

Selesai.

Bila anda kurang begiru faham dengan penjelasan diatas, berikut adalah video tentang Mobile blogging :

Demikian Artikel yang sederhana ini Cara Membuat Website Pemula tentang Cara Setting Menu Seluler dan Email di Blog. Semoga artikel ini bermanfaat bagi anda. Tinggalkan jejakmu di komentar wahai para Blogger...

Cara Setting Menu Pos dan komentar di Blog

2014-08-25T15:04:00.001+07:00