Bagaimana cara edit template blog ? Melanjutkan dua
artikel sebelumnya “Sederhana ! Cara EditTemplate Blogger” dan “Cara EditTemplate Blog #2”. Di artikel ini kita akan bahas lagi trik dan caranya
Di artikel ini pula akan kita overview semua yang sudah
kita bahas dan pelajari bersama mengenai cara mengedit template blog di learning season kali ini. Maka dari itu,
artikel ini menjadi penutup dari tiga seri ini.
Daftar Isi :
1. Pengaturan
Blog (secure or not secure)
2.
Membuat Widget Baru
a.
Widget Utama
b.
Widget Slider
3. Kode
Tambahan
a. Demo
and Download Buttons
b.
Blockquote
c. Table
d. Contact
Form
4. Cara Reset Blog
5. Overview
Oke Kita mulai ya,
Pengaturan
Blog (Secure or Not Secure)
Pengaturan blog ini ngaruh nggak ngaruh sih. Pengaturan
yang lebih baik sih sebenernya ya secure (aman). Jadi bisa memberikan
kenyamanan dan rasa yang lebih aman untuk para visitors blog kita.
Pengaturan ini saya masukkan di bagian pengeditan
template karna ternyata ini berpengaruh terhadap tampilan template blog kita
lho. Kok bisa ? ya bisa. Setiap template itu beda-beda.
Ada yang pengaturannya secure ada yang harus not secure.
Kalau yang secure sih enggak ada masalah ya. Cuman kalau
yang not secure, tampilan blog kita akan berubah kalau kita membukanya melalui https. Biasanya bakal misfont.
Temen-temen jangan lupa, http sama https itu berbeda ya.
Huruf “s” = secure di akhir kata http itu kayak semacam
tanda kalau kita akses melalui jalur yang aman. Sedangkan http berarti not
secure (tidak aman). Coba perhatikan contoh berikut :
Coba tebak, apa bedanya ?
Nah, beda kan ?? jadi, ketika temen-temen install
template ke blog trus waktu di akses font nya jadi berubah kayak di atas, bisa
jadi template yang agan-agan pakai pengaturannya yang not secure.
“Lalu,
gimana cara akses blog yang not secure biar nggak misfont ?”
Caranya klik url link yang ada di atas blog, lalu hapus
huruf “s” seteah http. Contohnya nanti jadi begini :
lalu tinggal tekan enter. Setelah reload, nanti secara
otomatis kita langsung di arahkan mengakses blog tersebut melalui jalur yang
not secure.
“Udah
lewat not secure tapi kok masih sama aja kak ?”
Berarti ada pengaturan blog mu yang harus di ubah. Gimana ngubahnya ? buka
bagian :
pengaturan/setting
– Basic – Https
Ubah pengaturan https redirect
ke mode off, lalu save.
Sekarang coba akses blog mu dengan cara yang sudah kita
bahas di atas. Jangan lupa direfresh dulu. Dan taraa, bisa kan ??
Nah, kira-kira seperti itu caranya. Antara dipakek atau
enggak disesuaikan dengan tema blog itu sendiri ya. Karna kan setiap tema
beda-beda.
Membuat
Widget Baru
A. Cara Membuat Widget Baru
Bagaimana cara membuat widget baru ?
Layout –
Add Widget
Disana ada banyak pilihan. Tinggal kita tambah mana yang
mau kita tambah. Kalau mau nambah widget spesial seperti yang ada di template
lain, kamu buat yang html/java script, lalu kamu copy-pasti aja kodenya.
Nanti, auto muncul sendiri. Tapi sebaiknya kalau templatenya
beda tapi masih sejenis ya. Jadi strukturnya sama. Contoh template yang beda
tapi masih sejenis seperti apa ?
Sedikit rasan,
Kalau sekiranya nggak penting-penting banget, ga usah
nambah-nambah widget dulu, dari pada nanti malah error atau nggak karuan
nantinya. Pake dulu aja default dari yang udah dibikin pembuat templatenya.
B. Membuat Widget Slider
Mau nambah widget post slider di home page blog kita ? di
kutip dari billayandcompany.blogspot.com, caranya
dengan menambahkan widget html baru
lalu isi dengan kode di bawah :
<style scoped="" type="text/css"> ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.rcentside{font-size:11px}ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative }ul.rcentside{width:100%;height:500px }ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none }ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block }ul.rcentside img{border:0;width:100%;height:auto}ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 }ul.rcentside li:nth-child(2){left:0;top:50% }ul.rcentside li:nth-child(3){left:50.5%;top:50% }ul.rcentside li:nth-child(4){width:100%;left:0;top:75% }ul.rcentside .overlayx,ul.rcentside li{transition:all .4s ease-in-out }ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLCoK0_RibCpMMFDKANM3Uxe7RsmitzKjAMfCMLBXOQ0jCLatv2r8vV4hIVOqC-8HeCI1zQKctWTci5ecvGiwzrnsuSrtrDcP0OFAnf0Qv4aCwgHJpuUgprrwSx_JhnQ5wCSYfeMnalRI/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x }ul.rcentside .overlayx,ul.rcentside img{margin:3px}ul.rcentside li:nth-child(1).overlayx{background-position:50% 25% }ul.rcentside .overlayx:hover{opacity:.1 }ul.rcentside h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}ul.rcentside li:hover h4{bottom:30px}ul.rcentside li:nth-child(1)h4,ul.rcentside li:nth-child(4)h4{font-size:150% }ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}ul.rcentside li:nth-child(2).autname,ul.rcentside li:nth-child(3).autname{display:none }.buttons{margin:5px 0 0 }.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative }.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% }.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px } </style> <div id="featuredpostside"></div> <script type='text/javascript'> function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)}; //<![CDATA[ FeaturedPostSide({ blogURL: "https://paling-top21.blogspot.com", MaxPost: 8, idcontaint: "#featuredpostside", ImageSize: 300, interval: 5000, autoplay: true, tagName: false }); //]]> </script>
Bicara soal menambahkan widget slider di halaman menu
utama blog, kalau menurut saya sendiri, dari pada kita nambahin widget seperti
itu, lebih baik kita download aja template yang ada slidernya.
“kalau
kita udah pake yang ada slidernya, tapi nggak muncul gimana kak ?”
Berarti ada yang salah sama pengaturanmu. Entah itu belum
kamu isi, atau kamu salah ngisi nya. Karna balik lagi, setiap tema punya cara
editnya masing-masing. Kalau ada menu nya tapi belum muncul otomatis,
Berarti kita harus atur dulu secara manual. Ya kalau
enggak ngisi konten di widget,
paling ngubah link di edit html.
Cara editnya udah pasti dijelaskan di dokumentasi template blognya.
Jadi jangan males baca dokumentasinya ya. Dokumentasi itu
dibuat biar dibaca, kasian juga kan kalau di anggurin ? hehe.
Kode
Tambahan
Kode tambahan itu apa ? kode tambahan adalah kode yang
dibuat tapi dia nggak langsung ada di templatenya. Alias kita harus nambahkan
kode tersebut secara manual.
“Contoh
kodenya seperti apa kak ?”
1. Demo dan Download Buttons
Contohnya kayak gambar di atas. Yap, Buat bikin demo dan
download buttons memang enggak ada menunya di halaman blogger. Makanya kita
harus nambah secara manual. Caranya gimana ?
Copy kode berikut, lalu pasti di halaman yang mau kita
tambahkan. Eitts, jangan lupa, karna itu berbentuk kode, paste nya di html ya. Bukan
di compose.
<div style="text-align: center;"> <ul class="button"> <li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li> <li><a class="download" href=" YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li> </ul> </div> <div class="clear"></div>
*ubah url dengan url link downloadnya
Dah, beres.
“Ingat...! Beda template beda kodenya”
Ingat ya gais, beda template beda kodenya. Jadi kode yang
sama belum tentu bisa di pakai di template yang berbeda. Tapi belum tentu bukan
berarti nggak bisa lho ya.
Kalau mau cari aman, biasanya di dokumentasi template ada
kodenya. Tapi nggak semua dokumentasi. Kenapa ? karna beberapa template, kode
demo dan download buttons hanya disediakan buat yang beli versi premiumnya.
2. Blockquote
“Block quote
itu apa kak ?”
“Block quote itu kayak gini lho gais, iya yang kayak gini, hehe”
Buat temen-temen yang belum tahu aja, cara nambah blockquote itu gampang banget kok. Enggak
perlu kode-kodean, hehe. Cukup blok tulisan yang mau kamu bikin blokquote, lalu
klik tombol “ (quote) seperti gambar di bawah :
Dah, beres deh.
3. Table
Buat nambah tabel pada di dalam postingan, kamu bisa pake
kode di bawah ini :
<table cellpadding="0" cellspacing="0" style="text-align: left;"> <tbody> <tr> <th>Table Header 1</th> <th>Table Header 2</th> <th>Table Header 3</th> </tr> <tr> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> </tr> <tr> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> </tr> <tr> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> </tr> </tbody> </table>
Contoh hasilnya bisa kamu buka di “Be Profesional Writer”
atau klik di sini.
4. Contact Form
Nah, kalau cara bikin contact form seperti di bawah ini :
Kamu bisa pake kode berikut :
<form name="contact-form"> <span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-user"></i> Name </span> <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> <span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-envelope"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span> <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="Send" /> <div style="max-width: 222px; text-align: center; width: 100%;"> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </div> </form> <style scoped="" type="text/css"> #comments,.post_meta,#blog-pager {display:none;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{ width:100%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;} #ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ddd;border-radius:3px;transition:all 0.5s ease-out;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);} #ContactForm1_contact-form-submit {width:100%;font-family:'Open Sans';float:left;background:#fff;color:#aaa;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;background-image: linear-gradient(110deg, #7986cb 0%, #7986cb 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #ddd;transition:all .8s ease, background-position .8s ease, color .8s ease;} #ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#7986cb;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width:100%;margin-top:35px;} .contact-form-error-message-with-border {background:#f36c60;border:none;box-shadow:none;color:#fff;padding:5px 0;} .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;} </style>
Dah jadi gais. Kira-kira seperti itu ya, cara nambah
widget kemudian cara pake kode-kode tambahan seperti contact form, download
buttons, dan tabel di dalam postingan. Untuk kode-kode seperti di atas,
biasanya udah ada di dokumentasi templatenya.
Kalaupun enggak ada, kamu bisa pakai kode-kode di atas
kok. Meskipun nanti hasilnya belum tentu sama, tapi seenggaknya bisa.
5. Cara Reset Blog
Kalau untuk nge reset template blog, kamu bisa pake kode
di bawah :
<html><head><b:skin/></head><body><b:section id='reset'/></body></html>
Caranya, buka : Theme
– Edit Html
Di sana, hapus semua kode html yang ada, lalu pastekan
kode di atas, lalu save. Dah beres.
Overview
Edit Template
1. Konsep dasar
a. Cara upload (install) dan back up
tema
b. Jangan hapus file
(meskipun
yang di upload hanya yang .xml)
(meskipun
dokumentasi yang dipake hanya ada 1 file)
c. Manfaatkan Dokumentasi
d. Setiap tema punya cara editnya
masing-masing
e. Lebih baik hidden widget aja,
jangan langsung di hapus
f. Boleh hapus widget kalau emang
udah bener-bener enggak kepake
g. Edit bisa pakai HP, tapi lebih
baik pakai PC
Konsep dasar cara edit tema blog ada di bagian satu dari
ketiga seri ini “Sederhana ! Cara EditTemplate Blog”
2. Edit Menu Utama
a. Mengubah navigasi
b. Cara edit ada yang lewat kode ada
yang lewat widget
c. Menambahkan url link agar
navigasi bisa di klik
Cara edit navigasi dan cara edit kode maupun widget sudah
dijelaskan di bagian ke dua dari seri ini “CaraEdit Template Blog #2”
3. Widget dan Kode Tambahan
a. Menambah Widget
b. Membuat Widget Post Slider
c. Perbedaan http dengan https
d. Membuat demo dan download buttons
e. Membuat Contact Form
f. Menambahkan Tabel di dalam
Postingan
g. Kode reset
Seputar cara membuat widget, dan menambah kan kode
tambahan sebagai fitur pelengkap sekaligus pemanis blog ada di bagian 3 dari
ketiga seri ini log “Cara Edit Template B#3”
Artikel ini sekaligus penutup seri cara edit template
blog di learning season kali ini ya gais. Semoga artikel ini bisa bermanfaat
buat temen-temen semua. Kalau sekiranya temen-temen masih bingung, atau ada
yang mau di tanyakan.
Temen-temen bisa tinggalkan pesan pada kolom komentar
yang ada di bawah artikel ini. Kalau tidak temen-temen bisa langsung contactkami atau klik di sini.
Next : "Cara Mengetahui Nama Template Orang Lain"
Next : "Cara Mengetahui Nama Template Orang Lain"
0 Comments