Langsung ke konten utama

Cara merombak tampilan template blogger emporio 3

Ini adalah tutorial bagian ke tiga 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 Emporio

Template blogger emporio adalah template yang melengkapi selera desain dengan tampilan homepage GRID dan bergaya desain vegea, tampilan grid atau snippet kotak, dan tampilan sidebar. Template ini begitu keren jika diberi sentuhan yang tepat. Dan beruntung atau tidak beruntungnya adalah begitu banyak komposisi dan bundel pengaturan CSS pada setiap tempate varian template terbaru, membuat kita dapat berimprovisasi.

Template ini cantik jika di beri menu navigasi fixed, yakni navigasi menu blog yang tetap berada di atas header pada saat homepage maupun konten blog di scroll ke bawah dan ke atas.

a.) Merombak atau memperbaiki tampilan mobile featured post

Tampilan featured post template emporio untuk layar hape (mobile) berbeda dengan tampilan pada layar desktop dan laptop yang lebih lebar. Pada tampilan mobile gambar atau thumbnail pada homepage seperti tertutup oleh snippet, nah agar gambar tidak tertutup, kita harus menggeser snippetnya ke bawah melalui cara:
  1. Masuk ke pengaturan blogger
  2. Pilih tema
  3. Pilih Edit HTML dan cari kode css berikut pada halaman editor HTML blogger kalian:
.feed-view .hero.post-wrapper{
background-color:$(posts.link.color);
border-radius:0;
height:416px
}
Pengaturan CSS diatas membuat sebagian Judul Featured post hilang tersembunyi ke dalam header bagian atas. Kalian robah angka 416 menjadi 650, 750, 850, menurut kalian rasa cocok saja.

merombak tampilan featured post mobile

Dengan cara di atas tampilan gambar featured post akan tampil lebih dominan pada sat di buka melalui layar ponsel.

Save template.

b.)  Menambahkan Navigasi kustom fixed sekaligus menu pencarian kustom full

Template Emporio juga sangat cocok jika dilengkapi dengan menu navigasi kustom fixed plus menu pencarian. Melalui tutorial ini akan kami tunjukan cara membuat dan menerapkannya, hitung hitung buat latihan koding web mengapa tidak, ya kan.

Caranya: 
  1. Masuk ke pengaturan blogger
  2. Pilih Tema
  3. Lalu klik menu titik tiga akan keluar lima menu pilih Edit HTML
1. Tambahkan kode CSS style
Setelah masuk ke halaman editor HTML blogger cari kode </head> dan pastekan kode CSS style berikut tepat di atasnya:
<style>    <style type='text/css'>
        body {margin:0;font-family:IM Fell English}
.topnav {
position: fixed;
z-index: 99;
width: 100%;
  overflow: hidden;
  background-color:#08088A;

}
.topnav a {
  float: left;
  display: block;
  color: red; display: block;
  color: white;
  text-align: center;
  padding: 16px 18px;
  text-decoration: none;
  font-size: 16px;
}
.active {
  background-color:#08088A;
      
             font-size 18px;
}

.topnav .icon {
  display: none;
}
.dropdown {
  float: left;
  overflow: hidden;
}
.dropdown .dropbtn {
  font-size: 16px; 
                outline: 10px;
border:none;
  color: white; 
  padding: 16px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
.dropdown-content {
  display: none;
  position: fixed;
  background-color: white;
 
  box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2);
  }
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
       border: none;
}
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: gold;
}
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}
.dropdown:hover .dropdown-content {
  display: block;
}
@media screen and (max-width: 800px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float:none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
      body {
  font-family: Arial;
}

* {
  box-sizing: border-box;
}

.openBtn {
  background: transparent;
  border: none;
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
position: fixed;
z-index: 99;
top: 24px;
left:70%;
}
.openBtn:hover {
  background: #bbb;
}
.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 101;
  top: 0;
  left: 0;
  background-color: rgb(105, 105, 105);
  background-color: rgb(105, 105, 105, 0.9);
  
}

.overlay-content {
  position: relative;
  top: 46%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
}

.overlay .closebtn {
  position: fixed;
  top: 1%;
  left: 86%;
  font-size: 60px;
  cursor: pointer;
  color: white;
  z-index: 999;
}

.overlay .closebtn:hover {
  color: gold;
}

.overlay input[type=text] {
  padding: 19px;
  font-size: 17px;
  border-bottom: double;border-bottom-color: yellow;
  border-top: double;border-top-color: yellow;
   border-left: none;
  border-right: none;
  float: center;
  width: 80%;
  background: transparent;
}

.overlay input[type=text]:hover {
  background: #f1f1f1;
 position: center:
}

.overlay button:hover {
  background: #bbb;
      }</style>
2. Langkah selanjutnya Tambahkan HTML berikut dan letakan di bawah kode </head>:
<div class='topnav' id='myTopnav'>
  <h1><a class='active' href='/'><b><font color='white'><font face='Arial' size='4'><data:blog.title/></font></font></b></a></h1>
  
  <a href='https://www.editblogtema.net/search/label/desain'>Desain</a>
   <a href='https://www.editblogtema.net/search/label/panduan'>Panduan</a>

 <div class='dropdown'>
    <button class='dropbtn'>Moreˇ 
      
    </button>
    <div class='dropdown-content'>
      <a href='https://www.editblogtema.net/search/label/paradox'>Paradox</a>
      <a href='https://www.editblogtema.net/search/label/panduan'>Panduan memodifikasi template</a>
      <a href='https://www.editblogtema.net/search/label/merombak'>Trik dasar merombak template Notable</a>
      <a href='https://www.editblogtema.net/search/label/panduan%20mobile'>Trik mengedit template via mobile</a>
      <a href='https://www.editblogtema.net/search/label/programmer'>Programmer</a>
      <a href='https://www.editblogtema.net/search/label/A.I.'>A.I</a>
      <a href='https://www.editblogtema.net/search/label/kebijkan'> Baca kebijakan halaman</a>
    <a href='/'>Hubungi : adelinasasa@gmail.com</a>
      <a href='https://www.editblogtema.net/search/label/download%20template%20terbaru'>DOWNLOAD TEMPLATE</a>
    </div>
  </div> 
   <a class='icon' href='javascript:void(0);' onclick='myFunction()' style='font-size:15px;'><b>&#9776;</b></a>
               </div>
              <div class='overlay' id='myOverlay'>
<span class='closebtn' onclick='closeSearch()' title='Close Overlay'>&#215;</span>
<div class='overlay-content'>
<form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' placeholder='cari...' size='25' type='text'/>

</form>
</div>
</div>
<button class='openBtn' onclick='openSearch()'><svg style='width:28px;height:28px' viewBox='0 0 24 24'>
    <path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z' fill='white'/>
</svg></button>    

3. Tambahkan Javascritpt

Masih di halaman editor HTML blogger, cari kode </body> dan masukan kode Javascript berikut tepat di atasnya:

<script>
function myFunction() {
var x = document.getElementById(&quot;myTopnav&quot;);
if (x.className === &quot;topnav&quot;) {
x.className += &quot; responsive&quot;;
} else {
x.className = &quot;topnav&quot;;
}
}
function openSearch() {
document.getElementById(&quot;myOverlay&quot;).style.display = &quot;block&quot;;
}
function closeSearch() {
document.getElementById(&quot;myOverlay&quot;).style.display = &quot;none&quot;;
}
</script>

 Save template.

Sampai disini template emporio Kalian telah berbuah drastis tampilannya, lihat saja Demonya!. Agar tulisan menu terlihat robah warna latar sidebar menjadi gelap atau hitam melalui dasbor blogger. Jika kalian ingin agar tampilan avatar kalian atau avatar penulis tamu secara otomatis tampil di pojok kiri atas setiap postingan, silahkan ikuti postingan kami yang berjudul:


Pada tutorial selanjutnya saya akan menunjukan trik yang lebih seru tentang bagaimana:
  1. Trik mudah merombak tampilan dan meningkatkan performa template notable 
  2. Trik memasang related post ringan, breadcrum valid HTML dan footer berikut credit yang dapat di terapkan pada ke empat template terbaru blogger.
  3. Trik merombak tampilan ikon svg bawaan template blogger terbaru
  4. dll
Trik trik tersebut dapat dengan mudah di terapkan pada template template terbaru blogger dan tentu saja dapat di terapkan ke template blogger yang lebih lama dengan sedikit memodifikasi pengaturan dan penulisan kode kodenya.

(Bersambung...)

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

Komentar

Populer

Cara memperbaiki add numbering dan add bullets yang tidak bisa tampil pada postingan blog

Hal ini terjadi pada tema editblogtema yang pada saat itu kami modifikasi untuk sementara berdasarkan tema sederhana bawaan blogger. Karena pada saat menuliskan beberapa item dalam bentuk daftar atau list ternyata tidak terlihat pada postingan padahal postingan sudah terlanjur di publish. Setelah saya cari di dasbor ada tool yang bernama "Add Numbering atau Numbered List dan Add Bullets atau Bulleted List" yang tidak bekerja. Sudah tentu ini pasti celah kelemahan template, jadi harus segera di perbaiki. Padahal kami tidak membuat template baru, lho. Hanya memodifikasi template tua bawaan dengan tajuk simple atau 'sederhana'. Ketika menulis pada dasbor blog dan di preview sepertinya tidak ada yang salah diatas tool "compose" terdapat add numbering dan add bullets tersebut dan pada saat dilakukan penulisan dalam bentuk list keduanya tampak berfungsi dengan baik, tapi apa yang terjadi pada saat artikel setelah di publish? Maksud menampilkan daftar atau li

PERIHAL GOOGLE PAGERANK dan ranking ALEXA

GOOGLE PAGERANK K alau dengan Google Pagerank jadi ingat saat membuka blogger tahun 2014 waktu itu Blog dengan Google Pagerank tinggi benar benar dijadikan "primadona"nya blogspot. Namun apa yang terjadi segalanya berubah. Google telah melakukan update algoritmanya secara besar besaran, dan kini walaupun pagerank masih penting namun telah berubah menjadi rahasia dapurnya Google. Selama bertahun tahun Google PageRank telah menjadi benchmark yang penting untuk menilai kualitas suatu website namun  pada April 2016 menjadi bulan yang penuh dengan kehebohan bagi komunitas pemasaran digital pada umumnya dan SEO (Search Engine Optimization) khususnya. Berbagai website dan blog terkemuka SEO sedunia banyak yang memberikan komentar mengenai hal tersebut. SearchEngineLand menyebutkan bahwa sejak Jumat, 15 April 2016, tiba tiba saja Google PageRank lenyap dari Google Toolbar! MASIH PENTINGKAH GOOGLE PAGERANK ITU? Ada yang berpendapat Google pagerank masih penting, tetapi tidak

JARINGAN INTERNET DAN TELEKOMUNIKASI TELKOMSEL RUSAK, PELANGGAN SANGAT DI RUGIKAN

Hey teman teman,  Aku di Indonesia sempat mau bikin konten tutorial dan itu seharusnya berjalan dengan baik, kalau tiba tiba saja jaringan internet tidak 'rusak'. Parahnya di tunggu berjam jam tidak juga aktif dari pukul satu atau pukul dua siang tadi. Mood aku buyar, karena ketika aku mendapatkan internet kembali draft aku sudah hilang separoh karena tidak ter-'save' pada saat internet hancur lebur tadi.  Sebagai gantinya aku menulis curhatan ini, maaf ya telkomsel, aku tidak menggunakan jaringan internetmu yang mahal, aku menulis sisi burukmu ini melalui jaringan internet Indosat. Kamu pasti mengerti mengapa aku marah. Karena jaringan internet terputus hingga sore tidak ada tanda tanda kehidupan. Awalnya aku menyangka karena quota internet sudah habis atau kartu halo belum bayar ya...eh gak mungkin! Tanya sama teman teman yang rata rata pengguna telkomsel. Yaaah sama. Mau tidak mau kalau masih terhubung harus beli kartu internet dari operator lain INDOSAT. Benar, dapa