«

»

May 24

avatar

ব্লগস্পটে ব্লগ বানানো

Categories:

ওয়েবসাইট

by Nofayed

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

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

 

  • ১) প্রথমে ব্লগার.কম এ লগইন করে dashboard থেকে আপনার desired ব্লগটার layout এ যান ।
  • ২) add a Gedjet ট্যাব এ ক্লিক করে সেখান থেকে একটি লেবেল গেজেট নিয়ে সেভ করুন।
  • ৩) এবার আপনাকে Layout থেকে Edit HTML ট্যাবে যেতে হবে।
  • ৪) Expand Widget Templates লেখার পাশের চেকবক্সে টিক চিহ্ন দিবেন না।
  • ৫) এবার contrl+F চেপে নিচের লাইনটি খুঁজে বের করুন

 

1
<b:widget id=’Label1′ locked=’false’ title=’Labels’ type=’Label’>

 

৬) আশা করি পেয়ে গেছেন এখন খুঁজে পাওয়া লাইনটি সম্পূর্ণ মুছে দিয়ে নিচের কোডটি স্থাপন করুন।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
b:widget id=’Label1′ locked=’false’ title=’Labels’ type=’Label’>
<b:includable id=’main’>
<b:if cond=’data:title’>
<h2><data:title/></h2>
</b:if>
<div class=’widget-content’>
<br/><select onchange=’location=this.options[this.selectedIndex].value;’ style=’width:200px’>
<option>Label Gadget Name</option>
<b:loop values=’data:labels’ var=’label’>
<option expr:value=’data:label.url’><data:label.name/>
</option>
</b:loop>
</select><b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

পরীক্ষা করে দেখার জন্য নিচের PREVIEW তে ক্লিক করুন। আশা করি সব ঠিক ঠাকই আছে।

যদি সব ঠিক ই থাকে তবে SAVE TEMPLATE এ ক্লিক করে শেভ করুন। উপরের কোডটির দুটো জায়গায় সম্পাদনা করতে হবে। যে সাইডবারে রাখবেন, তার মাপ অনুযায়ী 200px মানটি পরিবর্তন করুন। লেবেল গেজেটটির নাম পরিবর্তন করার জন্য Label থেকে বিভাগ বা ক্যাটাগরি নাম দিয়ে দিন । ব্যাস কাজ শেষ।

ব্লগ এ কিভাবে খুব সহজে রিলেটেড পোস্ট অপশন যোগ করবেন?

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

এটি খুব সহজেই করা যায়। আসুন দেখে নেয়া যাক কিভাবে কি করতে হবে…


১) প্রথমে আপনার ব্লগার.কম এ সাইন ইন করে ড্যাশবোর্ডে প্রবেশ করে Layout >Page elements এ গিয়ে Add Gadget এ ক্লিক করুন।

২) তারপর কোডিং বসানোর জন্য HTML/ Javascript এ ক্লিক করুন। তার পর বক্সে নিচের কোডটুকু কপি করে নিয়ে পেস্ট করে দিন। গেজেটটি সাইডবার বা পোস্টের নিচে বা ফুটার যেখানে খুশি রাখতে পারেন, যে খানেই রাখেন না কেন ঠিকমতোই কাজ করবে।

1 <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”type=”text/javascript”></script> <script src=”http://blogger-related-posts.googlec…-widget-1.0.js” type=”text/javascript”></script> <script type=”text/javascript”> relatedPostsWidget({ ‘containerSelector’:’div.post-body’ ,’loadingText’:’Loading Related Posts…’ });</script>

৪) এবার সেভ করুন।

এবার প্রতিটি পোস্টের নিচের ছবিটার মতোই ৫টি একই রকম রিলেটেড পোস্ট দেখা যাবে।

এই রিলেটেড পোস্ট অংশটিকে আপনি চাইলে একটু রঙিন করে তুলতে পারেন। না করলেও কোন অসুবিধা নেই। আচ্ছা চলুন দেখে নেই কিভাবে রঙ্গিন করতে হবে…
সেক্ষেত্রে Layout > Edit HTML অংশে গিয়ে cont+F চেপে ]]></b:skin> এই কোড টুকু খুঁজে বের করুন। পেয়ে গেলে এই কোডটার ঠিক উপরে নিচের কোডটুকু কপি করে নিয়ে পেস্ট করে দিন।

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16		 #related-posts{
margin:4px;
padding:10px;
}
#related-posts h2{
background: #BDEDFF;
color: #000000;
}
#related-posts ul{
background: #e0ffff;
color: #2008AF;
font-size: 12px;
}
#related-posts-loadingtext{
color:#ff0000;
}
Save Template এ ক্লিক করে টেম্পেলেটটি সেভ করুন।
এবার দেখুন তো পোস্টের নিচের “রিলেটেড পোস্ট” অংশটুকু কেমন কাজ করছে।
চেষ্টা করে দেখুন হয়ে যাবে,পারবেন। 

ব্লগের টাইটেল স্টাইল পরিবর্তন

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

  • ১) প্রথমে আপনার ব্লগে লগ ইন করুন।
  • ২) তারপর ব্লগারে ড্যাসবোর্ড থেকে Design > Page Element এ গিয়ে Add a gadget এ ক্লিক করুন
  • ৩) এরপর HTML/JavaScript সিলেক্ট করলে একটি এডিটর খুলবে। এখানে Title এর জায়গা খালি রেখেContent এর জায়গায় নিচের কোডসমুহ কপি করে পেস্ট করুন। এখানে Write Your Title লেখার জায়গায় আপনার পছন্দমত লেখা দিলে তা টাইটেল বারে প্রদর্শিত হবে।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28		 <script language=”JavaScript1.2″>
// ************************************************** *****************

// script by drevil_nz, Michael Dillon, Christchurch New Zealand.
// Permission granted to use this script provided this credit
// remains intact. Visit my homepage <a href=”http://www.chc.quik.co.nz/juggler/mikey.html” target=”_blank”>www.chc.quik.co.nz/juggler/mikey.html</a>
// Script written for Internet Explorer 4.0+.
// ************************************************** *****************
var message=”Write Your Title” //specifys the title
var message=message+” ” //gives a pause at the end,1 space=1 speed unit, here I used 10 spaces@150 each = 1.5seconds.
i=”0″ //declares the variable and sets it to start at 0
var temptitle=”" //declares the variable and sets it to have no value yet.
var speed=”150″ //the delay in milliseconds between letters
function titler(){
if (!document.all&&!document.getElementById)
return
document.title=temptitle+message.charAt(i) //sets the initial title
temptitle=temptitle+message.charAt(i) //increases the title by one letter
i++ //increments the counter
if(i==message.length) //determines the end of the message
{
i=”0″ //resets the counter at the end of the message
temptitle=”" //resets the title to a blank value
}
setTimeout(“titler()”,speed) //Restarts. Remove line for no-repeat.
}
window.onload=titler
</script>
<script language=”JavaScript1.2″>// ************************************************** *****************// script by drevil_nz, Michael Dillon, Christchurch New Zealand. // Permission granted to use this script provided this credit // remains intact. Visit my homepage <a href=”http://www.chc.quik.co.nz/juggler/mikey.html//” target=”_blank”>www.chc.quik.co.nz/juggler/mikey.html//</a> Script written for Internet Explorer 4.0+.// ************************************************** ***************** var message=”Supernova Solar Systems” //specifys the titlevar message=message+” ” //gives a pause at the end,1 space=1 speed unit, here I used 10 spaces@150 each = 1.5seconds. i=”0″ //declares the variable and sets it to start at 0var temptitle=”" //declares the variable and sets it to have no value yet.var speed=”150″ //the delay in milliseconds between letters function titler(){if (!document.all&&!document.getElementById)returndoc ument.title=temptitle+message.charAt(i) //sets the initial titletemptitle=temptitle+message.charAt(i) //increases the title by one letteri++ //increments the counterif(i==message.length) //determines the end of the message{i=”0″ //resets the counter at the end of the messagetemptitle=”" //resets the title to a blank value}setTimeout(“titler()”,speed) //Restarts. Remove line for no-repeat.} window.onload=titler</script>
আশা করি পারবেন। 
আমরা এখন ব্লগে মোট পোস্ট ও মন্তব্য সংখ্যা কিভাবে দেখানো যায় তাই নিয়ে আলোচনা করব।
এই গেজেটটি দিয়ে আপনার ব্লগে মোট কতটি পোস্ট (Post) প্রকাশিত হয়েছে এবং আপনার ব্লগের ভিজিটর-পাঠকরা (Visitor-Reader) মোট কতগুলো মন্তব্য (Comment) করেছেন তা দেখা যাবে।

এই সুবিধাটিও ব্লগে স্থাপন করা খুব সহজ।

  • নিচের দেয়া কোডটি কপি (Copy) করে নিয়ে একটি নতুন HTML/ Javascripts গেজেটে পেস্ট (Paste) করে দিন।
  • গেজেটটির নাম ‘ব্লগ পরিসংখ্যান’ (Blog Statistics) বা নিজের পছন্দমতো কোন একটি দিন।
  • কোডের অভ্যন্তরের amazingadda.com লেখাটি পাল্টে আপনার ব্লগের ঠিকানাটি (Blog address) লিখে দিন।
  • এবার সেভ (Save) করুন।
1
2
3
4
5
6
7
8
9
10		 <script style=”text/javascript”>
function numberOfPosts(json) {
document.write(‘Posts: <b>’ + json.feed.openSearch$totalResults.$t + ‘</b><br>’);
}
function numberOfComments(json) {
document.write(‘Comments: <b>’ + json.feed.openSearch$totalResults.$t + ‘</b><br>’);
}
</script>
<font color=”blue”><script src=”http://www.amazingadda.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts“></script>
<script src=”http://www.amazingadda.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments“></script></font>


সেটিংস পরিবর্তন করা

  • কোডটির দুইটি সেটিংস পরিবর্তন করতে পারবেন।
  • Posts: লেখাটি যেখানে রয়েছে সেখানে ‘Post’ লেখাটি (বোল্ড করা) পাল্টে ‘পোস্ট সংখ্যা’ বা অন্য যে কোন বাংলা শব্দ লিখতে পারবেন।
  • Comments: লেখাটি যেখানে রয়েছে সেখানে ‘Comments’ শব্দটি (বোল্ড করা) পাল্টে ‘মন্তব্য সংখ্যা’ বা অন্য যে কোন বাংলা শব্দ লিখতে পারবেন।
  • font color=”blue” পাল্টে ‘black’ কিংবা ‘red’ অথবা যে কোন রঙ লিখে দিতে পারবেন।
শুরুতে ১নং পোস্টে দেখেছি কিভাবে ব্লগের লেবেলগুলোকে (Blog label) ড্রপডাউন মেন্যুতে নেওয়া যায়। এখন দেখবো ব্লগের লেভেলগুলোকে কিভাবে সংখ্যাবিহীন করা যায়।

লেবেলের অন্তর্ভূক্ত পোস্টসংখ্যাবিহীন করার উপায় দেখুন:-

  • ব্লগার.কম এ লগইন (Login)করুন।
  • Page Elements পাতায় আপনার লেবেল গেজেটটিতে (Label Gadget) ক্লিক করুন।
  • যে উইন্ডোটি আসবে সেখানে লক্ষ্য করুন
  • Show number of posts per label
  • উপরের লেখাটির পাশের টিক চিহ্নটি (Tick mark) উঠিয়ে দিন।
  • সেভ করুন (Save)।
  • আপনার লেবেলগুলির পাশে আর কোন সংখ্যা দেখা যাবে না।
আশা করি বুঝতে পেরেছেন।
এখন আমরা দেখব- কিভাবে আপনার ব্লগস্পট ব্লগের পোস্ট তারিখ, সময় এবং লেখকের নাম লুকিয়ে রাখবেন।

  • ১) প্রথমেই আপনি আপনার ব্লগে সাইন ইন করুন।
  • ২) তারপর আপনি “Deshboard>Layout>Edit Html” এ যান।
  • ৩) তারপর “Expand Wedget Templates” এ ক্লিক করুন।

পোস্টের তারিখ লুকানোর জন্য
প্রথমে নিচের কোডটি Ctrl+F দিয়ে খুঁজুন এবং পরে কোডটি ডিলেট করে দিন। 
<data:post.dateHeader/>পোস্টের সময় লুকানোর জন্য
নিচের কোডটুকু খুঁজুন এবং খেজে পেলে কোডটুকু ডিলেট করে দিন
<span class=’post-timestamp’> <b:if cond=’data:top.showTimestamp’> <data:top.timestampLabel/> <b:if cond=’data:post.url’> <a class=’timestamp-link’ expr:href=’data:post.url’ rel=’bookmark’ title=’permanent link’><abbr class=’published’ expr:title=’data:post.timestampISO8601′><data:post .timestamp/></abbr></a> </b:if> </b:if> </span> পোস্টে লেখকের নাম লুকানোর জন্য
এর জন্য প্রথমে নিচের কোডটুকু খুঁজুন এবং কোডটুকু খুজে পেলে ডিলেট করে দেন ।
<span class=’post-author vcard’> <b:if cond=’data:top.showAuthor’> <data:top.authorLabel/> <span class=’fn’><data:post.author/></span> </b:if> </span> এই কাজ গুলি করা একেবারেই সহজ। আশাকরি সবাই পারবেন।
এখন দেখুন কিভাবে আপনার ব্লগস্পট ব্লগে মেন্যুবার লাগাবেন।
তাহলে আসুন শুরু করি।

  • প্রথমে গুগল আইডি ও পাসওয়ার্ড দিয়ে ব্লগার.কম এ লগ ইন করুন।
  • তারপর Deshboard>Layout> Edit HTML পাতায় যান।
  • Ctrl+F দিয়ে ]]</b:skin> এই লিখাটি সার্চ করুন। লেখাটি পেলে তার ঠিক উপরে নিচের কোডটি বসিয়ে দিন।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100101
102
103
104
105		 /* 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’> লেখাটির ঠিক উপরে নিচের কোডটি লিখুন।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
3940
41
42
43
44
45
46
47
48
4950
51
52		 <div id=”NavbarMenu”>
<div id=”NavbarMenuleft”>
<ul id=”nav”>
<li><a>Home</a></li>
<li><a href=”#”>Blogging</a>
<ul>
<li><a href=”http://www.amazingadda.com”>Blogspot</a>
<ul>
<li><a href=”http://www.amazingadda.com“>Webdesign</a></li>
<li><a href=”http://www.”>amazingadda.com‘>Blogger</a></li>
<li><a href=”http://www.”>Gadgets</a></li>
</ul>
</li>
<li><a href=”http://www.amazingadda.com“>Wordpress</a></li>
<li><a href=”http://www.amazingadda.com“>Report</a></li>
<li><a href=”http://www.amazingadda.com“>Html</a></li>
</ul>
</li>
<li><a href=”http://www.amazingadda.com“>Linux</a>
<ul>
<li><a href=”http://www.amazingadda.com“>Ubuntu</a></li>
<li><a href=”http://www.amazingadda.com“>kalpurush</a></li>
</ul>
</li>
<li><a href=”#”>Other</a>
<ul>
<li><a href=”http://www.amazingadda.com“>E Book</a></li>
<li><a href=”http://www.”>Downamazingadda.comload</a></li>
<li><a href=”http://www.amazingadda.com“>HTML</a></li>
<li><a href=”http://www.”>amazingadda.comAbout</a></li>
<li><a href=”http://www.amazingadda.com“>Email me</a></li>
<li><a href=”http://www.amazingadda.com“>Link to us</a></li>
<li><a href=”http://www.amazingadda.com“>Table of Contents</a></li>
</ul>
</li>
<li><a href=”http:///amazingadda.com“>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”>// <=!=[=C=D=A=T=A=[
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’>এই অংশের মধ্যে অন্যকিছুও বসিয়ে দিতে পারেন।

কিভাবে আপনার ব্লগে আলতো করে সরে যাওয়া মেন্যু তৈরি করবেন।

এটি আপনি খুব সহজেই করতে পারবেন । নিচের ধাপ গুলি একে একে অনুসরন করুন।

  • প্রথমে আপনার ব্লগে সাইন লগ ইন করুন।
  • তারপর Deshboard>Design>Edit Html এ ক্লিক করুন।
  • এখন Ctrl+F দিয়ে ]]></b:skin> এই লিখাটি সার্চ করুন । কোডটি সার্চ করে পেলে নিচের কোডগুলি ঠিক তার উপরে বসিয়ে দিন।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47		 .container {
width: 520px;
height: 100px;
position: absolute;
top: 10%; left: 60%;
margin: 0px 0 0 -80px;
overflow: hidden;
}
img {border: none;}
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 520px;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 10px;
float: left;
text-decoration: none;
color: #fff;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.bh span{
color: #FF0000;
background: url(http://4.bp.blogspot.com/_8X8A6_fKD8A/S9CJ2V4UjuI/AAAAAAAAC-o/COPWQ-reKBE/s320/hmenu.png) repeat-x left top;
}
ul#topnav.bh a{
color: #555;
background: url(http://4.bp.blogspot.com/_8X8A6_fKD8A/S9CJ2V4UjuI/AAAAAAAAC-o/COPWQ-reKBE/s320/hmenu.png) repeat-x left bottom;
}

ভাবছেন কাজ শেষ ? না আরও কাজ বাকি আছে , এখনি সেইভ করতে যাবেন না ।

  • এখন আবার Ctrl+F দিয়ে </head> এই লিখাটি সার্চ করুন । কোডটি সার্চ করে পেলে নিচের কোড গুলি ঠিক তার উপরে বসিয়ে দিন।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23		 <script src=’http://ajax.googleapis.com/ajax/libs…/jquery.min.js’ type=’text/javascript’/><script type=’text/javascript’>
$(document).ready(function() {
$(“#topnav li”).prepend(“<span/>”);$(“#topnav li”).each(function() {
var linkText = $(this).find(“a”).html();
$(this).find(“span”).show().html(linkText);
});$(“#topnav li”).hover(function() {
$(this).find(“span”).stop().animate({
marginTop: “-40″
}, 250);
} , function() { //On hover out…
$(this).find(“span”).stop().animate({
marginTop: “0″
}, 250);
});

});
</script>
  • এখন আবার Ctrl+F দিয়ে <div id=’content-wrapper’> এই লিখাটি সার্চ করুন । কোডটি সার্চ করে পেলে নিচের কোড গুলি ঠিক তার উপরে বসিয়ে দিন।
1
2
3
4
5
6
7
8		 <ul class=’bh’ id=’topnav’>
<li><a href=http://techtunes.com.bd”>Home</a></li>
<li><a href=’#http://nofayed.com>Blogspot</a></li>
<li><a href=’http://nofayed.com‘>Blog Design</a></li>
<li><a href=’http://nofayed.com‘>Blog</a></li>
<li><a href=’http://nofayed.com‘>Blogspt Blog Design</a></li>
<li><a href=’http://nofayed.com‘>Blog Design Tutorial</a></li>
</ul>
  • এখানে আপনার পছন্দমতো লিংক ও লিংকের নাম বসাতে হবে। আর আমি এখানে amazingadda.com এর লিংক এবং পাশে যে Home, Blogspot, Blog Design, Blog, Blogspot Blog Design, Blog Dsign Tutorial এই নাম গুলির বদলে আপনার প্রয়োজনীয় নাম লিখুন।
  • এবার সেভ করুন। সেভ করার পূর্বে একবার প্রিভিউ দেখে নিতে ভুলবেন না যেন।
avatar

পোষ্টটি লিখেছেন: Nofayed

Nofayed এই ব্লগে 728 টি পোষ্ট লিখেছেন .

Related Posts:

Share

Leave a Reply

Switch to our mobile site