ব্লগারে স্টাটিক পেজে অসাধারণ ডিজাইনের কাস্টম ক্যাটাগরি লিস্ট তৈরি করুন

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

ব্লগারে কাস্টম ক্যাটাগরি পেজ অর্থাৎ স্টাটিক পেজে ক্যাটাগরি উইজেট যুক্ত করার কাজ আমরা দুই ধাপে সম্পূর্ণ করবো।

1. ক্যাটাগরি পেজ তৈরি
2. ক্যাটাগরি পেজ ডিজাইন

ক্যাটাগরি পেজ তৈরি

প্রথমে আপনার ব্লগার ড্যাশবোর্ড থেকে স্টাটিক পেজ অপশনে গিয়ে আপনার ক্যাটাগরি পেজ তৈরির জন্য একটি নতুন পেজ তৈরি করুন(আগে থেকে পেজ তৈরি করা থাকলে সেই পেজের এডিটর ওপেন করুন)। পেজ তৈরি হলে পেজ এডিটর HTML মোডে নিয়ে নিচের কোডগুলো কপি করে পেজের সোর্স কোড এর জায়গায় পেস্ট করে সাইট লিঙ্ক পরিবর্তন করে দিন এবং পেজের সকল পরিবর্তন সেভ করে দিন তাহলেই ক্যাটাগরি পেজ তৈরির কাজ শেষ।

<script type="text/javascript">
	function rWidget(json) {
		document.write("<div class='BCL'>");
		
		for (var i = 0; i < json.feed.category.length; i++){
			var catName = json.feed.category[i].term;
			document.write("<a href='"+SieUrl+"/search/label/"+catName+"'>"+catName+"</a>");
		}
		
		document.write("</div>");
	}
</script>

<script>
	SieUrl = "https://bloggerzbd.blogspot.com";
	document.write("<script src='"+SieUrl+"/feeds/posts/default?alt=json-in-script&callback=rWidget&max-results=2'></"+"script>");
</script>

ক্যাটাগরি পেজ ডিজাইন

পেজ যেহেতু তৈরি হয়ে গেছে তাই এবার পালা সেটাকে একটু ম্যাটেরিয়াল লুক দেওয়ার মানে ডিজাইন করার। এটা করার জন্য টেমপ্লেট এর সোর্স কোডের মধ্যে কিছু নুতুন সিএসএস যুক্ত করতে হবে। তো ম্যাটেরিয়াল লুক দেওয়ার জন্য জাস্ট নিচের সিএসএস কোডগুলো কপি করে আপনার ব্লগার ড্যাশবোর্ড থেকে থিম>>এডিট এইচটিএমএল>> অপশনে গিয়ে টেমপ্লেট এর HTML এডিটর ওপেন করে <b:skin> </b:skin> ট্যাগ এর মধ্যে সব কোডের নিচে পেস্ট করে টেমপ্লেট সেভ করুন। আর হ্যা টেমপ্লেট এডিট করার আগে অবশ্যই টেমপ্লেট ব্যাকআপ করে নেবেন।

.BCL {

	padding:0;

	margin:0;

	color:#1b1c27;

	font-size:14px;

	padding:20px;

}

.BCL a {

	display:block;







	line-height:35px;

	padding:0 8px 0 10px;

	margin:0px;

	color:#1b1c27;

	text-decoration:none;

	font-weight:500;

	text-transform:capitalize;

	border-bottom:1px solid #eee;

	border-right:1px solid #eee;

	border-left:1px solid #eee;

	cursor:default;

	transition:all 0.3s;

	border-radius:0 18px 18px 0;

}

.BCL a:nth-child(1) {

	border-top:1px solid #eee;

}

.BCL a:before {

	content:'\2662';

	font-size:25px;

	font-weight:100;

	line-height:35px;

	height:35px;

	margin:0 10px 0 0;

	float:left;

	transform:rotate(56deg);




}

.BCL a:after {

	content:'\203A';

	font-size:55px;

	font-weight:100;

	line-height:35px;

	height:35px;

	margin:0;

	float:right;

	transform:translate(0px, -3px);

	transition:all 0.3s;

	font-family:sans-serif;

}

.BCL a:hover {

	background:rgba(0,0,0,0.05);

}

.BCL a:hover:after {

		transform:translate(-10px, -3px);

}

তো আশা করছি ক্যাটাগরি পেজের ডিজাইন আপনাদের পছন্দ হয়েছে। তো পোস্টটি ভালো লাগলে কমেন্ট অবশ্যই করবেন, ধন্যবাদ।