সাম্প্রতিক ঘুরন্ত পোস্ট Widget যোগ করুন

এটা জাভা কোড।এটা যোগ করলে খুব সুন্দর ভাবে সাম্প্রতিক/Recent পোস্ট গুলো দেখা যাবে।যোগ করার পর একটার পর একটা লেখা দেখাবে খুবই সুন্দর।আসুন যোগ ...

এটা জাভা কোড।এটা যোগ করলে খুব সুন্দর ভাবে সাম্প্রতিক/Recent পোস্ট গুলো দেখা যাবে।যোগ করার পর একটার পর একটা লেখা দেখাবে খুবই সুন্দর।আসুন যোগ করে নিই।
তার আগে একটু দেখে নেয়া যাক>>> 

লোড হচ্ছে...

কিভাবে যোগ করবেন?

> প্রথমে ব্লগে প্রবেশ করুন।
> Layout এ যান।
> Add A Gadget এ ক্লিক করুন।

> HTML/Javascript সিলেক্ট করুন।

> এবার নিচের কোড গুলো পেস্ট করুন।

<style>
.gfg-root {
width: 100%;
height : auto;
position : relative;
overflow : hidden;
margin: 0 auto;
text-align : center;
font-size: 12px;
border: 2px solid #CAD4E7;
}
.gfg-title {
font-size: 16px;
font-weight : bold;
color : #3D5A99;
background-color: #ECEEF5;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
.gf-title a {
font-weight: bold;
color: #3F86C6;
}
.gfg-subtitle {
display: none;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
}
.gfg-listentry-odd {
background-color : #eeeeee;
}
.gfg-listentry-even {
background-color : #fefefe;
}
.gfg-listentry-highlight {
background: #748BB7;
}
.gfg-listentry-highlight:before {
position: absolute;
left: 0;
content: '\25BA ';
font-size: 14px;
color: #eee;
}
.gfg-listentry-highlight a {
color: #eee;
}
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 14px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
margin-bottom : 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
.clearFloat {
clear : both;
}
</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script><script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {var feeds = [{title:'List',url:'http://helplogger.blogspot.com/feeds/posts/default?redirect=false&start-index=5&max-results=10'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'Latest Posts', numResults : 10, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>

> এবার লাল রঙ http://helplogger.blogspot.com  এর জায়গায় আপনার ব্লগের লিঙ্ক দিন।
> max-results=10 এর জায়গায় কয়টি পোস্ট দেখাতে চান সেটি দিন।

title: 'Latest Posts', এই টাইটেল উপরে থাকবে এটি পরিবর্তন করতে পারেন। 
numResults: 10, আসলে আপনি কয়টি পোস্ট দেখাতে চান সেই নাম্বার টি দিন।
displayTime: 5000, একটি পোস্ট থেকে আরেকটি পোস্টে কত সেকেন্ড পর যাবে এখানে মিলিসেকেন্ডে দেয়া আছে আপনি পরিবর্তন করতে পারেন।

এখন আপনি যদি চান শুধু লেখা গুলো দেখাতে চান আর লিস্ট লুকিয়ে রাখতে চান তাহলে 

.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
}

এই কোডটুকু খুজুন।এবার নিচের কোড দ্বারা পরিবর্তন করুন।

.gfg-list {
display:none;
}

এবং আপনি যদি শুধু লিস্ট আকারে দেখাতে চান তাহলে 

.gfg-entry {
background-color : white;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}

এই কোড টুকু খুজুন এবং নিচের কোড দ্বারা পরিবর্তন করুন।

.gfg-entry {
display: none; }

>এবার সেভ করুন দেখুন কাজ হয়ে গেছে।

আশা করি আপনার কাজে লাগবে।ভালো থাকবেন আমার সাথে থাকবেন।