Sudah banyak sekali teknik dan trik membuat templat dari nol sekalipun, tetapi tidak begitu mudah diikuti oleh seorang pemula. Maka dari itu kami mencoba memberikan trik sederhana, jika teman teman kepingin membuat template bawaan blogger menjadi "gaya" dan tidak kalah dengan template template premium, mungkin petunjuk dibawah ini akan membantu. Cobalah terapkan ketemplate yang lebih lama, misalnya template awsome (PT. Keren sekali) atau tema sederhana.
Gunakan blog percobaan sebelum diterapkan ke blog utama sendiri.
1. Memindahkan widget header keatas navbar.
Ini penting agar header nantinya berada didepan latar gambar yang kita pilih untuk menghisi blog, bisa juga gambar teman teman sendiri. Cara memindahkan widget header tidak bisa dengan menyeret/drag melalui pengaturan widget, harus melalui edit HTML.
Pertama masuk kepengaturan>>tataletak>>dan pastikan widget header telah terpasang disana (letaknya pada template klasik selalu dibawah navbar)
Nah posisi itu yang harus kita robah dengan cara: Masuk kepengaturan blogger>pilih tema/theme>pilih edit HTML.
Pada menu bar diatas halaman editor HTML ada terdapat menu "lompat widget" tekan itu maka kita akan dibawa ke kode HTML-nya header tersebut, sebagai berikut:
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Sethahoh (Header)' type='Header'>...</b:widget></b:section>
Perhatikan kode dengan huruf dimerahkan adalah widget header1 yang harus kita copy dan karena aturan widget harus dimulai dengan <b:section> lalu diakhiri dengan </b:section> maka semua kode harus di copy, perhatikan ada tiga titik yang jika di klik double akan memunculkan rangkaian kode dan berakhir pada </b:section>
Copy semua kode dari mulai dari <b:section class='header' id...sampai dengan </b:section>, jika sudah di copy hapus seluruh kodenya. Lalu cari kode </head> pastekan seluruh kode tersebut dibawahnya. Tambahkan kode <center> diawal <b:section> lalu tambahkan atau tutup dengan</center> pada akhir </b:section> ini nanti berguna agar deskripsi blog menjadi center dan rapi.
Save terlebih dahulu template.
2. Meletakan HTML.
Persis dibawah </b:section> kode header yang telah kita pindahkan diatas tadi letakan kode HTML berikut:
<div class='bg-img'>
<div class='container'>
<div class='topnav'>
<a href='/'><i class='fas fa-home'/></a>
<a href='#news'>sitemap</a>
<a href='#contact'>Privacy</a>
</div>
</div>
</div>
Kemudian tepat dibawah kode <body> atau <body expr:class='"loading" + data:blog.mobileClass'> letakan kode berikut:
<a class='icon' href='javascript:void(0);' onclick='myFunction()'/><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' style='color:#fff;'/></button>
Save template.
3. Tambahkan CSS style.
Masih berada didalam opsi editor HTML tepat diatas kode </head> letakan kode berikut:
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.bg-img {
/* The image used */
background-image: url("https://1.bp.blogspot.com/
-t5taLmDfdik/XQXNb6madgI
/AAAAAAAAm20/
ATib2OEhbQsY2JalQ52ZzqkVuhGpBMFPQCLcBGAs/
s1600/4k-wallpaper-art-beautiful-325044.jpg");
min-height: 200px;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* Needed to position the navbar */
position: relative;
}
/* Position the navbar container inside the image */
.container {
position: absolute;
margin: 20px;
width: auto;
}
/* The navbar */
.topnav {
overflow: hidden;
background-color: transparent;
}
#Header1 {
overflow: hidden;
background-color: transparent;
padding:0px 40px;
position: absolute;
z-index: 100;
}
/* Navbar links */
.topnav a {
float: left;
color: #fff;
text-align: center;
padding: 85px 18px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: transparent;
color: black;
}
</style><link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.6.3/css/all.css' integrity='sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/' rel='stylesheet'/> <style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
.openBtn {
background: transparent;
border: none;
border-radius:180px;
border-color: transparent;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
position: absolute;
z-index: 99;
top: 100px;
right:1%;
}
.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: 3%;
width: 100%;
text-align: center;
margin-top: 10px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 5px;
right: 3%;
padding: 0px 0px 0px 0px;
z-index: 99;
font-size: 40px;
cursor: pointer;
color: #87CEFA;
}
.overlay .closebtn:hover {
color: #000;
}
.overlay input[type=text] {
padding: 15px;
font-size: 17px;
border: solid;
border-color: transparent;
border-radius:0px;
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>
Save Template.
Bagaimana cara membuat image atau gambar background header tersebut? Rahasianya adalah link gambar img. Perhatikan URL yang aku sisipkan ke dalam kode css yang menggunakan hightlight atau disorot warna kuning URL gambar dengan formasi img adalah yang diberi warna merah. Cara mengambil link gambar dari halaman web adalah klik gambar setelah gambar tampil klik kanan mouse pada menu yang muncul pilih "open in new tab" atau pada tab baru maka link url image akan berbentuk awal sebagai berikut : https://1.bp.blogspot.com/-....dst..dst...yakni ada kode //1.bp.
Copy link tersebut dan pastekan untuk mengganti url gambar ikan hias milik editblogtema. Untuk menyiapkan gambar teman teman harus menyimpannya di penyimpanan online milik sendiri atau di dalam blog kita pada bagian laman atau page blog. Namun tentu saja jangan lupa diterbitkan, jangan dibagikan.
4. Membuat related post Upaya membuat related post pada templat model lama jika template tersebut masih asli tidaklah mudah, karena biasanya related post hanya akan muncul pada tampilan laptop dan PC desktop atau layar yang lebih lebar daripada ukuran sebuah hape. Untuk mengatasinya ketimbang membuat teman teman pusing tujuh keliling memodifikasi struktur tema aku memilih mengkombinasikan kode HTML dan CSSnya.
Langkah pertama masuk kepengaturan blogger pilih tema, jika tema dipilih akan tampil opsi desainer sebagai berikut:
Gambar sebelah kiri yang layarnya besar adalah tampilan desktop PC atau laptop, yang sebelah kanan pada layar atau kolom yang lebih kecil adalah tampilan seluler. Tekan roda bergerigi seperti yang ditunjukan oleh panah merah.
Sekali itu ditekan akan muncul pilihan, teman teman harus memilih yang "custom" atau "Khusus" yang paling bawah sepeti terlihat pada gambar berikut:
Lalu save tema.
Sekarang masuk kepengaturan pilih >tema dan lalu pilih > edit HTML, cari kode :
]]></b:skin> Dan letakan kode berikut tepat diatasnya:
#related_posts{margin-top:20px} #related_posts h4{color:#fff;background:#3498db;padding:10px;margin:0 0 5px;font-size:110%;} #related_img{margin:0;padding:0;} #related_img:hover{background:0} #related_img ul{list-style-type:none;margin:0;padding:0} #related_img li{min-height:62px;border-bottom:1px solid #f1f1f1;list-style:none;margin:0 0 5px;padding:5px;} #related_img li a{color:#2672a0;} #related_img li a:hover{text-decoration:underline} #related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;} #related_img .news-text{display:block;font-weight:normal;text-transform:none;color:#888;font-size:11px;} #related_img img{float:left;margin-right:10px;width:60px;height:60px;max-width:100%;background:#fff}
Lalu cari kode </head> dan letakan kode CSS style berikut diatasnya:
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ol>');
while (i < relatedTitles.length && i < 5) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write('</ol>');}
//]]>
</script>
<script type='text/javascript'>/*<![CDATA[*/var relnum=0;var relmaxposts=5;var numchars=135;var morelink=" ";function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgthum(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnum]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnum]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url:"http://lh3.ggpht.com/_xcD4JK_dIjU/SnamIh0KTCI/AAAAAAAADMA/hLjqmEbdtkw/d/noimagethumb.gif",relgambar[relnum]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnum]=e.link[n].href;break}relnum++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function relatpost(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],s=relurls[t],i=relcuplikan[t],o=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=s,relcuplikan[a]=i,relgambar[a]=o}for(var g,m=0,h=Math.floor((reljudul.length-1)*Math.random()),c=h,d=document.URL;m<relmaxposts&&(relurls[h]==d||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[h]+"' rel='nofollow' target='_top' title='"+reljudul[h]+"'><img src='"+relgambar[h]+"' /></a>",g+="<a href='"+relurls[h]+"' target='_top'>"+reljudul[h]+"</a>",g+="<span class='news-text'>"+relcuplikan[h]+" ... <a href='"+relurls[h]+"' target='_top'>"+morelink+"</a><span class='news-text'>",g+="</li>",document.write(g),m++,m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;/*]]>*/</script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"/>
Lalu cari kode <data:post.body/> (ada beberapa buah didalam HTML, pilih yang ke-2) letakan kode berikut dibawahnya:
<div id='related_posts'> <h4><center><i class="fa fa-book gradient-icon" aria-hidden="true">Artikel Terkait</i></center></h4> <b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgthum&max-results=50"' type='text/javascript'/> </b:loop> <ul id='related_img'> <script type='text/javascript'>relatpost();</script> </ul> </div> Jika terjadi kesalahan ulangi dan pastikan kode HTML diatas ditempatkan dengan benar dibawah salah satu daripada <data:post.body/> yang kusebutkan di atas tadi
Terakhir masih pada halaman editor HTML blogger cari Kode ini <div class='post-footer-line post-footer-line-2'>, yang terletak di antara kode <b:includable id='mobile-post' var='post'> dan </b:includable>. Pastekan kode berikut tepat dibawahnya:
<
<b:if cond='data:blog.pageType == "item"'>
<div id='mobile-related-posts'>
<div style='text-align: justify;'>
<h4><b>Related Posts: </b></h4>
<b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
</div>
</b:if>
Selanjutnya SAVE template.
Tampilan template awsome setelah dimodifikasi
Selamat belajar menjadi desainer template web...Semoga sukses.
Kedepannya kami akan membuatkan tutorial membuat header blog mengecil dan membesar saat konten atau halaman utama blog di scroll...
