Cómo Crear un Blog de Películas en Blogger Utilizando una Plantilla

Los blogs dedicados al mundo del cine son una excelente manera de compartir tu pasión por las películas con otros amantes del séptimo arte. Si estás interesado en crear un blog de películas y utilizar Blogger como plataforma, estás en el lugar correcto. En este artículo, te guiaré paso a paso sobre cómo iniciar tu propio blog de películas en Blogger utilizando una plantilla que hará que tu sitio luzca profesional y atractivo.

Paso 1: Configurar tu Blog en Blogger

  1. Crear una Cuenta en Blogger: Dirígete a Blogger y regístrate con tu cuenta de Google. Si ya tienes una cuenta de Google, este paso será aún más sencillo.
  2. Crear un Nuevo Blog: Una vez que hayas iniciado sesión, haz clic en “Crear un blog” y completa la información requerida, como el título y la dirección URL de tu blog. Elige un nombre que refleje la temática de tu blog de películas.

Paso 2: Seleccionar y Descargar una Plantilla

  1. Explorar Plantillas de Blogger: Dirígete a sitios web que ofrecen plantillas gratuitas para Blogger, como Gooyaabi Templates o Sora Templates. Explora las opciones y elige una plantilla que se ajuste a la estética que buscas para tu blog de películas.
  2. Descargar la Plantilla: Una vez que encuentres la plantilla perfecta, descárgala y guarda el archivo en tu computadora. La mayoría de las plantillas se descargan en formato ZIP.
  3. Para este ejemplo trabajaremos con la plantilla de moview, puedes descargarlo en el siguiente boton.

Página para sacar informacion de las peliculas TMDB

Página para los iconos del menu fontawesome

Descargar plantillas gratis

Demo de la plantilla

Paso 3: Instalar la Plantilla en Blogger

  1. Descomprimir el Archivo ZIP: Extrae el archivo ZIP descargado. Dentro, encontrarás archivos y posiblemente una carpeta que contiene la plantilla.
  2. Cargar la Plantilla en Blogger: En el panel de control de Blogger, selecciona tu blog y ve a “Tema”. Haz clic en “Editar HTML” y luego en “Cargar tema desde un archivo”. Selecciona el archivo XML que extrajiste de la carpeta de la plantilla.

Paso 4: Personalizar tu Blog de Películas

  1. Ajustar Configuraciones Básicas: Modifica la descripción, título y otras configuraciones básicas de tu blog desde el panel de control de Blogger.
  2. Agregar Gadgets y Widgets: Personaliza la barra lateral de tu blog agregando gadgets y widgets útiles, como reseñas de películas destacadas, enlaces a redes sociales y categorías de películas.

Paso 5: Crear Contenido Atractivo

  1. Publicar tus Primeras Entradas: Comienza a escribir reseñas de películas, noticias del cine o cualquier otro contenido relevante para tu audiencia. Añade imágenes y vídeos para hacer tus publicaciones más atractivas.
  2. Optimizar para SEO: Utiliza palabras clave relevantes en tus publicaciones para mejorar el posicionamiento de tu blog en los motores de búsqueda y atraer a más lectores.

Bien una vez hehco todo los pasos, te estare dejando los codigos, en la cual vamos a trabajar para llevar este blog, te recomiendo ver el video en la parte final del articulo.

CODIGO ENTRADA PELICULAS:

  
 <div class="movie-details">
        <img alt="Imagen de la Película" height="120" src="URL DE LA IMAGEN" width="102" />
    
   <h1><font color="#fff"> Titulo de la pelicula </font></h1>
        
        <p><font color="#fff"> <strong>Sinopsis:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lorem ut libero malesuada feugiat.</font></p>
        
        <p><font color="#fff"><strong>Año de Estreno:</strong> 2022</font></p>
        
        <p><font color="#fff"><strong>Géneros:</strong> Acción, Aventura, Drama</font></p>
    </div>
  
  
  
  
  <div class="tabs">
    <button class="tablinks" onclick="openTab('tab1')">SERVIDOR 1</button>
    <button class="tablinks" onclick="openTab('tab2')">SERVIDOR 2</button>
    <button class="tablinks" onclick="openTab('tab3')">SERVIDOR 3</button>
  </div>

  <div class="tabcontent" id="tab1">
    <iframe allowfullscreen="" frameborder="0" height="315" src="URL DEL VIDEO" width="100%"></iframe>
  </div>

  <div class="tabcontent" id="tab2">
    <iframe allowfullscreen="" frameborder="0" height="315" src="URL DEL VIDEO" width="100%"></iframe>
  </div>

  <div class="tabcontent" id="tab3">
    <iframe allowfullscreen="" frameborder="0" height="315" src="URL DEL VIDEO" width="100%"></iframe>
  </div>

  <div class="contenedor">
    <button class="boton">Descargar 1</button>
    <button class="boton">Descargar 2</button>
    <button class="boton">Descargar 3</button>
  </div>
  
    <style>
        img {
            float: left;
            margin-right: 20px; /* Espacio entre la imagen y el texto */
            max-width: 300px;
            height: auto;
        }

        .movie-details {
            overflow: hidden; /* Evita que el contenido flote alrededor de la imagen */
        }
    </style>

   
   <script src="script.js"></script>
  <script>
    function openTab(tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].classList.remove("active");
  }
  document.getElementById(tabName).style.display = "block";
  event.currentTarget.classList.add("active");
}

// Abre la primera pestaña por defecto
document.getElementById("tab1").style.display = "block";
document.getElementsByClassName("tablinks")[0].classList.add("active");
    </script>

 

 

CODIGO ENTRADA SERIES

<div class="movie-details">
  <img alt="Imagen de la Película" height="120" src="https://www.themoviedb.org/t/p/w600_and_h900_bestv2/oFTv9kayoU1xECGct7DgwTZ6Ymy.jpg" width="102" />

<h1><font color="#fff"> Titulo de la serie </font></h1>
  
  <p><font color="#fff"> <strong>Sinopsis:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lorem ut libero malesuada feugiat.</font></p>
  
  <p><font color="#fff"><strong>Año de Estreno:</strong> 2022</font></p>
  
  <p><font color="#fff"><strong>Géneros:</strong> Acción, Aventura, Drama</font></p>
</div>


<section id="seriesHG">
<ul>
<li class="temporada">
<h3 class="titulo">Sesion 1</h3>
<ul class="capitulos">
  <li><a href="URL DEL VIDEO" h4 class="titulo">Episodio 1</a>         
  </li>
  
  <li><a href="URL DEL VIDEO" h4 class="titulo">Episodio 2</a>         
  </li>
  
  <li><a href="URL DEL VIDEO" h4 class="titulo">Episodio 3</a>          
  </li>
  
  <li><a href="#" h4 class="titulo">Episodio 4</a>         
  </li>
  
  <li><a href="#" h4 class="titulo">Episodio 5</a>         
  </li>
  <!-- Agregar más capítulos -->
</ul>
</li>
<!-- Agregar más temporadas -->
<li class="temporada">
<h3 class="titulo">Sesion 2</h3>
<ul class="capitulos">
  <li><a href="#" h4 class="titulo">Episodio 1</a>           
  </li>
  
  <li><a href="#" h4 class="titulo">Episodio 2</a>           
  </li>
  
  <li><a href="#" h4 class="titulo">Episodio 3</a>         
  </li>
  
  <li><a href="#" h4 class="titulo">Episodio 4</a>          
  </li>
  
  <li><a href="#" h4 class="titulo">Episodio 5</a>          
  </li>
  
  <!-- Agregar más capítulos -->
</ul>
</li>
</ul>
</section>




<style>
  img {
      float: left;
      margin-right: 20px; /* Espacio entre la imagen y el texto */
      max-width: 300px;
      height: auto;
  }

  .movie-details {
      overflow: hidden; /* Evita que el contenido flote alrededor de la imagen */
  }
</style>

CODIGO ENTRADA DE LA SESION Y EPISODIO

  
 <div class="movie-details">
  <img alt="Imagen de la Película" height="120" src="URL DE LA IMAGEN" width="102" />

<h1><font color="#fff"> Berlín: Temporada 1, Episodio 1</font></h1>
  
  <p><font color="#fff"> <strong>Sinopsis:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lorem ut libero malesuada feugiat.</font></p>
  
  <p><font color="#fff"><strong>Año de Estreno:</strong> 2022</font></p>
</div>




<div class="tabs">
<button class="tablinks" onclick="openTab('tab1')">SERVIDOR 1</button>
<button class="tablinks" onclick="openTab('tab2')">SERVIDOR 2</button>
<button class="tablinks" onclick="openTab('tab3')">SERVIDOR 3</button>
</div>

<div class="tabcontent" id="tab1">
<iframe allowfullscreen="" frameborder="0" height="315" src="LINK DEL VIDEO" width="100%"></iframe>
</div>

<div class="tabcontent" id="tab2">
<iframe allowfullscreen="" frameborder="0" height="315" src="LINK DEL VIDEO" width="100%"></iframe>
</div>

<div class="tabcontent" id="tab3">
<iframe allowfullscreen="" frameborder="0" height="315" src="LINK DEL VIDEO" width="100%"></iframe>
</div>

<div class="contenedor">
<a href="URL EPISODIO ANTERIOR" button class="boton">Anterior</a>
<a href="URL MENU SECCION DE LA SERIE" button class="boton">Volver</a>
<a href="URL EPISODIO SIGUIENTE" button class="boton">Siguiente</a>
</div>

<style>
  img {
      float: left;
      margin-right: 20px; /* Espacio entre la imagen y el texto */
      max-width: 300px;
      height: auto;
  }

  .movie-details {
      overflow: hidden; /* Evita que el contenido flote alrededor de la imagen */
  }
</style>


<script src="script.js"></script>
<script>
function openTab(tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
document.getElementById(tabName).style.display = "block";
event.currentTarget.classList.add("active");
}

// Abre la primera pestaña por defecto
document.getElementById("tab1").style.display = "block";
document.getElementsByClassName("tablinks")[0].classList.add("active");
</script>




CODIGO PARA TV EN VIVO

  
 <div class="movie-details">
  <img alt="Imagen de la Película" height="120" src="URL DE LA IMAGEN" width="102" />

<h1><font color="#fff"> Titulo del canal </font></h1>
  
  <p><font color="#fff"> <strong>Descripcion:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lorem ut libero malesuada feugiat.</font></p>
  
  <p><font color="#fff"><strong>Pais:</strong> 2022</font></p>
</div>




<div class="tabs">
<button class="tablinks" onclick="openTab('tab1')">SERVIDOR 1</button>
<button class="tablinks" onclick="openTab('tab2')">SERVIDOR 2</button>
<button class="tablinks" onclick="openTab('tab3')">SERVIDOR 3</button>
</div>

<div class="tabcontent" id="tab1">
<iframe allowfullscreen="" frameborder="0" height="315" src="URL DEL CANAL" width="100%"></iframe>
</div>

<div class="tabcontent" id="tab2">
<iframe allowfullscreen="" frameborder="0" height="315" src="URL DEL CANAL" width="100%"></iframe>
</div>

<div class="tabcontent" id="tab3">
<iframe allowfullscreen="" frameborder="0" height="315" src="URL DEL CANAL" width="100%"></iframe>
</div>



<style>
  img {
      float: left;
      margin-right: 20px; /* Espacio entre la imagen y el texto */
      max-width: 300px;
      height: auto;
  }

  .movie-details {
      overflow: hidden; /* Evita que el contenido flote alrededor de la imagen */
  }
</style>


<script src="script.js"></script>
<script>
function openTab(tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
document.getElementById(tabName).style.display = "block";
event.currentTarget.classList.add("active");
}

// Abre la primera pestaña por defecto
document.getElementById("tab1").style.display = "block";
document.getElementsByClassName("tablinks")[0].classList.add("active");
</script>




¡Listo! Ahora tienes un blog de películas en Blogger con una plantilla atractiva. Recuerda mantener tu contenido actualizado y participar en la comunidad cinematográfica para construir una audiencia fiel. ¡Disfruta compartiendo tu amor por el cine con el mundo!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *