wapkiz সাইটে রেস্পন্সিব নেভিগেশন বার যুক্ত করার উপায়

 আপনারা যারা wapkiz ইউজার আপনাদের জন্য নিয়ে আসলাম রেস্পন্সিব নেভিগেশন বার কোড।যার মানে আপনারা আপনাদের ওয়াপকিজ সাইটে অনেক তথ্য ও লিংক একটি বাটনে লুকিয়ে রাখতে পারবেন।

এটির মাধ্যমে আপনি যখন এই বাটনটিতে ক্লিক করবেন তখনই শুধু এটির তথ্য মানে লিংক গুলো দেখতে পারবেন।আর এই বাটনটিকে বলে নেভিগেশন বার।যেহেতু এটি রেস্পন্সিব তাই এটির নেবভারটি শুধু মোবাইলে দেখা যাবে যখন আপনি পিসিতে ব্যবহার করবেন তখন এটি একটি সুন্দর পৃষ্ঠায় পরিনত হবে।আপনারা হয়তো অনেকেই জানেন না

 wapkiz কী? 

ওয়াপকিজ হচ্ছে একটি ওয়েব বিল্ডার সাইটে এখানে আপনি আপনার পচন্দমতো যেকোনো সাইট বানাতে পারবেন।wapkiz.com হচ্ছে এটির ডোমেইন নেইম আর আপনি যদি কোনো ওয়েবসাইট বানান তবে আপনার ডোমেইন নেইম হবে example.wapkiz.com এমন।পরে আপনি ইচ্ছে করলে আপনার সাইটে কাষ্টম ডোমেইন কিনে ব্যবহার করতে পারবেন।

 রেস্পন্সিব নেভিগেশন বারটি যুক্ত করার সুবিধাঃ

 আপনি যদি আপনার সাইটে নেবভারটি যুক্ত করেন তবে আপনার সাইটটি দেখতে অনেক সুন্দর ও আকর্ষনিয় হবে।আপনার সাইটে থাকা নেবভারটি যেকেউ খুব সুন্দর করে ইউজ করতে পারবে এবং দেখতেও সুন্দর দেখাবে।

 কীভাবে যুক্ত করবেনঃ 

 নেবভারটি যুক্ত করার জন্য নিচের কোডটি আপনার সাইটের হেডারে যুক্ত করে দিন। তবেই আপনার সাইটে নেবভারটি যুক্ত হয়ে যাবে।আর এই নেবভারটির কোষগুলো আপনাদের দেওয়া হচ্ছে আইটি হেল্পবিডি১২ এর সৌজন্যে। নিচে আমি কোডটি দিচ্ছি এটি আপনি কপি করে আপনার সাইটে বসিয়ে দিন তবেই আপনার সাইট প্রস্তুত হয়ে যাবে।

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style>body { margin: 0;font-family: Arial, Helvetica, sans-serif;}.topnav {overflow: hidden;background-color: #333;}.topnav a { float: left;display: block;color: #f2f2f2; text-align: center;  padding: 14px 16px;  text-decoration: none; font-size: 17px;}.topnav a:hover { background-color: #ddd; color: black;}.topnav a.active {  background-color: #04AA6D;  color: white;}.topnav .icon {  display: none;}
@media screen and (max-width: 600px) {  .topnav a:not(:first-child) {display: none;}  .topnav a.icon {    float: right;  display: block; }}
@media screen and (max-width: 600px) {  .topnav.responsive {position: relative;}  .topnav.responsive .icon {   position: absolute;   right: 0;   top: 0;  }  .topnav.responsive a {    float: none; display: block;  text-align: left;  }} </style><div class="topnav" id="myTopnav">  <a href="#home" class="active">Home</a>  <a href="#news">News</a> <a href="#contact">Contact</a>  <a href="#about">About</a>  <a href="javascript:void(0);" class="icon" onclick="myFunction()">  <i class="fa fa-bars"></i> </a></div><script>function myFunction() {  var x = document.getElementById("myTopnav");  if (x.className === "topnav") {  x.className += " responsive";  } else {  x.className = "topnav";}}</script>

 বন্ধুরা যদি কোডটি কপি করতে সমস্যা হয় তবে কমেন্ট করে জানান।

 উপসংহারঃ 

 বন্ধুরা কোডটি নিশ্চয় আপনার ভালো লেগেছে। আপনি ইচ্ছে করলে কোডটি হেডারে না বসিয়ে ফুটারেও বসাতে পারেন।আপনাদের জন্য আগামি পোষ্ট হবে কীভাবে ফুটার বার যুক্ত করবেন।তো আজ এপর্যন্ত নতুন কিছু পেতে আমাদের সাথেই থাকুন।

আমার ব্লগ ভিজিট করতে পারেন Visit