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.
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 atau dibawah kode </header>
<nav id='menutop'><input type='checkbox'/>
<label/>
<ul>
<li><a href='your-link'>About</a></li>
<li><a href='your-link'>Contact</a></li>
<li><a href='your-link'>Sitemap</a></li>
<li class='sorting-01 facebook'><a href='your-link'><i class='fa fa-facebook fa-lg'/><span class='inv'/></a></li>
<li class='sorting-02 twitter'><a href='your-link'><i class='fa fa-twitter fa-lg'/><span class='inv'/></a></li>
<li class='sorting-03 googleplus'><a href='your-link'><i class='fa fa-google-plus fa-lg'/><span class='inv'/></a></li>
<li class='sorting-06 rss-square'><a href='your-link'><i class='fa fa-rss-square fa-lg'/><span class='inv'/></a></li>
<li class='sorting-04 youtube'><a href='your-link'><i class='fa fa-youtube fa-lg'/><span class='inv'/></a></li>
</ul>
</nav>
Kita dapat merobah nama dan link menu sesuai dengan misi blog, perhatikan kode yang saya tandai warna merah di dalam kode diatas.
Dan lalu kemudian letakan kode css di bawah ini di atas kode </head>:
<style>
#menutop{width:100%;margin:0 auto;height:40px;background:#fff;border-bottom:1px solid #e9e9e9;}
#menutop ul,#menutop li{margin:0;padding:0;list-style:none;}
#menutop ul{height:40px}
#menutop li{float:left;display:inline;position:relative;font-family:'trebuchet MS';font-size:13px;
font-weight:bold;}
#menutop a{display:block;line-height:40px;padding:0 14px;text-decoration:none;color:#919392;}
#menutop ul li:hover a{color:#666;}
#menutop input{display:none;margin:0 0;padding:0 0;width:100%;height:40px;opacity:0;cursor:pointer}
#menutop label{font-family:'trebuchet MS';font-size:30px;font-weight:400;display:none;width:35px;height:40px;line-height:45px;text-align:center;}
#menutop label span{font-size:13px;position:absolute;left:35px}
#menutop ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#919392}
#menutop ul li ul li a{color:#919392;height:40px;line-height:40px;background:#fff;width:100%;}
#menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#919392;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;}
#menutop li:hover > ul.menux{visibility:visible;opacity:1;top:45px;}
#menutop a.dutt{padding:0 27px 0 14px}
#menutop a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop a.dutt:hover::after,#menutop ul li:hover a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop ul.menux li a{background:#fff;color:#919392;}
#menutop ul li ul li a:hover{background:#fcfcfc;color:#8493a0;}
#menutop li.facebook {padding:0 5px;}
#menutop li.rss-square,#menutop li.facebook,#menutop li.twitter,#menutop li.youtube,#menutop li.googleplus,#menutop li.linkedin{background:#fff;text-align:center;color:#666;float:right;transition:all 0.2s ease-in-out;}
#menutop li a.rss-square:hover,#menutop li a.facebook:hover,#menutop li a.twitter:hover,#menutop li a.youtube:hover,#menutop li a.googleplus:hover,#menutop li a.linkedin:hover{color:#8493a0;}
#menutop li.rss-square .fa.fa-rss-square,#menutop li.facebook .fa.fa-facebook,#menutop li.twitter .fa.fa-twitter,#menutop li.youtube .fa.fa-youtube,#menutop li.googleplus .fa.fa-google-plus,#menutop li.linkedin .fa.fa-linkedin{color:#919392;transition:all 0.2s ease-in-out;}
#menutop li.rss-square:hover,#menutop li.facebook:hover,#menutop li.twitter:hover,#menutop li.youtube:hover,
#menutop li.googleplus:hover,#menutop li.linkedin:hover{background:#fcfcfc;color:#8493a0;}
#menutop li.rss-square:hover .fa.fa-rss-square{color:#CC6600}
#menutop li.facebook:hover .fa.fa-facebook{color:#000099}
#menutop li.twitter:hover .fa.fa-twitter{color:#0099FF}
#menutop li.youtube:hover .fa.fa-youtube{color:#B00000}
#menutop li.googleplus:hover .fa.fa-google-plus{color:#990000}
#menutop li.linkedin:hover .fa.fa-linkedin{color:#0066FF}
@media screen and (max-width:960px) {
#menutop li:hover > ul.menux{display:block;}
#menutop ul{border:none;border-bottom:4px solid #e9e9e9;}
#menutop{position:relative;border:none;border-bottom:4px solid #e9e9e9;}
#menutop ul{background:#fff;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menutop ul.menux{width:100%;position:static;border:none}
#menutop li{display:block;float:none;width:auto;text-align:left}
#menutop li a{color:#666}
#menutop li a:hover{background:#f1f1f1;color:#f9f9f9}
#menutop li:hover{background:#8493a0;color:#fff;}
#menutop a.dutt{font-weight: bold;}
#menutop li:hover > a.dutt,#menutop a.dutt:hover{background:#b1b1b1;color:#fff;}
#menutop input,#menutop label{display:inline-block;position:absolute;right:0;top:0;}
#menutop input:after,#menutop label:after {content:"\f0c9";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#666;
display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;}
#menutop input{z-index:4;}
#menutop input:checked + label{color:#fff;font-weight:700}
#menutop input:checked ~ ul{display:block}
#menutop ul li ul li a{width:100%;color:#666;}
#menutop ul li ul li a:hover{background:#8493a0;color:#fff;}
#menutop ul.menux a{background:#fff;color:#666;}
#menutop ul.menux a:hover{background:#8493a0;color:#fff;}
#menutop ul.menux li{background:#fff;color:#666;}
#menutop ul.menux li:hover{background:#8493a0;color:#fff;}
#menutop ul.menux li a{background:#fff;color:#666;}
#menutop ul.menux li a:hover{background:#f1f1f1;color:#8493a0;}
</style>
Kemudian tambahkan juga kode dibawah ini dibawah kode diatas atau masih diatas kode </head> :
<script type='text/javascript'>
//<![CDATA[
var cb=function(){var e=document.createElement('link');
e.rel='stylesheet',e.href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css';
var t=document.getElementsByTagName('head')[0];
t.parentNode.insertBefore(e,t)},raf=requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame;raf?raf(cb):window.addEventListener('load',cb);
//]]></script>
Kita bisa mengujinya terlebih dahulu, jika tidak ada terdapat error, SAVE.
lihat tampilan menunya:
5.
Menambahkan atau memasang font awsome kedalam blog. Font awsome sangat penting untuk membuat tampilan template blog menjadi premium, keindahannya di manfaatkan oleh para desainer terkemuka di atas planet ini. Kita langsung saja.
Masuk ke pengaturan dan kembali pilih opsi "edit HTML"
Kopi-paste kode dibawah dan letakan di atas kode
</body>
<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Kode ini nantinya akan memanggil font berikut ikon ikon cantik yang ingin kita pergunakan lebih jauh perihal font awsome ini akan kita bahas secara terpisah.
6.
Menambahkan kode css reset. Kode ini berguna untuk menghilangkan tampilan bawaan browser, kadang browser mampu merobah tampilan blog yang telah didesain menjadi tampilan simple yang tentu saja "jelek" dari segi estiteka walaupun sedikit mempercepat loading. Saya menyarankan anda masuk ke pengaturan - pilih tema - dan ambil opsi "sesuaikan". lihat gambar:
Dari sana kita akan dibawa kepada opsi "Desainer Tema Blogger - pilih Lanjutan - scroll hingga kepada opsi atau pilihan tool paling bawah yang bertuliskan "Tambahkan CSS" lalu kopi-pastekan kode css reset dibawah ini kedalam kotak perintahnya dan jika sudah selesai jangan lupa SAVE.
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
Catatan: Kode css diatas saya kopi dari kode cssnya Meyer yang terkenal dan tentunya gratis alias dapat dipergunakan secara bebas. Kode ini sangat berguna dan paling sering saya pakai pada saat mendesain atau me-redesain template BLOGGER.
7. Menambahkan widget back to top ke dalam tema blog. Back to top sebenarnya memiliki banyak jenis, nah disinilah pentingnya font awsome yang dapat kita manfaatkan untuk merubah ikon back to top. Tapi dalam kesempatan ini kita hanya akan menggunakan back to top sederhana dan ringan yang banyak dipergunakan oleh para blogger dengan template premium.
Langkah pertama: Masuk kepengaturan bloggger dan langsung saja ke opsi "edit HTML" lalu kopi-paste kode dibawah ini dan letakan diatas ]]></b:skin>
#back-to-top{background:#E73037;color:#ffffff;padding:8px 10px;font-size:24px}
.back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}
Langkah kedua kopi-paste kode dibawah ini dan letakan diatas kode </head>
<script>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>
Langkah ketiga, kopi-paste kode dibawah ini dan letakan diatas kode </body>:
<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>
<i class='fa fa-chevron-up'/> </a></div>
<script> $(window).scroll(function() { if($(this).scrollTop() > 200) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } }); $('#back-to-top').hide().click(function() { $('html, body').animate({scrollTop:0}, 1000); return false; }); </script>
Jangan lupa SAVE.
Tambahan: Langkah selanjutnya kita bisa merubah atribusi blog pada footer, misalnya merubah tampilan "powered by blogger" agar lebih enak dibaca.
Contoh Tema blog yang telah di edit silahkan kunjungi:
SITE ALTERNATIVEYang berminat juga boleh mendapatkannya secara cuma cuma dengan mengirimkan email kepada kami. Setelah di edit apakah anda masih mengenalnya sebagai template sederhana?
Gambar tema sederhana yang kami jadikan pilihan pengeditan:
 |
| tema sederhana |
Setelah muncul kotak dialog HTML/Javascript, kami memasukan kode yang telah kami buat untuk membuat menu navigasi melayang di bawah Judul blog seperti gambar dibawah:
