Debemos tener claro que lo prioritario en nuestro blog
siempre es el contenido, pero aún así no viene mal adornarlo con un buen diseño
de vez en cuando. La calidad del contenido es fundamental pero también lo es que
éste sea lo más accesible, y cómodo para el lector. En este sentido, hace poco,
decidí pegarle “un cambio de imagen” a mi blog e instalar un buena plantilla. (Plantillas para Blogger. Lo
que debes saber.)
Durante el cambio de plantilla, me encontré con el
inconveniente de que en la página de inicio, no se mostraban las últimas
entradas publicadas, lo que se conoce como “entradas recientes”. Blogger,
ofrece un widget de entradas recientes, pero muy poco personalizable. Aquí
os dejo el código de uno del que podéis cambiar casi todo lo que queráis.
Copia el código y añádelo a un Gadget HTML, luego cambia
todos los parámetros que necesites. Marco en rojo algunas de las cosas que necesitarás personalizar (color background, fuentes de letra, tamaño de la imagen en miniatura, núm. de entradas, núm de palabras que se muestran en el resumen...). Si necesitas ayuda, no dudes en preguntar…
¿Qué harías tu para mejorar y personalizar tu blog?.
Si te gusta comparte…
Mañana más.
<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:109px}
.mas-elemen
img{background:#999;padding:4px;float:left;height:64px;margin-right:8px;width:64px}
.mas-elemen h6,.mas-elemen h6
a{font-size:14px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:12px
Arial;text-align:justify;color:#555;line-height:12px;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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-nfSWUSCJG_66pOANmGuXi4xsPjLYcBNYI310tLWOmvxsU9z-ie0vnogZjH7qNcwuUNcLFSFCmfx0MbdHBnAKd5GwS_qTzXA04BhDLtCRDv-8JuQDShGtsaR6jckJe05dwuS6FDDXZto/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:10px;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 = 6;
var startfeed = 0;
var
urlblog = "http://TU URL";
var charac = 150;
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 =
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha2tngBDan-aodbxJ44a2zCTmngniMxhkTTiHF6cWHpnRA_VvrCjwJkmtRiCRksQR3v3z44xzrEAiP07KwYX4YC3tVTU3PiGJON8WeZtUHV0n7HtRVdFLIXOLyAXOTodvXvnPJZ_nH_ug/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>
