Cara Membuat Link Anchor Satu Halaman / Navigasi Halaman Back to Top

Membuat Link ke Atas,Menuju Tengah,ke Bawah Dalam satu Halaman

Emang susah ya sob njelasin dari judul postingan kali ini,intinya,kali ini saya ingin sekali membagikan inpo masalah membuat link anchor satu halaman.
Seperti apa sih bentuk fisiknya,sobat bisa lihat di salah satu posting blog sahabat saya mas Arya di Ramadhan Bersama Prambors.

Tampilan atas:



Saat sobat klik anchor link 'testimonial' maka langsung tertuju seperti pada gambar berikut:

Dan saat sobat klik anchor link 'help' maka langsung tertuju seperti pada gambar berikut:

Jika sobat perhatikan,dari screenshot gambar diatas,jika postingan blog sahabat saya tersebut dibuka / dibaca menggunakan browser Mozilla misalnya,maka setiap kita mengklik salah satu link anchor tertuju,misal 'testimonial','about' atau 'help' (dalam gambar diatas) maka akan denga sendirinya menentukan link yang dituju.
Lebih jelasnya ya,sobat lihat di sini (coba gunakan browser mozilla ya).

Nah,gimana sob dah jelas ya tutorial apa yang ingin saya sampaikan malam hari ini :D

Langkah dan Cara Membuat Link Anchor Satu Halaman / Link Tombol Kembali ke Atas

Pertama,baca bismillah ya..
Selanjutnya,buatlah posting seperti berikt ini,untuk mengetahui triknya,sobat bisa copy paste aja dari beberapa barisan artikel berikut,da modifikasi sendiri ya :D

Pergilah ke posting dan pilihlah type edit htmlnya,lihat gambar dibawah ini:



Kemudian buatlah posting seperti ini (hanya contoh saja ya,INGAT,penulisan huruf kecil dan besar pada link anchornya sangat sensitiv ya gan pent-)

Mulai posting dari sini..
<a href="#about">About</a> | <a href="#help">Help</a> | <a href="#testimonial">Testimonial</a>
<a name="about"></a>
<h4>About</h4>

Kami adalah jasa membuat website dan blog dengan menawarkan harga paling rendah namun dengan hasil berkualitas tinggi.
Pelajaran Blog adalah sarana online dalam belajar membuat blog juga belajar seo blogspot bagi blogger tingkat pemula.
Selain daripada itu,kami juga menyediakan berbagai pilihan blogger template yang seo friendly namun tetap tidak mengabaikan akan keindahannya.

Untuk seo,kami menyediakan tutorial dasar dalam teknik seo,trik seo,rahasia seo juga tips dan trik seo agar situs menjadi nomor 1 di halaman serach engine Google.
Buktikan dan bersiaplah menjadi miliarder baru dalam dunia internet!

<a name="testimonial"></a>
<h4><strong>Testimonial</strong></h4>

Pelajaran Blog is an online tool for the study also learn seo blog blogger blogspot for beginner level.
Other than that, we also provide a wide selection of blogger templates seo friendly but still do not ignore its beauty.

For SEO, we provide a basic tutorial in seo techniques, seo tricks, seo secrets seo tips and tricks as well to the site to be number 1 on page serach engine Google.
Prove it and be prepared to become new millionaires in the internet world!

<a name="help"></a>
<h4><strong>Help</strong></h4>

Pelajaran Blog adalah sarana online dalam belajar membuat blog juga belajar seo blogspot bagi blogger tingkat pemula.
Selain daripada itu,kami juga menyediakan berbagai pilihan blogger template yang seo friendly namun tetap tidak mengabaikan akan keindahannya.
Untuk seo,kami menyediakan tutorial dasar dalam teknik seo,trik seo,rahasia seo juga tips dan trik seo agar situs menjadi nomor 1 di halaman serach engine Google.
Buktikan dan bersiaplah menjadi miliarder baru dalam dunia internet!

Pelajaran Blog is an online tool for the study also learn seo blog blogger blogspot for beginner level.
Other than that, we also provide a wide selection of blogger templates seo friendly but still do not ignore its beauty.
For SEO, we provide a basic tutorial in seo techniques, seo tricks, seo secrets seo tips and tricks as well to the site to be number 1 on page serach engine Google.
Prove it and be prepared to become new millionaires in the internet world!

Akhir posting disini.

Nah,kemudian publikasikan.Selesai.

Hasilnya,kurang lebih akan seperti ini gan:

About | Help | Testimonial

About

Kami adalah jasa membuat website dan blog dengan menawarkan harga paling rendah namun dengan hasil berkualitas tinggi.
Pelajaran Blog adalah sarana online dalam belajar membuat blog juga belajar seo blogspot bagi blogger tingkat pemula.
Selain daripada itu,kami juga menyediakan berbagai pilihan blogger template yang seo friendly namun tetap tidak mengabaikan akan keindahannya.

Untuk seo,kami menyediakan tutorial dasar dalam teknik seo,trik seo,rahasia seo juga tips dan trik seo agar situs menjadi nomor 1 di halaman serach engine Google.
Buktikan dan bersiaplah menjadi miliarder baru dalam dunia internet!

Testimonial

Pelajaran Blog is an online tool for the study also learn seo blog blogger blogspot for beginner level.
Other than that, we also provide a wide selection of blogger templates seo friendly but still do not ignore its beauty.

For SEO, we provide a basic tutorial in seo techniques, seo tricks, seo secrets seo tips and tricks as well to the site to be number 1 on page serach engine Google.
Prove it and be prepared to become new millionaires in the internet world!

Help

Pelajaran Blog adalah sarana online dalam belajar membuat blog juga belajar seo blogspot bagi blogger tingkat pemula.
Selain daripada itu,kami juga menyediakan berbagai pilihan blogger template yang seo friendly namun tetap tidak mengabaikan akan keindahannya.
Untuk seo,kami menyediakan tutorial dasar dalam teknik seo,trik seo,rahasia seo juga tips dan trik seo agar situs menjadi nomor 1 di halaman serach engine Google.
Buktikan dan bersiaplah menjadi miliarder baru dalam dunia internet!

Pelajaran Blog is an online tool for the study also learn seo blog blogger blogspot for beginner level.
Other than that, we also provide a wide selection of blogger templates seo friendly but still do not ignore its beauty.
For SEO, we provide a basic tutorial in seo techniques, seo tricks, seo secrets seo tips and tricks as well to the site to be number 1 on page serach engine Google.
Prove it and be prepared to become new millionaires in the internet world!

Semoga berhasil ya sob,dan tunggu artikel selanjutnya yang tak kalah Hot!!
See you guys..

Membuat Menu Navigasi dengan CSS

Membuat menu navigasi,adalah pelajaran yang paling banyak di pertanyakan oleh blogger-blogger pemula,termasuk saya beberapa hari yang lalu. Disini kita akan membahas tentang bagaimana membuat menu makanan 4 sehat 5 sempurna, Hus !! bukan,maksudnya Menu Navigasi dengan CSS. Tapi tidak seperti kebanyakan,biasanya mereka meletakkan di bawah kode <body>,tapi di sini kita akan meletakkan kodenya di Element HTML/Javascript yang baru. Apa itu CSS? kita akan bahas beberapa hari lagi,berhubung yang kita bahas kali ini Menu Navigasinya. Seperti apa sich contoh Menu Navigasi? Navigasi pada web / blog,sesuai dengan namanya,yaitu untuk menuntun jalan,supaya web / blog lebih mudah di telusuri. Contoh bentuk fisiknya seperti di bawah ini : Edit Aku Edit Aku Edit Aku Edit Aku Untuk membuatnya kali ini,kita minta bantuan CSS,apa itu CSS,kita bahas naa..ant : (,tadi sudah di omongiiin!!!! #$%#! . Cara membuatnya sederhana sekali,berhubung kita dengan bantuan CSS,kita tak perlu membuat tabel untuk Menu Navigasi seperti di atas. Tapi,yang paling surprise buat gw waktu aku jalan-jalan ke Blok-M,tiba-tiba aku ngliat yang belum pernah...OOee!!Ngemeng aja!ntar aja ceritanya ngapa !! Ok! berhubung ntar malah tambah bikin rusuh suasana,kan dapet dosa tuh!,kalo dosa,kita masuuk Nera...@#$@#$@!!gUBRAK! gw bilang ntar ya ntar ceritanyaaa!! Ya..ya.ntar aja ceritanya ya..Ok langsung ke topik,kita hari ini. Langkah pertama,pergi ke Dashboard (untuk blogspot),lalu pilih Tata Letak,selanjutnya pilih tab Edit HTML. Lalu cari kode ]]></b:skin>,jika sudah ketemu,tepat diatasnya,letakkan kode di bawah ini : #NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; } Jika kode sudah anda letakkan,lalu Simpan Template. Selanjutnya pilih Tab Tata Letak,dan buat Element Baru / Add New Widget,pilih HTML / Javascript. Lalu letakkan kode di bawah ini pada halaman HTML / Javascript yang baru saja anda pilih. <ul id='nav'> <li><a href='http:///'>Menu 1</a></li> <li><a href='http:///'>Menu 2</a></li> <li><a href='http:///'>Menu 3</a></li> <li><a href='http:///'>Menu 4</a></li> </ul> Jika kode sudah anda letakkan,lalu pilih Simpan,dan anda bisa langsung lihat hasilnya. Untuk http:/// ,anda isi dengan alamat URL yang akan di tuju,sedagkan untuk Menu 1,2,3,4 ,Untuk tulisan yang akan tampil,sedangkan jika ingin menambahkan satu kolom lagi,anda tinggal menulis satu baris lagi,baris yang mana? Copy aja salah satu kode : <li><a href='http:///'>Menu 4</a></li>,dan paste persis di bawahnya. Sekarang tinggal nglanjutin cerita di Blok-M tadi,jadi gini nich..@#$@#%$! Gubrak ! Baca Juga Yang Ini.. Menghilangkan Navbar Blog Disable Right Click Memasang Link pelajaran-blog.blogspot.com