Create your Own Website > Create your Own Website

Free Blogger homepage gallery style by showing (through CSS only)

(1/1)

bbasujon:
আমি যখন নতুন ছিলাম তখন টেম্পলেট ডাউনলোড করার সময় লক্ষ্য করতাম গ্যালারি থিম গুলোকে। এগুলোর প্রথম পাতায় পোস্ট দেখানোর ধরণটা খুব ভালো লাগতো।  ভাবতাম এগুলো কেমন করে করে! তবে যখন একটু 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;
height:225px;

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

}

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

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

Navigation

[0] Message Index