ব্লগারের জন্য নতুন ৪ টি Popular Post Widget

ব্লগে ভিজিটরদের ব্যাস্ত রাখার জন্য Post Widget একটি দারুন জিনিস। যার মাধ্যমে আপনার ব্লগের ভিজিটর খুব সহজেই আপনার হিট করা পোষ্ট গুলো একনজের দেখতে পারবেন এবং যেই কন্টেন্ট টা তার পছন্দ হবে সেটি সে দ্রুত একসেস করতে পারবেন।
ব্লগারে ডিফল্ট Popular Post Widget আগে থেকেই থাকে, কিন্তু সেই Popular Post Widget টা যদি আগের চেয়ে দেখতে সুন্দর আর নানান রকম ষ্টাইলে হয় তাহলে খুব সহজেই একজন ভিজিটরের চোখে পরে। যার ফলে ভিজিটর আপনার ব্লগের কন্টেন্ট এ বেশি সময় দেয়। আর বেশি সময় দেওয়া মানে সেটি আপনি বুঝতে পারতেছেন।

নিচে চারটি Popular Post Widget এর CSS Coad দেওয়া হল। যেই Widget টি পছন্দ হবে তার CSS Coad গুলো কপি করুন এবং নচের ধাপগুলো অনুসরণ করুন।

• আপনার Blogger Dashboard এ Login করুন।
• Template এ গিয়ে >>> Edit HTML এ ক্লিক করুন।
• এখন এই HTMLবক্স এর যেকোন জায়গায় ক্লিক করে Ctrl+F চাপুন।
• এখন HTML বক্স এর ডান কোনায় একটি Search Box আসবে,সেখানে ]]></b:skin> লিখে সার্চ দিন।
• সার্চ দিয়ে  ]]></b:skin> এই লেখাটি আসার পর যেই CSS কোড গুলো কপি করলেন সেগুলো শুধু ]]></b:skin> এর আগে Past করে। Save Template দিয়ে বেরিয়ে আসেন। এখন দেখুন আপনার ব্লগারের আপনার কাঙ্ক্ষিত Popular Post Widget টা চলে আসছে।

Popular Posts Widget 1:

CSS Code

#PopularPosts1 h2{ padding:7px 0 3px 0; width:100%; margin-bottom:10px; font-size:1.3em; text-indent:-12px; font-size:18px; text-align:center; color: #757575; /* Color of the widget's title */ } #PopularPosts1 ul{ list-style:none; counter-reset:li; padding:8px 0px 1px; left:-7px; width:290px; } #PopularPosts1 li{ position:relative; margin:0 0 10px 0; padding: 3px 2px 0 17px; left:-5px; width:285px; } #PopularPosts1 ul li{ background: #eee; position: relative; display: block; padding: .4em .2em .4em 2em; *padding: .2em; margin: .5em 0; background: #ddd; text-decoration: none; border-radius: .3em; transition: all .3s ease-out; } #PopularPosts1 ul li:before{ content: counter(li); counter-increment: li; position: absolute; top: 50%; margin: -1.3em; height: 2em; width: 2em; line-height: 2em; font-size: 15px; color: #fff; /* text color of numbers */ background: #FB8835; /* background color of numbers */ border: .2em solid #fff; /* border color */ -webkit-box-shadow: 0 8px 5px -7px #888; -moz-box-shadow: 0 8px 5px -7px #888; box-shadow: 0 8px 5px -7px #888; text-align: center; font-weight: bold; border-radius: 2em; position: absolute; left: 0; transition: all .3s ease-out; } #PopularPosts1 ul li:hover{ background: #eee; } #PopularPosts1 ul li:hover:before{ transform: rotate(360deg); } #PopularPosts1 ul li a{ font: 14px Georgia, serif; /* font size of post titles */ text-shadow: 0 -1px 2px #fff; color: #444; display:block; min-height:25px; text-decoration:none; text-transform: uppercase; } #PopularPosts1 ul li a:hover{ color: #444; }


Popular Posts Widget 2:

CSS Code
#PopularPosts1 h2{ padding:8px 10px 3px 0; width:100%; margin:0; font-size:16px; position:relative; left:-20px; display:block; border-bottom:2px solid #ccc; } #PopularPosts1 ul{ list-style:none; counter-reset:li; padding:10px; width:100%; } #PopularPosts1 li{ /* Styles of each element */ width:100%; position:relative; left:0; margin:0 0 6px 10px; padding:4px 5px; } #PopularPosts1 ul li:before{ /* Style of the numbers */ content:counter(li); counter-increment:li; position:absolute; top:3px; left:-39px; font-size:21px; width:28px; height:28px; border-radius: 50%; color:#777; /* Text color */ border: 2px solid #ddd; /* Rounded border color */ padding:0; text-indent:9px; } #PopularPosts1 ul li a{ display:block; position:relative; left:-45px; width:100%; margin:0; min-height:28px; padding: 5px 3px 3px 39px; color:#333; /* color of the links */ text-decoration:none; font-size:14px; /* Font size of the links */ font-style: italic; } #PopularPosts1 ul li a:hover{ color:#3366ff; margin-left:3px; }

Popular Posts Widget 3:

CSS Code
#PopularPosts1 h2{ padding:8px 10px 3px 0; width:100%; margin:0; font-size:16px; position:relative; left:-20px; display:block; border-bottom:2px solid #ccc; } #PopularPosts1 ul{ list-style:none; counter-reset:li; padding:10px; width:100%; } #PopularPosts1 li{ /* Styles of each element */ width:100%; position:relative; left:0; margin:0 0 6px 10px; padding:4px 5px;

Popular Posts Widget 4:

CSS Code
#PopularPosts1 h2{ position:relative; padding:8px 10px 6px 10px; width:100%; margin-bottom: 5px; font-size:17px; color:#757575; /* Color of the widget's title */ text-align:left; } #PopularPosts1 ul{ list-style:none; counter-reset:li; padding:10px; left:-8px; width:100%; } #PopularPosts1 li{ /* Styles of each element */ width:100%; position:relative; left:0; margin:0 0 1px 12px; padding:4px 5px; } #PopularPosts1 ul li:before{ content: counter(li); counter-increment: li; position: absolute; left: -30px; top: 50%; margin-top: -13px; background: #8E8E8E; /* background color of the numbers */ height: 1.9em; width: 2em; line-height: 2em; text-align: center; font-weight: bold; color: #fff; font-size: 14px; } #PopularPosts1 ul li:after{ position: absolute; content: ''; left: -2px; margin-top: -.7em; top: 50%; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left:10px solid #8E8E8E; /* background color of the right arrow*/ } #PopularPosts1 ul li a{ color: #444; text-decoration: none; font-size:15px; } #PopularPosts1 ul li { position: relative; display: block; padding: .4em .4em .4em .8em; *padding: .4em; margin: .5em 0 .5em 0.4em; background: #ddd; transition: all .3s ease-out; text-decoration:none; transition: all .1s ease-in-out; } #PopularPosts1 ul li:hover{ background: #eee; /* Background color on mouseover */ } #PopularPosts1 ul li a:hover{ color:#444; /* Link color on mouseover */ margin-left:3px; }} #PopularPosts1 ul li:before{ /* Style of the numbers */ content:counter(li); counter-increment:li; position:absolute; top:3px; left:-39px; font-size:21px; width:28px; height:28px; border-radius: 50%; color:#777; /* Text color */ border: 2px solid #ddd; /* Rounded border color */ padding:0; text-indent:9px; } #PopularPosts1 ul li a{ display:block; position:relative; left:-45px; width:100%; margin:0; min-height:28px; padding: 5px 3px 3px 39px; color:#333; /* color of the links */ text-decoration:none; font-size:14px; /* Font size of the links */ font-style: italic; } #PopularPosts1 ul li a:hover{ color:#3366ff; margin-left:3px; }

আরোঃ

Print Button Add করুন আপনার ওয়েব সাইটে

কিভাবে Blogger, WordPress এবং Tumblr এ Payza Donate Button এড করবেন?

নিজের ওয়েবসাইট বানানোর আগে প্রয়োজনীয় কিছু তথ্য জেনে নিন

©2017, Copyright Imran Hasan