Cara Membuat Menu Pages Mudah Untuk About US,Privace Policy,TOS,Disclaimer dan Lain-Lain

Cara Membuat Menu Pages Mudah Untuk About US,Privace Policy,TOS,Contact Us,Sitemap Disclaimer dan Lain-Lain.

Pasti anda bingung bagaimana cara membuat Menu Pages di blog kita dengan cantik dan elegan ? Yaa kali ini saya akan memberikan Tutorial cara memasang Pages di Template dengan sempurna untuk website anda.

Untuk cara ini kita harus menggunakan Methode sinkron HTML dan CSS, Agar menu pages bisa enak dilihat dan lebih elegan. Mari kita ketahui dulu apa itu CSS dan Apa itu HTML ?

Apa itu HTML ?
Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Dan apa itu CSS ?
CSS adalah kependekan dari Cascading Style Sheet. CSS Merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan atau layout halam web supaya lebih elegan dan menarik. CSS adalah sebuah Teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.

Mari kita mulai bagaimana cara membuat Pages menu seperti gambar dibawah ini contohnya ?

Demo Pages

Ya gambar diatas adalah contoh Menu yang sudah berhasil saya buat dari script HTML dan CSS dibawah ini yang sudah saya design seperti gambar diatas, mari ikuti Tutorialnya.

1. Pertama Login ke akun Blogger kalian.
2. Jika sudah Langsung saja anda melihat Colum kiri yaitu Theme.

3. Lalu jika menu Theme sudah anda Click dan terbuka, Langsung saja anda lihat Demo anda disebelah tab Theme, lalu click Edit HTML.

4. Terbukalah Script Demo atau Template anda, Langkah selanjutnya adalah anda Find dengan tekan Keyboard yaitu CTRL + F.

5. Dan anda lakukan pengetikan find yaitu cari kode : </style>

6. Jika sudah menemukan kode tersebut, tinggal masukkan Kode CSS dibawah, diatas kode </style> tadi.

#menutop{width:0%;margin:0 auto;height:45px;background:#fff;border-bottom:1px solid #e9e9e9;float:center;}

#menutop ul,#menutop li{margin:0;padding:0;list-style:none;}

#menutop ul{height:45px;}

#menutop li{float:left;display:inline;font-family:Arial;font-size:12px;

font-weight:bold;}

#menutop a{display:block;line-height:45px;padding:0 14px;text-decoration:none;color:#919392;}

  #menutop ul li:hover a{color:#eee;background:#222;font-size:14px;border-radius:7px;}

#menutop input{display:none;margin:0 0;padding:0 0;width:100%;height:45px;opacity:0;cursor:pointer;}

#menutop label{font-family:&#39;Open Sans&#39;;font-size:30px;font-weight:400;display:none;width:35px;height:45px;line-height:45px;text-align:center;}

#menutop label span{font-size:14px;position:absolute;left:35px}

#menutop ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#919392;}

#menutop ul li ul li a{color:#919392;height:45px;line-height:45px;background:#fff;width:100%;}

#menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#919392;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;}

#menutop li:hover &gt; ul.menux{visibility:visible;opacity:1;top:45px;}

#menutop a.dutt{padding:0 27px 0 14px}

#menutop a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}

#menutop a.dutt:hover::after,#menutop ul li:hover a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}

#menutop ul.menux li a{background:#fff;color:#919392;}

#menutop ul li ul li a:hover{background:#fcfcfc;color:#8493a0;}

#menutop li.facebook {padding:0 5px;}

#menutop li.facebook,#menutop li.twitter,#menutop li.youtube,#menutop li.googleplus,#menutop li.linkedin{background:#ddd;text-align:center;color:#666;float:right;transition:all 0.2s ease-in-out;}

#menutop li a.facebook:hover,#menutop li a.twitter:hover,#menutop li a.youtube:hover,#menutop li a.googleplus:hover,#menutop li a.linkedin:hover{color:#8493a0;}

#menutop li.facebook .fa.fa-facebook,#menutop li.twitter .fa.fa-twitter,#menutop li.youtube .fa.fa-youtube,#menutop li.googleplus .fa.fa-google-plus,#menutop li.linkedin .fa.fa-linkedin{color:#919392;transition:all 0.2s ease-in-out;}

#menutop li.facebook:hover,#menutop li.twitter:hover,#menutop li.youtube:hover,

#menutop li.googleplus:hover,#menutop li.linkedin:hover{background:#fcfcfc;color:#8493a0;}

#menutop li.facebook:hover .fa.fa-facebook,#menutop li.twitter:hover .fa.fa-twitter,#menutop li.youtube:hover .fa.fa-youtube,#menutop li.googleplus:hover .fa.fa-google-plus,#menutop li.linkedin:hover .fa.fa-linkedin{color:#8493a0;}

@media screen and (max-width:960px) {

#menutop li:hover &gt; ul.menux{display:block;}

#menutop ul{border:none;border-bottom:4px solid #e9e9e9;}

#menutop{position:relative;border:none;border-bottom:4px solid #e9e9e9;}

#menutop ul{background:#fff;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}

#menutop ul.menux{width:100%;position:static;border:none}

#menutop li{display:block;float:none;width:auto;text-align:left}

#menutop li a{color:#666}

#menutop li a:hover{background:#f1f1f1;color:#f9f9f9}

#menutop li:hover{background:#8493a0;color:#fff;}

#menutop a.dutt{font-weight: bold;}

#menutop li:hover &gt; a.dutt,#menutop a.dutt:hover{background:#b1b1b1;color:#fff;}

#menutop input,#menutop label{display:inline-block;position:absolute;right:0;top:0;}

#menutop input:after,#menutop label:after {content:&quot;\f0c9&quot;;font-family:FontAwesome;

font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#666;

display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;}

#menutop input{z-index:4;}

#menutop input:checked + label{color:#fff;font-weight:700}

#menutop input:checked ~ ul{display:block}

#menutop ul li ul li a{width:100%;color:#666;}

#menutop ul li ul li a:hover{background:#8493a0;color:#fff;}

#menutop ul.menux a{background:#fff;color:#666;}

#menutop ul.menux a:hover{background:#8493a0;color:#fff;}

#menutop ul.menux li{background:#fff;color:#666;}

#menutop ul.menux li:hover{background:#8493a0;color:#fff;}

#menutop ul.menux li a{background:#fff;color:#666;}

#menutop ul.menux li a:hover{background:#f1f1f1;color:#8493a0;}

7. Jika sudah anda masukkan diatas kode </style> lalu anda Sinkron kan terlebih dahulu kode HTML nya yaitu :

<nav id='menutop' style='box-shadow:0px 0px 0px #aaa;border:1px solid #bbb; width:1278px;'>
<input type='checkbox'/>
<label/>
<ul>
<li><a href='http://www.articleinfoweb.com/p/about-artikel.html' title='Abous Us'>About Us</a></li>
<li><a href='http://www.articleinfoweb.com/p/terms-of-service-dengan-pembukaan_29.html'>Terms Of Services (TOS)</a></li>
  <li><a href='http://www.articleinfoweb.com/p/contact-us.html'>Contact Us</a></li>
  <li><a href='http://www.articleinfoweb.com/p/privacy-policy.html'>Privacy Policy</a></li>
  <li><a href='http://www.articleinfoweb.com/p/disclaimer.html'>Disclaimer</a></li>
  <li><a href='http://www.articleinfoweb.com/p/site-map.html'>Sitemap</a></li>

<li class='sorting-01 facebook'><a href='https://www.facebook.com/dandyMsJ'><i class='fa fa-facebook fa-lg'/><span class='inv'/></a></li>
<li class='sorting-03 googleplus'><a href='https://plus.google.com/u/0/109006903122584651419'><i class='fa fa-google-plus fa-lg'/><span class='inv'/></a></li>
<li class='sorting-04 youtube'><a href='https://www.youtube.com/channel/UCuYAwWbF2bXdOxi3fVHig6w'><i class='fa fa-youtube fa-lg'/><span class='inv'/></a></li>

</ul>
</nav>

8. Tempatkan Kode tersebut di bawah kode <body> atau Tempatkan kode tersebut diatas script Layout yang menurut anda Pas untuk diletakkan dan ditempatkan.
9. Jika semua sudah selesai, Anda tinggal coba untuk melakukan Save Template lalu coba untuk lakukan Preview.
10. Jika hasil tidak maksimal, silahkan anda cari kesalahan anda untuk menempatkan kode HTML tersebut.

Catatan :
Penulisan kode yang berwarna biru adalah Link URL yang saya pakai untuk pages, silahkan ganti Tulisan yang berwarna biru sesuai Link URL yang anda inginkan atau yang ingin anda tuju, agar visitor tidak bingung dalam mencari URL di site anda.

Berikut adalah contoh potongan Kode CSS yang sudah saya letakkan di atas kode </style>.

Dan berikut adalah kode potongan kode HTML yang sudah saya letakkan di bawah <body>.

Jadi jika anda sudah membaca semua Tutorial yang sudah saya jelaskan diatas, pastinya anda akan Sukses untuk melakukan percobaan. Dan tidak perlu ragu untuk langsung mempraktikkan. Silahkan langsung saja coba praktikkan seperti tutorial diatas dan baca dengan seksama, agar hasil bisa memuaskan.

Kenapa menu Pages sangat dibutuhkan di halaman Blogger atau Website ?
Yaa karena jika adanya menu pages, visitor atau viewer tidak perlu bingung untuk mencari apa yang ingin dia cari seperti Kontak Penulis atau lainnya yang anda tempatkan di menu Pages. Maka dari itu menu pages dibutuhkan untuk memudahkan visitor.

Anda masih belum faham untuk Cara pemasangan Kode-kode CSS dan HTML tersebut ?
Mari lihat Vidio Tutorial dibawah ini :

Akhir Artikel : 
Sekiranya Artikel diatas sangat bermanfaat untuk anda, mohon tuangkan Komentar Kritik dan Saran anda untuk blog ini, agar Penulis tau kepuasan dari viewer atau visitor yang sudah berkunjung di blog site ini, Komentar dibawah melalui Sign In Media Sosial yang sudah melakukan Sign Up, Semoga artikel diatas bermanfaat untuk anda semua, Terima Kasih.