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

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

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

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

২য়: 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>

ব্লগ ডিজাইন করার জন্য আর কিছু পোষ্ট রইল আপনাদের জন্য যদি প্রয়োজন হয় দেখতে পারেন।

Add recent comments widget manually with avatar

Delete duplicate files and increase disk space

Add full customizable related posts widget to blog

Level 0

আমি অসীম কষ্ট। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 7 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 39 টি টিউন ও 35 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

আমি একজন ছাত্র পড়াশুনার ফাঁকে ফাঁকে কম্পিউটার নিয়ে ঘাটাঘাটি করি। এতে আমি যা জানতে পারি বা বুঝতে পারি তা বন্ধুদের সাথে শেয়ার করি। ঘুরে বেড়াতে ভাল লাগে একা একা থাকতে আর সারাদিন নাওয়া খাওয়া ছেড়ে কম্পিউটারের সাথে লেগে থাকতে ভাল লাগে। খুব বেশি বন্ধু তবে আমরা যখন একত্র হই তখন...


টিউনস


আরও টিউনস


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


টিউমেন্টস

Level 0

ভাই, আপনার ব্লগ এরঃ Add a nice author widget to blogspot
এই পোষ্ট টি আমার ব্লগ এরঃ

How to add “Author” widget to blogger blog below every post

উপরের পোষ্ট থেকে হুবুহু কপি পেষ্ট করা…হয়ত ডিলেট করুন নয়ত Source দিবেন…এভাবে কপি পেষ্ট করবেন না…

    @jitdeb: কপি পেষ্ট করার জন্য দুঃখিত, আমি আপনার পোষ্টটি ডিলিট করে দিয়েছি। আসলে স্কিন শট নিতে না পারায় ছবি গুলো কপি করেছিলাম।

      Level 0

      @অসীম কষ্ট: ধন্যবাদ।। কারন কপি পেষ্ট করলে মুল পোষ্ট এর কোন মূল্য থাকে না…তাই।।