অ্যাড করুন অসাধারন একটি Colorful Text & Icon Navigation Bar শুধু মাত্র ব্লগার ব্লগ এর জন্য!!!

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

• ডেমো বলতে নীচের গিফ ফটো দেখে নিন । ঠিক এই রকমি পাগবে আপনি যখুন আপনার ব্লগে এটি কে যুক্ত করবেন । 

BELOW IS ANIMATED PREVIEW

• কিভাবে এটিকে আপনার ব্লগে অ্যাড করবেন দেখে নিন । 

• আপনার ব্লগ লগ অন করুন তারপর ড্যাশবোর্ড থেকে Edit HTML এ ক্লিক করুন । এবার নীচের কোড টি কে Ctrl + F প্রেস করে খুজে বের করুন । 

]]></b:skin>

• এবার উপরের কোড এর ঠিক আগে নীচের কোডটি কপি করে পেস্ট করে দিন । 

/* The CSS Code for the menu starts here s2free.blogspot.com */ #btrix-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#btrix-nav li {float: left;}
#btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#btrix-nav li a:hover {cursor: pointer;}
#btrix-nav li a:hover img {top: -85px;}
#btrix-nav li a:hover .aname {top: 85px;}
#btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#btrix-nav li:nth-child(2) a {background: #9bc704;}
#btrix-nav li:nth-child(3) a {background: #0dc3ff;}
#btrix-nav li:nth-child(4) a {background: #51a2ec;}
#btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}

• এবার সেভ এ ক্লিক করে Template সেভ করে নিন । 

• এবার ড্যাশবোর্ড থেকে Layout এ ক্লিক করুন । তারপর Add a gadget ক্লিক করে নীচের কোডটি Content ঘরে কপি করে পেস্ট করুন । 

<div id="btrix-nav">
<li> <a href="Tipsashor"><span class="aname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2unsPOGDfR5vXw-8lzp_eZ6XXaH-uFBzB4EDQ8wsuAaGc0beT89X_tZdvfP7jEaHYead_16Iv-neXniiIiLXjTxoQa5vg67SkbuZBsxw69G8GwN_lYbZ_E4FEqdI74zRz_36qdVE-I-k/s1600/btrix-home.png" /> </a> </li>
<li> <a href="Tipsashor"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivzI8fn_mm6NjKb6wpmn6uAKm2Wbtv6ucluJbdyXGvACeNAXnngbI4HcAFUq63FyNf1ZXNKm61luaQ5QNRgC5gGefjsWWO5VqonPCen4MWMt4J97jboW1v6Jnx436mFrn5IRf5olc5hRI/s1600/btrix-download.png" /> </a> </li>
<li> <a href="Tipsashor"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7E2-zxhjOWkEEkrPudCvRA2CDLDKHgUDjW-_kTRcNCdTk_CEEFFDIbnCRxJxdPcqGvnjcRiuoNgwS5wrN8Scm2ikkDY_b7Gcq-EJfn6WyD34z5lCGS0N2M72ul2Y38KgKYOkS4KP-dtE/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="Tipsashor"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMbKsKQ84gN1aZdyBkdA86z_L13Fa2HMMLTATsm4q-cq3ni8pppi1dxcYEuRp42udbGyp_Y1JRpqBgMYoNdWd4LRiDraqvnq2KBcpKxDnmqH32N0KB2J_0KinN8WkwBtD4SEUNo9I5gXc/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="Tipsashor"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu0SBEGSDcOUU0WWOthefY7Nb4QvFCtcC3YUWNwMLpE34Vfm_FX3VufZl3uusyGjilAUhrQEvIfDch9ltCbnca_mZyI-s2H6twPUaYuSYG4CUErUVTNFMhKSn0gTCoLZCKIKTyK9LrIrw/s1600/btrix-contact.png" /> </a> </li> </div>

•  এবার একটু এডিট করে নিতে হবে । 

• উপরে asobondhu টিকে মুছে সেখানে আপনার লিঙ্ক বসিয়ে দিন আর তার পাশে নাম লিখে দিন । 
• এবার সেভ এ ক্লিক করে সেভ করে নিন । 

তাহলে আজকের মতো এই পর্যন্ত ভাল লাগলে একটি কমেন্ট করে জানাবেন । কোন সমস্যা হলে আমাকে যানাবেন । আল্লাহ্‌ হাফেজ