How to Add Recent Post With Thumbnail In Blogger Blog [Hindi]

 

 

इस पोस्ट में जानेंगे की ब्लॉगर ब्लॉग में recent post With Thumbnail add कैसे करे . अगर आपका blogger पर कोई website और blog है तो यह पोस्ट आपके लिए है . Recent post widget को blog में add करने से आपके ब्लॉग readers को new post की जानकारी आसानी से मिल जाती है . बहुत से लोग blogger पर blogging करते है और अपने ब्लॉग में latest post को Thumbnail के साथ show करना चाहते है . Recent posts को blog (website) में Thumbnail के साथ show करने के लिए इन steps को follow कीजिये .

 

Steps to Add Recent Post Widget With Thumbnail In Blogger Blog.

 

1. सबसे पहले अपने blogger blog के layout में जाएँ 

 

How to Add Recent Post With Thumbnail In Blogger Blog [Hindi]

2. add a gadget option पर click कीजिये . आप देखेंगे की यह पर कई add a gadget option दिया है . आप अपने ब्लॉग के जिस तरफ recent post को दिखाना चाहते हो उस side add a gadget को select करे

 

 

3. इसके बाद एक popup page खुलेगा उसमे htmal/ java script option को select कीजिये 

 

recent post

 

 

4. html/ java srcipt पर click करने के बाद एक बड़ा सा box खुलेगा उसमे निचे दिए गए code को copy करके paste करे 

 

 

5. ऊपर के title box में recent post लिखे 

——————————————————————————————————————————————————————————–

<script type=’text/javascript’>
var numfeed = 4;
var startfeed = 0;
var urlblog = “http://www.techysharif.in”;
var charac = 50;
var urlprevious, urlnext;

function cyberghost(ghost, banget) {
var showfeed = ghost.split(“<“);
for (var i = 0; i < showfeed.length; i++) {
if (showfeed[i].indexOf(“>”) != -1) {
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(“>”) + 1, showfeed[i].length);
}
}
showfeed = showfeed.join(“”);
showfeed = showfeed.substring(0, banget – 1);
return showfeed;
}

function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = “”;
urlprevious = “”;
urlnext = “”;
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == ‘previous’) {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == ‘next’) {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) {
break;
}
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
posturl = entry.link[k].href;
break;
}
}
if (“content” in entry) {
postcontent = entry.content.$t;
} else if (“summary” in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = “”;
}
if (“media$thumbnail” in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = “http://1.bp.blogspot.com/-eiX9aalicz8/VWEORfDN71I/AAAAAAAAHdg/vfHyEfYKBh0/s1600/no_image.gif”;
}
showblogfeed += “<div class=’cg-elemen’>”;
showblogfeed += “<a =href='” + posturl + “‘ target=’_blank’><img src='” + postimg + “‘ /></a>”;
showblogfeed += “<h6><a href='” + posturl + “‘>” + posttitle + “</a></h6>”;
showblogfeed += “<p>” + cyberghost(postcontent, charac) + “…</p>”;
showblogfeed += “</div>”;
}
document.getElementById(“terbaru”).innerHTML = showblogfeed;
showblogfeed = “”;
if (urlprevious) {
showblogfeed += “<a href=’javascript:navigasifeed(-1);’ class=’previous’>&#9668; Previous</a>”;
} else {
showblogfeed += “<span class=’noactived previous’>&#9668; Previous</span>”;
}
if (urlnext) {
showblogfeed += “<a href=’javascript:navigasifeed(1);’ class=’next’>Next &#9658;</a>”;
} else {
showblogfeed += “<span class=’noactived next’>Next &#9658;</span>”;
}
showblogfeed += “<a href=’javascript:navigasifeed(0);’ class=’home’>Home</a>”;
document.getElementById(“cg-navigasifeed”).innerHTML = showblogfeed;
}

function navigasifeed(url) {
var p, parameter;
if (url == -1) {
p = urlprevious.indexOf(“?”);
parameter = urlprevious.substring(p);
} else if (url == 1) {
p = urlnext.indexOf(“?”);
parameter = urlnext.substring(p);
} else {
parameter = “?start-index=1&max-results=” + numfeed + “&orderby=published&alt=json-in-script”
}
parameter += “&callback=showterbaru”;
incluirscript(parameter);
}

function incluirscript(parameter) {
if (startfeed == 1) {
removerscript();
}
document.getElementById(“terbaru”).innerHTML = “<div id=’cg-loading’></div>”;
document.getElementById(“cg-navigasifeed”).innerHTML = “”;
var archievefeed = urlblog + “/feeds/posts/default” + parameter;
var terbaru = document.createElement(‘script’);
terbaru.setAttribute(‘type’, ‘text/javascript’);
terbaru.setAttribute(‘src’, archievefeed);
terbaru.setAttribute(‘id’, ‘MASLABEL’);
document.getElementsByTagName(‘head’)[0].appendChild(terbaru);
startfeed = 1;
}

function removerscript() {
var elemen = document.getElementById(“MASLABEL”);
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload = function() {
navigasifeed(0);
}
</script>
<style>
/*Recent Post Navigation*/
a,
a:visited {
color: #555;
outline: none;
text-decoration: none;
}

a:hover,
a:focus,
a:visited:hover {
color: #22a1c4;
text-decoration: none;
}

.terbaru-container {
background: #fff;
width: 280px;
margin: 20px auto;
padding: 15px;
border: 1px solid #ccc;
}

#cg-terbaru {
border: 1px solid #585858;
width: 100%;
margin: 0 auto;
}

#terbaru {
margin: 0px;
}

.cg-elemen {
margin: 5px 0;
padding: 5px;
height: 79px;
background: #FFF url(“http://smruthycollege.com/images/shadow2.png”) no-repeat scroll center bottom;
overflow: hidden;
padding-bottom: 20px;
}

.cg-elemen img {
padding: 0;
float: left;
height: 70px;
margin-right: 15px;
width: 70px;
}

.cg-elemen h6,
.cg-elemen h6 a {
font-size: 14px!important;
font-weight: 500;
margin: 0;
color: #222;
font-family:’Oswald’;
line-height: 18px;
text-transform: uppercase;
text-aligaln:’center’;
}

.cg-elemen p {
font-size: 12px;
font-family: ‘Oswald’;
text-align: left;
color: #555;
line-height: normal;
margin: 5px 0;
}

#cg-loading {
color: #888;
font-family: inherit;
font-size: 100px;
letter-spacing: -10px;
text-align: center;
text-shadow: -5px 0 1px #444;
background: #fff url(https://4.bp.blogspot.com/-jSUS8v5kwpQ/U8Z_6Ufr-PI/AAAAAAAAEYY/o4cQPKvt8vQ/s1600/loading.gif) no-repeat 50% 50%;
height: 470px;
}

#cg-navigasifeed {
color: #bbb;
font-family: Oswald;
font-size: 12px;
text-align: center;
margin: 0px;
}

#cg-navigasifeed a {
color: #141414!important;
font-family: inherit!important;
font-size: 12px!important;
font-weight: 400!important;
display: block;
padding: 5px 10px;
}

#cg-navigasifeed span {
padding: 5px 10px;
}

#cg-navigasifeed .next {
float: right;
}

#cg-navigasifeed .previous {
float: left;
}

#cg-navigasifeed .home {
text-align: center;
}

#cg-navigasifeed a:hover,
#cg-navigasifeed span.noactived {
color: transparant!important;
}
@media screen and (max-width:700px) {
.terbaru-container, #terbaru, #cg-navigasifeed {
width:auto;
}
}

@media screen and (max-width:300px) {
.cg-elemen img {
display:none;
}
}

Lanjut, Sekarang Tinggal Memasukan Javascriptnya.
Cari

</style>
<div class=”terbaru-container”>
<div id=”terbaru”></div>
<div id=”cg-navigasifeed”></div>
</div>

 

——————————————————————————————————————————————————————————–

 

अगर आपका कोई सवाल हो तो comment करके पूछ सकते है . आप हमें जरूर बताये की यह जानकारी आपको कैसी लगी .

 

6. इसके बाद save की button पर click करे .

 

अब आपने सिख लिया की ब्लॉगर blog में recent post को Thumbnail के साथ कैसे लगाए .

मेरा नाम शरीफ़ अहमद कादरी हे में एक Youtuber भी हूँ और ब्लॉगर भी हूँ ,इस वेबसाइट पे आपको Technology से जुडी हर तरह की जानकारी मिलती हे अगर आप ब्लॉग्गिंग सीखना चाहते हैं या youtube channel बनाकर पैसा कमाना चाहते हैं या Affilate Marketing करना चाहते हैं या technology से जुडी कोई भी जानकारी लेना या सीखना चाहते हैं तो इस वेबसाइट पर आपको वो सब कुछ सीखने को मिलेगा जो भी आप सीखना चाहते हैं!

Leave a Reply