সাজিয়ে নিন আপনার ব্লগস্পট ব্লগ [পর্ব-০৭] :: আপনার ব্লগস্পট ব্লগের জন্য তৈরি করুন মেন্যুবার

সাজিয়ে নিন আপনার ব্লগস্পট ব্লগ

কেমন আছেন সবাই ?

আশা করি সবাই ভালো আছেন।

আমিও আপনাদের দোয়ায় ভালো আছি।

আজ আমি আমার ব্লগস্পট ব্লগ ডিজাইন নিয়ে ৭ম পর্ব করতে যাচ্ছি।

আর আমি কিন্তু আজ খুব খুশি এবং টেকটিউনসকে আমি ধন্যবাদ জানাচ্ছি যে আমার পোস্ট গুলি তারা চেইন টিউনের তালিকায় রেখেছেন।

আর যারা আমার আগের পর্ব গুলি মিস করছেন তারা আগের পর্বগুলো দেখতে পারেন।

আজকে আমি দেখাবো কিভাবে আপনি আপনার ব্লগস্পট ব্লগে মেন্যুবার লাগাবেন। তাহলে আসুন শুরু করি।

  • প্রথমে গুগল আইডি ওপাসওয়ার্ড দিয়ে ব্লগার.কম এ লগইন করুন।
  • তারপর Deshboard>Layout> Edit HTML পাতায় যান।
  • Ctrl+F দিয়ে  ]]</b:skin> এই লিখাটি সার্চ করুন। লেখাটি  পেলে তার ঠিক উপরে নিচের কোডটি বসিয়ে দিন।
/* Navigation ----------*/
 #NavbarMenu {
 background: #A0CFEC;
 width: 980px;
 height: 34px;
 font-size: 12px;
 font-weight: bold;
 font-family: 'AdorshoLipi', Arial, Tahoma, Verdana;
 color: #000000;
 margin: 0;
 padding: 0;
 float:left;
 }
 #NavbarMenuleft {
 width: 690px;
 float: left;
 margin: 0;
 padding: 0;
 }
 #NavbarMenuright {
 width: 285px;
 float: right;
 margin: 0;
 padding: 6px 0 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 {
 color: #2008AF;
 display: block;
 font-size: 14px;
 font-weight: bold;
 font-family: Georgia, Times New Roman;
 margin: 0;
 padding: 5px 10px 5px;
 }
 #nav li a:hover, #nav li a:active {

color: #000000;
 font-weight: bold;
 margin: 0;
 padding: 5px 10px 5px;
 text-decoration: underline;
 }
 #nav li li a, #nav li li a:link, #nav li li a:visited {
 background: #A0CFEC;
 width: 100px;
 color: #2008AF;
 font-size: 14px;
 font-family: 'AdorshoLipi', Georgia, Times New Roman;
 font-weight: normal;
 float: none;
 margin: 0;
 padding: 3px 4px;
 border-bottom: 1px solid #FFF;

}
 #nav li li a:hover, #nav li li a:active {

color: #000000;
 padding: 3px 4px;
 }
 #nav li {
 float: left;
 padding: 0;
 }
 #nav li ul {
 z-index: 9999;
 position: absolute;
 left: -999em;
 height: auto;
 width: 150px;
 margin: 0;
 padding: 0;
 border-left:1px solid #BFC0C0;

}
 #nav li ul a {
 width: 100px;
 }
 #nav li ul ul {
 margin: -28px 0 0 100px;
 }
 #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;
 }
  • এবার নিচের দিকে স্ক্রল করে যান।
  • নিচের দিকের <div id='content-wrapper'> লেখাটির ঠিক উপরে নিচের কোডটি লিখুন।
<div id="NavbarMenu">
<div id="NavbarMenuleft">
<ul id="nav">
	<li><a>Home</a></li>
	<li><a href="#">Blogging</a>
<ul>
	<li><a href="https://www.techtunes.co">Blogspot</a>
<ul>
	<li><a href="https://www.techtunes.co">Webdesign</a></li>
	<li><a href="http://www.">techtunes.co'>Blogger</a></li>
	<li><a href="http://www.">Gadgets</a></li>
</ul>
</li>
	<li><a href="http://www.techtunes..com.bd">Wordpress</a></li>
	<li><a href="https://www.techtunes.co">Report</a></li>
	<li><a href="https://www.techtunes.co">Html</a></li>
</ul>
</li>
	<li><a href="https://www.techtunes.com">Linux</a>
<ul>
	<li><a href="https://www.techtunes.co">Ubuntu</a></li>
	<li><a href="https://www.techtunes.co">Asif Pagla Sabbir</a></li>
</ul>
</li>
	<li><a href="#">Other</a>
<ul>
	<li><a href="https://www.techtunes.co">E Book</a></li>
	<li><a href="http://www.">Downtechtunes.coload</a></li>
	<li><a href="https://www.techtunes.co">HTML</a></li>
	<li><a href="http://www.">techtunes.coAbout</a></li>
	<li><a href="https://www.techtunes.co">Email me</a></li>
	<li><a href="https://www.techtunes.co">Link to us</a></li>
	<li><a href="https://www.techtunes.co">Table of Contents</a></li>
</ul>
</li>
	<li><a href="http:/://www.techtunes.co">BH Templates</a></li>
</ul>
</div>
<div id="NavbarMenuright"><script type="text/javascript" src="http://tareq.wedevs.com/bangla_date_widget.php"></script>,<script type="text/javascript">// <![CDATA[
 var d=new Date();
 var weekday=new Array(7);
 weekday[0]="রবিবার )";
 weekday[1]="সোমবার )";
 weekday[2]="মঙ্গলবার )";
 weekday[3]="বুধবার )";
 weekday[4]="বৃহস্পতিবার )";
 weekday[5]="শুক্রবার )";
 weekday[6]="শনিবার )";
 document.write(" ( " + weekday[d.getDay()]);

// ]]></script></div>
</div>
  • নিজের প্রয়োজনমতো লিংকগুলি ও এ্যাংকর টেক্সটগুলি বদলিয়ে নিন।
  • একটু ধীরে ধীরে সময় নিয়ে করবেন, না হলে সবকিছু এলোমেলো হয়ে যাবে।
  • আমি ন্যাভবারটির ডানপাশে বাংলা তারিখ কোড সহ দিলাম। আপনারা <div id='NavbarMenuright'>এই অংশের মধ্যে অন্যকিছুও বসিয়ে দিতে পারেন।

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

সবাই ভালো থাকুন, সুস্থ থাকুন, ভালবাসাসহ আপনাদেরই আসিফ পাগলা সাব্বির।

Level 0

আমি সাব্বির আলম। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 9 বছর 12 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 108 টি টিউন ও 869 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 5 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

আমি মোহাম্মদ সাব্বির আলম ( আসিফ পাগলা সাব্বির ) । Google Adsense এর একজন পাবলিশার্স হিসাবে কাজ করছি। বর্তমানে SEO নিয়েই পরে থাকতে এবং সবার মাঝে শেয়ার করতেই ভালো লাগে। আর বাংলা ব্লগিং করাটাই সব চেয়ে বড় নেশা। আমার সম্পর্কে আরো বিস্তারিত জানতে অথবা লাইভ সাপোর্ট পেতে আমাকে ফেইসবুকে অ্যাড...


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

Level 0

চমৎকার। ধন্যবাদ পোস্টের জন্য

    আপনাকেও ধন্যবাদ। আর সবার প্রথম কমেন্টের জন্য আপনাকে এবারও ধন্যবাদ@billi: ভাই

অতি ধন্যবাদ। আচ্ছা, টেম্পলেটে বেশী কোড লাগালে ভারী হয়ে যাবেনা তো?

আর ভাইজান একটা উপকার করেন পারলে, অথবা এটা নিয়ে টিউনও করতে পারেন। সেটা হল -কোড হাইলাইটার কিভাবে যুক্ত করা যায়? মানে সিএসএস কোড অথবা টেম্পলেটে কিংবা গ্যাজেট আকারে যেটাই হোক, সহজ উপায় জানাবেন। অপেক্ষায় থাকলাম।

Level 0

ধন্যবাদ ভাই পাড়লে আরও লিখেন 😛

ধন্যবাদ ভাই । চালিয়ে যান ।

Level 0

nice post but gadget diye ei kajta kora jay na?

    ধন্যবাদ আপনার মন্তব্যর জন্য। গেডজেড দিয়ে করা যায় কিনা আমার জানা নাই। তবে আপনি কি এভাবে পারছেন না ? গেডজেড এর কি দরকার ? @Ismail: ভাই

Level 0

মেন্যুবার কিভাবে লাগাতে হয় বুঝিই বলুন আমি বুঝি না আপনে উপরে যে code দিছেন এগুলো লাগাব না কি

    আপনি কি পোস্টটি পড়ছেন নাকি শুধু কোডটুকু দেখছেন ? প্রথমে http://www.blogspot.com এ গিয়ে সাইন ইন করুন । তারপর Design এ ক্লীক করুন তারপর edit html এ ক্লীক করে যেখানে কোড দিতে বলেছি ঐ খানে কোড গুলো ধাপে ধাপে বসিয়ে দিন @ansar888:

Level 0

খুজে পেলাম না।

Level 0

code আমি cont+f চেপে পাই না কোড না পেলে কিভাবে দিব একটু বুঝিয়ে বলুন pls.Asif bai

আমি একটা ব্লগ খুলছিলাম। এখন দেখি সেটা ওপেন ই হয়না। সমস্যা টা কোথায় বলবেন? http://jinxraju.blogspot.com/

Level 0

মেন্যুবার বানাতে যে কোড লাগে এটা আপনে যে কোড দিছেন এটা দিয়া হয় না

    কেন হবেনা ? আমি কি দিয়ে করলাম ? স্কিনশটটা আমি আমার ব্লগের আর দিছি@ansar888:

যারা এই কোড পাচ্ছেন না তারা এটা পান কিনা দেখেন ???

যারা এই কোডটা পাচ্ছেন না , তারা এইটা কিনা দেখেন ,

ব্যাপার কি কোড গুলি এখানে সো করছে না কেন ? div id=content wrapper না পেলে div id=content এটা পান কিনা দেখেন ? পুরা কোড দিলে শো করছেনা টাই আঙ্কর ট্যাক্স ছারা দিলাম

div id=above পাইলেও হবে। আশাকরি এবার সবাই পাবেন

ভাই কি বলে যে ধন্যবাদ দিব….
অসাধারন পোস্ট
অসংখ্য অসংখ্য ধন্যবাদ আপনার এই মূল্যবান পোস্টের জন্য।

আসিফ ভাই, জিপি ইউজ করি

Level 0

Asif Vai, Post ta khub e kajer but ami menubar boshate parsina. Code step by step save korlei ki menubar site a chole ashbe? Please vai help korun.

    আপনি স্টেপ বাই স্টেপ করে যান হবে ।আর এটা সাইডে না একেবারে উপড়ে যাবে @Shahin:

Level 2

ভাল লাগলো। ধন্যবাদ।

আসিফ ভাই, কাজ হইছে 😀 অনেক অনেক থ্যাঙ্কস

Level 0

Tune ta bes jamelar, boss 1tu kothin kore sekhascen. kothin jenes abar amar valo lage na.

Regards,
Cheap Car Blog

Level 0

পাইনা

Level 0

কন্টেন্ট ওয়ারপার পাইনা

ব্লোগার এর অনেক কিছু মনে হয় পরিবর্তন হয়েছে…!

এইটার উপর লিখলে কি হবে??!!

div class=’content’
er upor dile hobe ki?!!

যাদের সমস্যা আছে তারা এই লিংক টি দেখতে পারেন। ১০০% কাজ হবে আর বিভিন্ন রকমের ডিজাইন ও করতে পারবেন। Updated
http://bdserving.blogspot.com/2012/07/how-to-create-drop-downpop-up-menu-for.html

Level 0

এই কোডটা খুজে পেলাম না help pls

Level 0

আপনার লেখা আমি অনেক আগে থেকেই পড়ি,এগুলো খুবই help full । স্যার আমি ব্লগ করে অনলাইন এ টাকা আয় করতে চাই তাই কিছুদিন হোল একটা ব্লগ খুলেছি । আমি প্রোগ্রমিং জানিনা , বিভিন্ন টিউটোরিয়াল সাইট থেকে জেনেছি পোগ্রামিং না জেনে ও এডসেন্স এর উপযোগী ব্লগ তৈরি করা যায় । এখন সমস্যা হচ্ছে blank page নিয়ে তাতে কি করে post করবো ? যত লেবেল করেই post করি না কেন সব home page এ চলে যায় । মেনু বার তৈরি করার জন্য যে link এর প্রয়োজন page না label link ?link গুলো কোথা থেকে নেব ? ব্রাউজার থেকে কপি করলে হয়না ।এটা কি নিজে করে নিতে হবে ? সাজিয়ে পোষ্ট করতে চাই দয়া করে আমাকে সাহাজ্য করুন ।

vai dashboard e to design option e passi na……….ektu help krben pls??

Level 0

Amar blog site mobile-e dekta pachi na.. ki korbo jadi balen…
http://ghealthmessage.blogspot.com/