Membuat Sajian Dropdown Di Blogspot

Cara Membuat Menu Dropdown yang terletak di bawah header Blog.

Ikuti langkah-langkah dibawah ini.

1. Kunjungi situs http://cssmenumaker.com/
2. Pilih salah satu sajian dropdown yang kau inginkan.
3. Sebagai teladan Blue Opera Drop down menu. Gambar paling pertama dari gambar diatas. Selanjutnya klik Customize.

4. Dan Atur Isi Menu dropdown dengan nama dan URL yang kau inginkan.

5. Keterangan gambar diatas:
• Gunakan Add Item untuk menambah isi menu, atau klik tanda silang merah untuk menghapus isi menu.
• Untuk mengganti nama Judul, Klik sajian structure dan  isi dibagian Title.
• Untuk mengganti URL,  Isi bab Link dengan URL yang kau inginkan.
• Dan klik Update Item.
6. Setelah selesai mengisi menu. Selanjutnya copy semua isyarat HTML dan CSS di website tersebut, kemudian pastekan di gadget HTML/Javascript di blogger. Contoh Pemasangan:
1. Login ke blogger. Dari halaman dasbor pilih pengaturan Tata Letak.
2. Klik Tambahkan Gadget, kemudian pilih HTML/Javascript.
3. Lalu Susun Kode HTML dan CSS menyerupai ini.

<style>
Masukan Kode Css
</style>
Masukan Kode HTML

4. Save Gadget, kemudian pindahkan ke bawah header.
7. Jika sajian dropdown nya tidak turun atau tidak terlihat???
1. Login ke blogger. Dari halaman dasbor pilih pengaturan Template.
2. Klik Edit HTML dan cari kode
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
3. Setelah ketemu, ganti 1 menjadi 3 dan no menjadi yes
4. Kodenya jadi menyerupai ini.
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
5. Save template.
6. Selanjutnya kembali ke pengaturan tata letak.
7. Dan pindahkan Gadget HTML/Javascript sajian dropdown tadi, sempurna dibawah Header.
8. Lalu klik Save/Simpan Setelan.


9. Terakhir, lihat tampilan blog kamu. Selesai.

Untuk sajian yang lebih mudah, bukan dropdown, tapi sajian dari laman blogger, silakan baca disini cara menciptakan dan mengisi sajian blog. Semoga Bermanfaat

Read More

Cara Menciptakan Sajian Blog Dengan Gambar

Cara menciptakan hidangan blog dengan gambar dengan keterangan dibawahnya menyerupai beranda, daftar isi, hubungi, dan lain-lain. Untuk lebih jelasnya lihat gambar dibawah ini. Lalu klik salah satu gambar, maka akan terbuka halaman gres sesuai dengan URL halaman yang aku masukan.

• 
  Beranda
• 
  Desain Blog
• 
  Tips dan Trik
• 
  Hubungi

---

Cara menciptakan hidangan blog dengan gambar. Ikuti langkah-langkah dibawah ini.

---

1. Login ke blogger. Dari halaman dasbor pilih pengaturan Tata Letak.
2. Lalu Add Gadget, sesudah itu Pilih HTML/JavaScript.
3. Selanjutnya susun isyarat CSS dan HTML Seperti format dibawah ini.
<style>
KODE CSS
</style>
KODE HTML
4. Sebagai contoh, Copy semua isyarat dibawah ini. dan Pastekan di Gadget HTML/JavaScript Tadi.
<style>
#tabs31{margin:0;padding:0;}
#tabs31 ul{list-style: none;}
#tabs31 ul li{float:left; margin-right:25px;}
#tabs31 img {width:50px; height:50px;}
figcaption {text-align:center;color: blue;font-weight:bold;font-size:10px;}
</style>

<div id="tabs31">
<ul>
<li><a href="http://fandrajuani.blogspot.com/">
<img src="https://lh4.googleusercontent.com/-bUpj573Wb-U/Um-q4tDqVrI/AAAAAAAABHQ/eRZQc8iwpos/s128/DAFTAR-ISI.jpg" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a>
<figcaption>Beranda</figcaption></li>

<li><a href="http://fandrajuani.blogspot.com/search/label/Desain%20Blog">
<img src="https://lh4.googleusercontent.com/-8eCUh34i-9w/Um-q5t5iIVI/AAAAAAAABHk/749vcX4aIjg/s128/DESAIN.jpg" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a><figcaption>Desain Blog</figcaption></li>

<li><a href="http://fandrajuani.blogspot.com/search/label/Tips%20dan%20Trik">
<img src="https://lh3.googleusercontent.com/-9CqH39Abvgc/Um-q5dzGnCI/AAAAAAAABHg/K7J6NfDKkOg/s128/TIPS-DAN-TRIK.jpg" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a>
<figcaption>Tips dan Trik</figcaption></li>

<li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">
<img  src="https://lh4.googleusercontent.com/-C1v5xdd6vIs/Um-q5RYveJI/AAAAAAAABHo/QqJs0t8By-w/s128/HUBUNGI.jpg" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a>
<figcaption>Hubungi</figcaption></li>

</ul>
</div>
5. Save Gadget, selesai.

---

Keterangan Kode Css Langkah 5: 

---

• #tabs31 ul{list-style: none;} untuk menghilangkan list-style bulet.
• #tabs31 ul li{float:left; menciptakan gambar horizontal, dan margin-right:25px; spasi atau jarak kanan antar gambar.
• #tabs31 img {width:50px; height:50px;} tinggi dan lebar gambar.
• figcaption untuk mengatur keterangan dibawah tulisan.

---

Keterangan Kode HTML Langkah 5:

---

• format dari hidangan <li><a href="url halaman menu">
• <img src="Url gambar" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a>
• <figcaption>Keterangan dibawah gambar</figcaption></li>

 Jika ingin menambahkan hidangan tambahkan format menyerupai dibawah ini.
<li><a href="url halaman menu"><img src="Url gambar" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a><figcaption>Keterangan dibawah gambar</figcaption></li>

---

Gunakanlah gambar dengan ukuran yang sama disetiap gambar, semoga tampilan hidangan terlihat rapi, caranya dapat lihat di cara menciptakan icon blog. Cara mengambil URL gambar, dapat kau baca di artikel cara upload dan ambil url gambar. Cara mengisi url halaman menu, baca artikel cara menciptakan dan mengisi hidangan blog. URL Label atau kategori juga dapat kita masukan ke menu.

Semoga Bermanfaat.

Read More

Cara Menciptakan Hidangan Yang Melekat Di Dinding Blog

Cara menciptakan sajian yang menempel, mengambang, melayang diatas atau dibawah dinding blog. Ketika kursor naik atau turun, sajian masih pada posisi yang sama. Silakan lihat rujukan sajian hijau dibagian bawah.

Untuk lebih jelasnya perihal cara menciptakan sajian melekat diatas atau dibawah dinding blog. Ikuti langkah² dibawah ini.

1. Buatlah sajian terlebih dahulu. Caranya: Ke Pengaturan Tata Letak, kemudian tambahkan Gadget. Trus Pilih HTML/JAVASCRIPT.
2. Selanjutnya copy arahan dibawah ini. Dan pastekan di gadget HTML/JAVASCRIPT tadi.
<style>

#cssmenu {
  background: transparent;
}
#cssmenu ul {
float: left;
}
#cssmenu ul li {
  float: left;  padding:10px;
  background: transparent;  list-style: none;
}
#cssmenu ul li a {
  float: left;
  text-transform: uppercase;
  font-family: 'Helvetica Neue', helvetica, 'microsoft sans serif', arial, sans-serif;
  font-size: 12px;
  color: #FFFFFF;
font-weight:bold;
}
</style>
<div id='cssmenu'>
<ul>
   <li ><a href='http://fandrajuani.blogspot.com/'>Beranda</a></li>
   <li><a href='https://www.facebook.com/fandra.juani'>Facebook</a></li>
   <li><a href='https://twitter.com/fandrajuani'>Twitter</a></li>
</ul>
</div>
3. Beri judul HTML/JAVASCRIPT dengan nama Menu Tempel. Lalu Save
4. Setelah itu pengaturan template, klik edit HTML dan cari arahan Menu Tempel, gunakan ctrl F untuk mempermudah pencarian. ibarat dibawah ini.

5. Sekarang Copy id dari sajian tempel yang bergaris bawah HTML2, ibarat gambar diatas.
6. Lalu Pastekan di Notepad. Selanjutnya tambahkan arahan css dibawah ini.
#HTML2 {
  width: 100%;
  min-width: 960px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 30px;
  font-size: 12px;
z-index: 99;
  white-space: nowrap;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
  background-color: #336699;
  background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
  box-shadow: 0px 2px 0px rgb(14, 90, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
7. Copy arahan diatas, dan pastekan diatas ]]></b:skin> .
8. Dan Save Template.
9. Selanjutnya kembali ke tata letak, dan klik Gadget Menu Tempel Tadi,  kemudian hapus judulnya, biarkan gadget tidak berjudul. 
10. Terakhir Save Gadget, Selesai.

Keterangan Kode Langkah 6:

• top:0px ini fungsinya menempatkan sajian dibagian atas, untuk merubahnya kebagian bawah ganti menjadi bottom:0px;
• height: 30px; ini untuk mengatur tinggi menu, silakan diganti sesuai yang diinginkan.
• background-color: #336699; dan #336699 100%); untuk warna background

Keterangan Kode Langkah 2:

• http://fandrajuani.blogspot.com/ dan https://www.facebook.com/fandra.juani
• Dan juga https://twitter.com/fandrajuani yaitu url yang kalau diklik akan terbuka dari halaman url tersebut. silakan diganti dengan url yang kalian inginkan sendiri.

Itulah sedikit cara menciptakan sajian yang melekat di dinding atas atau bawah blog yang dapat aku bagikan. Semoga Bermanfaat.

• Beranda
• Desain Blog
• Tips Dan Trik

Read More

Cara Menciptakan Sajian Vertical Sederhana

menu horizontal yang memanjang kesamping.

Menu vertical akan memanjang atau menurun kebawah. Biasanya sajian vertical ditempatkan dibagian kanan atau kiri sidebar blog. Silakan lihat pola gambar disamping, atau pola sajian dibawah ini.

• Beranda
• Profil
• Contact

Untuk lebih jelasnya wacana cara menciptakan sajian vertical diblog. Ikuti langkah² dibawah ini.

1. Login ke blogger, dan pilih pengaturan template.
2. Lalu klik tambahkan gadget, dan pilih HTML/Javascript.
3. Selanjutnya copy aba-aba dibawah ini.
<style>

#vertical {
  background: transparent;
}
#vertical ul {
}
#vertical ul li {
  background: #aaaaaa;  list-style: none;border:1px solid #1780dd;
}
#vertical ul li span {
  text-transform: uppercase;
  font-family: 'Helvetica Neue', helvetica, 'microsoft sans serif', arial, sans-serif;
  font-size: 12px;
  color: #444444;
font-weight:bold;
padding:0px 0px 0px 10px;
}
</style>
<div id='vertical'>
<ul>
   <li ><a href='http://fandrajuani.blogspot.com/'><span>Beranda</span></a></li>
   <li><a href='#'><span>Facebook</span></a></li>
   <li><a href='#'><span>Twitter</span></a></li>
</ul>
</div>
4. Dan Pastekan di gadget HTML/Javascript tadi.
5. Terakhir, save gadget. Dan pindahkan gadget ke daerah yang kalian inginkan. Selesai.

Keterangan aba-aba langkah 3:

• <a href='http://fandrajuani.blogspot.com/'> dan <a href=''> Isi dengan URL yang kau inginkan.
• Jumlah sajian diatas ada 3. Untuk menambahkan jumlah menu?
  Tambahkan aba-aba <li><a href=''><span>Nama Menu kamu</span></a></li>
  Dibawah aba-aba <li><a href=''><span>Twitter</span></a></li>
• background: #aaaaaa; warna background
• border:1px solid #1780dd; warna garis biru yang memisahkan antar menu.
• text-transform: uppercase; aba-aba ini menciptakan Menu memakai abjad besar semua.
  Jika tidak ingin memakai abjad besar, hapus kodenya.
• padding:0px 0px 0px 10px; spasi goresan pena sajian sebelah kiri.

Silakan dibaca juga artikel wacana sajian yang lainnya. Seperti menciptakan menu dengan gambar disampingnya, cara menciptakan sajian dropdown di blog atau jikalau masih galau dengan cara menciptakan sajian di blog, silakan baca cara menciptakan dan mengisi sajian blog. 

Itulah sedikit cara desain blog dan tips trik wacana cara menciptakan sajian vertical sederhana di blog. Semoga Bermanfaat.

Read More

Menu Vertical Fandra Juani

Menu Vertical Fandra Juani. Menu vertical ini berisi goresan pena dengan warna yang berbeda disetiap hurufnya, ditambah dengan icon disamping kirinya. Icon yang dipasang dibentuk dengan bentuk bulat. Dan saat disentuh kursor mouse icon tersebut akan berputar.

• Fandra Juani
• Facebook
• Twitter
• Google +

Cara membuatnya ikuti langkah² dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
2. Selanjutnya, pilih tambahkan Gadget, dan pilih HTML/Javascript. Lalu masukan instruksi dibawah ini.
<style>
#tentang{background:transparent;height:150px}
#tentang ul{float:left}
#tentang ul li{width:200px;float:left;list-style:none}
#tentang ul li span{float:left;font-family:Trebuchet;text-transform:uppercase;font-size:14px;padding:0 0 0 10px;text-shadow:2px 2px 5px #1780dd;font-weight:bold}
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}
t{font-size:180%;color:yellow}
x{font-size:180%;color:#3af}
#tentang ul li span:hover{padding:0 0 0 20px}
#tentang ul li img{padding:0;border-radius:100px;-moz-border-radius:100px;-webkit-border-radius:100px;float:left;position:relative;-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .1s ease-in-out;transition:all .8s ease-in-out}
#tentang ul li img:hover{-o-transform:scale(1) rotate(360deg);-moz-transform:scale(1) rotate(360deg);-webkit-transform:scale(1) rotate(360deg)}</style>
<div id='tentang'>
<ul>
<li><a href='http://fandrajuani.blogspot.com/p/blog-page_25.html' title='Fandra Juani'><img alt=" Menu vertical ini berisi goresan pena dengan warna yang berbeda disetiap hurufnya Menu Vertical Fandra Juani" src='https://lh5.googleusercontent.com/-LeOgiup3fqM/Ul7UfgCMxSI/AAAAAAAAA9w/pK-pvuyLHtg/s128/fandra-juani.jpg' width='32' height='32' title="Menu Vertical 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>

<li><a href='https://www.facebook.com/fandra.juani'title='My Facebook'><img alt=" Menu vertical ini berisi goresan pena dengan warna yang berbeda disetiap hurufnya Menu Vertical Fandra Juani"src='https://lh4.googleusercontent.com/-vy-4Eky2V_0/Ul7UF1hilwI/AAAAAAAAA9Q/6On9FmDTA_M/s128/Fb.jpg' width='32' height='32' title="Menu Vertical Fandra Juani"/><span><t>F</t>a<h>c</h><g>e</g><j>b</j><m>o</m><r>o</r><h>k</h></span></a></li>

<li><a href='https://twitter.com/fandrajuani' title='My Twitter'><img alt=" Menu vertical ini berisi goresan pena dengan warna yang berbeda disetiap hurufnya Menu Vertical Fandra Juani" src='https://lh5.googleusercontent.com/-ygEFjz3uXeA/Ul7ULq9EOOI/AAAAAAAAA9o/7SkDHL7AKp8/s128/Twitter.jpg' width='32' height='32' title="Menu Vertical Fandra Juani"/><span><x>T</x><o>w</o><m>i</m>t<j>t</j><h>e</h><r>r</r></span></a></li>

<li><a href=' ">Membuat sajian vertical sederhana.
Tulisan dengan warna yang berbeda. 
Membuat icon sendiri untuk website. 
Cara upload dan ambil URL Gambar.
Membuat gambar bentuk lingkaran diblog.
Membuat gambar berputar diblog.

Silakan berkreasi, dan agar dapat bermanfaat untuk anda.

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

Menu Gambar Dengan Posisi Sembarangan

Menu gambar dengan posisi sembarangan. Maksudnya yaitu menciptakan sajian memakai gambar, dengan posisi gambar yang tidak beraturan. Gambar sanggup ditempatkan diatas, bawah, kanan, kiri sesuai dengan yang kita inginkan. Contohnya menyerupai dibawah ini.

• 

• 

• 

• 

• 

---

Cara membuatnya, ikuti langkah-langkah dibawah ini.

---

1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
2. Dan klik Tambahkan Gadget di bawah header atau disidebar. Dan pilih HTML/Javascript.
3. Selanjutnya copi arahan HTML dibawah ini, dan pastekan didalam Gadget HTML/Javascript tadi.
<div id="satu1">
<ul>
<li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
</ul>
</div>

<div id="dua2">
<ul>
<li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
</ul>
</div>

<div id="tiga3">
<ul>
<li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
</ul>
</div>

<div id="empat4">
<ul>
<li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html" title="Menu gambar dengan posisi sembarangan"><img alt=" Maksudnya yaitu menciptakan sajian memakai gambar Menu gambar dengan posisi sembarangan" height="74" src="https://lh5.googleusercontent.com/-nwLpXSpn5gU/Uo5XUDFOgkI/AAAAAAAABW8/7TUzv5rBcFk/s133/Daftar%2520Isi.PNG" title="Menu gambar dengan posisi sembarangan" width="133" /></a></li>
</ul>
</div>

<div id="lima5">
<ul>
<li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
</ul>
</div>
4. Selanjutnya, simpan HTML/Javascript.

Keterangan kode:

• Silakan isi URL Menu dengan URL/Halaman web anda.
• Silakan isi URL dari Gambar dengan URL dari gambar anda.
• Contoh URL sanggup dilihat di div id="empat4" 

---

Setelah itu ke tahap pengaturan posisi gambar, caranya klik Desainer Template(masih pada pengaturan Tata Letak). Lalu Klik Tingkat Lanjut > Tambahkan Css. Dan masukan arahan CSS dibawah ini kedalamnya.

---

#satu1{background:transparent;margin:-10px 0px 0px -100px;float:left;}
#satu1 ul{list-style:none}

#dua2{background:transparent;margin:-40px 0px 0px 0px;float:left;}
#dua2 ul{list-style:none}

#tiga3{background:transparent;margin:-10px 0px 0px 0px;float:right;}
#tiga3 ul{list-style:none}

#empat4{background:transparent;margin:40px -390px 0px 0px;float:right;}
#empat4 ul{list-style:none}
#empat4 img{position:relative;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-webkit-transition:all .1s ease-in-out;transition:all .4s ease-in-out}
#empat4 img:hover{-o-transform:scale(1) rotate(720deg);-moz-transform:scale(1) rotate(720deg);-webkit-transform:scale(1) rotate(720deg)}

#lima5{background:transparent;margin:-40px -160px 0px 0px;float:right;}#lima5 ul{list-style:none}

---

Keterangan Kode:

---

• margin:40px -390px 0px 0px; fungsinya untuk mengatur gambar ke posisi yang kita inginkan, formatnya arahan tersebut yaitu 40px(atas) -390(kanan) 0px(bawah) 0px(kiri).
• float:right;  dan float left fungsinya untuk memudahkan kita menempatkan gambar ke bab kiri atau kanan
• #empat4 img{ dan #empat4 img:hover{ arahan komplemen biar gambar berputar dikala disentuh mouse.

Atur posisi dari gambar tersebut sesuai dengan yang kalian inginkan.  Setelah simpulan mengatur posisi gambar, gres lah klik Terapkan Ke Blog, Selesai.

Dengan memasukan arahan Css ke bab Tambahkan Css, kita sanggup melihat perubahan posisi gambar secara langsung, dikala kita merubah nilai dari arahan Css. Contoh gambar penempatan arahan Css didalam ruang Tambahkan Css.

Silakan baca juga artikel ihwal cara menciptakan sajian blog dengan gambar, yang sanggup dijadikan pilihan dalam pembuatan sajian gambar diblog. Semoga sanggup bermanfaat untuk anda.

Read More