Widget de post recientes con imágenes para mi blog de Blogger
Widget de publicaciones recientes para blogs de Blogger, este widget lo podrán usar en cualquier
blog de Blogger. Su función e instalación es sumamente fácil, lo único que tendrán
que hacer es seguir mis instrucciones y nada mas. A este widget de Blogger se
lo conoce como publicaciones recientes, lo podrán insertar
en cualquier parte de su blog. Una de las funciones que realiza este widget de
publicaciones recientes es indicar las nuevas publicaciones y las antiguas
publicaciones de su blog, con una imagen en miniatura y también le mostrara un
texto de 60 caracteres. El widget que les voy a presentar también tiene un menú
para poder regresar a los artículos nuevos, al igual que podrán dirigirse a sus
primeras publicaciones, es bueno si queremos mostrar todo el contenido de
nuestro blog.
A continuación como insertar el widget de
post recientes en nuestro blog de blogger
1 Abrir Blogger
2 Diríjase a “Diseño”
3 Abrir “Añadir un gadget”
4 Cuando se le despliegue el Gadget tendrá que
buscar un widget que dice “HTML/Javascipt”.
5 Insertar en su widget el siguiente código
<style type='text/css'>
#mas-terbaru{border:1px solid
#585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid
#ccc;margin:5px 0;padding:5px;height:79px}
.mas-elemen
img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.mas-elemen h6,.mas-elemen h6
a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:14px PT
Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px
0 1px #444;background:#141414 url(http://1.bp.blogspot.com/-vBDcLG_CXzU/UBqEMTknKcI/AAAAAAAAIHE/pZTfBZLbPwY/s1600/loading.gif)
no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px
solid
#c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed
a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px
10px}
#mas-navigasifeed
span{padding:5px 10px}
#mas-navigasifeed
.next{float:right}
#mas-navigasifeed
.previous{float:left}
#mas-navigasifeed
.home{text-align:center}
#mas-navigasifeed
a:hover,#mas-navigasifeed span.noactived{color:transparant!important}
</style>
<script
type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://ayudadeblogger.com/";
var charac = 60;
var urlprevious, urlnext;
function
maskolisfeed(johny,banget){
var showfeed =
johny.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://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
}
showblogfeed += "<div
class='mas-elemen'>";
showblogfeed += "<a
href='" + posturl + "' target='_blank'><img src='" +
postimg + "' /></a>";
showblogfeed +=
"<h6><a href='" + posturl + "'>" + posttitle
+ "</a></h6>";
showblogfeed +=
"<p>" + maskolisfeed(postcontent,charac) +
"...</p>";
showblogfeed +=
"</div>";
}
document.getElementById("terbaru").innerHTML
= showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a
href='javascript:navigasifeed(-1);' class='previous'>◄
Previous</a>";
} else {
showblogfeed +=
"<span class='noactived previous'>◄
Previous</span>";
}
if(urlnext) {
showblogfeed += "<a
href='javascript:navigasifeed(1);' class='next'>Next
►</a>";
} else {
showblogfeed +=
"<span class='noactived next'>Next ►</span>";
}
showblogfeed += "<a
href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("mas-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='mas-loading'></div>";
document.getElementById("mas-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>
<div
id="terbaru"></div>
<div
id="mas-navigasifeed"></div>
|
Realice estos cambios:
6 Cambiar el texto que esta
marcado de color amarillo del código, por la dirección de su blog de blogger.
Por ejemplo mi dirección es http://ayudadeblogger.com/, lo que
necesita hacer es cambiar por su dirección de blog.
7 Dele un nombre a su widget y guárdelo,
dirija a su blog y mire sus cambios.
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo
saber y de inmediato les responderé.
Saludos.
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
11 comentarios: