saarear

saarear

"

Pengaturan Fitur Template Wuzz

Membuat Landing Page di Halaman Statis / Homepage

Memasang Menu Navigasi

Memasang Icon Media Sosial

Mengganti Judul Blog dengan Logo

Mengedit Tulisan di Footer

Mengganti Favicon

Memunculkan Daftar Isi di Postingan

"").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on(""load error"",i=function(e){r.remove(),i=null,e&&t(""error""===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var Ut,Xt=[],Vt=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:""callback"",jsonpCallback:function(){var e=Xt.pop()||S.expando+""_""+Ct.guid++;return this[e]=!0,e}}),S.ajaxPrefilter(""json jsonp"",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Vt.test(e.url)?""url"":""string""==typeof e.data&&0===(e.contentType||"""").indexOf(""application/x-www-form-urlencoded"")&&Vt.test(e.data)&&""data"");if(a||""jsonp""===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Vt,""$1""+r):!1!==e.jsonp&&(e.url+=(Et.test(e.url)?""&"":""?"")+e.jsonp+""=""+r),e.converters[""script json""]=function(){return o||S.error(r+"" was not called""),o[0]},e.dataTypes[0]=""json"",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?S(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,Xt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),""script""}),y.createHTMLDocument=((Ut=E.implementation.createHTMLDocument("""").body).innerHTML=""

"",2===Ut.childNodes.length),S.parseHTML=function(e,t,n){return""string""!=typeof e?[]:(""boolean""==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("""")).createElement(""base"")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf("" "");return-1"").append(S.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},S.expr.pseudos.animated=function(t){return S.grep(S.timers,function(e){return t===e.elem}).length},S.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=S.css(e,""position""),c=S(e),f={};""static""===l&&(e.style.position=""relative""),s=c.offset(),o=S.css(e,""top""),u=S.css(e,""left""),(""absolute""===l||""fixed""===l)&&-1<(o+u).indexOf(""auto"")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,S.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),""using""in t?t.using.call(e,f):(""number""==typeof f.top&&(f.top+=""px""),""number""==typeof f.left&&(f.left+=""px""),c.css(f))}},S.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){S.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if(""fixed""===S.css(r,""position""))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&""static""===S.css(e,""position""))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=S(e).offset()).top+=S.css(e,""borderTopWidth"",!0),i.left+=S.css(e,""borderLeftWidth"",!0))}return{top:t.top-i.top-S.css(r,""marginTop"",!0),left:t.left-i.left-S.css(r,""marginLeft"",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&""static""===S.css(e,""position""))e=e.offsetParent;return e||re})}}),S.each({scrollLeft:""pageXOffset"",scrollTop:""pageYOffset""},function(t,i){var o=""pageYOffset""===i;S.fn[t]=function(e){return $(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),S.each([""top"",""left""],function(e,n){S.cssHooks[n]=$e(y.pixelPosition,function(e,t){if(t)return t=Be(e,n),Me.test(t)?S(e).position()[n]+""px"":t})}),S.each({Height:""height"",Width:""width""},function(a,s){S.each({padding:""inner""+a,content:s,"""":""outer""+a},function(r,o){S.fn[o]=function(e,t){var n=arguments.length&&(r||""boolean""!=typeof e),i=r||(!0===e||!0===t?""margin"":""border"");return $(this,function(e,t,n){var r;return x(e)?0===o.indexOf(""outer"")?e[""inner""+a]:e.document.documentElement[""client""+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body[""scroll""+a],r[""scroll""+a],e.body[""offset""+a],r[""offset""+a],r[""client""+a])):void 0===n?S.css(e,t,i):S.style(e,t,n,i)},s,n?e:void 0,n)}})}),S.each([""ajaxStart"",""ajaxStop"",""ajaxComplete"",""ajaxError"",""ajaxSuccess"",""ajaxSend""],function(e,t){S.fn[t]=function(e){return this.on(t,e)}}),S.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,""**""):this.off(t,e||""**"",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),S.each(""blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu"".split("" ""),function(e,n){S.fn[n]=function(e,t){return 0

Sugeng.id

Daftar Isi

Di bawah adalah panduan pengaturan template blogger Wuzz.

Mohon panduannya dibaca dengan teliti supaya tidak ada kesalahan dalam penggunaan template.

Fitur-fitur pada template blogger wuzz dapat diatur dengan mudah menggunakan kode pengaturan.

Cara penerapannya sebagai berikut:

Kode pengaturan template sifatnya opsional, boleh dipasang boleh juga tidak.

Jika tidak dipasang maka akan menggunakan pengaturan default template.

Salah satur fitur baru di template blogger Wuzz adalah fitur Landing Page yang bisa dipasang di Homepage dan juga di Halaman statis.

Landing page di template blogger Wuzz terdiri dari beberapa bagian atau section, di antaranya adalah:

Selain bagian-bagian tesebut sebenarnya masih banyak bagian-bagian lain yang biasanya ada pada landing page.

Tapi pada template Wuzz saya hanya menggunakan 8 saja yang menurut saya paling penting.

Tidak menutup kemungkinan nanti di versi-versi berikutnya bisa saya tambahkan bagian-bagian yang lain.

Persiapan Membuat Landing Page

Untuk membuat Landing page di Template Wuzz ada beberapa hal yang perlu disiapkan, di antaranya adalah:

Gambar-gambar yang sudah disiapkan harus diupload dulu ke blog, karena yang dibutuhkan adalah URL gambarnya.

Untuk cara upload gambar ke blog dan mendapatkan URL gambarnya bisa menggunakan cara ini.

Membuat Kode HTML Landing Page

Jika semuanya sudah siap, selanjutnya sobat bisa membuat kode HTML landing page menggunakan tool generator yang sudah disediakan di sini.

Memasang Landing Page di Homepage

Untuk memasang landing page di Homepage, caranya sebagai berikut:

Memasang Landing Page di Halaman Statis

Untuk landing page di Halaman Statis, caranya sebagai berikut:

Di template blogger wuzz terdapat dua buah menu navigasi, yang pertama adalah menu navigasi yang berada di header (sebelah kanan judul blog), dan yang kedua adalah menu yang berada di bawah header.

Memasang Menu Navigasi di Header

Untuk menu navigasi yang berada di header untuk mengisi menunya harus menggunakan kode HTML.

Berikut langkah-langkahnya:

Memasang Menu di Bawah Header

Menu navigasi di bawah header untuk mengeditnya cukup melalui menu tata letak saja, tidak perlu menggunakan kode HTML.

Menu navigasi di bawah header pada dasarnya adalah widget label yang dibuat seperti menu navigasi, jadi untuk menu navigasi tersebut hanya bisa menampilkan link label postingan.

Jika ingin menampilkan label “Populer”, “Trending”, atau “Hot” seperti di blog demo, cukup edit postingan dan isi label postingannya dengan label tersebut (Populer, Trending, Hot).

Berikut langkah-langkahnya:

Berikut langkah-langkahnya:

Note:

Berikut langkah-langkahnya:

Berikut langkah-langkahnya:

Note:

Di template Wuzz terdapat fitur Daftar Isi Otomatis. Daftar Isi postingan akan otomatis muncul jika di dalam postingan terdapat 2 atau lebih Heading (H2).

Default Heading (H2) bisa diganti melaui Kode Pengaturan Template.

© 2024 · Sugeng.ID

  • Usahakan logonya dibuat memanjang, bukan kotak (1:1). Untuk resolusi logo bebas.
  • Kalau logonya kotak sudah pasti akan terlihat kecil.
  • Teks pada logo dibuat 1 baris, jangan 2 baris apalagi 3 baris.
  • Jangan gunakan banner sebagai logo. Banner dan logo adalah dua hal yang berbeda.
  • Sebagai referensi, di blog demo menggunakan logo dengan resolusi 200×90 pixel.
  • Pastikan gambar favicon persegi dan ukurannya tidak lebih dari 100KB.
  • Jika Favicon tidak berubah di browser, clear cache browser dulu setelah itu cek lagi
  • Jika Favicon tidak berubah di Google, harap bersabar, butuh waktu tidak bisa otomatis berubah.
  1. Buat kode pengaturan menggunakan tool yang sudah disediakan di sini.
  2. Setelah kodenya dibuat, masuk ke menu Tata Letak > edit widget “Kode Pengaturan Template“
  3. Letakkan kode pengaturannya di bagian Konten widget tersebut.
  1. Hero Section
  2. Statistics Section
  3. Value Proposition Section
  4. Features Section
  5. Social Proof Section
  6. Pricing Section
  7. Call To Action Section
  8. dan FAQ Section
  1. Gambar produk utama untuk dipasang di bagian Hero Section. Aspek rasio 1:1 dengan resolusi minimal 450x450pixel.
  2. Gambar-gambar untuk dipasang di bagian Value Proposition. Aspek rasio 1:1 dengan resolusi minimal 320x320pixel.
  3. Gambar-gambar atau Icon SVG untuk dipasang di bagian Features. Aspek rasio 1:1 dengan resolusi minimal 80x80pixel.
  4. Gambar Avatar untuk dipasang di bagian Social Proof. Aspek rasio 1:1 dengan resolusi minimal 50x50pixel.
  5. Tentunya konten-konten tulisan untuk dipasang di setiap bagian juga harus disiapkan.
  1. Masuk ke menu Tata Letak > edit widget “Kode HTML Landing Page“
  2. Letakkan kode HTML landing page-nya di bagian Konten widget tersebut.
  3. Klik “Simpan“
  1. Buat halaman statis baru di menu Halaman.
  2. Jangan lupa isi Judul dan Deskripsi halaman.
  3. Letakkan kode HTML landing page-nya di bagian Konten halaman.
  4. Klik “Publikasikan“
  1. Buat kode menu navigasi menggunakan tool yang sudah disediakan di sini.
  2. Setelah kodenya dibuat, masuk ke menu Tata Letak > edit widget “Kode Menu Navigasi“
  3. Letakkan kodenya di bagian Konten widget tersebut.
  1. Buat kode icon media sosial menggunakan tool yang sudah disediakan di sini.
  2. Setelah kodenya dibuat, masuk ke menu Tata Letak > edit widget “Icon Media Sosial” >
  3. Letakkan kodenya di bagian Konten widget tersebut.
  1. Siapkan gambar logo yang akan digunakan
  2. Masuk ke menu “Tata Letak” > edit widget “Header” > Upload gambar dari komputer
  3. Pada bagian “Penempatan” pilih “Selain judul dan keterangan” > Simpan.
  1. Masuk ke “Tata Letak” > edit widget “Teks Footer“
  2. di bagian konten widget masukkan tulisan apa saja yang ingin dimunculkan di footer > Simpan.
  1. Masuk ke menu “Setelan” > “Dasar” > “Favicon“
  2. Upload favicon milik sobat.
"
More From Author