Synopsis Box
Tutorial Blog: Cara Membuat Synopsis Box
Masuk Blogger: Tema > Edit HTML
Tambahkan kode CSS berikut ini sebelum kode
]]></b:skin> atau </style>.sion {
display: block;
}
.sion h4 {
font-weight: bold;
color: #444;
font-size: 20px;
}
.sion img {
width: 150px;
float: left;
margin-right: 20px;
margin-bottom: 5px;
}
.sion:first-child {
display: block;
}
Simpan Tema
Selanjutnya untuk menampilkan hasilnya, tambahkan kode HTML berikut pada postingan bagian
<div class="sion">
<img alt="Boku no Hero Academia Sub Indo" border="0" data-original-height="800" data-original-width="1280" src="https://3.bp.blogspot.com/-YH-Ffyq7okI/XXuPwpRetGI/AAAAAAAAAls/zLD4y4x4nIYmXfGzyJw60aOq4yy7X-ItwCLcBGAsYHQ/s1600/Boku%2Bno%2BHero%2BAcademia.jpg" title="Boku no Hero Academia Subtitle Indonesia" /><h4>
Synopsis</h4>
<p>
Munculnya "quirks," kekuatan super yang baru ditemukan, telah terus meningkat selama bertahun-tahun, dengan 80 persen umat manusia memiliki berbagai kemampuan dari manipulasi elemen hingga perubahan bentuk. Ini membuat sisa dunia benar-benar tidak berdaya, dan Izuku Midoriya adalah salah satu dari mereka.
Sejak dia masih kecil, anak sekolah menengah yang ambisius itu menginginkan tidak lebih dari menjadi seorang pahlawan. Nasib Izuku yang tidak adil membuat dia mengagumi pahlawan dan mencatatnya kapan pun dia bisa. Tapi tampaknya kegigihannya membuahkan hasil: Izuku bertemu dengan pahlawan nomor satu dan idola pribadinya, All Might. Keunikan All Might adalah kemampuan unik yang dapat diwariskan, dan ia telah memilih Izuku sebagai penggantinya!
Bertahan selama berbulan-bulan pelatihan yang melelahkan, Izuku mendaftar di UA High, sebuah sekolah tinggi bergengsi yang terkenal karena program pelatihan pahlawannya yang luar biasa, dan mahasiswa baru tahun ini terlihat sangat menjanjikan. Dengan teman sekelasnya yang aneh tapi berbakat dan ancaman yang mengancam organisasi jahat, Izuku akan segera belajar apa artinya menjadi pahlawan.</p>
</div>width 150px Resolusi gambar
Synopsis
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lobortis, mauris sollicitudin rhoncus pharetra, metus lectus rutrum neque, sed posuere ipsum lorem at risus. Duis eget erat ex. Donec fringilla ullamcorper blandit. Fusce eget ipsum ut eros tempus iaculis. Maecenas quis ornare dui. Vivamus pharetra, nunc ac facilisis efficitur, risus tortor tincidunt ex, quis aliquam quam mauris nec mauris. Nullam id laoreet dolor, nec gravida magna. Donec a turpis quis tellus sodales facilisis nec eget urna. Vestibulum congue ipsum et pulvinar ullamcorper. Aenean enim sapien, feugiat at porta in, varius ultrices sem. Vestibulum iaculis eget arcu non facilisis. Proin tempor tellus in neque iaculis, at rhoncus dui vestibulum. Sed sed lorem turpis.
Duis id mollis magna. Sed eleifend, dolor quis tristique hendrerit, purus nisl egestas neque, a consequat ante nulla sit amet est. Sed est massa, laoreet nec eros non, vestibulum vehicula purus. Cras dictum sollicitudin rhoncus. In hac habitasse platea dictumst. Fusce a vestibulum turpis, in dapibus quam. Ut faucibus enim vel dui tincidunt, at ullamcorper ex aliquet. Donec non dictum neque, auctor dictum nulla. Duis malesuada orci quis ipsum accumsan finibus.
Ut et leo sed elit lacinia vulputate. In hac habitasse platea dictumst. Cras non suscipit nisl. Nullam vitae gravida dui. Nunc eget dignissim tortor, ac vestibulum est. Praesent dapibus elit convallis, aliquam risus sit amet, tempor risus. Fusce eget sapien sed ante pharetra tempor nec at ligula. Donec pellentesque quam sed mi euismod rutrum. Aliquam nec lectus commodo, sollicitudin velit ac, ultrices urna.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla libero magna, blandit at pretium lobortis, volutpat hendrerit sem. Nullam non arcu ultricies, malesuada ante eget, rutrum mi. Aenean pharetra velit ac mollis lacinia. Nulla sed tortor risus. Nam rutrum vulputate nunc a dapibus. Mauris et ipsum sollicitudin, condimentum nisi vel, gravida dui.
Phasellus pulvinar pulvinar nulla, nec imperdiet sem lobortis in. Maecenas ut eros sapien. Ut euismod nisl lobortis est accumsan varius. Mauris posuere quam pharetra tempor lacinia. Aliquam nec pellentesque lectus. Aliquam erat volutpat. Nullam suscipit pellentesque sapien, vitae ullamcorper justo cursus in. Phasellus posuere augue felis. Duis consectetur, lacus et ultrices mattis, lorem lorem convallis leo, ut consectetur risus ex vitae lectus. Proin cursus egestas dapibus. Sed ac nisi aliquam, interdum eros quis, fermentum quam. Integer tristique aliquet nibh at sagittis. Proin euismod consectetur lorem, vel malesuada nunc pulvinar a.