রিবন স্টাইলের নেভিগেশন বার যুক্ত করুন ব্লগে

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

রিবন স্টাইলের নেভিগেশন বার যোগ করার করনীয়:

১ম: আপনার ব্লগে সঠিক ইমেইল এবং পাসওয়ার্ড দিয়ে লগইন করুন।

২য়: Dashboard থেকে Template নির্বাচন করুন।

৩য়: Edit HTML বাটনে ক্লিক করুন।

৪র্থ: ]]></b:skin> কোডটি খুজে বের করুন।

৫ম: নিচের কোডটি ঠিক ]]></b:skin> কোডটির আগে পেষ্ট করুন।

float: left;

margin: 1em 0.8em;

}

#navigation2 li a {

text-shadow: 0 2px 1px rgba(0,0,0,0.5);

display: block;

text-decoration: none;

color: #f0f0f0;

font-size: 1.6em;

margin: 0;

line-height: 28px;

}

#navigation2 li.active a:hover,

#navigation2 li a:hover {

margin-top: 2px;

}

#navigation2 li.active {

font-style: italic;

}

#navigation2 li.active a {

}

.rectangle {

background: #e5592e;

height: 62px;

position: relative;

-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);

-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);

box-shadow: 0px 0px 4px rgba(0,0,0,0.55);

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

z-index: 500; /* the stack order: foreground */

margin: 3em 0;

}

.l-triangle-top {

border-color: #d9542b transparent transparent;

border-style:solid;

border-width:50px;

height:0px;

width:0px;

position: relative;

float: left;

top: -5px;

left: -50px;

}

.l-triangle-bottom {

border-color: transparent transparent #d9542b;

border-style:solid;

border-width:50px;

height:0px;

width:0px;

position: relative;

float: left;

top: -45px;

left: -150px;

}

.r-triangle-top {

border-color: #d9542b transparent transparent;

border-style:solid;

border-width:50px;

height:0px;

width:0px;

position: relative;

float: right;

right: -45px;

top: -107px;

}

.r-triangle-bottom {

border-color: transparent transparent #d9542b;

border-style:solid;

border-width:50px;

height:0px;

width:0px;

position: relative;

float: right;

top: -149px;

right: -145px;}

এবার Template টি সেইভ করুন এবং Layout ট্যাবে প্রবেশ করুন। একটি HTML/JavaScript গ্যাজেট যুক্ত করুন এবং নিচের কোডটি পেষ্ট করুন।

<div id="navigation_container">

<!-- the left side of the fork effect -->

<div></div>

<div></div>

<!-- the ribbon body -->

<div>

<!-- the navigation links -->

<ul id="navigation2">

<li><a href="#"> Home</a></li>

<li><a href="#"> About</a></li>

<li><a href="#"> Downloads</a></li>

<li><a href="#"> Contact</a></li>

<li><a href="http://tipsworldbd.blogspot.com/"> Services</a></li>

</ul>