Macam Bentuk Numbered List Dan Bullet List

Macam Bentuk Numbered List dan Bullet List yang dapat digunakan di blogger. Cara menggunakannya lihat dibawah ini.

1. Buatlah entri gres atau edit artikel lama
2. Dan Klik Numbered List 
3. Lalu klik bab HTML di sebelah Compose.
4. Terus ganti isyarat <ol> dengan salah satu isyarat dibawah.
5. Terakhir kembali ke Compose, maka tampilan numbered list akan berubah.
6. Untuk Bullet list, klik bullet list, kemudian lihat pada bab HTML 
7. Dan ganti isyarat <ul> dengan salah satu isyarat bentuk bullet list dibawah.

Macam Bentuk Numbered List

1. Bentuk Dasar, <ol> Tanpa Edit HTML

8. Mulai dari angka 8, Ganti isyarat <ol> dengan <ol start="8">
9. Setelah dienter, maka akan berlanjut ke nomor 9 dan seterusnya, ibarat goresan pena ini.

1. Dalam Bentuk Huruf Besar, <ol type="A">

1. Dalam Bentuk Huruf Kecil, <ol type="a">

1. Dalam Bentuk abjad atau angka romawi, <ol type="I">

1.  Angka romawi abjad kecil, <ol type="i">

5. Angka Romawi Besar dimulai dari angka 5, <ol type="I" start="5">
6. Setelah dienter, maka akan berlanjut ke angka romawi 5 dan seterusnya.

Macam Bentuk Bullet List

• Bentuk dasar bullet list, <ul> tanpa edit html

• Bentuk Bulat sederhana, <ul type="circle">

•  Bentuk Kotak, <ul type="square">

Dan yang terakhir, tips meratakan tampilan kiri-kanan Numbered list. Seperti teladan gambar dibawah ini.

Contoh gambar

Dari gambar diatas Tampilan numbered list, rata dengan kalimat yang ditulis ibarat menulis biasa diblog, diatur memakai justify rata kiri kanan kalimat. Standar blogger, tampilannya akan ada spasi jarak sehingga tidak sejajar dengan kalimat yang ditulis biasa tanpa numbered list.

Berikut sedikit trik cara semoga tampilan numbered list rata dengan goresan pena biasa.

1. Login ke blogger, dari halaman dasbor, pilih pengaturan template.
2. Terus edit html, dan cari isyarat ]]></b:skin> kemudian letakan isyarat berikut ini diatasnya.
.post ol {
padding:0px 24px 0px;
width:96%;max-width:100%;}
3. Keterangan kode: padding:0px 24px 0px; Rata Kiri dan width:96%;max-width:100%; Rata Kanan.
4. Jika belum rata, Ganti 24px dan 96% semoga rata dengan tampilan posting kamu.
5. Save template, selesai.

Pada dikala menulis, tampilan numbered list tetap ibarat biasa, tetapi jikalau sudah dipublikasikan, maka tampilannya akan berubah, rata dengan goresan pena biasa. Preview dulu goresan pena untuk melihat hasilnya.

Itulah sedikit tips trik menulis artikel memakai numbered list dan bullet list di blog, silakan baca juga tips trik menulis artikel di blog memakai numbered list yang disisipkan gambar, atau isyarat script ditengah-tengahnya. Semoga Bermanfaat.

Read More

Fungsi Margin Dan Padding Di Blog

Margin dan Padding merupakan arahan CSS yang dipakai untuk menciptakan jarak atau spasi. Perbedaanya yaitu margin dipakai pada bagian luar, dan padding pada bagian dalam. Dengan arahan margin kita sanggup merubah posisi dari widget yang kita inginkan, sedangkan padding, kita sanggup menggunakannya untuk bab dalam, menyerupai spasi antar text tulisan, jarak antara text dengan batas garis widget atas-bawah. Untuk lebih jelasnya lihat gambar dibawah ini.

Adapun kode-kode Css Dari Margin dan Padding yang sanggup kita gunakan diblog yaitu sebagai berikut:

 Margin

1. margin: 10px;  (10px Spasi atas-kanan-bawah-kiri).
2. margin: 0px 80px; (0px Spasi atas-bawah) (80px spasi kanan-kiri)
3. margin: 100px 10px 50px; (100px spasi atas) (10px spasi kanan-kiri) dan (50px spasi bawah)
4. margin: 90px 50px 20px 0px; (90px spasi atas) (50px spasi kanan) ( 20px spasi bawah) (0px spasi kiri)
5. Khusus untuk margin dengan arahan 4, sanggup kita tambahkan arahan - untuk merubah posisi dengan arah berlawanan, contoh: margin: margin:-55px -50px 0 0

Padding

1. padding: 10px;  (10px Spasi atas-kanan-bawah-kiri).
2. padding: 0px 80px; (0px Spasi atas-bawah) (80px spasi kanan-kiri)
3. padding: 100px 10px 50px; (100px spasi atas) (10px spasi kanan-kiri) dan (50px spasi bawah)
4. padding: 90px 50px 20px 0px; (90px spasi atas) (50px spasi kanan) ( 20px spasi bawah) (0px spasi kiri)

Dari kode-kode diatas sudah terlihat, yang membedakan Margin dan Padding hanyalah nama awalnya saja sedangkan yang lainnya sama.

Langsung saja, dibawah ini yaitu teladan penggunaan margin pada bab Header blog. Tampilan awal Header blog pertama.

1. Susunan elemen dari gambar diatas yaitu menyerupai dibawah ini.

2. Sekarang ke pengaturan template. Dan klik edit HTML.
3. Lalu cari satu persatu arahan dari susunan elemen dari langkah 1.

4. Pertama cari arahan Header, disini yang berjudul Fandra Juani. Gunakan Ctrl F untuk mempermudah pencarian. menyerupai dibawah ini.
5. Setelah ketemu, copy arahan bertanda merah diatas, kemudian pastekan di notepad, dan lanjutkan mencari arahan Laman Dan HTML/javascipt.
6. Setelah semuanya ketemu, tambahkan arahan margin untuk merubah posisi yang kita inginkan. menyerupai dibawah ini.
#Header{float:left}
#HTML1{float:right; margin:-115px -195px 0 0}
#PageList1{float:right; margin:-55px -50px 0 0}
7. Letakan arahan diatas ]]></b:skin>
8. Save template, selesai.
9. Tampillan Blog sehabis diberi arahan margin.

Sudah terlihat terperinci perbedaan tampilan blog, dari yg awalnya datar kebawah, kini datar kesamping. Karena ditambahkan arahan margin. kenapa aku beri judul fungsi margin dan padding di blog, alasannya yaitu padding dan margin sanggup dipakai pada semua bagian-bagian blog, jadi tidak hanya menyerupai yang aku contohkan. Yang terpenting yaitu kita cari dulu arahan dari bab yang akan kita edit atau kita ubah posisinya.

Keterangan arahan float

float dipakai biar posisi widget menjadi teratur, menyerupai teladan diatas, header float:left berarti header pada posisi kiri, dan laman(Pagelist1) dan HTML1 pada bab kanan. 

Silahkan berkreasi, maaf kalau tutorial dari aku ini kurang jelas. Jika ada pertanyaan silakan masukan komentar dibawah, semoga bermanfaat.

Read More

Tulisan Dengan Warna Yang Berbeda

Tulisan dengan warna yang berbeda. Setiap aksara memiliki warna yang berbeda. Bisa dipakai sebagai goresan pena di menu blog. Pada ketika goresan pena tersebut di klik, akan terbuka halaman baru.

Sebagai contoh: aku menciptakan sajian dengan judul Fandra Juani. Setiap aksara memiliki warna yang berbeda-beda. Dan pada ketika diklik akan terbuka halaman ihwal saya. Lihat contoh dibawah ini.

• FANDRA JUANI

Untuk lebih jelasnya ihwal cara menciptakan goresan pena dengan warna yang berbeda di blog. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger. Dari halaman dasbor pilih pengaturan tata letak.
2. Lalu, klik tambahkan Gadget. Dan pilih HTML/Javasript.
3. Selanjutnya copi isyarat dibawah ini.
<style>
#tentang{background:transparent}
#tentang ul{float:left}
#tentang ul li{float:left;list-style:none}
#tentang ul li span{float:left;text-transform:uppercase;font-family:Ravie;font-size:12px;text-shadow:2px 2px 5px #1780dd;font-weight:bold;padding:0}
d{font-size:180%;color:DarkCyan}
g{color:red}
h{color:blue}
i{color:#ee3e80}
j{color:pink}
k{color:black}
l{font-size:180%;color:violet}
m{color:DarkCyan}
n{color:blue}
o{color:pink}
r{color:red}
#tentang ul li span:hover{background:transparent;font-weight:bold;color:#aaa;font-size:14px;font-family:Calligraffitti;text-shadow:2px 2px 3px #3af}
</style>
<div id='tentang'>
<ul>
<li><a href='http://fandrajuani.blogspot.com/p/blog-page_25.html' title='Fandra Juani'><span><d>F</d><g>a</g><h>n</h><i>d</i><j>r</j><k>a</k> <l>J</l><m>u</m><n>a</n><o>n</o><r>i</r></span></a></li>
</ul>
</div>
4. Dan pastekan di Gadget HTML/Javascript Tadi. Save, kemudian tempatkan gadget kemanapun yang kalian inginkan. Selesai.

Keterangan Kode Diatas:

• #tentang ul li span { fungsinya untuk mengatur tebal fon-family dan ukuran aksara yang digunakan.
• #tentang ul li span:hover{ fungsinya untuk mengatur tebal fon-family dan ukuran aksara pada ketika di sentuh kursor.
• Kode Merah d hingga r. untuk mengatur warna tiap² huruf.
• Kode Biru ialah kalimat yang akan ditampilkan.
• Jadi Intinya setiap aksara memiliki isyarat tersendiri. <d></d> untuk f dan seterusnya. 
• Terakhir, jangan lupa diganti  http://fandrajuani.blogspot.com/p/blog-page_25.html dengan alamat URL kalian sendiri.

Contoh yang aku berikan ini jumlah hurufnya ada 11, jadi ada 11 isyarat tersendiri di setiap hurufnya. Jika jumlah aksara kalian lebih dari 11. Tambahkan isyarat yang lain, contohnya <z></z> ,<t></t>.

Jika aksara yang ingin kalian buat kurang dari 11, silakan dikurangi saja beberapa isyarat diatas. Misal aksara kalian 6, maka gunakan isyarat merah d hingga k saja. Kode l sampai r hapus.

Begitu juga untuk isyarat biru gunakan <d>F</d><g>a</g><h>n</h><i>d</i><j>r</j><k>a</k> saja. Kode <l>J</l><m>u</m><n>a</n><o>n</o><r>i</r> hapus.

Itulah sedikit cara menciptakan goresan pena dengan warna yang berbeda yang sanggup dipakai di sajian blog. Semoga Bermanfaat.

Read More

Tips Dan Trik Menulis Di Blog

Sebelumnya saya sudah memperlihatkan cara menulis blog dengan memasukan gambar dan juga kotak script, ditengah-tengah Numbered list dan Bullet list. Dan kali ini perihal Tips dan trik menulis di blog memakai akar quadrat/pangkat atas, pangkat bawah, keterangan goresan pena ketika disentuh mouse dan juga garis pemisah antar paragraf.

Sama ibarat artikel sebelumnya, kita akan menulis blog dengan mengedit kalimat artikel, pada bab HTML nya. Untuk lebih jelasnya, silakan ikuti beberapa cara penggunaan isyarat dibawah ini, untuk menambah pilihan kita dalam menulis blog.

Cara menuliskan akar/quadrat atau pangkat diblog, contoh: 4² dan CO_2.

• Membuat pangkat atas, tulislah dibagian HTML 4² maka kesannya akan menjadi ibarat ini. 4².
• Untuk Pangkat Bawah, tulislah dibagian HTML  CO₂ kesannya CO_2.

Cara menciptakan Keterangan goresan pena ketika disentuh Mouse. Contoh: Arahkan mouse ke goresan pena ini, Blogger

• Buatlah di bab HTML <abbr title="Tips dan Trik Menulis di Blog ">Blogger </abbr> maka kesannya akan ibarat contoh: Blogger
• Atau tulis ibarat ini,  <acronym title="Tips dan Trik Menulis di Blog ">Blogger </acronym> maka kesannya juga akan ibarat teladan Blogger

Cara menciptakan garis bawah pemisah antar kalimat. Masukan isyarat <hr /> pada kalimat yang akan dipisah.

Contoh Penulisan di HTML:

SATU<br />

<hr />

DUA<br />

Maka kesannya akan ibarat ini dibagian Compose.

SATU

---

DUA

Sebenarnya masih banyak lagi cara yang sanggup kita lakukan dalam menulis blog, tapi disini yang saya tuliskan ialah beberapa teladan yang gampang untuk diingat saja dan mungkin akan sering kita gunakan. Silakan dicoba cara² diatas, sebagai suplemen pilihan dalam menulis blog anda. Semoga Bermanfaat.

Read More

Fungsi Border Dan Penggunaannya Di Blog

Fungsi border dan cara pengguaannya di blog. Border merupakan arahan css yang dipakai untuk menciptakan kotak di blog atau website lainnya. Salah satu pola penggunaan border ialah pembuatan kotak script, untuk menempatkan arahan script di posting blog. Berikut contohnya.

1.  Buka entri gres atau post usang kamu.
2.  Klik HTML kemudian masukan arahan sricpt dibawah ini.
<div style="border: 1px #cccccc solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 80px; text-align: left;">.kode script disini.</div>
3. Lalu klik pada bab Compose. Maka tampilannya akan menyerupai ini.
.kode script disini.
4. Klik .kode script disini. hapus dan ganti dengan arahan script yang kalian masukan.

Keteranga arahan langkah 2: 

border: 1px ketebalan kotak, #cccccc warna garis kotak, solid(bentuk kotak)
background-color:#ffffff; warna kotak
height: 80px; tinggi kotak yang akan ditampilkan diposting blog.
overflow: auto; akan ada scroll dikotak, kalau sudah melebihi tinggi kotak height: 80px;

Berikut ini ialah bentuk kotak lain yang sanggup digunakan, untuk menggantikan bentuk solid.

dotted

dashed

double

groove

ridge

inset

outset

Satu lagi penggunaan warna yang berbeda disetiap border, atas,kanan,bawah,kiri.

untuk menciptakan border menyerupai ini, arahan yang digunakan:
 <div style="border-top:2px solid green;border-bottom:2px solid red;border-left:2px solid #1780dd;
border-right:2px solid orange; padding: 10px;background-color:#ffffff;overflow: auto; height: 200px;
text-align: left;">.kode script disini.</div>
 

Contoh-contoh diatas ialah penggunaan border didalam posting, berikut ini ialah penggunaan border di bab sidebar blog.

.sidebar .widget h2 {
 border-top:2px solid red;border-bottom:2px solid green;border-left:2px solid orange;border-right:2px solid #1780dd; padding: 10px;background-color:#ffffff;
}

Contoh gambar:

Artikel diatas merupakan sedikit pola penggunaan border diblog, masih banyak yang sanggup diberi border diblog, yang terpenting kita mengetahui arahan pada bab mana yang akan kita beri border. Semoga bermanfaat untuk anda.

Read More

Fungsi Fixed Dan Cara Menggunakannya

Belajar fungsi arahan Fixed dan cara menggunakannya diblog. Fixed merupakan arahan css yang berarti menetapkan, dalam penggunaannya, fixed akan menciptakan posisi widget atau gadget menjadi menetap. Atau posisinya akan tetap disitu² saja. Walaupun kita mengarahkan mouse hingga kebawah. Untuk lebih jelasnya silakan lihat gambar dengan goresan pena Contoh penggunaan arahan fixed dibawah ini dibawah kiri. 

Dari contoh, posisi gambar tetap, walaupun mouse diarahkan ke atas atau bawah. Bagaimana membuatnya, silakan baca artikel cara membuat hidangan melekat diblog.

Setelah tamat membaca dan mencoba cara menciptakan hidangan melekat diblog. Sekarang aku beri pola penggunaan arahan fixed pada bab header blog, sedikit lebih rumit dari cara sebelumnya. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
2. Lalu klik Desainer Template > tingkat lanjut > Tambahkan CSS.
3. Copy arahan dibawah ini. Lalu pastekan di kotak pada Tambahkan CSS.
#header {
  width: 100%;
  position: fixed;
top: 0px;
  left: 0px;
  right: 0px;
height: 88px;
margin:0px 0px 0px 0px;
padding:10px 0px 0px 10px;
z-index: 99;
white-space: nowrap;
background-color: #33aaff;
background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #1780dd 100%);
  box-shadow: 0px 2px 0px rgb(14, 90, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
4. Maka tampilan header blog akan menetap, tapi masalahnya jikalau header kita beri fixed, bab posting(main) dan juga sidebar, posisinya akan naik. Ini dikarenakan posisi pertama dalam sebuah template itu ialah header, dikala header diberi fungsi fixed, maka akan ada kekosongan diposisi pertama, sehingga posisi kedua(main dan sidebar) akan naik menjadi posisi pertama.
5. Untuk mengatur main(posting) dan sidebar turun, tambahkan arahan berikut dibawah arahan dari langkah 3 tadi.
#main{margin:40px 0px 0px 0px;}
.sidebar{margin:40px 0px 0px 0px;}

Keterangan kode:
#main untuk bab posting
.sidebar untuk bab widget kanan dan kiri blog.
40px 0px 0px 0px untuk mengatur posisinya, atas, kanan, bawah, kiri.
6. Atur sesuai dengan yang kalian inginkan. Setelah itu gres save template. Selesai.

Sekarang, Pertanyaannya, berapa banyak widget yang anda gunakan diblog??? Jika kita hanya mengatur header saja, apalagi memakai background warna. Maka widget/gadget lain yang ada di bab header akan tertutup/tidak terlihat.

Solusinya, kita harus memperlihatkan fungsi fixed juga pada gadget lain yang ada diheader. Contoh: Misalkan anda memakai 2 Gadget lain pada bab header, menyerupai pola dibawah ini.

1. Gadget Menu Laman.
2. Gadget Kotak search.

Kita cari dulu kode id dari kedua Gadget/widget diatas. Cara mencarinya dapat dibaca di menciptakan cara menciptakan hidangan menempel diblog. Berikut pola dari kedua arahan id diatas:

1. PageList1
2. CustomSearch1

Setelah ketemu semua kode, selanjtunya menambahkan satu persatu arahan tersebut dengan fungsi fixed. Contoh Dari Keseluruhan arahan diatas.

#PageList1{
width: 100%;
  position: fixed;
  top: 0px;
  left: 790px;
  right: 0px;
  height: 30px;
z-index: 99;
white-space: nowrap;
}

#CustomSearch1{
width:30%;
position:fixed;
top:0px;
right:0px;
margin:40px 0px 0px 0px;
z-index:99;
white-space:nowrap}

Jika sudah memasang background pada header, gadget yang lain tidak perlu diberi background. Cukup dengan mengatur posisinya saja, atur arahan width: top, right, dan margin untuk mengatur posisi widget. Semoga Bermanfaat.

Contoh penggunaan arahan fixed dibawah ini

Read More

Cara Memasukan Arahan Html, Css, Script Diposting Blog

Untuk memasukan isyarat html, css, script diposting blog bekerjsama sanggup mampu ditulis secara eksklusif menyerupai kita menulis artikel menyerupai biasa. Tapi dibeberapa blog ada yang tidak sanggup menuliskannya secara langsung, menyerupai menulis isyarat ]]></b:skin>. Pada ketika diketik mungkin bisa, tapi pada ketika dipublikasikan, yang tampil hanya isyarat ]]> ini saja.

Kejadian ini aku alami pada ketika memakai template simple. Terus aku cari tau, kesalahannya dimana. Ternyata kesalahannya ada di pengaturan Setelan entri yang ada disebelah kanan pada ketika kita menulis artikel. Jika kau mengalami hal yang sama. Buka entri baru/atau entri usang kamu, kemudian klik pengaturan Setelan Entri > Pilihan > mode tulis > pilih Tunjukan HTML apa adanya dan klik selesai. Maka kode² yang kita tulis secara eksklusif diposting blog akan terlihat.

Selanjutnya, biar tampilan isyarat html, css, script diblog kita terlihat rapi. Kita sanggup memasukannya ke dalam satu kotak script. Berikut caranya.

Pembuatan kotak script

1. Pertama, copi isyarat dibawah ini, kemudian pastekan diatas ]]></b:skin>  
.kotak {
padding:10px;
margin-top:5px;
margin-bottom:10px;
border-left: 10px solid #0b5394;
border-top:1px solid #ddd;
border-bottom:1px solid #eee;
border-right:1px solid #eee;
box-shadow:0px 3px 3px #aaaaaa;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBgB7_-kfWSrMD_cd_KqMSADAEc6kbmk2UUHwz9KrPradQ8naLCXUE3t5YHGSwuCJIL4oIvAu_0Vp4ud7sQabACf9MJ0WkMAoVx9pux-NXZunlWjpyoFKXwQMSaBNicTTEFZeI_hYlOt5r/s150/Code%2520HTML%2520css.png)
no-repeat center center;}
2. Save template. Selesai.

Cara menciptakan kotak script didalam posting blog

1. Buatlah entri gres atau edit artikel usang kamu. 
2. Lalu klik bagian HTML disebelah Compose.
3. Lalu ketikan isyarat ini.
<div class="kotak">
klik disini dan ganti dengan isyarat script yang ingin kalian masukan
</div>
4. Lalu kembali ke Bagian Compose dan ganti goresan pena klik disini dan ganti dengan isyarat script yang ingin kalian masukan 
5. Setelah itu klik Pratinjau untuk melihat tampilannya. Selesai.

 Selanjutnya masuk ke tahap overflow, menciptakan kotak dengan scroll

1. Cara menciptakan Kotak scroll kebawah. Sama menyerupai cara diatas, kemudian tambahkan isyarat style="overflow: auto; height: 80px; didalamnya. Contohnya menyerupai dibawah ini.
<div class="kotak" style="overflow: auto; height: 80px;" >
Contoh kotak dengan scroll
</div>


2. Cara menciptakan kotak scroll kesamping.
Contoh penggunaan kotak denga scroll kesamping. Copi isyarat dibawah ini dan tempatkan dibagian HTML menyerupai cara diatas.

<div class="kotak" style="overflow-x: scroll; overflow-y: hidden; padding: 10px; width: 540px;" >
<p style="width:450%;">Masukan isyarat disini.
</p></div><br />

Pada ketika kita menulis artikel warna dari kotak script tidak terlihat, api pada ketika kita Pratinjau atau publikasikan, barulah kotak dengan warna tersebut akan terlihat. Agar kita tidak bingung, sebaiknya pada ketika menuliskan isyarat kotak di HTML(sebelah compose), tambahkan juga goresan pena dimana kawasan memasukan kodenya. Contoh:

<div class="kotak">
Tempat memasukan isyarat script, html, css dan lain-lain.
</div>

Dengan begitu, goresan pena yang akan tampil dihalaman Compose yaitu goresan pena Tempat memasukan isyarat script, html, css dan lain-lain. Tinggal kita klik kemudian ganti dengan isyarat yang ingin kita masukan. Selesai.

Silakan dibaca juga artikel perihal fungsi border dan penggunaannya diblog yang sanggup dipakai untuk mengganti tampilan kotak script dengan tampilan lain. Semoga bermanfaat.

Read More

Cara Menciptakan Hidangan Html Dan Css

Cara menciptakan sajian html dan css serta cara mengisi sajian tersebut dengan link atau url yang kita inginkan. Perlu diketahui bahwa sajian terdiri dari instruksi HTML sebagai pokok utama dari sajian dan CSS sebagai penghiasnya. Akan aku coba jelaskan sedikit demi sedikit.

---

Kode dasar HTML dari sebuah menu, kira-kira ibarat ini.

---

<div id="menu">
<ul>
<li><a href="URL alamat web">Beranda</a></li>
</ul>
</div>

Maka kesannya akan menjadi ibarat ini.

• Beranda

Selanjutnya kita coba tambahkan sajian yang lainnya. Seperti Profil, Contact, dan Daftas isi.

<div id="menu">
<ul>
<li><a href="URL alamat web">Beranda</a></li>
<li><a href="URL alamat web">Profil</a></li>
<li><a href="URL alamat web">Contact</a></li>
<li><a href="URL alamat web">Daftas Isi</a></li>
</ul>
</div>

Maka kesannya akan menjadi ibarat ini.

• Beranda
• Profil
• Contact
• Daftar Isi

Dari pola diatas, setiap sajian memiliki instruksi sendiri.
Seperti Beranda kodenya: <li><a href="URL alamat web">Beranda</a></li>.
Jadi jikalau ingin menambahkan sajian lagi, kita sanggup menambahkan instruksi dengan format
<li><a href ="URL address">Nama sajian yang akan dibuat</a></li>

Dari instruksi HTML sajian diatas. Menu akan berbentuk menurun/vertical dengan bullet-list disamping kirinya. Sekarang masuk ke bab CSS/Penghias menu. Dari instruksi CSS inilah kita sanggup menciptakan sajian menjadi bentuk Horizontal atau memanjang kesamping. Mengatur warna tulisan, warna background, jarak antar goresan pena dan lain-lainnya. Kode Css akan berjalan sesuai dengan instruksi HTML yang kita buat.

Untuk cara memasangnya di blog, ke pengaturan tata letak > klik tambahkan gadget > pilih HTML/Javascipt, kemudian masukan instruksi HTML dan CSS kedalamnya Dengan format ibarat dibawah ini.

<style>
kode Css
</style>
kode html

Lalu Save, selesai.

Lanjut ke bab Css. Seperti pola instruksi HTML diatas. Kita menciptakan sajian dengan Kode id=menu maka dikode Css nya juga harus menu. Contoh:

#menu { background:#eee;border:1px solid #444444;}

Maka kesannya akan menjadi ibarat ini.

• Beranda
• Profil
• Contact
• Daftas Isi

Selanjutnya menghilangkan bullet list. Tambahkan instruksi #menu ul {list-style:none;} Maka kesannya akan menjadi ibarat ini.

• Beranda
• Profil
• Contact
• Daftas Isi

Mengatur jarak antar tulisan. Tambahkan instruksi #menu ul li {padding:5px;} hasilnya.

• Beranda
• Profil
• Contact
• Daftas Isi

Mengatur warna,ukuran,tebal goresan pena tambahkan instruksi Css #menu ul li a{color:#aaaaaa;font-size:12px;font-weight:bold;} Hasilnya:

• Beranda
• Profil
• Contact
• Daftas Isi

Mengatur warna goresan pena dikala disentuh mouse. tambahkan instruksi #menu ul li a:hover{color:#aaa;} Hasilnya.

• Beranda
• Profil
• Contact
• Daftas Isi

---

Jadi instruksi keseluruhan dari instruksi HTML dan CSS diatas ialah ibarat ini.

---

<style>
#menu { background:#eee;border:1px solid #444444;}
#menu ul {list-style:none;}
#menu ul li {padding:5px;}
#menu ul li a{color:#000;font-size:12px;font-weight:bold;}
#menu ul li a:hover{color:#aaa;}
</style>

<div id="menu">
<ul>
<li><a href="http://fandrajuani.blogspot.com/">Beranda</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/blog-page_25.html">Profil</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">Contact</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html">Daftas Isi</a></li>
</ul>
</div>

---

Sekarang ke tahap pembuatan sajian horizontal. Kode HTML nya sama ibarat cara diatas, yang berbeda hanyalah instruksi Css nya kita tambahkan instruksi float;left pada bab #menu ul li {padding:5px;float;left; } dan juga instruksi height:40px; pada bab #menu { background:#eee;border:1px solid #444444;height:40px;} . Contoh:

---

<style>
#menu { background:#eee;border:1px solid #444444;height:40px;}
#menu ul {list-style:none;}
#menu ul li {padding:5px;float;left}
#menu ul li a{color:#000;font-size:12px;font-weight:bold;}
#menu ul li a:hover{color:#aaa;}
</style>

<div id="menu">
<ul>
<li><a href="http://fandrajuani.blogspot.com/">Beranda</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/blog-page_25.html">Profil</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">Contact</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html">Daftas Isi</a></li>
</ul>
</div>

---

HASILNYA

---

• Beranda
• Profil
• Contact
• Daftas Isi

Dari contoh2 diatas, kita sanggup melihat perbedaan antara sajian horizontal dan vertical terletak pada instruksi Cssnya sedangkan instruksi HTML nya tetap sama. Silakan berkreasi sendiri. Artikel diatas hanyalah sedikit tutorial sederhana dari saya, yaitu perihal dasar pembuatan sajian memakai instruksi HTML dan Css, yang sanggup anda kembangkan sendiri sesuai dengan impian anda. Semoga Bermanfaat.

Read More

Cara Menciptakan Background Gradient 2 Warna

Background gradient fungsinya untuk menciptakan background warna dengan memakai 2 warna sekaligus, dengan perbandingan persen disetiap warnanya. Makara misalkan kita ingin memakai warna putih dan biru dibackground blog kita. Maka kita sanggup mengatur warna putih dibagian atas dan warna biru dibagian bawah. Berbeda dengan pengaturan warna biasa yang hanya satu warna.Contoh penggunaannya menyerupai dibawah ini.

---

Background 1 warna dengan memakai warna biru.

---

Warna Biru Saja

---

Background 2 warna dengan memakai warna biru dan putih.

---

Warna Biru dan Putih

Selanjutnya yaitu cara menciptakan dan menerapkannya diblog. Sebagai percobaan kau sanggup coba edit warna background dari halaman posting blog. Ke pengaturan tata letak > klik Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan isyarat background posting berikut kedalamnya.

.post{
background: -moz-linear-gradient(center top , #ffffff 40%, #1780dd 100%);}

Lalu lihat perubahan background halaman posting, warna putih akan berada diatas dan biru ada dibagian bawah.

---

Berikut jenis2 pengaturan warna gradient 2warna yang sanggup kita gunakan.

---

Atas - Bawah
background: -moz-linear-gradient(top , #ffffff, #1780dd);

Kiri - Kanan
background: -moz-linear-gradient(left , #ffffff, #1780dd);

Warna Berhenti putih-biru-putih-biru-putih
background: -moz-linear-gradient(left , #ffffff, #1780dd, #ffffff, #1780dd, #ffffff);

Warna Berhenti putih-biru-putih-biru-putih dengan persen%
background: -moz-linear-gradient(left , #ffffff, #1780dd 5%, #ffffff, #1780dd 95%, #ffffff);

Warna putih dikiri-kanan dan biru ditengah
background: -moz-radial-gradient(circle, #1780dd, #ffffff);

Posisi dan Ukuran
background: -moz-radial-gradient(80% 20%, closest-corner, #1780dd, #ffffff);

Ukuran: 80% untuk warna putih dan 20% untuk warna biru
Posisi: closest-corner pada penggalan atas sanggup diganti dengan isyarat

closest-side
closest-corner
farthest-side
farthest-corner
contain
cover

Silakan berkreasi sendiri, dengan kode2 diatas dalam mendesain blog anda semoga terlihat lebih menarik. Untuk cara penggunaan dibagian lain, menyerupai pada penggalan header, sidebar atau keseluruh body halaman blog, kau sanggup baca di artikel cara mengganti background blog dengan gambar diartikel itu, ada isyarat dari bagian2 blog, yang sanggup kau gunakan untuk diberi background 2 warna menyerupai pola diatas.
Catatan: Gradient 2 warna ini tidak sanggup dilihat di browser google chrome, sebabnya aku belum tau, kalau sudah tau aku akan tambahkan di artikel ini, untuk di mozilla bisa, warna gradient 2 warna terlihat.Semoga sanggup bermanfaat untuk anda.

Read More

Cara Buat Kotak Bayangan Diblog

Cara menciptakan kotak bayangan diblog. Maksudnya yaitu kita sanggup menciptakan bayangan pada kotak yang ada diblog menyerupai pada bab sidebar, posting, header dan juga pada bab lain-lainnya. Contoh kotak bayangan menyerupai dibawah ini.

---

Untuk cara menerapkannya ke blog, kita coba edit pada bab sidebar blog yang ada disebelah kanan/kiri blog. Caranya ikuti langkah-langkah dibawah ini.

---

1. Login keblogger, kemudian kepengaturan Tata Letak.
2. Selanjutnya klik Desainer Template > Tingkat lanjut > Tambahkan Css. Dan masukan instruksi ini kedalamnya.
.sidebar .widget {box-shadow: 0px 15px 15px #1780dd;}
3. Maka alhasil akan menyerupai pola kotak bayangan diatas.
4. Dan klik Terapkan ke blog, untuk menuntaskan editan.

---

Berikut ini beberapa pola instruksi box-shadow atau kotak bayangan yang sanggup anda gunakan diblog.

---

box-shadow: 0px 0px 15px #1780dd;

box-shadow: 5px 5px 5px#1780dd;

box-shadow: -5px -5px #1780dd;

box-shadow: inset 0 0 10px;

box-shadow: 5px 5px 5px 5px #1780dd;

Silakan dicoba sendiri diblog anda, dengan memakai kode2 diatas. Untuk mengedit pada bab yang lain silakan baca artikel cara mengganti blog dengan gambar atau cara menciptakan goresan pena bayangan diblog disana ada kode2 bab dari blog, yang sanggup anda gunakan juga untuk diedit. Itulah sedikit cara mendesain blog memakai instruksi box-shadow atau kotak bayangan yang sanggup dipakai diblog. Semoga sanggup bermanfaat untuk anda.

Read More

Cara Menciptakan Background Warna Transparan

Background warna transparan, yang berarti background dengan memakai warna transparan, tetapi background aslinya juga terlihat. Kaprikornus background awal juga terlihat, misalkan background awal kita memakai gambar, dan background warna transparan kita warnanya hitam. Maka warna transparan hitam dengan background gambar juga akan terlihat.

Seperti pola gambar diatas,background dasar yang dipakai yaitu background gambar, dan background trasnparanya berwarna hitam. Tapi warna hitam tersebut tidak sepenuhnya hitam. Sedikit hitam dan background gambar awalnya tetap terlihat. Berikut ini yaitu beberapa instruksi warna background yang sanggup dipakai untuk menciptakan background warna transparant.

background:rgba(0,0,0, 0.3);

background:rgba(0,0,0, 0.8);

Sebelumnya aku jelaskan sedikit wacana instruksi diatas.

• Ketiga instruksi awal dipakai untuk mengatur instruksi warna. instruksi warna 0,0,0 yaitu warna dasar Hitam.
• Untuk instruksi terakhir 0.3 dan 0.8 dipakai untuk mengatur ketebalan dari warna hitam 0,0,0 tadi. Semakin besar instruksi terakhir, maka akan semakin hitam. Kode terakhir ini hanya hingga instruksi 1. Contoh:0,0,0, 1.

Untuk mengganti dengan warna lain, kau sanggup coba instruksi dibawah ini.

Untuk warna merah - background:rgba(204,0,0, 0.6);

Untuk warna pink - background:rgba(204,0,204, 0.8);

Untuk warna biru - background:rgba(0,0,204, 0.8);

Untuk warna Hijau - background:rgba(0,204,0, 0.8);

Untuk warna Kuning - background:rgba(204,204,0, 0.8);

Untuk warna Orange - background:rgba(255,102,0, 0.8);

Dan masih banyak lagi warna yang lainnya. Untuk melihat instruksi warna, kau sanggup lihat diphotoshop, kemudian klik pada bab set foreground color(gambar kotak untu ganti warna). Lalu lihat instruksi pada bab RGB nya.

Seperti pola gambar diatas, pertama klik dulu bab kotak yang sudah aku beri tanda merah sebelah kiri, maka akan terbuka Color Picker, dan copi 3 instruksi RGB yang bertanda kotak merah itu untuk dipakai diwebsite.

Dan yang terakhir yaitu cara penerapannya di blogger. Sebagai pola kita akan coba mengedit pada bab halaman posting blog. Caranya ikuti langkah-langkah dibawah ini.

1. Login ke blogger, pada halaman Dasbor pilih pengaturan Tata Letak.
2. Selanjutnya klik Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan instruksi halaman posting ke dalamnya.
.post{border:1px solid #ddd; background:rgba(0,204,0, 0.5);}
3. Dan lihat perubahannya, background nya itu aku beri warna hijau, dengan ketebalan warna 0.5 balasannya menyerupai gambar dibawah ini.

Untuk mengatur bab lainnya, coba kau baca di artikel cara mengganti background blog dengan gambar. Disana ada beberapa instruksi bab blog yang sanggup kau gunakan. Semoga Bermanfaat.

Read More

Cara Menciptakan Tabel Diblog

Cara menciptakan tabel diblog. Akan kita mulai dari Tabel sederhana terlebih dahulu.
Silakan buka entri baru, kemudian klik pada bab HTML disebelah Compose.
Selanjutnya ketikan instruksi berikut ini.

<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>

Setelah itu klik bab Compose, Maka kesannya akan menjadi menyerupai ini.

1

2

3

Selanjutnya menciptakan tabel 2 baris

<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>

<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>

Hasilnya

1	2	3
4	5	6

Dari tumpuan diatas, kita sanggup melihat bahwa instruksi tr dipakai untuk menciptakan tabel ke bawah, sedangkan instruksi td dipakai untuk tabel kesamping. Kaprikornus jikalau ingin menambahkan jumlah tabel, silakan tambahkan instruksi tr dan instruksi td sesuai dengan keinginan.

Selanjutnya menciptakan Tabel dengan warna background, lebar tabel serta warna goresan pena dengan cara menambahkan instruksi bgcolor="red" border="1" style="color: white; width: 400px;" pada bab <table>. Contoh:

<table bgcolor="red" border="1" style="color:white;width:400px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>

Hasilnya

1	2	3
4	5	6

Sekarang kita coba memakai tabel dengan judul diatasnya, dan juga mengatur lebar disetiap judul tabel. Tambahkan instruksi <th>Judul</th> Contoh:

<table bgcolor="red" border="1" style="color: white;">
<tbody>
<tr>
<th width="40">No</th>
<th width="400">Nama</th>
<th width="400">Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Fandra Juani</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>Juani Fandra</td>
<td>6</td>
</tr>
</table>

Hasilnya

No	Nama	Kelas
1	Fandra Juani	3
2	Juani Fandra	6

Bisa juga dengan memakai background yang berbeda. Contoh:

<table bgcolor="white" border="1" style="color: black;">
<tr>
<th bgcolor="blue" width="40">No</th>
<th bgcolor="green" width="400">Nama</th>
<th bgcolor="red" width="400">Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Fandra Juani</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>Juani Fandra</td>
<td>6</td>
</tr>
</table>

Hasilnya

No	Nama	Kelas
1	Fandra Juani	3
2	Juani Fandra	6

Untuk mengatur posisi goresan pena kau sanggup gunakan Tool Alignment yang ada dipilihan tool pada ketika kita menulis di entri. Sebenarnya masih banyak instruksi dengan fungsi lain yang sanggup dipakai untuk menciptakan tabel diblog, insyaallah nanti akan aku coba buat diartikel lainnya. Silakan dicoba sendiri dan Semoga sanggup bermanfaat untuk anda.

Read More

Cara Menciptakan Link Terbuka Di Tab Baru

Kali ini aku akan coba bagikan isyarat HTML yang berfungsi untuk menciptakan semua link yang ada di blog terbuka ditab gres pada dikala diklik. Dengan begitu pengunjung blog akan lebih gampang untuk membuka link² yang ada diblog kita, jadi tidak perlu lagi klik kanan open link in new tab.

Link ialah alamat url dari suatu halaman website, misalnya menyerupai ini fandrajuani.blogspot.com. Langsung saja kebagian inti, cara menciptakan link terbuka ditab baru. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
2. Dan klik Edit HTML, kemudian cari isyarat </head> gunakan Ctrl + F untuk memudahkan pencarian.
3. Setelah ketemu, masukan isyarat berikut ini diatasnya.
<base target='_blank'/>
4. Terakhir, save template. Selesai.

Mudahkan, dengan menambahkan isyarat <base target='_blank'/>, maka seluruh link yang ada di blog kita akan terbuka dihalaman atau tab gres ketika diklik. Selain untuk memudahkan pengunjung untuk membuka setiap link yang ada di blog, isyarat ini juga akan meningkatkan total tayangan laman dari blog kita. 

Atau bila ingin menciptakan link terbuka ditab baru, tapi tidak disemua link di blog. Kamu dapat tambahkan isyarat target="_blank" atau target='_blank' di isyarat link HTML kamu. Contoh:

<a href="http://fandrajuani.blogspot.com/p/blog-page_25.html" target="_blank" title="Cara menciptakan link terbuka di tab baru">Profil</a>

Hasilnya: Silakan klik link ini Profil

Silakan dibaca juga artikel2 aku yang lainnya seputar seo menyerupai artikel ihwal mencar ilmu seo untuk blogger pemula, tips dan mempercepat loading blog dan juga cara mempercepat loading blog lanjutan. Sedikit info seo kepanjangannya search engine optimization, fungsinya supaya blog kita dapat masuk di halaman google search, jadi ketika ada yang mencari artikel yang berkaitan dengan judul artikel yang telah kita buat. 

Maka blog kita akan muncul, walaupun tidak dihalaman pertama, dapat jadi dihalaman kedua dan seterusnya. Seiring waktu berjalan, bila artikel kita sudah sering dikunjungi. Maka nantinya akan masuk kehalaman pertama dari google search, sesuai dengan kata kunci yang dimasukan orang ke dalam mesin pencari google search. Terima kasih telah berkunjung dan semoga artikel diatas dapat bermanfaat untuk anda.

Read More

Cara Membatasi Jumlah Artikel Di Label

Cara membatasi jumlah artikel di label atau kategori. Membatasi yang berarti akan ada batas jumlah artikel yang akan kita tampilkan. Seperti halnya halaman awal blog, kita sanggup membatasi jumlah posting menjadi 4 atau 5 sesuai dengan yang kita inginkan. Dengan cara mengatur jumlahnya di pengaturan Tata Letak bab Posting.

Bagaimana dengan halaman Label. Normalnya bila kita membuka halaman label, maka semua artikel dengan label yang sama akan terbuka. Tapi dengan menambahkan beberapa arahan di URL dari label atau kategori kita sanggup mengatur tampilan jumlahnya.

Dari link diatas, anda akan melihat artikel2 dengan label desain blog, jumlahnya ada 8, dan dibawahnya ada page navigation yang bertuliskan beranda dan posting lama. Jika posting usang diklik maka akan terbuka artikel2 lainnya yang berlabel desain blog.

Diblog ini jumlah artikel dengan label desain blog sudah mencapai 50an lebih, kalau tampilannya tidak dibatasi, maka artikel yang akan tampil ketika dibuka sekitar 20an, diatur oleh blogger sendiri. Dan niscaya usang membukanya. Contohnya sanggup di klik di link ini Desain blog tanpa pengaturan batas jumlah tampilan. Langsung saja, Cara membatasi jumlah artikel di Label silakan ikuti langkah-langkah dibawah ini.

1. Login ke blogger, kemudian buka halaman blog kamu.
2. Lalu klik salah satu label yang kau miliki. Lalu copi URL di address kafe dan pastekan ke Notepad.
3. Selanjutnya tambahkan arahan ?max-results=8 dibelakangnya. Contoh:
http://fandrajuani.blogspot.com/search/label/Desain%20Blog

dan tambahkan arahan ?max-results=8 akhirnya ibarat dibawah ini.

http://fandrajuani.blogspot.com/search/label/Desain%20Blog?max-results=8
4. Sekarang, cara memasangnya di blog. misalnya di sajian laman. Silakan ke pengaturan Laman > Laman Baru > Alamat Web > kemudian masukan Alamat web (URL) dan beri judul sesuai dengan nama label. Save, Selesai.

Ganti Kode 8 dari arahan ?max-results=8 dengan jumlah yang diinginkan, misalkan 5 atau 4. Silakan diatur sendiri sesuai dengan keinginan. Itulah sedikti tips trik wacana Cara membatasi jumlah artikel di Label. Semoga sanggup bermanfaat untuk anda.

Read More

Cara Merubah Warna Block Di Blog

Cara merubah warna block di blog. Block disini maksudnya, warna goresan pena dan juga background pada dikala kita klik goresan pena kemudian kita tahan dan tarik sehingga ada warna yang terlihat. Block biasanya dipakai untuk mengcopy goresan pena yang ada diwebsite atau blog.

Block sederhananya berwarna biru langit di backgroundnya dan juga warna hitam ditulisannya. Disini kita akan mencoba merubah warna dari background dan warna tulisannya dengan warna yang kita inginkan. Contohnya menyerupai gambar dibawah ini.

Seperti pola gambar diatas. Background goresan pena dikala di block berwarna hitam dan juga warna tulisannya berwarna putih. Dan kau dapat menggantinya dengan warna yang kau inginkan. Cara membuatnya silakan ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
2. Lalu klik edit HTML dan cari aba-aba ]]></b:skin> kemudian masukan aba-aba berikut ini diatasnya.
::selection {background:#000000;color:#FFFFFF;}
::-moz-selection {background:#000000;color:#FFFFFF;}
::-webkit-selection {background:#000000;color:#FFFFFF;}
3. Terakhir, Save template dan selesai.

Keterangan kode:

• background:#000000; untuk warna background
• color:#FFFFFF; untuk warna tulisan
• jika ingin mengganti background dan warna goresan pena gantilah ketiga aba-aba diatas dengan aba-aba warna yang sama

Contoh penggantian warna block background dan warna tulisan 

::selection {background:#107cde;color:#0000000;}
::-moz-selection {background:#107cde;color:#000000;}
::-webkit-selection {background:#107cde;color:#000000;}

Silakan diganti sesuai dengan warna yang kau inginkan, dan silakan baca juga artikel aku yang lainnya yang berkaitan dengan warna menyerupai cara menciptakan background warna transparan atau cara menciptakan background gradient 2 warna dan juga artikel-artikel lainnya. Semoga artikel diatas dapat bermanfaat untuk anda.

Read More