[Tutorial] Membuat Anime Info Seperti Moonanime

• CSS
• HTML

PEMASANGAN / INSTALLATION

#1 Buka Dashboard Blogger-mu
#1 Open your Blogger Dashboard
#2 Pilih menu "Tema"
#2 Select "Theme" menu on left side
#3 Klik ikon arah bawah (letaknya disebelah tulisan SESUAIKAN)
#3 Click dropdown icon (placed after "CUSTOMIZE" text)
#4 Lalu pilih "Edit HTML"
#4 Then, select "Edit HTML"
#5 Pasang (Copy dan Paste) CSS di bawah ini tepat sebelum kode ]]></b:skin> atau </style>
#5 Copy and Paste CSS bellow this, before ]]></b:skin> or </style> code

CSS

/*=====================================
= Anime Info Moonanime style
= By : Close Art Design
= https://closeart-id.blogspot.com
=====================================*/
 #series-info{
    overflow:hidden;
    display:block;
    position:relative;
    margin-top:8px;
    margin-bottom:10px
}
 .series-thumb{
    width:160px;
    height:220px;
    float:left;
    display:block;
    overflow:hidden
}
 .series-thumb img{
    width:auto;
    height:auto;
    margin:0;
    padding:0;
    max-width:100%
}
 .sinopsis-series{
    padding-left:15px;
    height:228px;
    overflow:auto
}
 .sinopsis-series:before{
    content:'SYNOPSIS';
    text-align:center;
    position:absolute;
    bottom:10px;
    right:15px;
    color:#FFF;
    background:#2FA4DA;
    padding:10px;
    border-radius:6px;
    font-size:20px;
    transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    -ms-transition:all 0.5s ease-in-out
}
 .sinopsis-series p{
    margin-right:15px;
    font-size:14px;
    margin-bottom:10px
}
 .sinopsis-series:hover:before{
    opacity:.2;
    transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    -ms-transition:all 0.5s ease-in-out
}
 .listing-info h5,.trailer h5{
    font-size:15px;
    padding:4px 0 10px;
    border-bottom:3px solid #2FA4DA;
    margin-bottom:10px;
    color:#333
}
 .listing-info{
    clear:both
}
 .listing-info .listing{
    display:block;
    overflow:hidden
}
 .listing-info .listing li{
    border-left:5px solid #2FA4DA;
    border-right:5px solid #FFF073;
    border-bottom:1px solid #CCC;
    line-height:20px;
    padding:5px 15px;
    margin-bottom:4px;
    list-style:none
}
 .listing-info .listing li b{
    overflow:hidden;
    width:200px;
    display:inline
}
 .listing-info .listing li:hover{
    border-color:#3CC091
}

LETAKKAN DI DALAM POSTINGAN (Jangan lupa switch ke mode HTML)
PLACE INTO POST (Don't forget swtich to HTML Mode)

HTML

<div id='series-info'>
    <div class='series-thumb'>
        <img alt="PASTE-YOUR-TITLE-POST-HERE" src="INPUT-URL-IMAGE-HERE" title="PASTE-YOUR-TITLE-POST-HERE"/>
    </div>

    <div class='sinopsis-series'>
        <p>SYNOPSIS PARAGRAPH 1</p>
      
        <p>SYNOPSYS PARAGRAPH 2</p>    
    </div>
</div><!--more-->

<div class='listing-info'>
    <h5><span class='fa fa-info'></span> Anime Information</h5>
    <div class='listing'>
        <li><b>Alternative Titles</b> : INPUT ALTERNATIVE TITLE HERE</li>
        <li><b>Type</b> : TV Series/BD/OVA/ONA/SPECIAL/MOVIE whatever</li>
        <li><b>Episodes</b> : INPUT TOTAL EPISODES</li>
        <li><b>Status</b> : Completed/On-Going</li>
        <li><b>Aired</b> : INPUT AIRED SERIES</li>
        <li><b>Producers</b> : INPUT PRODUCERS SERIES</li>
        <li><b>Licensors</b> : INPUT LICENSORS SERIES</li>
        <li><b>Studios</b> : INPUT STUDIOS SERIES</li>
        <li><b>Genre</b> : INPUT GENRE SERIES</li>
        <li><b>Duration</b> : INPUT DURATION SERIES</li>
        <li><b>Rating</b> : R - 17+ (violence and profanity) or PG-TEENS 13 OLDER</li>
    </div>
</div>
    	
    

Premium Theme

Order Premium Theme

Changelog

Version 1.0
• Oct 25th, 2021

Information

Author: Sebastian Auron (Close Art)

Version: 1.0

Release: Oct 25th, 2021

Type: Fansub Fanshare

Platform: Blogger

Submit Your Theme

"Download Link" doesn't appear? Turn off your adblock from Close Art
Close Art doesn't have Pop-up Ads. Thanks