CARA MEROMBAK TAMPILAN TEMPLATE BLOGGER TERBARU CONTEMPO TUTORIAL SATU

Pada kesempatan pertama ini saya ingin berbagi trik dasar merombak tampilan sekaligus meningkatkan performa empat varian template blogger terbaru. Empat varian terbaru template blogger (2017-sampai sekarang)  adalah:
cara merombak template terbaru blogger

  1. Contempo
  2. Soho
  3. Emporio
  4. Notable
Sedangkan 7 varian template blogger lama  (2008-2017) adalah:
  1. Simple
  2.  Dinamic
  3. Picture window
  4. Awesome inc. 
  5. Watermark
  6. Ethereal
  7. Travel
Perbedaan:
  1. Template versi baru responsif dan mobile friendly - template lama tidak, kecuali jika di desain ulang. 
  2. Template terbaru sudah mengusung gaya desain aliran tertentu misal: contempo beraliran indie, soho beraliran fancy,  emporio menganut aliran vegea,  dan notable mengikuti aliran desain bergaya rockpool. 
  3. 4 varian Template terbaru sudah dilengkapi dengan ikon svg bawaan yang walau terbatas namun cepat tidak menghambat kecepatan loading halaman web. Misalnya menuIcon, shareIcon, closeIcon dll. Sedangkan template lama tidak. 

Trik mudah merobah tampilan template contempo
a. Header. 
Template Contempo memiliki tinggi header yang dapat di ejas melalui pengaturan pada dasbor blogger. Akan tetapi pengaturan tersebut hanya sampai batas paling kecil: 100px. Tampilan header tetap melewati batas latar headernya. Bagaimana tidak? Karena pengaturan CSS groupnya adalah sebagai berikut:
<Group description="Backgrounds">
<Variable name="body.background.height" description="Background height"
type="length"
min="420px"
max="640px"
default="480px" value="480px"/>

<Variable name="body.background" description="Background"
color="$(body.background.color)"
type="background"
default="$(color) none repeat scroll top left" value="$(color) url(https://themes.googleusercontent.com/image?id=L1lcAxxz0CLgsDzixEprHJ2F38TyEjCyE3RSAjynQDks0lT1BDc1OxXKaTEdLc89HPvdB11X9FDw) no-repeat scroll top center /* Credit: Michael Elkan (http://www.offset.com/photos/394244) */;"/>
<Variable name="body.background.color" description="Body background color"
type="color"
default="#eee" value="#eeeeee"/>
<Variable name="posts.background.color" description="Post background color"
type="color"
default="#fff" value="#ffffff"/>
<Variable name="body.background.blur" description="Background blur"
type="length"
min="0px"
max="50px"
default="0px" value="0px"/>
</Group>
Jika kalian ingin batas tersebut tidak melewati latar header atau sejajar dengan latar, kalian harus merombak ukurannya melalui pengaturan CSS,  dan tampaknya hanya dapat dilakukan melalui halaman editor HTML. Kalian harus menemukan kode di atas dan merobah angka yang kami beri warna merah dengan menjadi:
min="100px"
max="640px"
default="480px" value="100px"/>

Caranya masuk ke pengaturan blogger, pilih tema, lalu pilih edit HTML (dasbor blogger baru)

Kemudian Save template 

b.  Ikon 
Template Blogger terbaru menggunakan model ikon SVG versi blogger itu sendiri. Inilah salah satu hal yang membedakannya dengan template blogger yang lebih lama. Dengan memiliki ikon ikon ini paling tidak kita tidak memerlukan ikon ikon pihak ketiga seperti ikon ikonnya font awesome.

Ikon svg pada Blogger dapat di ganti atau di robah. Misalnya jika kalian tidak menginginkan ikon backArrowIcon dan ingin mengganti tampilannya menjadi closeIcon
icon backArrow blogger default
Perhatikan contoh:
<b:include data='{ button: true, iconClass: &quot;back-button rtl-reversible-icon flat-icon-button ripple&quot; }' name='backArrowIcon'/>

Kita dapat merobah ikon tersebut dengan merobah tulisan warna merah: 

<b:include data='{ button: true, iconClass: &quot;back-button rtl-reversible-icon flat-icon-button ripple&quot; }' name='closeIcon'/>
Ikon tersebut berada pada sidebar untuk menutup sidebar tersebut, atau berada di header bagian halaman postingan dan jika kita merobahnya seperti instruksi di atas maka ikon tanda anah menghadapat ke kiri (🔙) akan berubah menjadi ikon close (⨲) walau sangat terbatas, template blogger terbaru memiliki sejumlah kecil ikon bawaan (default) yang dapat kita pergunakan, yakni:

  1. menuIcon ()
  2. emailIcon (📧)
  3. commentIcon (💬)
  4. flatbloggerIcon
  5. closeIcon (❌)
  6. backArrowIcon (🔙)
  7. chevronDownIcon
  8. chevronUpIcon
  9. facebookIcon
  10. forwardArrowIcon
  11. linkIcon
  12. pinterestIcon
  13. searchIcon
  14. shareIcon
  15. svgIcon
  16. twitterIcon
  17. verticalMoreIcon
  18. sharingOtherIcon
  19. defaultAvatarIcon

Adapun jenis ikon ikon tersebut yang pada  telah di terapkan ke dalam 4 varian template blogger terbaru adalah:

menuIcon, backArrowIcon, svgIcon, shareIcon, emailIcon, dan searchIcon. dll.

C.  Pengaturan tampilan pagelist. 
Pagelist dapat dijadikan sebagai pengganti navbar untuk navigasi menu blogger, namun agar membuatnya lebih stylish dan beda dengan tampilan aslinya kalian harus merombak penngaturan CSSnya.

Jadi kita harus masuk ke pengaturan blogger pilih tema, pilih sesuaikan, kemudian cari menu 'Tambahkan CSS, dan pada blanko CSS tersebut silahkan masukan kode overrade CSS berikut:
.blog-name .PageList{
background: transparent;
border-top:double; border-color: #fff;
border-bottom:double; border-color: #fff;
margin-top:1px;
padding-top:0px;
text-align:center
}
.blog-name .PageList .overflowable-contents{
width:90%
}
.blog-name .PageList h3.title{
color:$(blog.title.color);
margin:8px auto;
text-align:center;
width:100%
}
Save template.

Itu belum selesai sampai kalian ketemu kode berikut di dalam halaman editor HTML, silahkan masuk kepengaturan blogger dan pilih tema lalu pilih opsi edit HTML, cari kode berikut, terdapat dua kode yang sama pada template contempo, pilih yang kedua:

          <a><data:messages.moreEllipsis/></a>

Hapus kode tersebut dan ganti dengan kode berikut:

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
</svg>

Kemudian Save template. 

d. Menambahkan sidebar menu pada sidebar blog. 
Jika kalian lebih suka tampilan minimalis dan ingin agar tampilan navigasi menu pada bagian sidebar, maka kalian dapat menyembunyikannya dan menampilkannya dengan cara mengklik ikon menu pada bagian homepage blogger contempo. Caranya:
  1. Masuk ke pengaturan dasbor blogger
  2. Pilih tata-letak atau layout
  3. Pilih layout bilah sisi nomor dua dari atas dan klik tambahkan gagdet/widget
  4. Pilih tambahkan HTML/Javascript.
Pada blanko kosong HTML/Javascript kosong yang muncul pastekan saja kode berikut:
<style>
body {
font-family: &quot;Lato&quot;, sans-serif;
}

/* Fixed sidenav, full height */
.sidenav {
height: 100%;
width: 300px;
position: relative;
z-index: 1;
top: 0;
left: 0;
background-color: transparent;
border-radius: 1%;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a, .dropdown-btn {
padding: 6px 18px 6px 18px;
text-decoration: none;
font-size: 20px;
color: #FFFFFF;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}


/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
color:purple;
}

/* Main content */
.main {
margin-left: 2px; /* Same as the width of the sidenav */
font-size: 20px; /* Increased text to enable scrolling */
padding: 0px 10px;
}

/* Add an active class to the active dropdown button */
.active {
background-color: pink;
color: white;
}
.dropdown-container {
display: none;
background-color: indigo;
padding-right: 0px;
}

.fa-caret-down {
float: right;
padding-left: 10px;
}
/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

</style>
<div class="sidenav">
<a href="#privasi">Privasi</a>
<a href="#services">Servis</a>
<a href="#clients">Klien</a>
<a href="#contact">Disclaimer</a>
<button class="dropdown-btn">JENIS TEMPLATE:
<svg style="width:24px;height:24px" viewbox="0 0 24 24">
<path fill="currentColor" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
</path></svg>
</button>
<div class="dropdown-container">
<a href="#">Contempo</a>
<a href="#">Soho</a>
<a href="#">Emporio</a>
<a href="#">Notable</a>
<a href="#">Masonry</a>
</div>
<a href="https://youtu.be/ShZuW2uWXhY">Demo Video</a>
</div>
<script>
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
</script>

E. Gambar profile penulis di atas setiap postingan

Trik ini kami muat pada postingan dengan Judul:

Silahkan ikuti karena trik tersebut berlaku untuk semua template terbaru kecuali notable tidak perlu karena sudah memiliki fitur bawaan avatar atau gambar penulis di atas setiap postingan.

Pada tutorial selanjutnya saya akan menunjukan trik yang lebih seru tentang bagaimana:

2. Trik mudah merombak tampilan dan meningkatkan performa template soho
3. Trik mudah merombak tampilan dan meningkatkan performa template emporio
4. Trik mudah merombak tampilan dan meningkatkan performa template notable


Ikuti terus trik, tips, teknik hack dan kefabar terupdate dari blog ini! Share:

(Bersambung)

Komentar

  1. Bang, barangkali ada trik supaya sticky headernya tetep fixed bagi tutor donk. Terimakasih.

    BalasHapus
    Balasan
    1. Terimakasih telah berkunjung. Sticky dan fixed beda, untuk mengembalikan elemen sticky header cukup dengan mengembalikan pengaturan CSSnya dari relative jadi fixed. Kita dapat melakukan hal itu dengan sangat mudah melaui penulisan pengaturan override css.

      Akan tetapi jika ingin fixed, kita harus merobah pengaguran css dan menambahkan javascript ke dalam template. Akan kami tambahkan pada tutorial terakhir.

      Hapus

Posting Komentar

2 IN 1: from EDITBLOGTEMA to EDITBLOGTEMPLATE