বন্ধুরা আশাকরি সবায় ভাল আছেন ও সুস্থ আছেন । আজকে আমি আপনাদের জন্য সুন্দর একটি Latest Posts ওয়েডগেট নিয়ে হাজির হলাম । এই পোস্টে স্টাইল এটাতে কোন ইমেজ শো করবে না এটা লিস্ট আকারে দেখাবে সঙ্গে একটা সুন্দর ইফেক্ট আছে আর সেটা হল এটা অটো এনিমেশন বলতে পারেন ।ডেমো দেখে আশাকরি বুজতে পেরে গেছেন । যাই হোক বিস্তারিত নীচে থেকে দেখুন
এবার দেখে নিন কি ভাবে যুক্ত করবেন ।
২// এবার Add a gadget এ ক্লিক করুন তাহলে একটি পপ আপ বক্স আসবে সেখান থেকে HTML/Javascript ক্লিক করুন । নীচের চিত্রে দেখুন ..
৩// Title ঘর ফাকা রেখে Content ঘরে নীচের কোড গুল কপি করে পেস্ট করুন ।
<style>
.gfg-root {
width: 100%;
height : auto;
position : relative;
overflow : hidden;
margin: 0 auto;
text-align : center;
font-size: 12px;
border: 1px solid #DBDBDB;
}
.gfg-title {
font-size: 16px;
font-weight : bold;
color : #6B6B6B;
background:#F3F3F3;
background-repeat: repeat;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
padding: 5px;
text-shadow: 0px 2px #fff;
}
.gfg-entry {
background-color: #FFFFFF;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
.gf-title a {
text-transform: capitalize;
color: #0000ff;
font-size: 14px;
}
.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 : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-even {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-odd a{
color: #595959;
padding: 0 0px 0 10px;
}
.gfg-listentry-even a{
color: #242424;
padding: 0 0px 0 10px;
}
.gfg-listentry-highlight {
background: #FFFFFF;
}
.gfg-listentry-highlight:before {
position: absolute;
left: 0;
content: '\25BA ';
font-size: 14px;
color: #DBDBDB;
}
.gfg-listentry-highlight a {
color: #242424;
}
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color: #ffffff;
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;
margin-top: 5px;
}
.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://tomarijonno.blogspot.com/feeds/posts/default?redirect=false&start-index=1&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>
নোটঃ উপরে হাই লাইট কালার গায়জায় নিজের ব্লগার লিঙ্ক দিন ।৪// এবার Save করুন আপনার কাজ শেষ এবার ব্লগে গিয়ে দেখুন আশা করি করতে পেরেছেন ।
কোন আসুবিধা হলে কমেন্ট জানাতে ভুলবেন না আমি হেল্প করার চেস্তা করবো । আমি ব্লগার নিয়ে আরও ভাল ভাল পোস্ট নিয়ে আসব । তাহলে আজকে এই পর্যন্ত ভাল থাকুন সুস্থ থাকুন ধন্যবাদ ।
খুব কাজের জিনিস....শেয়ার করার জন্য ধান্যবাদ
উত্তরমুছুন