BlogrShop es un plantilla para Blogger ~ Blogueandomiblog

BlogrShop es un plantilla para Blogger, dedicada al comercio electrónico (tienda online).
Su diseño elegante, de colores grises y negros hacen que esta plantilla se vea muy profesional.
Dispone de:
Slider destacado automático.
Paginación,
Widged de redes sociales
Menú de nevegación superior.
Pasarela de pago

Demo Click here Download Click here

Descarga la plantilla

1º Paso

Para descargar nuestra plantilla nos vamos al botón de descarga más arriba de este post.
Se nos descargará un archivo

2º Paso

Ahora que ya lo tenemos descargado en nuestro PC,
nos dirigimos a Tema > y le damos en la parte superior al botón:
Crear / restablecer copia de seguridad

Le damos a descargar, y buscamos la carpeta de la plantilla que nos hemos descargado anteriormente.

blogrshop v1.0 - Raw Templates.xml

Configuración del Blog

Ahora tenemos que configurar nuestra plantilla para que todos las gadget funcione bien:

1º Paso

Configuracion de las Entradas

Nos dirigimos a Configuración > Entradas, comentarios, y elementos compartidos > Plantilla de las entradas> y pegamos este código.

<div class="product-image">
<table border="1" class="store-image"><tbody>
<tr>
   <th class="thumb_image" id="thumb"><div class="separator" style="clear: both; text-align: center;">
   <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP7vuNdH17PxFWxhLOIpkeiPteN7cnOUp-Fls3iX9s_wdahL0HrMbHP9_Ed151DCfOGJonvEGFn3ELI-aAvPReixI0NzmoXfRlVGpdkxKppGQfF5ron4JOMcGuwg6lOHwQO2B4TqJ6bQQ/s1600/SyaifulBaharim.com1.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP7vuNdH17PxFWxhLOIpkeiPteN7cnOUp-Fls3iX9s_wdahL0HrMbHP9_Ed151DCfOGJonvEGFn3ELI-aAvPReixI0NzmoXfRlVGpdkxKppGQfF5ron4JOMcGuwg6lOHwQO2B4TqJ6bQQ/s320/SyaifulBaharim.com1.jpeg" width="320" /></a></div>
   </th>
</tr>
</tbody></table>
</div>
<div class="product-details">
<table border="1" class="store-items"> <tbody>
<tr>
    <td class="item_name"><h2>
Add Your Product Name Goes Here 1</h2>
    </td>
</tr>
<tr>
    <td class="item_price">RM200.50</td>
</tr>
<tr>
    <td class="add_cart"><a class="item_add" href="javascript:;">Add to Cart</a>
    </td>
</tr>
<tr>
     <td class="total_quantity">Currently <strong><span class="simpleCart_quantity"></span></strong> item(s) in cart.</td></tr>
<tr>
    <td><strong>Description</strong></td>
</tr>
<tr>
    <td class="item_description">Insert your product description here.</td>
</tr>
<tr>
     <td><strong>Delivery</strong></td>
</tr>
<tr>
     <td class="item_delivery">Insert delivery details here.</td>
</tr>
</tbody></table>
<br />
<strong>More Images:-</strong><br />
<table border="1" class="store-imagesMore"><tbody>
<tr>
    <td class="prettyPhoto"><div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBgNC6fMYtqlTVREPW8WjZxAQ2jHRng6h0CFiVKqf2-w5hf11OJX00HYFykkWWbfEPchKUlBaC-U52ivC3vKhZOHMrqr0y4YHf_y7JYtoMA2HnAKA3uDdbKFPbaOx5COncv_UDdg4UNF4/s1600/online-payment-gateway-th.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="161" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXyW-lMJ2P-TqS6lHCkPukIXlii6pwIJik9GrLt97Igv5L9XezhOZfb_PE8MbYXPetEUuiDSmGjV1LmihYdW1DnTMYpq0wQtrt6fowKVr8zmaCuT6TT2Dw077ivYS10T4MBK-Om-O8OIU/s320/_notavailable.jpg" width="200" /></a></div>
    </td>
    <td class="prettyPhoto"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBgNC6fMYtqlTVREPW8WjZxAQ2jHRng6h0CFiVKqf2-w5hf11OJX00HYFykkWWbfEPchKUlBaC-U52ivC3vKhZOHMrqr0y4YHf_y7JYtoMA2HnAKA3uDdbKFPbaOx5COncv_UDdg4UNF4/s1600/online-payment-gateway-th.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="161" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXyW-lMJ2P-TqS6lHCkPukIXlii6pwIJik9GrLt97Igv5L9XezhOZfb_PE8MbYXPetEUuiDSmGjV1LmihYdW1DnTMYpq0wQtrt6fowKVr8zmaCuT6TT2Dw077ivYS10T4MBK-Om-O8OIU/s320/_notavailable.jpg" width="200" /></a>
    </td>
    <td class="prettyPhoto"><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4YyB5OyFLDwXEzofD8EDk3wuo9m8d0SDTM1KrIbkJ2pMH-9o8Tvsl4MvYNXfC2ImSfMWOK596q8ni3jtVCOd-yOmnnEZXKjqasezgw63xyxQtDtTa3yRxSL49I3omCMfK7Ye0c6QchSk/s1600/simpleCart-logo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXyW-lMJ2P-TqS6lHCkPukIXlii6pwIJik9GrLt97Igv5L9XezhOZfb_PE8MbYXPetEUuiDSmGjV1LmihYdW1DnTMYpq0wQtrt6fowKVr8zmaCuT6TT2Dw077ivYS10T4MBK-Om-O8OIU/s320/_notavailable.jpg" width="200" /></a></div>
    </td>
    <td class="prettyPhoto"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBgNC6fMYtqlTVREPW8WjZxAQ2jHRng6h0CFiVKqf2-w5hf11OJX00HYFykkWWbfEPchKUlBaC-U52ivC3vKhZOHMrqr0y4YHf_y7JYtoMA2HnAKA3uDdbKFPbaOx5COncv_UDdg4UNF4/s1600/online-payment-gateway-th.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="161" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXyW-lMJ2P-TqS6lHCkPukIXlii6pwIJik9GrLt97Igv5L9XezhOZfb_PE8MbYXPetEUuiDSmGjV1LmihYdW1DnTMYpq0wQtrt6fowKVr8zmaCuT6TT2Dw077ivYS10T4MBK-Om-O8OIU/s320/_notavailable.jpg" width="200" /></a>
    </td>
</tr>
</tbody></table>
</div>

Guardamos configuración.

Pare verificar que hemos realizado bien esta opción, nos dirigimos a Entradas, Publicar nueva entrada y nos saldrá este panel.

Publicar nuestras entradas

A la hora de publicar nuestras entradas nos tenemos que asegurar que la imagén que vamos a insertar sea de 200px x 200px.
Nos desplazamos hacia el espacio de la foto a ingresar, hacemos clic con el ratón justo encima de ella y cuando parpadé , nos saldrá un cuadro para ingresar nuestra imagen.
Por definición viene una URl que tenemos que eliminar.

También puede activar la configuración de FanzyZoom Panel
NOs vamos a :
Configuración> Función Lighbox> Activar> Guardar configuración actual.

Crear una página de pedido

En blogger nos dirigimos a:
Páginas> Agregar página> nombre su nueva página y escribimos 'Success' (sin comillas).

Nos dirigimos a editar HTML y pegamos el siguiente código:

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<div style="text-align: left;">
<h2>
Trasanción realizada con éxito</h2>
</div>
<span class="" id="result_box" lang="es"><br /><span style="font-size: large;"><span>Se le enviará una notificación automática por correo electrónico para su referencia</span></span></span></div>
<div>
<span style="font-size: large;"><span class="" id="result_box" lang="es"><span> </span> <span class="">Revise
su bandeja de entrada de correo electrónico para obtener detalles de la
orden de compra y las opciones de transacciones bancarias.</span><br /><br /><span class="">Gracias de nuevo por su compra.</span></span></span></div>
<div>
<span style="font-size: large;"><span class="" id="result_box" lang="es"><span class=""> </span></span></span><br />
<div style="text-align: left;">
<table cellpadding="10">
<tbody>
<tr>
<td><img border="0" height="55" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqapEgndtxwhoPfmS1cliaJp5_QsyaP9y-FrqZm6iGgiu91W4gfM_R6WYxVCKOoz_2StVCv6SPL3kbAJGKfnAiLNuF-55TBF6aHQevIspRFn38bhrfS9KPi6FrMf26z9eZzPH06byJQqDf/s200/cimb-clicks.jpg" width="200" />
</td>
<td><img border="0" height="43" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDuW-3lWMY8rFZEzfKKwPkh-WHRIo7WYAc9K8PJvZ9aUzDP5hZYkFj388upWyznPZAH3MvUQIrzMGB6hEqtvkGUoL4eTNIA4qhGeAGVHxxr_c4OsSySXL7Vdaufge1wpxCfqnq8PlJD76O/s200/images.jpg" width="200" />
</td>
<td><img border="0" height="93" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5_qEKyYgBWUWV-fxzgVrlkMA1Peb8TlfQcnm4fHqJWpOcMvp3CC5uYdBTFAI_K6KwLlnHf0efzcXUow1usMD-u0cHuMbuslNyipVd_1A0aZkqhlyD1mXxYnqewEHMB9XzZYN9QRQpaODm/s200/bank+islam2.png" width="200" />
</td>
</tr>
<tr>
<td><img border="0" height="103" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYATHXHOrK62yuk0LHsyulNyrTOjX43W4XmdQnrQD7EmbYNYeJcMpVLlJFlyOzLcppbfWIXIjWLmHkpPZLeFa9Xo40ljtWBveUhFs1hugRZyejkpXzg9CV3uRA9CJqgYkBQQbuGziYrOXH/s200/PayPal-logo-1.png" width="200" />
</td>
<td><img border="0" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkYwBs5OSKRljK1sV6a8gCBp8rnqZxz2BWYWtMdrHMJkhJ8ExMjOEfMoUcqTr2PPZrMd_T4x5GBn_XB5H5PVZ9LdzCjiI-wgD8V7k1Xz-THM2acYaLbBsSrRCEY28X6S0tB800CG12vYfq/s200/Google-Wallet.png" width="200" />
</td>
<td><img border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0h9kZEd0qrdcegR2QY9jxMChUmd7OzZvazNjrNpnd1Z3Hm5VIk6c01cJGhSeEvDEIB6ItJtJ45i-bHoFdkPeDGSMB_fSy_jBbXANt3q7ly1yG2kSAHNOlcK6mG2RJKVmGfJJHnpKpnvvx/s200/easy-by-RHB.png" width="200" />
</td>
</tr>
<tr>
<td><img border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWBNiVKYyxzUJXDxNCpuiqBGNXMDBCim3iqNkNTMrRg106hyYjdzeluV4vmUiFluuFZnczOmedcZZlJu3FBIlKTTa_LOf0kqD3sMKEKlf65fzAUGmalSnSJT362GqBPf5CG_w9NtKCCxxh/s320/public-bank-western-union.gif" width="200" />
</td>
<td><img border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOqu8LLdgG9Y70jfmty0lnFvAE63QCbAkyGcQay6VEfdclXApI-StsPW6NS6ju4-4pmfFpYkuzI4fR9V1zF-bMHpSFENxhR_n2Cxb_g3NxRH9nQl9WYQnKxcw44fFB0Ys1i0nCSNefTnQ2/s1600/jawatan-kosong-bsn.jpg" width="200" />
</td>
<td><img border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJPqAujCJ5Eud1dYNFhqu1-SWKq3puN0g4pdkJTh0K0c_aw6qGY7RU3WqUOXjJCVrFfrkoBiD3yOLn0pyOGxcQlxgfeCMZyQdX1J0LZSEb4BXXnQjfb2hZIBNy2nmtOiIX2SrrZFp8IrcU/s1600/logo+ambank.jpg" width="200" />
</td>
</tr>
</tbody>
</table>
</div>
</div>

Haga clic en Publicar página y haga clic en Ver.

Guardamos las URl , ya que la neesitaremos más adelante.

Crear una página de error de pedido

En blogger nos dirigimos a:
Páginas> Agregar página> nombre su nueva página y escribimos 'Error' (sin comillas).

Nos dirigimos a editar HTML y pegamos el siguiente código:

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
Error de Pedido.</h2>
<div style="text-align: center;">
<span style="font-size: large;"><b><span class="" id="result_box" lang="es">Hubo un pequeño problema al enviar sus pedidos.</span></b></span><br />
<span style="font-size: large;"><b><span class="" id="result_box" lang="es"></span></b></span><br />
<span style="font-size: large;"><b><span class="" id="result_box" lang="es"></span></b></span><br />
<span style="font-size: large;"><b><span class="" id="result_box" lang="es">Causa posible:</span></b></span><br />
<span style="font-size: large;"><b><span class="" id="result_box" lang="es"></span></b></span><br />
<span style="font-size: large;"><b><span class="" id="result_box" lang="es">     Dirección de correo electrónico no válida</span></b></span><br />
<span style="font-size: large;"><b><span class="" id="result_box" lang="es">     Número de teléfono no válido. (por proveedor de telecomunicaciones)</span></b></span><br />
<span style="font-size: large;"><b><span class="" id="result_box" lang="es">     Código postal no válido por dirección.</span></b></span><br />
<span style="font-size: large;"><b><span class="" id="result_box" lang="es">     No especificó el tamaño de su producto.</span></b></span><br />
<span style="font-size: large;"><b><span class="" id="result_box" lang="es"></span></b></span><br />
<span style="font-size: large;"><b><span class="" id="result_box" lang="es"></span></b></span><br />
<span style="font-size: large;"><b><span class="" id="result_box" lang="es"></span></b></span><br />
<span style="font-size: large;"><b><span class="" id="result_box" lang="es">Solución</span></b></span><br />
<span style="font-size: large;"><b><span class="" id="result_box" lang="es"></span></b></span><br />
<span style="font-size: large;"><b><span class="" id="result_box" lang="es">     <span class="">Puede hacer clic en el enlace de pago para volver a enviar sus pedidos.</span></span></b></span><br />
<span style="font-size: large;"><b><span class="" id="result_box" lang="es">     <span class="">No tiene que volver a seleccionar su producto, ya que hemos mantenido sus elecciones en nuestro sistema.</span></span></b></span><br />
<span style="font-size: large;"><b><span class="" id="result_box" lang="es">     <span class="">Complete el formulario simple con entradas válidas y el envío de su pedido será exitoso.</span></span></b></span></div>
<br />
<br />
<br />
<div style="text-align: center;">
<a class="button blue" href="http://blogrshop-template.blogspot.com/p/checkout.html"><span style="font-size: large;">Return to Checkout</span></a></div>
<br />
.</div>

Modificar el Slider

Adición de productos de oferta para mostrar en la página de inicio por etiqueta
Vaya a Diseño> busque Offer Product widget> Editar> copie los siguientes códigos en el cuerpo del widget: -

Para personalizar la etiqueta que desea mostrar
Camibamos el nombre de la etiqueta por lo marcado en verde.

Para cambiar lasw publicaciones a mostrar cambiamos lo marcado en rojo por el número de publicaciones a mostrar.

Slider de productos

En blogger nos dirigimos a:
Páginas> Agregar página> nombre su nueva página y escribimos 'Error' (sin comillas).

Nos dirigimos a editar HTML y pegamos el siguiente código:

<! - Enlaces de pestañas sociales ->
<div class = 'idc-social'>
<ul>
<li> <a class='rss' href='http://feeds.feedburner.com/IrsahBlog'> Suscríbase a nuestro feed </a> </ li>
<li> <a class='twitter' href='https://twitter.com/irsah_blog'> Sígueme en Twitter </a> </ li>
<li> <a class='facebook' href='https://www.facebook.com/irsahimihar'> Encuéntrame en Facebook </a> </ li>
<li> <a class='google' href='https://plus.google.com/#'> Únete a mí en Google+ </a> </ li>
<li> <a class='linkedin' href='http://in.linkedin.com/in/irsahcom'> Conéctese con LinkedIn </a> </ li>
</ ul>
</ div>
<! - Enlaces de pestañas sociales ->

Cambiamos la Url de nuestros perfiles de redes sociales marcado en Rojo por nuestra propia
Guardamos la plantilla y listo

Recent Posts

Labels

BlogrShop es un plantilla para Blogger

Descarga la plantilla

1º Paso

2º Paso

Configuración del Blog

1º Paso

Configuracion de las Entradas

Publicar nuestras entradas

Crear una página de pedido

Crear una página de error de pedido

Modificar el Slider

Slider de productos

No hay comentarios:

Publicar un comentario

Trending

Social Media