Sebagai seorang bloging, tentu wajib mengetahui bagian-bagian template blog dan berkreasi dengan contoh template dan HTML. Dalam tutorial ini, saya akan membahas bagian terpenting template di bagian BODY. Namun pada halaman ini; saya tidak sepenuhnya memberikan tambahan khusus pada gaya atau style CSS. Sebab CSS akan memberikan citra pembuat website tentang bagaimana memodifikasi, memproses, berkarya dengan ide Anda sendiri.
Pada "Dashboard - Tata Letak atau Layout" pada bagian "1. Favicon". Selanjutnya akan diteruskan langkah "2. Header" atau "Mengedit HTML secara manual di Blogger "Editor HTML atau Dashboard Template".
Pada "Dashboard - Tata Letak atau Layout" pada bagian "1. Favicon". Selanjutnya akan diteruskan langkah "2. Header" atau "Mengedit HTML secara manual di Blogger "Editor HTML atau Dashboard Template".
Apa saja bagian-bagian terpenting template tersebut?
Untuk menjalankan bagian-bagian terpenting "Dashboard Template", Anda dapat menguji juga pada "Dashboard Layout".
1. Favicon
Favicon adalah tata letak sebuah logo berupa icon kecil pada browser dari produk Anda miliki pada halaman. Secara default halaman Blogger akan terdapat logo "B" atau logo "Blogger" dalam kotak memiliki radius sekitar 2 - 3 px (ico). Anda dapat membuat desain logo yang menarik dengan ukuran 60 sampai 300 px. Kemudian secara default (Mengunggah Gambar) ke Server Blogger akan merubah size logo tersebut menjadi ukuran 16x16 px. Buka edit untuk menganti logo default milik blogger menjadi logo atau produk sobat. Lakukan pemberian logo pada tinjauan "Tata Letak atau Layout". Setelah mengungah icon maka dapat dilihat pada bar browers Chrome dibagian atas. Jika tidak muncul pada browser; kemungkinan HTML belum tersedia, Anda dapat menggunakan HTML berikut ini.
<!-- Bagian: Favicon --> <link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
Tambahkan juga tentang: Bagaimana cara membuat blogger template mulai dari nol? adalah sebuah langkah untuk membuat template dari awal.
2. Header
Pada post sebelumnya, saya sudah membahas penerapan HTML pada "Blogger Editor HTML". Anda dapat dengan mudah mengerjakan HTML seperti dibawah ini.
Header adalah bagian utama dari judul blog atau situs. Header ini selain berupa tulisan dapat juga Anda gunakan untuk sebuah logo atau gambar. Kemudian, bagaimana isi HTML tersebut? Dibawah ini ada dua cara untuk Anda lakukan, pertama adalah pemanggilan widget, dan kedua adalah HTML yang siap Anda gunakan pada template.
1. Cara Pertama.
<!-- Bagian: Header -->
<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'/>
</header>
2. Cara Kedua.
<!-- Bagian: Header -->
<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='CONTOH SAYA (Header)' type='Header' version='1'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4CvHttl7_gM4k_DPAEmZ9Xpph4Ona4u_B4jeqvNspE-fNrW25CvatICN9wXdP3Gfg2eGFWYQGCtuih7FfXMGrZFJHCPVVvn5bFZofi0zVD_ml03w9GBST1Lvv_tU2p5pO0cpGJLSUiBqH/s1600/logo.png</b:widget-setting>
<b:widget-setting name='displayHeight'>100</b:widget-setting>
<b:widget-setting name='sectionWidth'>600</b:widget-setting>
<b:widget-setting name='useImage'>true</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='imagePlacement'>BEFORE_DESCRIPTION</b:widget-setting>
<b:widget-setting name='displayWidth'>420</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' expr:title='data:post.title' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl' expr:title='data:title'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
</header>Catatan:
Jika anda menggunakan "Cara Pertama" pada header, langkah selanjutnya buka "Blogger: Tata Letak". Kemudian cari "+ Tambahkan Gadget", untuk mendapatkan seperti "Cara Kedua", silahkan scrollbar kebawah dan pilih Header Halaman. Tambahkan Tampilkan judul dan deksripsi blog Anda pada Header Halaman tersebut.
3. Navbar atau Menu
1. Navbar
Navbar adalah navigasi yang disajikan secara default pada suatu blog pada Blogger. Misalkan tombol menu: Entri Baru, Desain, Logout, dan lain-lain. Posisi Nav atau Menu ini secara otomatis terdapat dibagian Bar atas. Anda dapat mengatur Konfigurasi Navbar beserta tema yang telah disediakan atau menyembunyiakan bar tersebut. Dibawah ini HTML yang memungkinkan Anda menggunakan dalam sebuah blog.
<!-- Bagian: NavBar -->
<b:section class='navbar' id='navbar' maxwidgets='1' name='Navbar' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>2. Navmenu
Selain NavBar dari Blogger, perancang desain template juga menggunakan NavBar berupa Menu yang telah di modifikasi.
Menu adalah bagian terpenting dari link navigasi yang disajikan pada suatu blog. Misalkan tombol menu: sitemap, tentang, kontak, dan lain-lain. Posisi Nav atau Menu ini tergantung bagaimana template tersebut dibuatnya, misalkan Nav sebelum atau sesudah judul pada header, pada bar kiri atau kanan atau Slide-Nav. Namun ada beberapa bagian juga diletakan di bagian footer.
Kemudian, bagaimana HTML tersebut? Selain Nav atau menu menggunakan "ul li" atau "ol li" ada juga para blogger yang mengunakan metode sederhana, misalkan: a link atau permalink. Permalink atau link permanen adalah URL yang dimaksudkan untuk tetap tidak berubah, karena link tersebut menjadi soroton utama dalam sebuah blog.
Menu adalah bagian terpenting dari link navigasi yang disajikan pada suatu blog. Misalkan tombol menu: sitemap, tentang, kontak, dan lain-lain. Posisi Nav atau Menu ini tergantung bagaimana template tersebut dibuatnya, misalkan Nav sebelum atau sesudah judul pada header, pada bar kiri atau kanan atau Slide-Nav. Namun ada beberapa bagian juga diletakan di bagian footer.
Kemudian, bagaimana HTML tersebut? Selain Nav atau menu menggunakan "ul li" atau "ol li" ada juga para blogger yang mengunakan metode sederhana, misalkan: a link atau permalink. Permalink atau link permanen adalah URL yang dimaksudkan untuk tetap tidak berubah, karena link tersebut menjadi soroton utama dalam sebuah blog.
1. Cara Pertama - (ul li). <!-- Bagian: Navbar --> <nav class='navbar navbar-dark'> <ul class='nav navbar-nav'> <li class='nav-item active'><a class='nav-link' href='#' title='Home'>Home</a></li> <li class='nav-item'><a class='nav-link' href='#' title='SiteMap'>Sitemap</a></li> <li class='nav-item'><a class='nav-link' href='#' title='Tentang'>Tentang</a></li> <li class='nav-item'><a class='nav-link' href='#' title='Kontak'>Kontak</a></li> </ul> </nav> 2. Cara Pertama - (ol li). <!-- Bagian: Navbar --> <nav class='navbar navbar-dark'> <ol class='nav navbar-nav'> <li class='nav-item active'><a class='nav-link' href='#' title='Home'>Home</a></li> <li class='nav-item'><a class='nav-link' href='#' title='SiteMap'>Sitemap</a></li> <li class='nav-item'><a class='nav-link' href='#' title='Tentang'>Tentang</a></li> <li class='nav-item'><a class='nav-link' href='#' title='Kontak'>Kontak</a></li> </ol> </nav> 3. Cara Ketiga - nav-link dengan CSS khusus. <!-- Bagian: Navbar --> <nav class='navbar'> <a class='nav-link' href='#' title='Home'>Home</a> <a class='nav-link' href='#' title='SiteMap'>Sitemap</a> <a class='nav-link' href='#' title='Tentang'>Tentang</a> <a class='nav-link' href='#' title='Kontak'>Kontak</a> </nav>
4. Main section
Main section juga disebut Widget Blog Posts, Main Wrapper, Bagian Posting, dll. Widget Blog Posts adalah widget dimana posting akan tampil dihalaman blog. Perlu diketahui bahwa halaman sebuah blog terdapat empat bagian pokok, antara lain: Halaman posts (halaman depan, beranda atau Page utama), Halaman Posts belakang atau isi artikel, Halaman Posts statis dan Halaman Error 404 (Respon 404 halaman tidak ditemukan). Untuk memperjelas bagian ini, saya membahasnya dibawah ini:
- Halaman posts (depan / beranda) atau Page utama adalah sebuah halaman dimana pengunjung atau tamu situs melihat halaman beranda atau HOME. Halaman ini berupa snippet atau cuplikan-cuplikan kaya dari halaman posting. Biasanya halaman depan ini dimodifikasi seindah-indahnya untuk memikat tamu agar betah berkunjung kembali ke halaman ini. Anda dapat mengonfigurasi Postingan Blog ini dengan membuka "Edit" pada "Gatget Posting Blog". Anda dapat mengatur Opsi Halaman Utama, Jumlah postingan di halaman utama yang harus ditampilkan, dan Opsi Halaman Entri. Anda dapat membuat posting ini di atas menu Statistik.
- Halaman Posts belakang atau isi artikel adalah halaman artikel yang dapat dibaca secara keseluruhan pada satu halaman judul. Anda dapat menyertakan: Label, Reaction dan lain-lain. Sedangkan untuk mengubah posisi widget, Anda dapat melakukan drag atau menyeret pada bagian "Susun Item" dan save.
- Halaman Posts statis adalah halaman Posts yang kurang dalam gerakan, terutama dengan cara yang dianggap tidak diinginkan atau tidak menarik. Biasanya tamu situs hanya akan membukanya jika hal tersebut benar-benar dibutuhkan oleh pengunjung situs. Misalkan adalah halaman: sitemap, tentang, kontak, kebijakan dan lain-lain. Anda dapat membuat Posting yang berbeda pada halaman ini. Posts ini Anda dapat membuatnya di atas "Tata Letak atau Layout". Halaman Posts statis ini memiliki keterbatasan jumlah halaman posting, sehingga Anda dapat menggunakan "Halaman Posts statis" ini seperti saya sebutkan sebelumnya.
- Halaman Error 404 (Respon 404 halaman tidak ditemukan) adalah sebuah halaman dimana Anda merespon halaman-halaman yang tidak ditemukan pada blog ataupun website. Tujuan halaman ini adalah memberitahukan kepada pengunjung bahwa Halaman tersebut kosong atau tidak ada artikel. Biasanya halaman ini terjadi dari sebab akibat penghapusan halaman post (Halaman telah usang) dan Google mengindex halaman pada sebuah website yang tidak ditemukan atau sulitnya merayapi sebuah website. Anda dapat memberi tangapan yang baik dan sopan pada halaman ini untuk mereka (Pengunjung).
Bagimana HTML Halaman Posts tersebut?
Menampilkan HTML halaman artikel seperti dibawah ini. Perlu diketahui juga bahwa "Blog1" ini sudah memiliki tingkat keterbacaan di: Halaman Posts pada Destop (?m=0), Halaman Posts Mobile (?m=1) dan Halaman Posts Statis. Anda dapat lakukan save dan muat ulang halaman tersebut atau lihat pada post saya sebelumnya.
<!-- Bagian: Post --> <b:section class='main' id='page_body' showaddelement='false'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section>
Anda dapat lakukan save dan muat ulang halaman tersebut, maka HTML - Halaman Posts tersebut akan diberikan Blogger untuk Anda modifikasi untuk halaman posts (depan) atau Page utama. Secara default posts tersebut akan ditampilkan secara utuh di bagian halaman utama. Anda dapat memodifikasi halaman ini yang berupa snippet atau cuplikan-cuplikan kaya dari halaman posting di beranda atau HOME. Anda dapat menambahkan dan berkunjung di "Data Struktur Google" untuk melengkapi rating di Search Console. Dalam hal ini saya tidak menjabarkan struktur data dari Blog1, disebabkan file tersebut tidak sedikit, namun Anda dapat melihat setelah muat ulang halaman tersebut.
5. Sidebar
Sidebar adalah widget untuk memperkaya tampilan halaman serta fitur-fitur untuk memperindah sebuah halaman website. Sidebar ini, bisanya memiliki kolom lebih kecil dengan lebar sekitar
width:100 - 300px, biasanya widget ini digunakan sebagai: widget labels, widget PopularPosts atau widget lainnya.Bagimana HTML widget tersebut? Saya akan membahasnya satu persatu, seperti dibawah ini.
1. widget labels
Widget labels adalah salah satu opsi berdasarkan Kategori suatu halaman; bahwa halaman tersebut memberitahuakan pengelompokaan berdasarkan jenis artikel dan menjadi bagian magnet terpenting untuk memberitahukan kepada pengunjung dan pencarian dengan mudah. Buka edit pada "Tata Letak" untuk menampilkan jumlah dalam kategori halaman yang disampaikan kepada pengunjung.
Cara: 1.
<!-- Bagian: Sidebar -->/div>
<aside class='sidebar-labels' id='sidebar-labels'>
<b:section class='sidebar-lab' id='sidebar-lab' showaddelement='yes'/>
</aside>
Cara: 2.
<!-- Bagian: Sidebar -->
<aside class='sidebar-labels' id='sidebar-labels'>
<b:section class='sidebar-kanan' id='sidebar-kanan' preferred='yes'>
<b:widget id='Label1' locked='true' mobile='yes' title='Label' type='Label' version='1'>
<b:widget-settings>
<b:widget-setting name='sorting'>ALPHA</b:widget-setting>
<b:widget-setting name='display'>LIST</b:widget-setting>
<b:widget-setting name='selectedLabelsList'/>
<b:widget-setting name='showType'>ALL</b:widget-setting>
<b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main'><div class='about-item delay1'>
<b:if cond='data:title'><h2><data:title/></h2></b:if><div class='border-bottom-sidebar'/>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.name'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.name'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div></div>
</b:includable>
</b:widget>
</b:section>
</aside>2. widget PopularPosts
Widget PopularPosts adalah opsi berdasarkan trending topik saat ini dan diminati oleh pengunjung atau halaman yang dibuka belakangan ini. Buka edit pada "Tata Letak" untuk menampilkan jumlah entri pada "PopularPosts". Anda dapat mengatur berdasarkan: Semua, Tahun lalu, 30 hari terakhir, 7 hari terakhir.
Cara: 1.
<!-- Bagian: Sidebar -->
<aside class='sidebar-labels' id='sidebar-labels'>
<b:section class='kanin sidebar' id='sidebar-kanan' preferred='yes'>
<b:widget id='PopularPosts1' locked='true' title='Entri Populer' type='PopularPosts' version='1'/>
</b:section>
</aside>
Cara: 2.
<!-- Bagian: Sidebar -->
<aside class='sidebar-labels' id='sidebar-labels'>
<b:section class='kanin sidebar' id='sidebar-kanan' preferred='yes'>
<b:widget id='PopularPosts1' locked='true' title='Entri Populer' type='PopularPosts'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>10</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>true</b:widget-setting>
<b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='!data:showThumbnails'>
<b:if cond='!data:showSnippets'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image'/>
</b:with>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
<div style='clear: both;'/>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</aside>3. widget Contact Form
widget Contact Form atau Fomulir Kontak adalah alat bantu formulir berupa pesan melalui email. Pada umumnya Kontak formulir ini tidak bersifat publik dan pesan yang penyampaiannya secara pribadi. Anda dapat memilih halaman Kontak untuk tetap terhubung dengan penulis atau pengarang pada pemilik situs tersebut.
Cara: 1.
<!-- Bagian: ContactForm -->
<b:section class='ContactForm' id='contact-form'>
<b:widget id='ContactForm1' locked='true' mobile='yes' title='Contact Form' type='ContactForm' version='1'/>
</b:section>
Cara: 2.
<!-- Bagian: ContactForm -->
<b:section class='ContactForm' id='contact-form'>
<b:widget id='ContactForm1' locked='true' mobile='yes' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
<p/>
<data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
<p/>
<data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>Bagimana cara menambahkan widget HTML Blogger lainnya dengan cara manual?
Perhatikan HTML berikut ini, tentang bagaimana saya menggunakan Widget HTML. Anda juga dapat melihat dan menemukan keragaman widget di "Edd Gaget" pada "Tata Letak atau Layout pada Blogger".
Perhatikan HTML berikut ini, tentang bagaimana saya menggunakan Widget HTML. Anda juga dapat melihat dan menemukan keragaman widget di "Edd Gaget" pada "Tata Letak atau Layout pada Blogger".
<!-- Menambahkan: Widget -->
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='Contoh Saya' type='HTML' version='1'/>
</b:section>Keterangan:
- id='HTML1' menjadi angka-angka yang lain, misalnya HTML2, HTML3 ... dan seterusnya. Bahwa "Id" dalam setiap permintaan widget tidak boleh sama.
- locked='false' adalah mengunci widget dalam posisi terbuka atau "false", Anda dapat merubah posisi widget dalam kondisi tertutup atau "true". Locked='True' dimaksudkan bahwa widget ini tetap pada pengaturan terkunci pada bagian "Tata Letak atau Layout".
- title='Contoh Saya' adalah Judul Widget, Anda dapat membuat judul Anda sendiri untuk membantu pengunjung menemukan widget ini.
- type='HTML' version='1' adalah tidak berubah untuk informasi lanjutan dari sebuah widget.
6. Widget Komentar
Widget Komentar adalah widget penyampaian opini atau komentar dari pokok perbincangan. Anda dapat mengatur siapa yang mengomentari kiriman Anda dan tidak ada batasan berapa banyak komentar yang dapat ditinggalkan pada sebuah postingan.
7. Footer
Footer adalah bagian dari sebuah website untuk menampilkan beragam widget. Misalkan: pemberian deskripsi singkat beserta logo, widget labels, alamat perusahaan sobat, foto Flickr kecil, permalink atau lainnya. Hal terpenting dalam bagian footer adalah hindari duplikat widget pada sidebar. Begitu pula bentuk-bentuk HTML yang sudah saya jelaskan pada Sidebar.
8. Credit atau Atribusi
Credit adalah bagian terpenting dari sebuah website yang akan memperlihatkan bahwa halaman tersebut sering Anda update setiap tahun. Biasanya pengunjung akan melihat lebih dekat melalui update posts ataupun tahun yang ditetapkan pada bagian credit. Anda dapat menyertakan hak cipta pembuat template dan lain-lain. Dan posisi credit ini dapat Anda letakan diantara bagian footer atau credit seperti dibawah ini, tentunya Anda dapat membuatnya dengan mudah.
1. Cara Pertama. <!-- Bagian: Credit atau Atribusi --> <div class='credit-my'> <p>2018 <a href='#' title='Produk Saya'>Produk Saya</a> All Right Reserved</p> <p>Designed by Admin</p> </div> 2. Cara Kedua. Footer-Credit dengan metode HTML Widget. <!-- Bagian: Credit atau Atribusi --> <aside> <b:section class='credit-class' id='credit' showaddelement='no'> <b:widget id='Attribution1' locked='true' title='' type='Attribution' version='1'> <b:widget-settings> <b:widget-setting name='copyright'/> </b:widget-settings> <b:includable id='main'> <div class='widget-content' style='text-align: center;'> <b:if cond='data:attribution != ""'> <data:attribution/> </b:if> </div> <b:include name='quickedit'/> </b:includable> </b:widget> </b:section> </aside>
9. Google Analytics
Google Analytics adalah layanan analisis web freemium yang ditawarkan oleh Google untuk mendapatkan laporan lalu lintas situs web. Anda dapat memperoleh kode unik ini di Google Analytics. HTML Widget seperti dibawah ini. Jika Anda memasng kode unik saja, silahkan buka Layout Dashboard - kemudian pilih setelan - Lainnya (ID Properti Web Analytics).
Anda dapat meletakan kode HTML ini dibagian body, dan jika Anda menggunakan JavaSript, Anda dapat memasng ini dibagian "Head" dan "Body".
Anda dapat meletakan kode HTML ini dibagian body, dan jika Anda menggunakan JavaSript, Anda dapat memasng ini dibagian "Head" dan "Body".
<!-- Bagian: Google Analytics --> <b:include data='blog' name='google-analytics'/>
Bagaimana menyembunyikan quickedit?
Quickedit dalam widget Blogger adalah alternatif edit penting yang dapat digunakan jika sewaktu-waktu untuk mengedit tampilan widget kembali dengan cepat. Quickedit ini akan menjalankan link ke tujuan widget tersebut.
Quickedit Widget terbuka. <b:include name='quickedit'/>
Bagaimana cara membuat format comment pada HTML?
Format comment biasanya digunakan untuk memberikan tips atau pesan atau tanda tertentu yang ditulis untuk menjelaskan bahasa coding tersebut, namun juga dapat digunakan untuk menyembunyikan code dalam HTML. Silahkan lihat contoh dibawah ini:
1. Format comment gaya CSS. <style> /* Format comment gaya CSS */ </style> 2. Format comment gaya JS. <script> // Format comment gaya JS </script> 3. Format comment gaya HTML. <html> <!-- <nav></nav> --> </html>
Domain Blogger menyediakan metode HTML yang berbeda dengan banyak fitur dan kegunaannya. Anda dapat menemukan banyak fitur widget yang telah disediakan di Blogger dan jadikan desain tema yang menyenangkan dan mewah.
Jika masih terdapat kekurangan pada: Bagian-bagian Terpenting Template Blogger. Jangan sungkan untuk menambahkan pada kolom komentar di bawah ini. Selamat berkarya, Happy Blogging.
0 Comments
Post a Comment