Jan 15, 2016

ব্লগার Template এর Header অংশে Responsive Menu Bar যুক্ত করুন

প্রফেশনাল ব্লগার টেমপ্লেট তৈরির ৫ম পর্ব শুরু করছি। আমাদের আজকের পর্বে শেয়ার করব কিভাবে ব্লগার Template এর Header এ আকর্ষণীয় Menu Bar যুক্ত করবেন। উল্লেখ্য যে, আমরা ইতিপূর্বে প্রফেশনাল ব্লগার টেমপ্লেট তৈরি করার ৪ টি টিউটরিয়াল পাবলিশ করেছি। এই পোষ্টটি আপনার ব্লগে Apply করার আগে অবশ্যই আগের পর্বগুলি ভালভাবে দেখে নেবেন।
ব্লগার Template এর Header অংশে Responsive Menu Bar যুক্ত করুন
যে কোন পার্সোনাল এবং ব্যক্তিগত ব্লগে কিংবা ওয়েবসাইটে একটি Menu Bar থাকা আবশ্যক। Menu Bar ছাড়া কিছুতেই কোন প্রকার ওয়েবসাইটেরই পূর্ণতা পেতে পারে না। আপনি যদি ভিজিটরদের আপনার ব্লগ সম্পর্কে স্পষ্ট ধারনা দিতে চান তাহলে অবশ্যই আপনার ব্লগে একটি Menu Bar যুক্ত করে রাখতে হবে। ভিজিটররা ওয়েবসাইটের Menu Bar দেখলেই বুঝতে পারবে আপনার সাইটে কি ধরনের কনটেন্ট আছে। উপরের চিত্রে আজকের পর্বে Menu Bar টির ডেমো দেখতে পাচ্ছেন। এটি সম্পূর্ণ Responsive ডিজাইনে তৈরি করা হয়েছে। কাজেই ছোট-বড় সব ধরনের ডিভাইসে ভালভাবে শো করাতে পারবেন।
সকল পোষ্ট দেখুন

কিভাবে যুক্ত করবেন?

  • প্রথমে আপনার ব্লগে লগইন করুন।
  • এরপর Template > Edit Html এ ক্লিক করুন।
ব্লগার Template এর Header অংশে Responsive Menu Bar যুক্ত করুন
  • তারপর কিবোর্ড হতে Ctrl+F চেপে </header> অংশটি সার্চ করুন।
  • এখন নিচের কোডগুলি </header> ট্যাগের নিচে পেষ্ট করুন।
<div class='clear'/>
<nav id='main-nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<div class='max-wrapper'>
<a class='responsive-menu' href='#' id='mobile-menu'><i class='fa fa-reorder'/> Menu</a>   
   <ul class='menu'>
    <li><a class='home' expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> HOME</a></li>
    <li><a href='#'><i class='fa fa-bullhorn'/> BLOGING</a></li>
    <li><a href='#'><i class='fa fa-wrench'/> WIDGETS</a></li>
    <li><a href='#'><i class='fa fa-android'/> ANDROID <i class='fa fa-sort-desc'/></a>
   <ul class='sub-menu'>
    <li><a href='#'>Sub-Menu 1</a></li>
    <li><a href='#'>Sub-Menu 2</a>
   <ul>
    <li><a href='#'>Sub Sub-Menu 1</a></li>
    <li><a href='#'>Sub Sub-Menu 2</a></li>
    <li><a href='#'>Sub Sub-Menu 3</a></li>
    <li><a href='#'>Sub Sub-Menu 4</a></li>
    <li><a href='#'>Sub Sub-Menu 5</a></li>
   </ul>
    </li>
    <li><a href='#'>Sub-Menu 3</a>
   <ul>
    <li><a href='#'>Sub Sub-Menu 1</a></li>
    <li><a href='#'>Sub Sub-Menu 2</a></li>
    <li><a href='#'>Sub Sub-Menu 3</a></li>
    <li><a href='#'>Sub Sub-Menu 4</a></li>
    <li><a href='#'>Sub Sub-Menu 5</a></li>
   </ul>
    </li>
   </ul>
    </li>
    <li><a href='#'><i class='fa fa-dollar'/> EARNING</a></li>
    <li><a href='#'><i class='fa fa-tags'/> CATEGORIES <i class='fa fa-sort-desc'/></a>
   <ul class='sub-menu'>
    <li><a href='#'>Sub-Menu 1</a></li>
    <li><a href='#'>Sub-Menu 2</a>
   <ul>
    <li><a href='#'>Sub Sub-Menu 1</a></li>
    <li><a href='#'>Sub Sub-Menu 2</a></li>
    <li><a href='#'>Sub Sub-Menu 3</a></li>
    <li><a href='#'>Sub Sub-Menu 4</a></li>
    <li><a href='#'>Sub Sub-Menu 5</a></li>
   </ul>
    </li>
    <li><a href='#'>Sub-Menu 3</a>
   <ul>
    <li><a href='#'>Sub Sub-Menu 1</a></li>
    <li><a href='#'>Sub Sub-Menu 2</a></li>
    <li><a href='#'>Sub Sub-Menu 3</a></li>
    <li><a href='#'>Sub Sub-Menu 4</a></li>
    <li><a href='#'>Sub Sub-Menu 5</a></li>
   </ul>
    </li>
   </ul>
    </li>
    <li><a href='#'><i class='fa fa-search'/> SEO</a></li>
    <li><a href='#'><i class='fa fa-gear'/> TOOLS</a></li>
    <li><a href='#'><i class='fa fa-camera'/> PORTFOLIO</a></li>
   </ul>
  </div>
</nav>
<div class='clear'/>
  • আবার কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • এখন ]]></b:skin> ট্যাগের ঠিক ‍উপরে নিচের কোডগুলি পেষ্ট করুন।
/* Main Menu
-------------------------------------------------------- */
#main-nav{display:block;margin-top:0px;background:#374147}
.menu{padding:0px;margin:0px;display:block}
.menu li{display:inline-block;position:relative;z-index:100}
.menu li:first-child{margin-left:0}
.menu li a{font-weight:600;text-decoration:none;padding:20px 15px;display:block;color:#fff;transition:all 0.2s ease-in-out 0s}
.menu li a:hover,.menu li:hover>a{color:#fff;background:#ff675c}
.menu ul{visibility:hidden;opacity:0;margin:0;padding:0;width:150px;position:absolute;left:0;background:#fff;z-index:99;transform:translate(0,20px);transition:all 0.2s ease-out}
.menu ul:after{bottom:100%;left:20%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(255,255,255,0);border-bottom-color:#fff;border-width:6px;margin-left:-6px}
.menu ul li{display:block;float:none;background:none;margin:0;padding:0}
.menu ul li a{font-size:12px;font-weight:normal;display:block;color:#797979;background:#fff}
.menu ul li a:hover,.menu ul li:hover>a{background:#4496A4;color:#fff}
.menu li:hover>ul{visibility:visible;opacity:1;transform:translate(0,0)}
.menu ul ul{left:149px;top:0;visibility:hidden;opacity:0;transform:translate(20px,20px);transition:all 0.2s ease-out}
.menu ul ul:after{left:-6px;top:10%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(255,255,255,0);border-right-color:#fff;border-width:6px;margin-top:-6px}
.menu li>ul ul:hover{visibility:visible;opacity:1;transform:translate(0,0)}
.responsive-menu{display:none;width:100%;padding:20px 15px;background:#374147;color:#fff;text-transform:uppercase;font-weight:600}
.responsive-menu:hover{background:#374147;color:#fff;text-decoration:none}
a.home{background:#ff675c}
@media (min-width:768px) and (max-width:979px){
  .mainWrap{width:768px}
  .menu ul{top:37px}
  .menu li a{font-size:12px}
  a.home{background:#374147}
}
@media (max-width:768px){
  .mainWrap{width:auto;padding:50px 20px}
  .menu{display:none}
  .responsive-menu{display:block;margin-top:100px}
  nav{margin:0;background:none}
  .menu li{display:block;margin:0}
  .menu li a{background:#fff;color:#797979}
  .menu li a:hover,.menu li:hover>a{background:#9ca3da;color:#fff}
  .menu ul{visibility:hidden;opacity:0;top:0;left:0;width:100%;transform:initial}
  .menu li:hover>ul{visibility:visible;opacity:1;position:relative;transform:initial}
  .menu ul ul{left:0;transform:initial}
  .menu li>ul ul:hover{transform:initial}
}
  • পুনরায় কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
  • নিচের কোডগুলি </head> ট্যাগের উপরে পেষ্ট করুন।
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 var touch  = $('#mobile-menu');
 var menu  = $('.menu');

 $(touch).on('click', function(e) {
  e.preventDefault();
  menu.slideToggle();
 });

 $(window).resize(function(){
  var w = $(window).width();
  if(w > 767 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });

});
//]]>
</script>
  • আবার কিবোর্ড হতে Ctrl+F চেপে </body> অংশটি সার্চ করুন।
  • নিচের লাইন দুটি </body> ট্যাগের উপরে পেষ্ট করুন।
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
  • সবশেষে Save Template এ ক্লিক করুন।
পরবর্তী পোষ্টঃ পরবর্তী পোষ্টে আমরা ব্লগার টেমপ্লেটের আরেকটি গুরুত্বপূর্ণ অংশ Footer নিয়ে বিস্তারিত আলোচনা করব। ততক্ষণ আমাদের সাথে থাকুন।
Subcribe to our all updates

and Share on
পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট

2 টি মন্তব্য: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

  1. ভালোই লিখেছেন...কিন্তু প্রতি পোস্ট এ লাইভ ডেমো দিবেন...তাহলে ভালো হবে.....

    ReplyDelete
    Replies
    1. Thank you for the compliment. At the end of all post will be publish demo.

      Delete

 
Subscribe for all Updates

Subscribe Now

কপিরাইট © 2015- প্রযুক্তি ডট কম ™, সর্বস্বত্ব সংরক্ষিত

Powered by: