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

ফেসবুকের পেইজ লাইকবক্স সংযুক্তিঃ

ব্লগে ফেসবুক পেইজ লাইক বক্স সংযুক্ত করার জন্য প্রথমে একটি পেইজ তৈরি করুন।ফেসবুকে লগিন করে এই লিঙ্কে সরাসরি ক্লিক করে পেইজ বানাতে পারবেন।পেইজ বানানোর পরে তার মুলপাতায় প্রবেশ করুন।উপরে এড্রেসবারে লিঙ্কটি খেয়াল করুন।যাদের আগে থেকেই পেইজ বানানো আছে তারাও একইভাবে পেইজে ঢুকে এড্রেসবারে লিঙ্কটি খেয়াল করুন। এটিই পরবর্তীতে দরকার হবে।

এবার ব্লগারে ড্যাসবোর্ড থেকে Design > Page Element এ গিয়ে Add a gadget এ ক্লিক করুন।এরপর HTML/JavaScript সিলেক্ট করলে একটি এডিটর খুলবে।এখানে Title এর জায়গায় আপনার ইচ্ছামত টাইটেল লিখে Content এর জায়গায় নিচের কোডসমুহ কপি করে পেস্ট করুন।লাল রঙে লেখা Your page URL জায়গায় আপনার পেইজের লিঙ্কটি কপি করে পেস্ট করে দিবেন।এছাড়া width আপানার ব্লগের গেডগেটের সাথে সামঞ্জস্য রেখে পরিবর্তন করে দিতে পারেন।এরপর সেভ বাটনে ক্লিক করে গেডগেটটি সেভ করুন।

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="Your page URL" show_faces="true" stream="false" header="true"></fb:like-box>

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

আপনারা এই ব্লগে ঢুকলে দেখতে পাবেন ব্লগের টাইটেল টাইপ-রাইটারের মত টাইপ করে প্রদর্শিত হচ্ছে।এটা করাও একবারে সোজা।প্রথমে ব্লগারে ড্যাসবোর্ড থেকে Design > Page Element এ গিয়ে Add a gadget এ ক্লিক করুন।এরপর HTML/JavaScript সিলেক্ট করলে একটি এডিটর খুলবে।এখানে Title এর জায়গা খালি রেখে Content এর জায়গায় নিচের কোডসমুহ কপি করে পেস্ট করুন।এখানে লাল কালার করা লেখার জায়গায় আপনার পছন্দমত লেখা দিলে তা টাইটেল বারে এইভাবে প্রদর্শিত হবে।

<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 www.chc.quik.co.nz/juggler/mikey.html

// Script written for Internet Explorer 4.0+.

// *******************************************************************

var message="Supernova Solar Systems"     //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>

এনিমেটেড রিসেন্ট পোস্ট বক্স সংযুক্তিঃ

আমার ব্লগে নিচের দিকে ডান-পাশে তাকালে দেখতে পাবেন, লেটেস্ট ১০ টি পোস্ট পরপর নামছে।এই ধরনের বক্স সংযুক্ত করার জন্য ব্লগারে ড্যাসবোর্ড থেকে Design > Page Element এ গিয়ে Add a gadget এ ক্লিক করুন।এরপর HTML/JavaScript সিলেক্ট করলে একটি এডিটর খুলবে।এখানে Title এর জায়গায় Recent Post লিখে Content এর জায়গায় নিচের কোডসমুহ কপি করে পেস্ট করুন।লাল কালারের Your Blog URL এর জায়গায় আপনার ব্লগের ঠিকানা এবং numpost="10" এর জায়গায় কয়টি পোস্ট এভাবে পরপর দেখতে চান তা পরিবর্তন করে সেভ বাটনে ক্লিক করুন।

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<style type="text/css" media="screen">

<!--

#spylist {

overflow:hidden;

margin-top:5px;

padding:0px 0px;

height:350px;

}

#spylist ul{

width:220px;

overflow:hidden;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#spylist li {

width:208px;

padding: 5px 5px;

margin:0px 0px 5px 0px;

list-style-type:none;

float:none;

height:70px;

overflow: hidden;

background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;

border:1px solid #ddd;

}

#spylist li a {

text-decoration:none;

color:#4B545B;

font-size:11px;

height:18px;

overflow:hidden;

margin:0px 0px;

padding:0px 0px 2px 0px;

}

#spylist li img {

float:left;

margin-right:5px;

background:#EFEFEF;

border:0;

}

.spydate{

overflow:hidden;

font-size:10px;

color:#0284C2;

padding:2px 0px;

margin:1px 0px 0px 0px;

height:15px;

font-family:Tahoma,Arial,verdana, sans-serif;

}

.spycomment{

overflow:hidden;

font-family:Tahoma,Arial,verdana, sans-serif;

font-size:10px;

color:#262B2F;

padding:0px 0px;

margin:0px 0px;

}

-->

</style>

<script language='javascript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "Your Blog URL";

limitspy=4

intervalspy=4000

</script>

<div id="spylist">

<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>

</div>

আজ এ পর্যন্তই।আগামী পর্বগুলোতে আমরা ব্লগকে সুন্দর করার আরো কিছু উপায় দেখব।ধন্যবাদ।

আমার ব্লগস্পট

-------------------------------