আজ আমরা একটি ট্যাব গেজেট বক্স তৈরি করা শিখবো। এটার বৈশিষ্ট্য একেবারে অন্যরকম। স্থাপন করার কাজটি একটুও কঠিন মনে হবে না। ব্লগের HTML অংশে কোনরকম হাত দিতে হবে না। আর এটার লোডিং টাইমও অনেক বেশি। তাহলে আসুন
আজ আমরা জেনে নিই এই সহজ ট্যাবভিত্তিক গেজেট বক্সটি কিভাবে ব্লগার.কম ব্লগে স্থাপন করতে হয়।
? ব্লগারে লগইন করে নিন।
? এবার ড্যাশবোর্ডের Layout ট্যাবে গিয়ে একটি নতুন HTML গেজেট নিন।
? নতুন নেওয়া HTML/JavaScript গেজেটটিতে নিচের কোডটুকু সম্পূর্ণ কপি করে নিয়ে পেস্ট করে দিন। গেজেটবক্সটির কোন নাম দেবেন না।<style type="text/css">
div.rojina div.TTs
{height: 24px; overflow: hidden; }
div.rojina div.TTs a:hover, div.rojina div.TTs a.Active
{ background-color: #9B946A; }
div.rojina div.Mohan
{ clear: both; border: 1px solid #000000; overflow: hidden; background-color:
#ffffff;}
div.rojina div.Mohan div.Mohan
{ height: 100%; padding: 0px; overflow: hidden; }
div.rojina div.Mohan div.Mohan div.Alas
{ padding: 3px 5px; }
div.rojina div.TTs a
{ border-left:1px solid #000000; border-right:1px solid #000000; border-top:1px
solid #000000; border-bottom:0px solid#000000; float: left;
display: block; width: 100px; text-align:
center; vertical-align: middle; height: 25px; padding-top: 4px;
text-decoration: none; font-family: "Arial", Serif;
font-size: 12px; font-weight: 900; color: #000000}
</style>
<form action="rojina.html" method="get">
<div id="rojina" class="rojina">
<div style="width: 320px;"
class="TTs"> <a>নতুন
পোস্ট</a> <a>কৃতজ্ঞতা</a>
<a>মন্তব্য</a></div>
<div style="width: 320px; height: 200px;" class="Mohan">
<div class="Mohan">
<div class="Alas">
<script style="text/javascript"
src="http://sites.google.com/site/banglahacks/tools/recentposts.js"></script><script
style="text/javascript">var numposts = 10;var showpostdate =
false;var showpostsummary = false;var numchars = 100;var standardstyling =
false;</script><script
src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>
</div>
</div>
<div class="Mohan">
<div class="Alas">
<div align="center"> <a href="http://www.banglahacks.com/">
<img alt="Bangla Hacks" border="0"
src="http://sites.google.com/site/banglahacks/image/banglahacks.jpg"
title="Bangla Hacks" /></a> </div>
</div>
</div>
<div class="Mohan">
<div class="Alas">
<script style="text/javascript"
src="http://sites.google.com/site/banglahacks/shrd/swrcntcmnts.js"></script><script
style="text/javascript">var numcomments = 10;var showcommentdate =
false;var showposttitle = true;var numchars = 50;</script><script
src="/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</div>
</div>
</div>
</div></form>
<script style="text/javascript"
src="http://sites.google.com/site/banglahacks/shrd/tabwidget-bh.js"></script>
<script type="text/javascript">rojina_inisial('rojina');</script>? গেজেটটি সেভ করুন।
ব্যাস তৈরি হয়ে গেল নতুন সহজ ট্যাবভিত্তিক গেজেটবক্স। এখানে তিনটি ট্যাব তৈরি করা হয়েছে এবং তিনরকম কোড বসানো হয়েছে (সবুজ রঙের কোডগুলো)। এই কোডগুলো আপনার পছন্দমতো পাল্টে নিন।
কনফিগারেশন:
? লাল রঙের সংখ্যাগুলো পাল্টিয়ে ট্যাবের প্রস্থ এবং উচ্চতা পাল্টাতে পারবেন।
? 100px পাল্টালে ট্যাবের সাইজ বড়-ছোট হবে।
? 320px পাল্টালে গেজেটের প্রস্থ বড়-ছোট হবে।
? 200px পাল্টালে গেজেটের উচ্চতা কম-বেশি হবে।
? কমলা রঙের বাংলা শব্দগুলো পাল্টে ট্যাবের নাম পরিবর্তন করতে পারবেন।এই কোডটি ডাউনলোড করার জন্য ক্লিক করুন এখানে।
লেখক সম্পর্কে
1 টি মন্তব্য:
আরে ভাই মাউস কাজ করে না কেমন এইভাবে কপি করা যায় না
একটি মন্তব্য পোস্ট করুন