ফ্রি ব্লগারের হোমপেজে গ্যালারি স্টাইল পোস্ট দেখানো (শুধু মাত্র CSS দিয়ে)

আমি যখন নতুন ছিলাম তখন টেম্পলেট ডাউনলোড করার সময় লক্ষ্য করতাম গ্যালারি থিম গুলোকে। এগুলোর প্রথম পাতায় পোস্ট দেখানোর ধরণটা খুব ভালো লাগতো।  ভাবতাম এগুলো কেমন করে করে! তবে যখন একটু CSS নিয়ে ঘাটা ঘাটি করলাম তখন বুঝলাম এটা খুব একটা কঠিন কাজ নয়। আপনারদের যার মনে এমন ধারণা থাকে তার আমার এই টিউটোরিয়ালটা কাজে লাগবে। বলে রাখি আপনার এতে আপনার ব্লগের মূল পোস্টের আকারের কোন পরিবর্তন হবে না। পোষ্ট ওপেন করলে যেমন দেখায় তেমনি দেখাবে।

এটা আপনার ব্লগের কারার জন্য ]]></b:skin> এর নিচে অথবা এর   </head> ওপরে নিচের কোড গুলো পেস্ট করে দিন।

<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<style>

/* Posts
———————————————–
*/
h2.date-header {
color:#808080;
font-size:11px;
font-weight:normal;
}

.post {
background:#CCCCCC ;
border:1px solid #BFBFBF;
float:left;
height:225px;
margin:13px;
overflow:hidden;
padding:5px;
position:relative;
width:278px;
}

#post-title-wrapper {
background:#333333;
clear:both;
left:0;
padding:5px;
position:absolute;
top:15px;
}

.post ul li {
line-height:25px;
padding-left:20px;
}

.post ol li {
line-height:25px;
list-style-position:inside;
list-style-type:decimal;
}

.post li a {}

.post li a:hover {}

.post h3 {
bottom:5px;
color:#333333;
font-size:14px;
font-weight:bold;
letter-spacing:0;
margin:0;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
color:#fff;
}

.post h3 strong, .post h3 a:hover {
color:#808080;
}

.post-body {
color:#333333;
font-size:14px;
line-height:1.4em;
}

.post-body blockquote {

}

.post-footer {
bottom:5px;
color:#5F5E5E;
font-size:11px;
margin:0;
padding:0;
position:absolute;
right:5px;
}

.comment-link {

}
.post img {
background:#CCCCCC none repeat scroll 0 0;
height:209px;
margin-bottom:9999px;
padding:0;
width:278px;
}
.post blockquote {
background:#80808;
color:#FFFFFF;
font-family:georgia;
padding:20px 20px 20px 50px;
}
.post blockquote p {

}

.post-footer-line-1 {display:none;}

.post-labels {display:none;}

</style>
</b:if>

এখানে আমি আপনাদের কয়েকটি প্রয়োজনীয় জায়গা বদল করার পদ্ধতি বলছি। আর হ্যাঁ এটা কেবল কিন্তু হোমপেজে দেখানো পোষ্ট অর্থাৎ আমরা যে গ্যালারি স্টাইলের পোস্ট দেখাচ্ছি তার পরিবর্তন হবে।

h2.date-header {
color:#808080;
font-size:11px;
font-weight:normal;
}
এটা হল পোস্ট এর হেডার।  color:#808080; হেডার ফন্ট এর রং। font-size:11px; হেডার ফন্ট এর আকার। font-size:11px;  এখানে যত বড় সংখ্যা দেবেন তত বড় হবে হেডার ফন্ট। এই অংশটা হল পোস্ট ফন্ট এর ধরণ। font-weight:normal; এখনে আপনি যদি Bold  লিখেন তাহলে লেখা বোল্ড হয়ে যাবে আর Underline লিখলে লেখা আন্ডার লাইন হয়ে যাবে।

.post {
background:#CCCCCC;
border:1px solid #BFBFBF;
float:left;

margin:13px;
overflow:hidden;
padding:5px;
position:relative;

}

ইহা পোস্ট এর শরীর। background:#CCCCCC; এটা হল পোষ্ট এর ব্যাকগ্রাউন্ড রং। border:1px solid #BFBFBF; এটা হল পোস্ট এর বডার। 1px এর জায়গায় এর সাইজ বড় করে দিলে বডার বড় হবে। height:225px; এটা হল পোস্ট এর উচ্চতা বড় করলে উচ্চতা বাড়বে। width:278px; এটা হল পোস্ট এর প্রস্থ এটা বড় করলে প্রস্থ বাড়বে।

আর একটা টিপস দেই এই রং এর কোড গুলো ফটোশপে পাবেন তার জন্য ফটোশপ ওপেন করুন। তারপর Color Picker  এ যান।  নিচে লাল দাগ দেয়া অংশ হল কালার কোড এখন থেকে কলার বদল করুন কোডটুক পেস্ট করে দিন। কিন্তু মনে রাখবেন কোন করোণেই যেন # ও ; চিহ্ন মুছে না যায়।

বেশীর ভাগ অংশ বাদ দিয়ে গেলাম এগুলো এভাবে বোঝালে ঠিক ভাবে বুঝবেন না অর্থাৎ আমি বোঝাতে পারবো না। তবে খুব শিগ্রয়ই আমি ফটোশপ থেকে CSS কোড এর কনভার্ট করার টিউটোরিয়াল লিখবো তখন এই বিষয় গুলো ভালো করে বোঝানো যাবে।

আরও দেখুন

ব্লগার(Blogspot) ব্যবহারকারিদের জন্য Related post Widget (template hack)

ফ্রি ব্লগারের পোস্ট বিষয়ক গেজেট