Cute pocket: plantilla clasica

Mostrando entradas con la etiqueta plantilla clasica. Mostrar todas las entradas

Porfin lo he descubierto! he logrado agregar emoticones en una plantilla clasica tanto en entradas como en comentarios ;3 aunque hay que hacer algunas modificaciones importantes, asi que RECUERDA guardar tu plantilla antes de disponerte a destrozarla! jaja

Empezemos.

lo primero que hay que hacer es modificar todo lo que tenemos dentro de los codigos <blogger></blogger> por lo siguiente

<BlogDateHeader>
<h2 class="date-header"><$BlogDateHeaderDate$></h2>
</BlogDateHeader>

<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link" class="title-link"></BlogItemUrl>
<h3 class="post-title">
<$BlogItemTitle$>
</h3>
<BlogItemUrl></a></BlogItemUrl>
</BlogItemTitle>
<div class="post-body">
<p>
<$BlogItemBody$>
</p>
</div>
<p class="post-footer">
<em><$I18NPostedByAuthorNickname$> @ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>  
<BlogItemCommentsEnabled>
<a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style="text-transform:lowercase"><$I18NNumComments$></span></a>
</BlogItemCommentsEnabled><BlogItemBacklinksEnabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links"><span style="text-transform:lowercase"><$I18NLinksToThisPost$></span></a>
</BlogItemBacklinksEnabled>
<$BlogItemControl$>
</p>
<BlogItemComments>
<dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
<$I18NAtCommentTimeWithPermalink$>,
<$I18NCommentAuthorSaid$>
</dt>
<dd class="comment-body">
<p><$BlogCommentBody$></p>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
<$CommentPager$> (ESTE CODIGO ES IMPORTANTE!!!!!) </dl>
<p class="comment-timestamp">
<$BlogItemCreate$>
</p>
<p id="postfeeds"><$BlogItemFeedLinks$></p>
</BlogItemCommentsEnabled>
<BlogItemBacklinksEnabled>
<a name="links"></a><h4><$I18NLinksToThisPost$>:</h4>
<dl id="comments-block">
<BlogItemBacklinks>
<dt class="comment-title">
<$BlogBacklinkControl$>
<a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>
</dt>
<dd class="comment-body"><$BlogBacklinkSnippet$>
<br />
<span class="comment-poster">
<em><$I18NPostedByBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>
</span>
</dd>
</BlogItemBacklinks>
</dl>
<p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>
</BlogItemBacklinksEnabled>
<p style="padding-left:20px;">
<a href="<$BlogURL$>"><< <$I18NHome$></a>
</p>
</div>
</ItemPage>

</Blogger>

</div>


<ItemPage>
<div id="comments">
<BlogItemCommentsEnabled><a name="comments"></a>
<h4><$I18NNumComments$>:</h4>
<dl id="comments-block">
<$CommentPager$>

una vez hecho esto antes de la etiqueta </style> pegaremos lo siguente, lo cual sera las propiedades del post y de los comentarios en tu blog.

/* Posts
----------------------------------------------- */
.date-header {
margin:0 -3px -2px -2px;
font-size:135%;
line-height:1.5em;
display:block;
background:#FB6F72; border-width:0 1px 1px;
padding:0px 14px 0px 29px;
color:#333; width:460px; -webkit-border-top-right-radius:15; -webkit-border-top-left-radius:15;
}
.post {
margin:.3em 0 25px;
padding: 0 0;
border-width:0px 0;
}
.post-title {
margin:0;
font-size:135%;
line-height:1.5em;
display:block;
background:#FFF; border-width:0 1px 1px;
padding:2px 10px 2px 29px;
color:#333; }
a.title-link, .post-title strong {
text-decoration:none;
display:block;
}
a.title-link:hover {
background-color:#ded; color:#000; }
.post-body {
border-width:0 1px 1px;
padding:10px 14px 1px 29px;
background:#FFF;
}
html>body .post-body {
border-bottom-width:0;
}
.post p {
margin:0 0 .75em;
}
p.post-footer {
background:#1e1e1e;
margin:0;
padding:2px 14px 2px 29px;
border-width:1px;
font-size:100%;
line-height:1.5em;
color:#666; text-align:right;
-webkit-border-bottom-right-radius:15; -webkit-border-bottom-left-radius:15;
}
html>body p.post-footer {
border-bottom-color:transparent;
}
p.post-footer em {
display:block;
float:left;
text-align:left;
font-style:normal;
}
a.comment-link {
/* IE5.0/Win doesn't apply padding to inline elements,
so we hide these two declarations from it */
background/* */:/**/url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 0 45%;
padding-left:14px;
}
html>body a.comment-link {
/* Respecified, for IE5/Mac's benefit */
background:url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 0 45%;
padding-left:14px;
}
.post img {
margin:0 0 5px 0;
padding:4px;
border:1px solid #ccc;
}
blockquote { margin:.75em 0; border:1px dotted #ccc; border-width:1px 0; padding:5px 15px; color:#666; }
.post blockquote p {
margin:.5em 0;
}
/* Comments
----------------------------------------------- */
#comments {
margin:-25px 13px 0;
background:#FFF; width:460px; border-width:0 1px 1px;
padding:20px 0 15px 0;
}
#comments h4 {
margin:0 0 10px;
padding:0 14px 2px 29px;
font-size:120%;
line-height:1.4em;
color:#333; }
#comments-block {
margin:0 15px 0 9px;
}
.comment-data {
background:url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 2px .3em;
margin:.5em 0;
padding:0 0 0 20px;
color:#666; }
.comment-poster {
font-weight:bold;
}
.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
background:#FFF;
}
.comment-body p {
margin:0 0 .5em;
background:#FFF; }
.comment-timestamp {
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#666; }
.comment-timestamp a:link {
color:#666; }
.deleted-comment {
font-style:italic;
color:gray; }
.paging-control-container {
float: right;
margin: 0px 6px 0px 0px;
font-size: 80%;
}
.unneeded-paging-control {
visibility: hidden;
}

lo que esta de color rojo es lo mas aconsejable a cambiar para los novatos con el HTML, pero si y atienes experiencia en campiar cuerpos, tamaños y formas puedes seguir adelante ;3 y hacer todos los cambios que requiera tu plantilla.

bien lo siguiente que hay que hacer es tomar el script para los emoticones el cual sera el siguente.

</SCRIPT>

<script type='text/javascript'>
//<![CDATA[
document.getElementsByClassName = function(clsName){
var retVal = new Array();
var elements = document.getElementsByTagName("*");
for(var i = 0;i < elements.length;i++){
if(elements[i].className.indexOf(" ") >= 0){
var classes = elements[i].className.split(" ");
for(var j = 0;j < classes.length;j++){
if(classes[j] == clsName)
retVal.push(elements[i]);
}
}
else if(elements[i].className == clsName)
retVal.push(elements[i]);
}
return retVal;
}
function addSmiley(){
var postBodyClass = (postBodyClass) ? postBodyClass : 'post-body';
var d = document.getElementsByClassName(postBodyClass);
for(var i=0;i<d.length;i++){
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\)/gi, ' <img src=" http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/9j2m9d.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-S/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/681.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-P/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/71.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\[/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/581.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-D/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/31.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\}\:\-\]/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/211.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/x\*/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/811.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\;\-D/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/111.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\|/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/841.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\}/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/2hh249d.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\*\)/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/531.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-$/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/501.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\;\-$/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/2ykzz1s.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/XL/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/035.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/PIK/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/111-1.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/MUSIK/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/109.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/NOOTO/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/038.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/LUV/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/031.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/RAINN/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/021.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/WHATT/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/61.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/REDD/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/107.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
}
var d = document.getElementsByClassName('comment-body');
for(var i=0;i<d.length;i++){
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\)/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img3123.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-S/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0549.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-P/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img1089.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\[/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0813.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-D/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0897.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\}\:\-\]/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0900.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/x\*/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0776.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\;\-D/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0594.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\|/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0453.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\}/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0786.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\*\)/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0987.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-$/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0687.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\;\-$/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0571.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/XL/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img1246.png" style="border:0; margin:0; padding:0;" id="new" /> ');
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(addSmiley);
//]]>
</script>

Pueden ver en una de mis entradas anteriores como cambiar codigos y los emoticones.
Los de color azul seran los disponibles en las entradas, y los de color verde seran los dispoibles en los comentarios.

Bien ya tenemos entonces el script, ahora necesitamos agragar la taba que muestra los emoticones y sus codigos correspondientes para facilitar su uso a los visitantes de nuestra pagina.
con ayuda de CTRL + F buscaremos la etiqueta

<$CommentPager$>

que en el primer codigo que instalamos coloque de color morado con una nota de color rojo :), bien despues de este colocamos la tabla que sera esta

<table border='0' cellpadding='0' cellspacing='1'>
<tr>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img3123.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0549.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img1089.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0813.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0897.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0900.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0776.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0594.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0453.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0786.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0987.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0687.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0571.png' width='20'/></td>
<td align='center' width='26'><img height='20' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img1246.png' width='20'/></td>
</tr>
<tr>
<td align='center' width='26'>:-)</td>
<td align='center' width='26'>:-S</td>
<td align='center' width='26'>:-P</td>
<td align='center' width='26'>:-[</td>
<td align='center' width='26'>:-D</td>
<td align='center' width='26'>}:-]</td>
<td align='center' width='26'>X*</td>
<td align='center' width='26'>;-D</td>
<td align='center' width='26'>:-|</td>
<td align='center' width='26'>:-}</td>
<td align='center' width='26'>:*)</td>
<td align='center' width='26'>:-(</td>
<td align='center' width='26'>;-)</td>
<td align='center' width='26'>XL</td>
</tr>
</table>

y listo nuestra plantilla clasica ya puede usar emoticones! ;D

Recuerden dudas, quejas , comentarios, y demas comentenlos si quieren ver una prueba de esto miren mi blog ;3

http://poupee-doll.blogspot.com/

Aqui les traigo otro tutorial para las plantillas clasicas, esta vez se trata del boton "entradas antiguas" y "entradas recientes", puesto que no todas las plantillas lo tienen, lo primero que haremos sera localizar el siguiente codigo con nuestro atajo CTRL + F

</blogger>

Debajo de este pegaremos lo siguiente

<center><OlderPosts><a href="<$OlderPosts$>">ENTRADAS ANTERIORES</a></OlderPosts>
<NewerPosts><a href="<$NewerPosts$>">ENTRADAS RECIENTES</a></NewerPosts></center>

en caso de querer imagenes en lugar de texto el codigo quedara asi

<center><OlderPosts><a href="<$OlderPosts$>"><img border "0" src="URL DE TU IMAGEN"/></a></OlderPosts>
<NewerPosts><a href="<$NewerPosts$>"><img border "0" src="URL DE TU IMAGEN"/></a></NewerPosts></center>

Bueno espero les resulte facil, si tienen dudas no olviden comentarlas ;D

Si lo que queremos es colocar una firma en cada una de nuestras entradas el proceso es muy simple.
Con ayuda de CTRL + F localizamos el codigo

<$BlogItemBody$><p>

Despues de este codigo colocaremos lo siguente

<div align=right><font color=#ff99ff><img border="0" src="IMAGEN DE LA FIRMA" /><br></div>

Si lo que deseamos es poner un texto lo que haremos sera

<div align=right><font color=#ff99ff>TEXTO<br></div>

y asi nos quedara el resultado

[la firma esta del lado inferior derecho]

HELLO!, hace tiempo que no subo, pero bueno ahora les traigo como implementar un buscador dentro de tu blog sin la necesidad de que te aparezca el molesto logo de google, para que les quede algo así.

Lo primero que tenemos que hacer es localizar con ayuda del Ctrl + F

</Table>

Despues de tenerlo localizado debajo de este colocaremos el codigo

<div class="header">Search</div><br> <center><form id="searchform" action="/search" method="get"> <div> <input id="s" class="txtField" name="q" size="20" type="text"/><br> <input id="searchsubmit" class="btnSearch" value="Search" type="submit"/></div> </form></center>

y eso es todo, ya tenemos nuestro buscador listo para usar ;3

Suscribirse a: Entradas ( Atom )

Cute pocket

Emoticones en entradas y comentarios, PLANTILLAS CLASICAS!

Botones "Entradas antiguas" y "Entradas recientes"

Firma en entrada, plantilla clasica.

Buscador en plantilla clasica

QUE ES LO QUE BUSCAS

Categories

LO MAS VISTO

Menu

Datos personales

Archivo del blog

Seguidores

Link list 1

Link list 2

Link list 3

Link list 4