How to Add Rotating Latest Post Widget in Blogger in Hindi | हिंदी में जानिये

हेल्लो दोस्तों ,
हर कोई व्यक्ति अपने ब्लॉग पर नए से नए effects और option डालना चाहता हैं ताकि उसका ब्लॉग लोगो को आकर्षित करें और ज़्यादा से ज़्यादा लोग आकर आपके ब्लॉग को visit करें और आप लाभान्वित हो. आज के इस blogpost में मैं आपको एक ऐसे widget के बारे में बताने वाला हूँ जिसकी मदद से आप अपने ब्लॉग पर latest posts को बहुत ही सुन्दर तरीके से दिखा पायेंगे . यह widget आपके latest posts को alternately rotate करते हुए दिखायेगा . उदहारण के तौर पर नीचे दिए गए लिंक पर जाए.

Demo Rotating Post Widget

Rotating Latest Post Widget कैसे डाले ?

1. सबसे पहले आप blogger dashboard की बायीं और की Menu में template पर click करें . फिर आपका template का window खुल जाएगा . अब यहाँ पर " Add a Gadget" पर click करें . अब आपके सामने एक pop up window खुलेगा जिसपर अब आप "HTML/Javascript" पर click करके एक नया widget window खोले .

2. Widget Window में अब आप निम्नलिखित code को copy करके paste कर दे .

<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://hindidost.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>

3. जहाँ पर hindidost.com लिखा हैं वहां पर आप अपने blogger का id लिख दे ,अब अपने widget को Save कर ले . बस हो गया . आप देखेंगे के आपके blog पर rotating latest post का widget लग गया हैं.

आप अगर चाहे तो इसे अपने पोस्ट पर या पेज पर भी दाल सकते हैं. उसके लिए आपको आपके पेज या पोस्ट के html में इस code डालना पड़ेगा.

यह बहुत ही सिंपल हैं और दिखने में भी अच्छा लगता हैं . अगर आपको यह पोस्ट पसंद आया तो ज़रूर बताये .

धन्यवाद

Related: Blogger Tricks