Blogger

Añadir enlaces externos al menú de páginas de Blogger

Publicado por Claudia en agosto 16, 2011

Muchas personas que usan Blogger me han preguntado cómo hago para poner enlaces a mis cuentas de Twitter y Facebook en el menú. Solía responder que uso WordPress, o que pueden reemplazar un widget de tipo “PageList” (páginas) por un “LinkList” (lista de enlaces). Ello aún suena un poco complicado si se trata de retocar el código, especialmente para quienes comienzan con un blog.

La creación de páginas estáticas de Blogger siempre fue una de las funciones más esperadas. Sin embargo, el widget típico de Páginas sólo permitía mostrar las páginas del blog. Ello, por un lado, facilitaba enormemente el trabajo de los usuarios, al no tener que hacer nada para mostrar enlaces a sus páginas automáticamente, pero hacía extrañar las listas típicas de menú en HTML, que permiten enlazar lo que queramos.

Para quienes quieren tener un solo menú principal en su blog de Blogger que muestre páginas y enlaces externos, les tengo una buena noticia: Luis Gray anuncia que ya es posible añadir enlaces externos en un widget de páginas de Blogger.

Cómo hacerlo, paso por paso:

1. En Diseño/Elementos de la página, añadir un widget de Páginas en tu plantilla Blogger. Si ya lo tienes añadido, sáltate este paso.

2. Ve a Blogger in Draft, que te permite probar las nuevas funciones de Blogger antes de ser lanzadas públicamente. Una vez allí, accede al blog donde quieras añadir algún enlace externo, y ve a Páginas /Página nueva / Dirección Web.

Ahora, sólo agrega tu enlace, como se muestra a continuación:

Después de ello, el enlace será añadido automáticamente a tu menú de Páginas, y podrás moverlo a la ubicación que desees.

Tags: , , ,
Redes y marcadores sociales

FTalk: Chatea con tus amigos de Facebook desde tu escritorio

Publicado por Claudia en agosto 15, 2011

FTalk es un sencillo cliente para el chat Facebook, creado por Badoo Media, que te permite estar en contacto permanente con todos tus amigos, sin necesidad de entrar a la página de Facebook. Comparado con GTalk, más bien recuerda la interfaz de  Windows Live Messenger, aunque más simple y amigable.

Algunas características de FTalk:

  • Es gratuito, liviano y fácil de usar
  • Funciona en Win XP y versiones posteriores
  • Te avisa cuando algún amigo se conecta
  • Te permite actualizar tu estado desde la aplicación
  • Puedes usar emoticones

En síntesis, es ideal para quienes quieren estar conectados en todo momento y usar Facebook como uno de sus principales sistemas de mensajería instanstánea, o bien para quienes no están conformes con los actuales cambios realizados al chat de Facebook.


Sitio Web: FTalk
| Página de Facebook

Vía | Crenk

Tags: , , , ,
Tutoriales WordPress

Cómo añadir paginación en WordPress sin plugin

Publicado por Claudia en agosto 6, 2011

Si pensamos en paginación en WordPress, probablemente pensemos en un plugin: WP-Pagenavi. No obstante, también podemos paginar nuestro blog para mejorar la experiencia de los usuarios sin plugin. Ello es especialmente útil a la hora de desarrollar temas para terceros, o simplemente si queremos evitar llenarnos de plugins que pueden no ser indispensables.

Boutros Abichedid enseña cómo hacerlo, en tres simples pasos, y sin necesidad de tener grandes conocimientos de WordPress:

PASO 1: Copiar en el archivo funcions.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<?php
/***** Numbered Page Navigation (Pagination) Code.
      Tested up to WordPress version 3.1.2 *****/
 
/* Function that Rounds To The Nearest Value.
   Needed for the pagenavi() function */
function round_num($num, $to_nearest) {
   /*Round fractions down (http://php.net/manual/en/function.floor.php)*/
   return floor($num/$to_nearest)*$to_nearest;
}
 
/* Function that performs a Boxed Style Numbered Pagination (also called Page Navigation).
   Function is largely based on Version 2.4 of the WP-PageNavi plugin */
function pagenavi($before = '', $after = '') {
    global $wpdb, $wp_query;
    $pagenavi_options = array();
    $pagenavi_options['pages_text'] = ('Página %CURRENT_PAGE% de %TOTAL_PAGES%:');
    $pagenavi_options['current_text'] = '%PAGE_NUMBER%';
    $pagenavi_options['page_text'] = '%PAGE_NUMBER%';
    $pagenavi_options['first_text'] = ('Primera');
    $pagenavi_options['last_text'] = ('Última');
    $pagenavi_options['next_text'] = 'Siguiente &raquo;';
    $pagenavi_options['prev_text'] = '&laquo; Anterior';
    $pagenavi_options['dotright_text'] = '...';
    $pagenavi_options['dotleft_text'] = '...';
    $pagenavi_options['num_pages'] = 5; //continuous block of page numbers
    $pagenavi_options['always_show'] = 0;
    $pagenavi_options['num_larger_page_numbers'] = 0;
    $pagenavi_options['larger_page_numbers_multiple'] = 5;
 
    //If NOT a single Post is being displayed
    /*http://codex.wordpress.org/Function_Reference/is_single)*/
    if (!is_single()) {
        $request = $wp_query->request;
        //intval — Get the integer value of a variable
        /*http://php.net/manual/en/function.intval.php*/
        $posts_per_page = intval(get_query_var('posts_per_page'));
        //Retrieve variable in the WP_Query class.
        /*http://codex.wordpress.org/Function_Reference/get_query_var*/
        $paged = intval(get_query_var('paged'));
        $numposts = $wp_query->found_posts;
        $max_page = $wp_query->max_num_pages;
 
        //empty — Determine whether a variable is empty
        /*http://php.net/manual/en/function.empty.php*/
        if(empty($paged) || $paged == 0) {
            $paged = 1;
        }
 
        $pages_to_show = intval($pagenavi_options['num_pages']);
        $larger_page_to_show = intval($pagenavi_options['num_larger_page_numbers']);
        $larger_page_multiple = intval($pagenavi_options['larger_page_numbers_multiple']);
        $pages_to_show_minus_1 = $pages_to_show - 1;
        $half_page_start = floor($pages_to_show_minus_1/2);
        //ceil — Round fractions up (http://us2.php.net/manual/en/function.ceil.php)
        $half_page_end = ceil($pages_to_show_minus_1/2);
        $start_page = $paged - $half_page_start;
 
        if($start_page <= 0) {
            $start_page = 1;
        }
 
        $end_page = $paged + $half_page_end;
        if(($end_page - $start_page) != $pages_to_show_minus_1) {
            $end_page = $start_page + $pages_to_show_minus_1;
        }
        if($end_page > $max_page) {
            $start_page = $max_page - $pages_to_show_minus_1;
            $end_page = $max_page;
        }
        if($start_page <= 0) {
            $start_page = 1;
        }
 
        $larger_per_page = $larger_page_to_show*$larger_page_multiple;
        //round_num() custom function - Rounds To The Nearest Value.
        $larger_start_page_start = (round_num($start_page, 10) + $larger_page_multiple) - $larger_per_page;
        $larger_start_page_end = round_num($start_page, 10) + $larger_page_multiple;
        $larger_end_page_start = round_num($end_page, 10) + $larger_page_multiple;
        $larger_end_page_end = round_num($end_page, 10) + ($larger_per_page);
 
        if($larger_start_page_end - $larger_page_multiple == $start_page) {
            $larger_start_page_start = $larger_start_page_start - $larger_page_multiple;
            $larger_start_page_end = $larger_start_page_end - $larger_page_multiple;
        }
        if($larger_start_page_start <= 0) {
            $larger_start_page_start = $larger_page_multiple;
        }
        if($larger_start_page_end > $max_page) {
            $larger_start_page_end = $max_page;
        }
        if($larger_end_page_end > $max_page) {
            $larger_end_page_end = $max_page;
        }
        if($max_page > 1 || intval($pagenavi_options['always_show']) == 1) {
            /*http://php.net/manual/en/function.str-replace.php */
            /*number_format_i18n(): Converts integer number to format based on locale (wp-includes/functions.php*/
            $pages_text = str_replace("%CURRENT_PAGE%", number_format_i18n($paged), $pagenavi_options['pages_text']);
            $pages_text = str_replace("%TOTAL_PAGES%", number_format_i18n($max_page), $pages_text);
            echo $before.'<div class="pagenavi">'."\n";
 
            if(!empty($pages_text)) {
                echo '<span class="pages">'.$pages_text.'</span>';
            }
            //Displays a link to the previous post which exists in chronological order from the current post.
            /*http://codex.wordpress.org/Function_Reference/previous_post_link*/
            previous_posts_link($pagenavi_options['prev_text']);
 
            if ($start_page >= 2 && $pages_to_show < $max_page) {
                $first_page_text = str_replace("%TOTAL_PAGES%", number_format_i18n($max_page), $pagenavi_options['first_text']);
                //esc_url(): Encodes < > & " ' (less than, greater than, ampersand, double quote, single quote).
                /*http://codex.wordpress.org/Data_Validation*/
                //get_pagenum_link():(wp-includes/link-template.php)-Retrieve get links for page numbers.
                echo '<a href="'.esc_url(get_pagenum_link()).'" class="first" title="'.$first_page_text.'">1</a>';
                if(!empty($pagenavi_options['dotleft_text'])) {
                    echo '<span class="expand">'.$pagenavi_options['dotleft_text'].'</span>';
                }
            }
 
            if($larger_page_to_show > 0 && $larger_start_page_start > 0 && $larger_start_page_end <= $max_page) {
                for($i = $larger_start_page_start; $i < $larger_start_page_end; $i+=$larger_page_multiple) {
                    $page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['page_text']);
                    echo '<a href="'.esc_url(get_pagenum_link($i)).'" class="single_page" title="'.$page_text.'">'.$page_text.'</a>';
                }
            }
 
            for($i = $start_page; $i  <= $end_page; $i++) {
                if($i == $paged) {
                    $current_page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['current_text']);
                    echo '<span class="current">'.$current_page_text.'</span>';
                } else {
                    $page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['page_text']);
                    echo '<a href="'.esc_url(get_pagenum_link($i)).'" class="single_page" title="'.$page_text.'">'.$page_text.'</a>';
                }
            }
 
            if ($end_page < $max_page) {
                if(!empty($pagenavi_options['dotright_text'])) {
                    echo '<span class="expand">'.$pagenavi_options['dotright_text'].'</span>';
                }
                $last_page_text = str_replace("%TOTAL_PAGES%", number_format_i18n($max_page), $pagenavi_options['last_text']);
                echo '<a href="'.esc_url(get_pagenum_link($max_page)).'" class="last" title="'.$last_page_text.'">'.$max_page.'</a>';
            }
            next_posts_link($pagenavi_options['next_text'], $max_page);
 
            if($larger_page_to_show > 0 && $larger_end_page_start < $max_page) {
                for($i = $larger_end_page_start; $i <= $larger_end_page_end; $i+=$larger_page_multiple) {
                    $page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['page_text']);
                    echo '<a href="'.esc_url(get_pagenum_link($i)).'" class="single_page" title="'.$page_text.'">'.$page_text.'</a>';
                }
            }
            echo '</div>'.$after."\n";
        }
    }
}
?>

*Lo traduje al español.

PASO 2: Reemplazar la navegación por defecto

En el archivo index.php, buscamos la navegación por defecto del theme, algo como esto:

1
2
3
4
<div class="navigation">
<div class="alignleft"><?php previous_posts_link('&laquo; Previous Entries') ?></div>
<div class="alignright"><?php next_posts_link('Next Entries &raquo;','') ?></div>
</div>

Y la reemplazamos por:

1
<div class="navigation"><?php if(function_exists('pagenavi')) { pagenavi(); } ?></div>

Hacemos lo mismo en nuestro archive.php y nuestro search.php.

PASO 3: Estilizando nuestra paginación numerada

Ahora sólo queda copiar el siguiente código en la hoja de estilos (style.css), y modificar los colores y quizás algunas propiedades:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
.pagenavi {
    margin: 0 0 20px 30px;
    padding: 5px 1px 5px;
    float:left;
    width: 98%;
}
.pagenavi a {
    padding: 5px 6px 4px 6px;
    margin: 3px;
    text-decoration: none;
    border: 1px solid #ccc;
    color: #666;
    background-color: inherit;
}
.pagenavi a:hover {
    border: 1px solid #444;
    color: #444;
    background-color: #eee;
}
.pagenavi span.pages {
    padding: 5px 6px 4px 6px;
    margin: 3px;
    color: #825a2d;
    font-weight:bold;
    border: 1px solid #999;
    background-color: inherit;
}
.pagenavi span.current {
    padding: 5px 6px 4px 6px;
    margin: 3px;
    font-weight:bold;
    border: 1px solid #666;
    color: #444;
    background-color: #eee;
}
.pagenavi span.expand {
    padding: 5px 6px 4px 6px;
    margin: 3px;
    border: 1px solid #ccc;
    color: #444;
    background-color: inherit;
}
.pagenavi .first, .pagenavi .last {
    border: 1px solid #aaa;
}
.pagenavi .single_page {
border: 1px dashed #ccc;
}

Eso es todo. Toma menos tiempo que instalar y configurar un plugin.

Tags: , , , , ,
Free Blogger Templates

Blogger Template: Game Strike

Publicado por Claudia en julio 29, 2011

Game Strike es una plantilla para blogs de juegos, inspirada en Counter Strike.


DEMO | DESCARGA Game Strike (1733)


Características:

  • 2 columnas de ancho fijo
  • Coin slider incorporado
  • Columnas inferiores
  • Buscador interno
  • Iconos social media
  • Incluye las últimas funciones de Blogger
  • Comentarios de autor destacados
  • PDS logo (font: Android Nation)

Instructions – Instrucciones

1. Setting up the slideshow
Configurando el slider

Go to Design/Edit HTML and find the following code:
Ve a Diseño/Edición de HTML y encuentra el siguiente código:

<!-- Featured Content Slider Started -->
 
 
<div id='slide'>
<div id='gallerycover'>
<ul>
 
<!-- Featured Slide 1 Code Start -->
<li>
<a href='SLIDER-1-LINK-HERE'>
<img class='slidim' src='http://3.bp.blogspot.com/-eV92P4chlBc/ThGAKOx0ArI/AAAAAAAACXI/QQBZuo5ayFg/s1600/1.jpg'/>
<span>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger Edit HTML and find these sentences. Now replace these with your own descriptions[...] </p>
</span>
</a>
</li>
<!-- Featured Slide 1 Code End -->
 
 
<!-- Featured Slide 2 Code Start -->
<li>
<a href='SLIDER-2-LINK-HERE'>
<img class='slidim' src='http://2.bp.blogspot.com/-CrZBtCL5jnY/ThGAL4F5YWI/AAAAAAAACXM/8uGvL05bfW0/s1600/2.jpg'/>
<span>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger Edit HTML and find these sentences. Now replace these with your own descriptions[...] </p>
</span>
</a>
</li>
<!-- Featured Slide 2 Code End -->
 
 
<!-- Featured Slide 3 Code Start -->
<li>
<a href='SLIDER-3-LINK-HERE'>
<img class='slidim' src='http://3.bp.blogspot.com/-5wxUIkAuWPk/ThGANXcIGLI/AAAAAAAACXQ/7jh2kB6umqo/s1600/3.jpg'/>
<span>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger Edit HTML and find these sentences. Now replace these with your own descriptions[...] </p>
</span>
</a>
</li>
<!-- Featured Slide 3 Code End -->
 
 
<!-- Featured Slide 4 Code Start -->
<li>
<a href='SLIDER-4-LINK-HERE'>
<img class='slidim' src='http://2.bp.blogspot.com/-vtNpmGJLSlQ/ThGARlhHYDI/AAAAAAAACXU/73dGGJ6Wr7g/s1600/4.jpg'/>
<span>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger Edit HTML and find these sentences. Now replace these with your own descriptions[...] </p>
</span>
</a>
</li>
<!-- Featured Slide 4 Code End -->
 
</ul>
</div>
</div>

You may replace all image links by yours.
Puedes reemplazar los enlaces por tus propias imágenes.

Tags: , , ,
Free Blogger Templates

Blogger Template: Travel Theme

Publicado por Claudia en julio 21, 2011

DEMO | DESCARGA Travel Theme (1384)


Características:

  • 3 columnas de ancho fijo
  • jQuery roundabout slider
  • Columnas inferiores
  • Buscador Interno
  • Comentarios de autor destacado
  • Soporta las últimas funciones de Blogger
  • Crossbrowser Compatible
  • Twitter ready
  • Inlcuye logo PSD

Instructions – Instrucciones

1. Setting up the slideshow
Configurando el slider

Go to Design/Edit HTML and find the following code:
Ve a Diseño/Edición de HTML y encuentra el siguiente código:

<li class='back'><img src='http://3.bp.blogspot.com/-LFF6_irphVk/Th_JxJDq_QI/AAAAAAAACag/XDKFezr_VlA/s1600/2.jpg'/></li> 
<li class='back'><img src='http://2.bp.blogspot.com/-B0MoswLLvDg/Th_JzXwWKbI/AAAAAAAACao/mC2BoLVcfEI/s1600/4.jpg'/></li> 
<li class='back'><img src='http://3.bp.blogspot.com/-NdjYKHNpBss/Th_JyHH68UI/AAAAAAAACak/_glVnwFw2Jw/s1600/3.jpg'/></li> 
<li class='back'><img src='http://2.bp.blogspot.com/--Qung72aeIc/Th_JwW3S_xI/AAAAAAAACac/TD9l6sLoCpo/s1600/1.jpg'/></li> 
<li><img src='http://4.bp.blogspot.com/-qTG6XtKXmYI/Th_J0NCCUPI/AAAAAAAACas/IrtikKSolBM/s1600/5.jpg'/></li>

You may replace all image links by yours.
Puedes reemplazar los enlaces por tus propias imágenes.

2. Setting up the social media icons.
Configurando los botones social media.

Go to Design/Edit HTML, click on “Expand widget templates” and find the following code:
Ve a Diseño/Edición de HTML, click en “expandir plantillas de artilugios y encuentra el siguiente código:

<span class='facebooklink'><a href='#' title='Facebook'> Facebook</a></span>
<span class='rsslink'><a href='#' title='Feed RSS'> RSS Feed</a></span>
<span class='twitterlink'><a href='#' title='Twitter'> Twitter</a></span>

3. To set up the Twitter widget, go to Design/Edit HTML and find the following code. You must replace the username “claudia” buy yours (it appears twice):
Para configurar el widget de Twitter, ve a Diseño/Edición de HTML y encuentra el siguiente código. Debes reemplazar el nick “claudia” por el tuyo (aparece dos veces):

<a href='http://twitter.com/claudiacs' id='twitter-link'/>
<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'/>
<script src='http://twitter.com/statuses/user_timeline/claudiacs.json?callback=twitterCallback2&amp;count=1' type='text/javascript'/>
Tags: , ,