আমাদের অনেকেরই ব্লগারে একাধিক ব্লগ আছে। দুটো আলাদা আলাদা ব্লগের ক্ষেত্রে এক ব্লগে যখন বেশি ভিজিটর থাকে তখন সেই ভিজিটর গুলো অপর ব্লগেও নিয়ে যাওয়া অনেক কঠিন। আপনার এক ব্লগ আরেক ব্লগে লিঙ্ক করে দিলেও কেউ সেই ব্লগ ভিজিট করতে চাইবে না। এক্ষেত্রে আপনার এক ব্লগের রিসেন্ট পোস্টগুলো যদি অপর ব্লগে উইজেট আকারে শো করা যায় তাহলে ভালো ফল পাওয়া যেতে পারে। এতে যেহেতু আপনার অপর ব্লগের রিসেন্ট পোস্টগুলো বেশি ভিজিটরের ব্লগে উইজেট আকারে দেখা যাবে তাই পোস্ট এর টাইটেল দেখে যাদের পোস্ট পছন্দ হবে তারা সেই উইজেট থেকে আপনার ওপর ব্লগের পোস্টে প্রবেশ করবে। এভাবে আপনার কম ভিজিটরের ব্লগে ভালো ভিজিটর নিয়ে আসতে পারবেন। তো আপনি যদি আপনার এক ব্লগের রিসেন্ট পোস্ট এর উইজেট আরেক ব্লগে যুক্ত করতে চান তাহলে এই আর্টিকেল ফলো করতে পারেন, এছাড়া একই পদ্ধতিতে আপনি একটি কাস্টম রিসেন্ট পোস্ট উইজেট তৈরি করতে পারবেন।
এক ব্লগের রিসেন্ট পোস্টগুলো অন্য ব্লগে উইজেট আকারে দেখানো কিংবা একই ব্লগের মধ্যে একটি কাস্টম রিসেন্ট পোস্ট উইজেট তৈরি করা অনেক সহজ, এর জন্য জাস্ট নিচের পদ্ধতি অনুসরণ করুন।
প্রথমেই আপনি যে ব্লগে রিসেন্ট পোস্ট উইজেট যুক্ত করতে চান সেই ব্লগের ব্লগার ড্যাশবোর্ড থেকে লেআউট পেজে গিয়ে সাইটবারে একটি উইজেট যুক্ত করুন(সাইতবার ছাড়াও আপনি অন্য জায়গায়ও উইজেট টি যুক্ত করতে পারবেন, তবে সাইটবারে অনেক ভালো দেখায়)।
এবার জাস্ট নিচের কোডগুলো কপি করে আপনার তৈরি করা উইজেট এর কোড বক্সে পেস্ট করে দিন। এবং কোডের মধ্যে এর জায়গায় আপনার ব্লগের ইউআরএল দিন এবং উইজেট সেভ করুন। এছাড়া আপনি চাইলে পোস্ট কাউন্ট পরিবর্তন করতে পারেন।
<script type="text/javascript">
var ImageSize = 200;
//################ Function Start
function rWidget(json) {
document.write('<ul class="rWidget">');
for (var i = 0; i < ListCount; i++){
//################### Variables Declared
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = ListMonth = Y = D = M = m = YY = DD = MM = mm = TT = "";
//################### URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
//################### Info
TotalPosts = json.feed.openSearch$totalResults.$t;
if (json.feed.entry[i].title!= null){
ListTitle= json.feed.entry[i].title.$t;
}
if (json.feed.entry[i].thr$total){
ListComments= json.feed.entry[i].thr$total.$t;
}
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");
ListAuthor=ListAuthor.slice(0, 1).join(" ");
//################### Date Format
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
ListDate= json.feed.entry[i].published.$t.substring(0,10);
Y = ListDate.substring(0, 4);
m = ListDate.substring(5, 7);
D = ListDate.substring(8, 10);
M = ListMonth[parseInt(m - 1)];
//################### Thumbnail Check
// YouTube scan
if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null){
var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();
if (youtube_id.length == 11) {
var ListImage = "//img.youtube.com/vi/"+youtube_id+"/0.jpg";
}
}
else if (json.feed.entry[i].media$thumbnail){
thumbUrl = json.feed.entry[i].media$thumbnail.url;
sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");
ListImage= sk.replace("?imgmax=800","");
}
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null){
// Support For 3rd Party Images
ListImage = json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}
else{
ListImage= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpG8LN5WWsJiEt4eLRvdWcWxTGxI5asYNpMDvNEga0V_b3ztI2rqVDwG9IAaFkRVsuVxKjenoQ_Mkz12ADfadmepUnXiILSegGIUVlrpC5xKS5TZJ70nXlhkIUb46j9SWUcDUFnfjEnng/s200/Icon.png";
}
//################### Printing List
var listing = "<li class='node"+[i]+"' ><a href="
+ ListUrl+
"><img src='"
+ListImage+
"'/></a><a class='mbttitle' href="
+ ListUrl+
"target='_blank'>"
+ ListTitle+
"</a><div class='iline'><span class='iauthor'>"
+ListAuthor+
"</span><span class='idate'>"
+ M + " " + D + ", " + Y +
"</span><span class='icomments'>"
+ ListComments+
"</span></div></li>";
document.write(listing);
}
document.write("</ul>");
}
</script>
<script>
var ListBlogLink = "http://www.trickjal.xyz";
var ListCount = 5;
document.write("<script src='"+ ListBlogLink +"/feeds/posts/default?alt=json-in-script&callback=rWidget&max-results="+ListCount+"'></"+"script>");
</script>
মূল উইজেট তৈরি হয়ে গেল, এবার শুধু সেটা ডিজাইন করার পালা। উইজেট ডিজাইন করার জন্য নিচের সিএসএস কোডগুলো কপি করে ব্লগার ড্যাশবোর্ড থেকে থিম এডিট পেজে গিয়ে <b:skin> </b:skin> ট্যাগের ভিতরে পেস্ট করে দিয়ে টেমপ্লেট সেভ করুন, তাহলেই আপনার রিসেন্ট পোস্ট উইজেট সম্পূর্ণ রেডি। এছাড়া আপনি সিএসএস গুলো এডিট করে উইজেট টি আপনার পছন্দ মতো কাস্টোমাইজ করতে পারবেন।
.rWidget {
list-style-type: none;
overflow: hidden;
padding: 0px!important;
}
.rWidget li {
margin: 0px auto 20px auto;
clear: both;
color: #666;
font-family: helvetica;
font-size: 12px;
}
.rWidget i {
color: #999;
padding-right: 4px;
}
.rWidget .iline {
line-height: 20px;
border: none;
margin-top: 6px;
padding: 0px 4px;
font-size: 12px;
color: #333;
width: 100%;
}
.rWidget div span {
margin: 0 10px 0 0;
display: inline-block;
}
.rWidget span {
display: block;
margin: 5px 0px 0px;
padding-right: 5px;
}
.rWidget img {
float: left;
margin: 0px 10px 10px 0px;
border-radius: 8px;
padding: 0px;
width: 100px;
height: 65px;
box-shadow: none;
}
.rWidget .mbttitle {
font-family: ;
font-size: 13px;
color: #1f2024;
font-weight: bold;
text-decoration: none;
line-height: 1.4em;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.rWidget .mbttitle:hover,
.rWidget .itotal a:hover {
color: #385898;
}
.rWidget .iauthor:before {
content: 'by ';
color: #aaa;
}
.rWidget .icomments {
padding: 0;
float: right;
height: 20px;
width: 20px;
text-align: center;
background: #000;
color: #fff;
position: relative;
}
.rWidget .icomments:after {
box-sizing: border-box;
content: '';
height: 0px;
width: 0px;
background: none;
position: absolute;
bottom: 0px;
left: -6px;
border-bottom: 4px solid #000;
border-right: 4px solid #000;
border-left: 4px solid transparent;
border-top: 4px solid transparent;
transform: rotate(-0deg);
}
.rWidget .idate {
color: #aaa;
}
.rWidget .idate:before {
content: '- ';
}
.rWidget .iedit:before {
content: '\f040';
}
.rWidget .imore {
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #999;
}
.rWidget .itotal {
color: #333;
padding: 5px 10px;
border: 1px solid #eee;
}
.rWidget .itotal a {
font-family: oswald;
font-size: 12px;
font-weight: normal;
color: #0080ff;
text-decoration: none
}
.rWidget .itotal span:before {
content: '\f07c';
}
.rWidget .itotal span font {
padding: 0px 3px;
color: #333;
font-family: georgia;
font-size: 15px;
font-weight: bold
}তো এখানেই শেষ হলো আজকের পোস্ট। আশা করি আপনাদের কাজে আসবে। পোস্টটি কেমন লাগলো সেটা কমেন্ট করে জানাবেন, এর ব্লগার সম্পর্কিত নুতুন নুতুন পোস্ট পেতে এই সাইট রেগুলার ভিজিট করুন, ধন্যবাদ।