Untuk template blogger default versi 2
Yang sedang kita bicarakan adalah cara memodifikasi template bawaan blogspot versi ke-2. Sebagai catatan semenjak tahun 2017 Google telah merilis 4 varian template terbaru yang mendukung atau support versi ke-3 yakni: Contempo, Emporio, Soho dan Terkemuka (Namanya berbeda dalam bahasa Inggris) Saya juga telah memberikan tutorial cara memodifikasinya panjang lebar di dalam blog ini.1. Menyembunyikan Navbar.
Pertama masuk ke - Dasbor blog - Tataletak-lalu pilih navbar - buka konfigurasi lalu pilih opsi: OFF.2. Buang gambar obeng atau "quick edit" pada templat.
Masuk ke menu pengaturan langsung saja pilih opsi "edit HTML" tekan ctrl+F pada kotak pencarian pastekan kode dibawah ini:<b:include name='quickedit'/>Pada tema sederhana akan terjadi hal ini, dimana lambang obeng itu jumlahnya ada beberapa buah sesuai dengan jumlah widget yang terpasang pada tema. Misalnya popular posts, feature, bahkan atribusi. Pokoknya hapus saja semua dengan menekan enter berkali kali pada kotak pencarian. Itu hanya sebagai pedoman bagi blogger pemula untuk mengedit widget mereka, tapi merusak penampilan bagi blogger yang sudah terbiasa ngeblog karena tampak "menganggu, dan tidak profesional".
3. Buat Read more
Dengan gambar dan snippet (rangkaian kata kata) pada homepage blogger. Homepage adalah tampilan awal atau halaman awal sebuah blog. Tema bawaan sederhana tidak memiliki read more, tema blog secara default menampilkan artikel apa adanya.
Masuk ke pengaturan blogger langsung saja ke "edit HTML" cari kode: </head>
lalu letakan kode dibawah ini diatasnya:
<script type='text/javascript'> var thumbnail_mode = "float" ; summary_noimg = 150; summary_img = 150; img_thumb_height = 80; img_thumb_width = 120; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c}; //]]> </script>Selanjutnya cari kode <data:post.body/> pilih yang ke-2 kemudian hapus kode tersebut dan ganti dengan kode dibawah ini:
<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> <span class='rmlink' style='float:left'> <a expr:href='data:post.url'><b>Readmore</b> → <data:post.title/></a></span> </b:if></b:if> <b:if cond='data:blog.pageType == "item"'> <data:post.body/> </b:if> <b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
Preview dulu menggunakan tool HTML editor, jika tidak ada error SAVE.
Sampai disini homepage tema sederhana sudah berubah, namun kita masih membutuhkan menu navigasi yang sederhana, responsive dan ringan.
Masuk ke pengaturan blogger langsung saja ke menu "edit HTML" cari kode :
<div class='header-wrapper'>. Pada tema sederhana kode tersebut tidak terlihat walaupun kita telah "mengexpand" semua kode dalam html editor. Jadi cukup letakan saja kode di bawah ini di atas kode </head>
Sampai disini homepage tema sederhana sudah berubah, namun kita masih membutuhkan menu navigasi yang sederhana, responsive dan ringan.
4. Membuat Menu navigasi responsive.
Menu responsive dapat menyesuaikan diri baik ketika tampil di desktop maupun pada saat tampil di hape. Kita langsung saja:Masuk ke pengaturan blogger langsung saja ke menu "edit HTML" cari kode :
<div class='header-wrapper'>. Pada tema sederhana kode tersebut tidak terlihat walaupun kita telah "mengexpand" semua kode dalam html editor. Jadi cukup letakan saja kode di bawah ini di atas kode </head>
<script async='async' src='https://www.gstatic.com/external_hosted/clipboardjs/clipboard.min.js'/>
<style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
.openBtn {
background: white;
border: none;
border-radius:50px;
border-color: transparent;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
position: fixed;
z-index: 99;
top: 6px;
right:9%;
}
.openBtn:hover {
background: Transparent;
}
.overlay {
height: 62px;
width: 100%;
display: none;
position: fixed;
z-index: 100;
top: 0;
left: 9;
background-color:#DDDDDD;
}
.overlay-content {
position: relative;
top: 4%;
width: 80%;
text-align: center;
margin-top: 10px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 8px;
right: 11%;
padding: 0px 0px 0px 0px;
z-index: 99;
font-size: 40px;
cursor: pointer;
color: #000;
}
.overlay .closebtn:hover {
color: red;
}
.overlay input[type=text] {
padding: 15px;
font-size: 17px;
border: solid;
border-color: transparent;
border-radius:30px;
float: left;
width: 100%;
background: #fff;
height: 56px;
}
.overlay input[type=text]:hover {
background: #fff;
}
.overlay button {
float: left;
width: 10%;
padding: 15px;
background: transparent;
font-size: 17px;
border: none;
cursor: pointer;
}
.overlay button:hover {
background: transparent;
}
</style>
<style>
#myBtn {
display: none;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 99;
font-size: 18px;
outline: none;
background-color: transparent;
color: blue;
cursor: pointer;
padding: 10px;
}
</style><style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
position: fixed;
z-index:99;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: blue;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99;
position: fixed;
}
.dropdown-content .header {
background: blue;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #f0f0f0;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}
</style>
2. Tambahkan HTML
Masih dalam opsi edit HTML, yakni:- Masuk ke pengaturan blogspot
- Pilih Tema/theme
- Pilih edit HTML
- Cari kode <body>
<div class='navbar'>
<a href='/'>Beranda</a>
<a href='https://www.editblogtema.net'>Blog</a>
<div class='dropdown'>
<button class='dropbtn'>MegaMenu
<i class='fa fa-caret-down'/>
</button>
<div class='dropdown-content'>
<div class='header'>
<h2>Kategori</h2>
</div>
<div class='row'>
<div class='column'>
<h3>Template</h3>
<a href='#'>CSS</a>
<a href='#'>HTML</a>
<a href='#'>JavaScript</a>
</div>
<div class='column'>
<h3>Kisah</h3>
<a href='#'>Separo Hati</a>
<a href='#'>Detak Waktu</a>
<a href='#'>Cerpen</a>
</div>
<div class='column'>
<h3>Tekno</h3>
<a href='#'>Sains</a>
<a href='#'>Teknologi</a>
<a href='#'>Blogging</a>
</div>
</div>
</div>
</div>
</div>
<div style='padding:16px'>
<a class='icon' href='javascript:void(0);' onclick='myFunction()'><i class='fa fa-bars'/></a></div><div class='overlay' id='myOverlay'><span class='closebtn' onclick='closeSearch()' title='Close Overlay'>×</span><div class='overlay-content'><form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' placeholder='cari...dan tekan enter' size='25' type='text'/></form></div></div>
<button class='openBtn' onclick='openSearch()'><i class='fa fa-search'/></button>
3. Tambahakan JavaScript
Langkah terakhir ini adalah untuk membuat fungsi klik pada tombol pencarian berfungsi dengan baik mau tidak mau saya terpaksa menyertakan JavaScript, kecuali jika sobat tidak menginginkan menu atau tombol pencarian pada ujung kanan Navigasi menu blog sobat, tapi para pembuat template template blog hebat dan premium selalu menertakan kotak dan tombol pencarian untuk melengkapi navigasi template mereka.Masih pada opsi edit HTML cari kode </body> dan letakan kode JavaScript berikut tepat diatasnya:
<script>Bagian ini selesai Save tema. Mari masuk ke cara menghiasi Navigasi Menu yang telah kita buat:
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>
4. Cara menghiasi Menu Navigasi dengan font Awsome
Nah trik ini penting namun cara pembuatannya cukup sederhana, cukup hanya menggunakan font awsome. Oleh karena secara default template bawaan blogspot tidak dipasang font awsome, maka harus memasangnya terlebih dahulu. Jadi masuk ke pengaturan blogger.- Pilih tema
- Pilih edit HTML
- Pada halaman editor HTML yang telah terbuka cari kode </head> dan letakan kode font awsome berikut tepat diatasnya:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"/>
Save tema.
Trims mas. Kebetulan lagi nyari tutorial yg nomor 3. Dari kmrn gagal mulu
BalasHapusbuat readmore...menggunakan template yang mana ya mas? Setiap template akan sedikit berbeda. Tutorial diatas untuk tema sederhana cukup bagus hasilnya. Tapi supaya lebih mobile friendly tema sederhana ikuti juga kelanjutan tulisan ini. :)
Hapussaya pake template mas sugeng.id
Hapusudah utak atik dari bbrp tuotrial khusus readmore atau iklan di tengah postingan gak bisa2.
yang lainnya udah ok
kalau punya mas Sugeng cari di blog CB (contoh blog)atau MasSugeng.id disana banyak tutorial terkait template buatannya
HapusThanks for sharing this helpful and informative post.
BalasHapusyou are welcome, man
Hapusreadmore gak bisa. pake template sederhana
BalasHapusdi dalam template ada terdapat 2 sampai 3 buah kode "data:post.body/" pilih yang ke 2 atau yang ke 3 hapus dan ganti dengan kode yang telah tersedia tidak disarankan yang pertama.
HapusSilahkan di coba kembali
informasinya bermanfaat mas,tapi aku blm paham bgt,masih baru
BalasHapusTutorial ini dua bagian, setelah ngeblog 6 bulan lagi insyaAllah akan mengerti :)
Hapusah siap.. ini harus dicoba nih hehe sipa tau bisa buat template sendri dari hasil coding haha
BalasHapus