আসসালামু অলাইকুম বন্ধুরা সবাইকে জুম্মা মুবারক আশাকরি সবাই খুব ভালো ও সুস্থ আছেন । আপনাদের দোয়াই ও আল্লাহ্ এর রহমতে আমি খুব ভালো ও সুস্থ আছি কিন্তু একটু চিন্তাই আছি । যাই হোক সে সব কথা পরে হবে । আজকে আমি আপনাদের জন্য নিয়ে এলাম CSS3 স্টাইল UL List ওয়েডগেট এটা দেখতে সত্যি ভীষণ সুন্দর আপনি যদি এটা ব্যবহার করেন তবেই বুঝবেন এটার ব্যবহার কতটা মজার । বেশি কথা বলবো না নীচে থেকে দেখে নিন এটা কিভাবে আপনার ব্লগে যুক্ত করবেন এবং আপনার ব্লগ পোস্টে ব্যবহার করবেন ।
☞ উপরের ফটো দেখুন তাহলেই বুঝতে পারবেন এটার ব্যবহার আসলে কি ! হুম আপনি এই ইফেক্ট আপনার পোস্টের যেকোনো টেক্সট এর মধ্যে দিতে পারবেন ।
☞ কিভাবে UL List ওয়েডগেট আপনার ব্লগে যুক্ত করবেনঃ
১// ব্লগ লগইন করুন ড্যাশবোর্ডে যান ।
২// Template → Edit HTML এ ক্লিক করুন ।
৩// কীবোর্ড থেকে CTRL+F প্রেস করে
৪// এবার ]]></b:skin> এই ট্যাগটি খুজে বের করে তার ঠিক উপরে বা আগে নীচের কোড গুলো কপি পেস্ট করুন ।
.post ul{
margin: 0;
padding: 0;
list-style: none;
}
.post ul li{
width: 100%;
clear:left;
overflow: hidden;
}
.post ul li:hover{
color: #fff;
background: #ce3e3e;
border-left: 8px solid darkred;
min-width: 450px;
-webkit-box-shadow: 0 0 5px gray;
-moz-box-shadow: 0 0 5px gray;
box-shadow: 0 0 5px gray;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
margin: 0;
padding: 0;
list-style: none;
}
.post ul li{
width: 100%;
clear:left;
overflow: hidden;
}
.post ul li:hover{
color: #fff;
background: #ce3e3e;
border-left: 8px solid darkred;
min-width: 450px;
-webkit-box-shadow: 0 0 5px gray;
-moz-box-shadow: 0 0 5px gray;
box-shadow: 0 0 5px gray;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
উপরের কোড থেকে হাইলাইট কালার মুছে আপনার পছন্দের কালার যুক্ত করেতে পারেন !.
☞ এবার Save Template এ ক্লিক করে বেরিয়ে আসুন । নীচে থেকে দেখে নিন কিভাবে আপনার ব্লগে ব্যবহার করবেন ।
☞ কিভাবে আপনার ব্লগ পোস্টে এই স্টাইল ব্যবহার করবেনঃ
১// নতুন পোস্ট করুন এবার HTML ট্যাবে ক্লিক করুন । নীচের চিত্রে দেখুন
২// এবার নীচের কোড গুলো গুলো ব্যবহার করুন ।
<ul>
<li>List Test 1</li>
<li>List Test 2</li>
<li>List Test 3</li>
<li>List Test 4</li>
<li>List Test 5</li>
</ul>
<li>List Test 1</li>
<li>List Test 2</li>
<li>List Test 3</li>
<li>List Test 4</li>
<li>List Test 5</li>
</ul>
৩// উপরের List Test টেক্সট মুছে সেখানে আপনি যা কিছু লিখতে পারেন । ব্যাস পোস্ট প্রকাশ করুন আপনার ব্লগ ভিজিট করে দেখুন আশাকরি আপনি কাজটি করতে সফল হয়েছেন ।
☞ পোস্টটি থেকে বুঝতে কোন রকম সমস্যা হলে অবশ্যই যানাবেন । পোস্টটি ভালো লাগলে অবশ্যই বন্ধুদের সাথে শেয়ার করুন এবং তাদের দেখার সুযোগ করে দিন সঙ্গে আমার ব্লগ প্রচারেও সাহায্য করুন । তাহলে আজকের মতো এই পর্যন্ত ভালো থাকবেন সুস্থ থাকবেন । আল্লাহ্ হাফেজ ।