This post will walk you through how to create a Movie or Series post using the Evostream theme. To get started, simply choose what you want to create by clicking one of the buttons below — Movie or Series. Based on your selection, the matching example code and instructions will appear below.
1. Movie
The following code shows how to add a Movie post in the Evostream theme.
Simply copy and paste it into your Blogger post using the HTML view, and replace the #PLACEHOLDER tags with your actual movie details like title, poster, rating, year, and description.
<b class='none the-entry-rate'>#RATING</b>
<b class='none the-entry-type'>#LABELS</b>
<img style="display: none; width: 0" src="#IMAGE_URL"/>
<div class="the-best-player">
<div class="player-bg" style="background: url('#IMAGE_URL') no-repeat center center / cover;"></div>
<div class="max-width-header">
<div class="header-title-info">
<h1 class="header-title-info_tit">#TITLE</h1>
<p class="header-title-info_sub"></p>
</div>
<div class="header-actions">
<a href="#allEpList" class="back-episode-list">
<span class="material-symbols-outlined"> format_list_bulleted </span>
<p>Go Back</p>
</a>
</div>
</div>
<div class="options_grid" id="optionsGrid">
<div class="option-btn option-btn-active" data-link="#WATCH_LINK_HERE">OPTION 1</div>
<div class="option-btn" data-link="#WATCH_LINK_HERE">OPTION 2</div>
</div>
<div class="iframe-container">
<iframe src="" class="" frameborder="0" allowfullscreen="" ></iframe>
</div>
</div>
<div class="swiper-slide">
<div class="big_slider_item">
<div class="big_slider_item--bg" style="background: url('https://image.tmdb.org/t/p/w300//7WsyChQLEftFiDOVTGkv3hFpyyt.jpg') no-repeat center top / cover;"></div>
<div class="big_slider_item--info max-width">
<h1 class="bs-title">#TITLE</h1>
<ul class="big_slider_item--info_tags">
<li>#YEAR</li>
<li>#DURATION</li>
</ul>
<ul class="big_slider_item--info_category">
<li>#LABELS</li>
</ul>
<ul class="big_slider_item--info_rating">
<li class="big_slider_item--info_rating-stars">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<!-- <i class="fa-solid fa-star-half-stroke"></i> -->
</li>
<li class="big_slider_item--info__rate-numbers">
#RATING <i class="fa-solid fa-star"></i>
</li>
<span></span>
</ul>
<p class="big_slider_item--info_resume">#DESCRIPTION</p>
<ul class="big_slider_item--info_buttons">
<li>
<a href="#!" class="btn-play">
<span class="material-symbols-rounded">
play_arrow
</span>
</a>
</li>
<li>
<button class="btn fav-btn" fav-id="299536">
<span class="material-symbols-rounded">
playlist_add
</span>
Add to my list
</button>
<div class="blogger-entry-data" style="display: none;" entry-type="#LABLES" entry-bg="#IMAGE_URL" entry-title="#TITLE"></div>
</li>
</ul>
</div>
</div>
</div>
2. MOVIE EXAMPLE CODE
<b class='none the-entry-rate'>8.3</b>
<b class='none the-entry-type'>Adventure • Action • Science Fiction</b>
<img style="display: none; width: 0" src="https://image.tmdb.org/t/p/w300//7WsyChQLEftFiDOVTGkv3hFpyyt.jpg"/>
<div class="the-best-player">
<div class="player-bg" style="background: url('https://image.tmdb.org/t/p/w300//7WsyChQLEftFiDOVTGkv3hFpyyt.jpg') no-repeat center center / cover;"></div>
<div class="max-width-header">
<div class="header-title-info">
<h1 class="header-title-info_tit">Avengers: Infinity War</h1>
<p class="header-title-info_sub"></p>
</div>
<div class="header-actions">
<a href="#allEpList" class="back-episode-list">
<span class="material-symbols-outlined"> format_list_bulleted </span>
<p>Go Back</p>
</a>
</div>
</div>
<div class="options_grid" id="optionsGrid">
<div class="option-btn option-btn-active" data-link="WATCH_LINK_HERE">OPTION 1</div>
<div class="option-btn" data-link="WATCH_LINK_HERE">OPTION 2</div>
</div>
<div class="iframe-container">
<iframe src="" class="" frameborder="0" allowfullscreen="" ></iframe>
</div>
</div>
<div class="swiper-slide">
<div class="big_slider_item">
<div class="big_slider_item--bg" style="background: url('https://image.tmdb.org/t/p/w300//7WsyChQLEftFiDOVTGkv3hFpyyt.jpg') no-repeat center top / cover;"></div>
<div class="big_slider_item--info max-width">
<h1 class="bs-title">Avengers: Infinity War</h1>
<ul class="big_slider_item--info_tags">
<li>2018</li>
<li>2h 29m</li>
</ul>
<ul class="big_slider_item--info_category">
<li>Adventure • Action • Science Fiction</li>
</ul>
<ul class="big_slider_item--info_rating">
<li class="big_slider_item--info_rating-stars">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<!-- <i class="fa-solid fa-star-half-stroke"></i> -->
</li>
<li class="big_slider_item--info__rate-numbers">
8.3 <i class="fa-solid fa-star"></i>
</li>
<span></span>
</ul>
<p class="big_slider_item--info_resume">As the Avengers and their allies have continued to protect the world from threats too large for any one hero to handle, a new danger has emerged from the cosmic shadows: Thanos. A despot of intergalactic infamy, his goal is to collect all six Infinity Stones, artifacts of unimaginable power, and use them to inflict his twisted will on all of reality. Everything the Avengers have fought for has led up to this moment - the fate of Earth and existence itself has never been more uncertain.</p>
<ul class="big_slider_item--info_buttons">
<li>
<a href="#!" class="btn-play">
<span class="material-symbols-rounded">
play_arrow
</span>
</a>
</li>
<li>
<button class="btn fav-btn" fav-id="299536">
<span class="material-symbols-rounded">
playlist_add
</span>
Add to my list
</button>
<div class="blogger-entry-data" style="display: none;" entry-type="Adventure • Action • Science Fiction" entry-bg="https://image.tmdb.org/t/p/w300//7WsyChQLEftFiDOVTGkv3hFpyyt.jpg" entry-title="Avengers: Infinity War"></div>
</li>
</ul>
</div>
</div>
</div>
1. Series Example Code
The following code shows how to add a Series post in the Evostream theme.
Simply copy and paste it into your Blogger post using the HTML view, and replace the #PLACEHOLDER tags with your actual series details like title, poster, seasons, year, and description.
<b class='none the-entry-rate'>#RATING</b>
<b class='none the-entry-type'>#LABLES</b>
<img style="display: none; width: 0" src="#POSTER_IMAGE_URL"/>
<div class="swiper-slide">
<div class="big_slider_item">
<div class="big_slider_item--bg" style="background: url('#POSTER_IMAGE_URL') no-repeat center center / cover;"></div>
<div class="big_slider_item--info max-width">
<h1 class="bs-title">#MOVIE</h1>
<ul class="big_slider_item--info_tags">
<li>#MOIVE_YEAR</li>
<li>#SEASONS</li>
</ul>
<ul class="big_slider_item--info_category">
<li>#LABLES</li>
</ul>
<ul class="big_slider_item--info_rating">
<li class="big_slider_item--info_rating-stars">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
</li>
<li class="big_slider_item--info__rate-numbers">
8.6 <i class="fa-solid fa-star"></i>
</li>
<li><span>#RATING_NUMBER</span></li>
</ul>
<p class="big_slider_item--info_resume">#DESCRIPTION</p>
<a name='more'></a>
<ul class="big_slider_item--info_buttons">
<li>
<a href="#!" class="btn-play">
<span class="material-symbols-rounded">
play_arrow
</span>
</a>
</li>
<li>
<button class="btn fav-btn" fav-id="120089">
<span class="material-symbols-rounded">
playlist_add
</span>
ADD TO MY LIST
</button>
<div class="blogger-entry-data" style="display: none;" entry-type="#LABLES" entry-bg="#POSTER_IMAGE_URL" entry-title="#TITLE"></div>
</li>
</ul>
</div>
</div>
</div>Series Example Code
<b class='none the-entry-rate'>8.6</b>
<b class='none the-entry-type'>Animation • Comedy • Action & Adventure</b>
<img style="display: none; width: 0" src="https://image.tmdb.org/t/p/w300//7NAvPYPAu7MeHwP8E9sn81PqsRh.jpg"/>
<div class="swiper-slide">
<div class="big_slider_item">
<div class="big_slider_item--bg" style="background: url('https://image.tmdb.org/t/p/w1280//7NAvPYPAu7MeHwP8E9sn81PqsRh.jpg') no-repeat center center / cover;"></div>
<div class="big_slider_item--info max-width">
<h1 class="bs-title">SPY x FAMILY</h1>
<ul class="big_slider_item--info_tags">
<li>2022</li>
<li>2 Seasons</li>
</ul>
<ul class="big_slider_item--info_category">
<li>Animation • Comedy • Action & Adventure</li>
</ul>
<ul class="big_slider_item--info_rating">
<li class="big_slider_item--info_rating-stars">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
</li>
<li class="big_slider_item--info__rate-numbers">
8.6 <i class="fa-solid fa-star"></i>
</li>
<li><span>(1592)</span></li>
</ul>
<p class="big_slider_item--info_resume">World peace is at stake and secret agent Twilight must undergo his most difficult mission yet—pretend to be a family man. Posing as a loving husband and father, he’ll infiltrate an elite school to get close to a high-profile politician. He has the perfect cover, except his wife’s a deadly assassin and neither knows each other’s identity. But someone does, his adopted daughter who’s a telepath!</p>
<a name='more'></a>
<ul class="big_slider_item--info_buttons">
<li>
<a href="#!" class="btn-play">
<span class="material-symbols-rounded">
play_arrow
</span>
</a>
</li>
<li>
<button class="btn fav-btn" fav-id="120089">
<span class="material-symbols-rounded">
playlist_add
</span>
ADD TO MY LIST
</button>
<div class="blogger-entry-data" style="display: none;" entry-type="Animation • Comedy • Action & Adventure" entry-bg="https://image.tmdb.org/t/p/w300//7NAvPYPAu7MeHwP8E9sn81PqsRh.jpg" entry-title="SPY x FAMILY"></div>
</li>
</ul>
</div>
</div>
</div>
2. EPISODE CODE AND LINKS
<div class="max-width season-list" id="allEpList">
<div class="select-season">
<h2>Episodes</h2>
<select name="" id="select-season">
<option value="1">#SEASON_NO</option>
<!--<option value="1">SEASON 2</option>-->
</select>
</div>
<div id="temps">
<ul class="caps-grid animation" id="season-1">
<!-- EPISODE 1 START HERE -->
<li>
<a href="#!" class="episode"
option-1-lang="Sub"
option-1-server="Server 1"
option-1-url=">#STREAMING_URL">
<div class="episode__img">
<img src="#POSTER_IMAGE_URL" onerror="this.style='display:none';">
<div class="episode__no-image"><i class="fa-regular fa-circle-play"></i></div>
</div>
<div class="epsiode__info">
<h4 class="episode__info__title">#EPISODE_TITLE</h4>
<div class="episode__info__duration">#DURATION</div>
</div>
</a>
</li>
<!-- EPISODE 1 END HERE -->
<!-- ADD EPISDOE 2 HERE -->
</ul>
</div>
</div>
<div class="the-best-player">
<div class="player-bg" style="background: url('#POSTER_IMAGE_URL') no-repeat center center / cover;"></div>
<div class="max-width-header">
<div class="header-title-info">
<h1 class="header-title-info_tit">#TITLE</h1>
<p class="header-title-info_sub"></p>
</div>
<div class="header-actions">
<a href="#allEpList" class="back-episode-list">
<span class="material-symbols-outlined"> format_list_bulleted </span>
<p>Episodes</p>
</a>
<div class="prev-episode">
<span class="material-symbols-outlined"> arrow_back </span>
<p>Previous</p>
</div>
<div class="next-episode">
<p>Next</p>
<span class="material-symbols-outlined"> arrow_forward </span>
</div>
</div>
</div>
<div class="options_grid" id="optionsGrid">
</div>
<div class="iframe-container">
<iframe frameborder="0" src="" scrolling="no" allowfullscreen></iframe>
</div>
</div>