Cara Mengedit Tema Emporio Bagian I | Custom Blogger Template

Editing Emporio Theme

Kenapa tema Emporio?

Menurut saya tema tersebut sangat menarik untuk digunakan. Selain disediakan secara gratis oleh platform Blogger, hal yang cukup menarik adalah tampilannya yang sudah modern, dinamis, dan responsif layaknya template-template Premium.

Terdapat Fitur Featured Post menawan dengan Blur Image backgroud yang cukup besar, dan susunan tampilan postingan artikel yang tersusun secara grid di home page, seperti tema-tema modern.

Selain itu terdapat sticky header yang manis pada setiap postingan artikel dan kustumisasi tampilan otomatis yang terbilang lumayan komplit pada pengaturan layout theme designer, walaupun memang sangat terbatas hanya untuk sekedar merubah-ubah warna dan font, dan kita bisa mengedit beberapa bagian juga pada menu tersebut.

Tapi sebenarnya walaupun tanpa dimodif pun tema Emporio ini sudah sangat bagus menurut saya. Untuk tampilan mobile (ponsel) sudah terlihat dinamis mengikuti tampilan desktop, dengan menyembunyikan bagian sidebar berupa menu hamburger pada homepagenya. Jadi saya kira Template/tema Emporio ini sudah sangat Mobile Friendly dan menjadikannya tertata cukup rapi sehingga bisa sangat nyaman untuk dipandang.

Tanpa mengurangi rasa cintaku kepadanya.. eh.. si Emporio maksudnya 😁😅 mari kita coba untuk merombak tampilannya sedikit lebih mendalam, sedalam cintaku kepadanya 😒

Maaf ya guys, harap maklum soalnya mimin ini seorang jones alias jomblo ngenes.

Ya walaupun saya tidak mempunyai skill coding alias newbie, namun yang akan saya bagikan berikut ini adalah pengalaman pribadi setelah saya melakukan pengeditan pada template blog ini. 

Baca juga: Recent Post Widget Cantik by Spiders (Blogger)

Oh iya, satu hal lagi yang membuat saya begitu jatuh cinta kepada Emporio yaitu penampil gambarnya yang berukuran besar, hal ini sangat cocok sekali untuk saya gunakan pada artikel-artikel yang memposting banyak gambar tentang sebuah tutorial reparasi ponsel ataupun tutorial seputar penggunaan beberapa software computer seperti pada blog labalabawirata.com ini.

Baiklah langsung saja kita belajar untuk mengotak-atik kode-kodenya berikut ini. Dan sebelumnya ada baiknya kita melakukan backup tema terlebih dahulu untuk berjaga-jaga apabila ada pengeditan yang mengalami kesalahan.

Untuk melakukan pengeditan silahkan masuk menu Tema > klik tanda panah kebawah pada kotak sesuaikan berwarna orange > kemudian pilih Edit HTML seperti gambar di bawah ini:

Edit HTML

💦 Menghilangkan Blur Image Backgroud (Gambar buram di Latar Belakang) pada Heading

Sebenarnya fitur Emporio bagian yang ini cukup keren, tapi entah kenapa saya selalu saja ingin untuk menghilangkannya. Alasannya adalah ingin menaikan tampilan artikel dan side bar, jadi ya dihapus saja sekalian.

JIka ingin menghilangkannya silahkan cari kode berikut ini (gunakan kombinasi tombol Ctrl + F untuk mempermudah pencarian)

<b:if cond='data:view.isSingleItem'>
<b:if cond='data:widgets.Blog.first.posts.first.featuredImage'>
<b:include data='{ image: data:widgets.Blog.first.posts.first.featuredImage, selector: &quot;.bg-photo&quot; }' name='responsiveImageStyle'/>
<div class='bg-photo-container'>
<div class='bg-photo'/>
</div>
</b:if>
</b:if>

Biasanya berada di sekitar akhir dari kode CSS template skin. Jika sudah ketemu, hapus semua kode tersebut lalu simpan template/tema.

Saya menambahkan beberapa teks marquee (berjalan) pada area kode yang dihapus tadi, hanya untuk menuliskan beberapa ucapan galau dan tampak seperti Newsticker seperti di TV karena posisinya yang berada tepat di bagian paling atas header pada home page.

Untuk kumpulan kode penulisannya ada pada artikel 👉 Kumpulan Kode HTML Dan Java Script Untuk Mempercantik Tampilan Artikel & Blog

💦 Memperbaiki Tampilan Featured Post Pada Tampilan Mobile (PONSEL)

Jika Fitur Featured Post diaktifkan biasanya sebagian dari Judulnya akan tampak agak hilang/tersembunyi pada tampilan ponsel. Jadi untuk memperbaikinya silahkan cari kode berikut ini:

.feed-view .hero.post-wrapper{
background-color:$(posts.link.color);
border-radius:0;
height:416px
}

Silahkan dirubah pada angka 416 pada kode di atas yang saya tandai berwarna merah menjadi angka yang lebih besar, misal: 650, 700, atau 800 sesuai dengan kebutuhan, lalu simpan tema.

💦 Menghilangkan Icon Back Arrow 🢨 

Jika merasa terganggu dengan tanda panah ini kita juga dapat menghilangkannya, namun untuk saya pribadi tidak melakukannya karena ya seneng aja ada tanda yang menandakan bahwa masih ada tampilan halaman terluar yaitu home page dari blog kita.

Namun jika ingin tetap menghilangkannya maka carilah kode berikut ini:

<a class='return_link' expr:href='data:blog.homepageUrl'>
<b:include data='{ iconClass: &quot;touch-icon back-button rtl-reversible-icon&quot; }' name='backArrowIcon'/>
</a>

Jika sudah ketemu hapus semua kode tersebut lalu simpan tema.

💦 Membuat Thumbnail Homepage Menjadi Bulat (BORDER RADIUS)

Sebenarnya untuk tema Emporio ini telah diberikan batasan border pada CSS nya yang dapat kita lihat pada pengaturan Radius batas postingan yaitu hanya sebesar 32px. Jadi untuk membuat Thumbnail menjadi bulat hingga 180 derajat maka kita perlu merubah angka tersebut.

Silahkan cari kode CSS berikut ini pada pengeditan HTML:

<Variable name="posts.border.radius" description="Post border radius" type="length" default="0px" min="0px" max="32px" value="32px"/>

Pada kode CSS di atas terdapat dua buah angka 32px kemudian rubah keduannya menjadi 180px lalu simpan tema.

Setelah itu masuk kembali ke pangaturan Radius batas postingan pada Theme Designer tadi dan geser angkanya sampai ke 180px lalu simpan pengaturan.

💦 Menambahkan Snippet Pada Tampilan Mobile

Jika ingin menambahkan Snippet atau cuplikan artikel pada tampilan mobile yang hanya menampilkan judul postingan pada tema Emporio maka kita perlu melakukan penambahan kode pada pengeditan HTML.

Silahkan cari kode berikut ini:

<div class='snippet-container r-snippet-container'> <div class='r-snippetized'> <data:post.title />
</div>
<b:if cond='data:post.title != ""'> <div class='snippet-fade r-snippet-fade hidden'></div> </b:if> </div>

Lalu tambahkan kode seperti di bawah ini yang saya tandai berwarna biru sehingga kode yang di atas tadi menjadi sebagai berikut:

<div class='snippet-container r-snippet-container'> <div class='r-snippetized'> <data:post.title />
<div class='snippet-body'> <b:eval expr='snippet(data:post.body, { length: 100 })' /> </div>
</div>
<b:if cond='data:post.title != ""'> <div class='snippet-fade r-snippet-fade hidden'></div> </b:if> </div>

Kemudian simpan tema.

😇 BONUS:
💥 Menyembunyikan dan Menghilangkan Powered by Blogger pada Footer

Sebenarnya ada beberapa alternatif untuk melakukan pengeditan ini. Pertama kita bahas dengan cara yang paling konyol 😏 Buka pengeditan pada menu Theme Designer di pengaturan tata letak, lalu lakukan pengeditan warna pada bagian Atribusi seperti gambar di bawah, misal, kita rubah semua bagian Atribusi menjadi hitam, lalu sisakan sebuah tulisan berwarna hijau untuk teks "copyright by si Dia" atau siapa gitu..

Oh iya guys btw tentang si Dia nih.. sambil promosi, saya ada coveran lagu dari Anji- Dia pada link ini 👉 SpiderYoutube Channel 💞

Pengeditan Atribusi pada Theme Designer Blogspot

Baca juga: Script Untuk Membuat Halaman/Widget About Us Keren, Cantik & Manis

Kemudian cara yang kedua agak lebih rumit, yaitu melakukan pengeditan CSS pada template melalui edit HTML. Silahkan cari kode berikut ini:

div.blogger {
display: block;
}.googlezet{margin:15px auto;text-align:center}

Rubah fungsi display: block; dengan mengganti kata block menjadi none

Dan cara yang ketiga ini agak lebih simpel karena kita hanya akan menambahkan sebuah kode CSS pada menu Theme Designer > Lanjutan > Klik pada icon panah ke bawah lalu scrool sampai ke bawah > Pilih Tambahkan CSS > lalu copykan kode berikut ini pada kolomnya:

div.blogger {display: none;

Kemudian simpan pengaturan.

Demikianlah yang dapat saya bagikan pada artikel Cara Mengedit Tema Emporio Bagian I | Custom Blogger Template ini, semoga dapat bermanfaat.

Jika ada pengeditan lainnya yang dapat saya lakukan lagi, maka akan kita bahas pada postingan berikutnya di bagian ke II. Terima Kasih.