Tutorial Dasar Template Blogger

Bagaimana cara mengembalikan basik template?
Dalam tutorial ini, ada beberapa trik dan tips sederhana untuk pemanggilan widget pada Blogger Editor HTML, baik pemula ataupun yang sudah sering dilakukan oleh perancang tempale profesional. Dalam hal ini, sobat tidak akan ragu lagi dengan buatan original template sendiri; bahwa kreasi sendiri mungkin lebih menarik, dan menjadi perhatian penuh untuk lebih berkreasi ... berkreasi ... dan terus berkreasi. Selain itu, sobat akan lebih aman dalam menggunakan kode pilihan sendiri dan tentunya dapat membuatnya secara lebih efisien, sederhana, ringan, menggunakan interkasi JavaScript seperlunya, kode template lebih sedikit, tetapi tetap menarik bagi pengunjung Blogger Blogspot atau domain publik sobat. Dengan menambah wawasan tutorial ini, silahkan berpetualang bersama kami.
Perlu diketahu bahwa membuat template yang apik adalah tidak sedikit waktu. Mereka membayar waktu untuk mengerjakan elemen-elemen HTML tersebut, tapi kami yakin sepenuh hati; bahwa sobat juga dapat membuatnya jauh lebih baik.
Biasanya mereka membuat template yang lebih keren kurang lebih satu minggu atau lebih. Dan yang paling utama adalah template tersebut mampu berkolaborasi dengan mesin telusur Google dan cepat di index oleh Google dan halaman utama yang ingin sobat rangking di mesin pencari. Pengujian template tersebut juga melalui tahapan yang berbeda-beda dan tergantung pada Google kembali mengindex dan merayapi dengan benar pada halaman milik sobat. Walaupun begitu, kami senang dengan sobat dengan optimis yang tinggi untuk dapat membuatnya karya-karya "Free templete Blogger" yang dapat dibagikan kepada rekan-rekan terkasih dengan kesabaran yang tinggi, dan tentunya sobat senang dalam berkreasi bersama Google Blogger.
webxcode - Tutorial Blogger Lengkap Dengan Mengembalikan Basik Template
Blogger saat perintisan pertamanya adalah menjadi produk pertemanan yang paling apik untuk berbagi konten yang bermanfaat secara gratis kepada semua orang. Sobat dapat berbagi pengalaman, kebahagiaan atau apapun yang sobat bahas dalam artikel Blogger Blogspot. Sobat dapat banyak pengetahuan dalam berbagai tujuan sobat hanya dengan cara online.
Blogger adalah salah satu Produk Google yang diluncurkan pada tanggal: 23 Agustus 1999. Blogger adalah layanan penerbitan blog yang memungkinkan blog multi-pengguna dengan entri bertanda waktu. Ini dikembangkan oleh Pyra Labs, yang dibeli oleh Google pada tahun 2003. Blog-blog tersebut dihosting oleh Google dan umumnya diakses dari subdomain blogspot.com.
Untuk mengurangi waktu sobat dalam membaca post kami yang panjang lebar. Yuk kita mulai.
Sobat dapat membukanya dengan cara login kemudian pilih "Temes - Edit HTML". Ketika masuk halaman tersebut sobat dapat melihat struktur kode-kode serta elemen-element yang dimaksud dan template standart Blogger untuk sobat gunakan. Sobat dapat melakukan uji dan test.
Bagaimana penyiapan data-codetype HTML?
Mengawali pembuatan template, kami menggunakan area pada Blogger yang kosong untuk membuat template sendiri. Kami selalu menggunakan HTML5 standart W3C atau "The World Wide Web Consortium". W3C adalah organisasi standar internasional utama untuk World Wide Web (disingkat WWW atau W3). Secara umum template yang dibagikan dan disedikan oleh Blogger.com sulit dimengerti oleh para pengguna Blogger, apa lagi cara memodif template tersebut akan lebih kesulitan. Dibawah ini kami memberikan perhatian penuh cara mengembalikan Basik Template atau membuat template dari awal atau NOL dengan mudah dan senang berkreasi bersama Blogger.com.
Bagimana standar data-codetype HTML yang sering digunakan?
Standar HTML setidaknya seperti di bawah ini.
<!DOCTYPE html>
<HTML>
<head>

</head>
<body>

</body>
</HTML>
Diatas adalah data-codetype HTML standar. Namun jika sobat gunakan dalam Blogger pada Edit HTML dan lakukan save, maka kode tersebut tidak dapat digunakan begitu saja. Cara mengembalikan default basik template yang perlu diperhatikan adalah hal-hal berikut :
  1. b:skin - berisikan CSS yang biasanya digunakan dalam Blogger.
  2. b:section - Widget sesi untuk menkoordinir keberadaan elemen Blogger.
Bagian-bagian tesebut merupakan salah satu elemen-elemen yang harus ada dalam bagian Edit HTML pada Blogger atau bahasa code yang harus ada satu: b:skin, b:section untuk melakukan tanggapan permintaan server di Edit HTML pada Blogger. Lebih jelasnya silahkan perhatikan data-codetype HTML berikut ini dan penambahan elemen HTML lainnya.

Menambahkan b:skin dan b:section ke Editor Blogger.
Dibawah ini adalah salah satu contoh bahasa code yang sudah dapat diterima di HTML Editor Blogger. Silahkan save untuk mencobanya.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<HTML>
<head>
    <!-- b:skin -->
    <b:skin></b:skin>

</head>
<body>

    <!-- b:section -->
    <b:section class='sidebar' id='first-sidebar' showaddelement='yes' />

</body>
</HTML>
Hasil Perlengkapan lainnya
Berikutnya adalah salah satu metode coding yang sering kami gunakan untuk membuat template atau website.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<HTML>
&lt;head&gt;
<!-- Bagian: Meta Charset -->
<meta charset='utf-8' />
<meta content='IE=edge' http-equiv='X-UA-Compatible' />
<meta content='width=device-width, initial-scale=1' name='viewport' />

<!-- Bagian Title: Page 1 dan Page 2, dan Respon 404 -->
<title>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <data:blog.pageTitle/><b:else/>
        <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
            <data:blog.pageName/> |
            <data:blog.title/><b:else/> 404 |
            <data:blog.title/>
        </b:if>
    </b:if>
</title>

<!-- Bagian: All head content -->
<b:include data='blog' name='all-head-content' />

<!-- Bagian: Skin -->
&lt;style&gt;&lt;!-- /*
<b:skin>
    <![CDATA[*/]]>
</b:skin>

&lt;/head&gt;&lt;!--
<head/>--&gt;
<body>

    <!-- Bagian: Header -->
    <header>
    </header>

    <!-- Bagian: Post -->
    <b:section class='main' id='page_body' showaddelement='false'>
        <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' />
    </b:section>

    <!-- Bagian: Aside dan Sidebar -->
    <aside class='sidebar-labels' id='sidebar-labels'>
        <b:section class='sidebar' id='first-sidebar' showaddelement='yes' />
    </aside>

    <!-- Bagian: Footer -->
    <footer class='footer-wrapper' id='footer-wrapper'>
    </footer>

&lt;!--</body>--&gt;&lt;/body&gt;
</HTML>
Lakukan save dan muat ulang halaman tersebut, mengembalikan Basik Template - Web Design sudah dimulai dengan menampilkan post yang sobat unggah dalam halaman secara default. Setelah muat ulang halaman tersebut maka halaman akan terlihat sangat sederhana. Selanjutnya sobat dapat mengatur gaya CSS kode yang sobat inginkan untuk menampilan jauh lebih keren dan melengkapi widget dengan sebaik-baiknya.
Keterangan:
Dalam pembahasan ini, kami mengulas sesuai kriteria kami saja. Kami harap sobat mengerti pembahasan kami di bawah ini:
  1. Elemen di atas sudah mendukung HTML5. Doctype adalah HTML5, ada tag HTML5 dan tidak ada tag HTML yang usang yang ditemukan.
  2. Common, open graph, HTML tag adalah tidak memiliki tag (missing). Sobat dapat menambahkan sendiri, baik secara manual ataupun penetapan meta content di bagian head.
  3. (html lang="en") adalah bahasa English, biasanya string ini menunjukan bahasa post yang terbaca pada halaman. Jika bahasa sobat adalah bahasa Indonesia maka (html lang="id"). Kemudian jika bahasa sobat masih bercampur dapat juga memberikan string ini (html lang="zxx"). Selanjutnya bagian html tersebut juga dapat diikuti string acak lain. Ini juga tergantung pada versi struktur template (Lihat contoh di bawah atau Bagian Head). Huruf html ini boleh menggunakan huruf besar atau kecil, sobat dapat melihatnya.
  4. meta charset="utf-8" adalah metode yang sering digunakan saat ini.
  5. meta content="IE=edge" http-equiv="X-UA-Compatible" adalah pemberitahuan bahwa template tersebut mendukung Internet Explore pada windows ataupun browser sejenisnya. (X-UA-Compatible) akan memberikan efek tampilan pada pengaturan templat yang sobat buat.
  6. b:skin adalah salah satu kode dari Blogger yang tidak dapat dihilangkan. Sehingga kami menetapkannya di elemen ini.
  7. Cascading Style Sheets (CSS) adalah bahasa style sheet yang digunakan untuk menggambarkan penyajian dokumen yang ditulis dalam bahasa markup. Style adalah bagian terpenting pada gaya CSS untuk elemen-elemen yang akan sobat buat nantinya.
  8. HTML adalah bagian dari keseluruhan elemen-elemen yang menjadikan template tersebut berfungsi.
  9. JavaScript adalah bahasa pemrograman komputer berorientasi objek yang biasa digunakan untuk membuat efek interaktif di browser web. Sobat dapat meminimalkan kode untuk membantu mempercepat pemuatan atau pengunduhan halaman. Halaman yang telah dioptimalkan dan cenderung memberikan pengalaman pengguna pada kinerja situs web.
PEMBAHASAN
Dalam bagian Head, kami menyertakan beberapa elemen untuk mempersiapkan tag (Pembuka dan Penutup) untuk mengelola bahasa markup Style CSS dan bahasa pemrograman efek interaktif JavaScript. Sobat dapat meyisipkan kode setelah tag pembuka dan sebelum tag penutup.
<!-- Bagian: Style CSS -->
<style>
</style>

<!-- Bagian: JavaScript -->
1. Cara Pertama.
<script>
</script>

2. Cara Kedua.
<script>//<![CDATA[
//]]></script>
Keterangan:
CDATA didalam JavaSript biasanya adalah kode yang mengalami penolakan saat save pada Edit HTML pada Blogger. Misalkan: kode "&" dan pencampuran "CSS, HTML" dalam satu paket didalam JavaSript. Jika dibiarkan begitu saja dalam paket penyimanan Widget HTML kemungkinan akan baik-baik saja, namun kemungkinan tidak terbaca atau kemungkinan muncul dalam bentuk yang berbeda di halaman. Sobat dapat membedakan JavaSript tersebut dengan menguji dengan cara Pertama atau Kedua.
1. Bagian HEAD
Terpenting di bagian HEAD atau para perancang template sering terdapat elemen-elemen dibawah ini:
  1. Meta charset.
  2. Bagian Judul, dan respon 404 (error_page). Error page ini dapat dimodifikasi dengan tanggapan halaman tidak ditemukan.
  3. Style adalah gaya pemograman CSS interaktif. Misalnya adalah group CSS pada halaman depan dan belakang (Halaman Posting), Halaman statis ataupun lainnya.
  4. JavaScript atau efek interaktif.
Di bagian HEAD biasanya terdapat string acak seperti dibawah ini. Sedangkan validasi menurut W3C adalah menggunakan metode 1. Sedangkan yang ke 2 adalah cara Blogger mendeteksi kepergunaan element tersebut setelah HTML di digulir ulang.
Metode 1. HTML berhuruf besar.
<HTML lang='zxx' expr:dir='data:blog.languageDirection'>
...
</HTML>

Metode 2. html berhuruf kecil.
<html>
</html>

<!-- Metode 2 setelah digulir ulang menjadi seperti dibawah ini -->

<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='indie.xml' lang='en' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
...
</html>
Bagaiman cara merubah (all head content) agar valid?
Pada all head content pada Blogspot statis maka terlihat seperti ini:
<!-- Bagian: All head content -->
<b:include data='blog' name='all-head-content'/>
Dibawah ini kami merubah dan menambahkan: rel canonical, all head content dan perubahan meta content di bagian head.

<!-- Bagian: Canonical -->
<link expr:href='data:blog.url' rel='canonical'/>

<!-- Bagian: hreflang -->
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>

<!-- Bagian: Perubahan all head content -->
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/></b:if></b:if>

<!-- Bagian: Meta Property dan Meta Content -->
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta property='og:description' expr:content='data:blog.metaDescription'/>
</b:if>
<meta content='Keyworlds Situs' name='keywords'/>
Keterangan:
hreflang adalah acara halaman memberi tahu Google tentang versi halaman yang dilokalkan. Tindakan ini akan membantu Google Penelusuran mengarahkan pengguna ke versi halaman yang paling sesuai menurut bahasa atau wilayah. Perlu diperhatikan bahwa jika sobat tanpa melakukan tindakan apa pun, Google mungkin tetap menemukan versi bahasa alternatif di halaman sobat, namun sebaiknya sobat secara eksplisit menandai halaman khusus bahasa atau wilayah. hreflang="x-default" adalah menampilkan secara default sesuai bahasa halaman. Jika blog sobat menggunakan bahasa English maka hreflang="en" atau merujuk ke negara yang sesuai dengan wilayah yang berbahasa English.
Canonical adalah halaman dengan URL kanonis yang ditentukan untuk mereka di situs web sobat.
Dalam banyak kasus, URL duplikat ditangani melalui pengalihan 301 redirect. Namun terkadang, misalnya ketika produk yang sama muncul dalam dua kategori dengan dua URL yang berbeda dan keduanya harus ditayangkan, sobat dapat menentukan halaman mana yang harus dianggap sebagai prioritas dengan bantuan tag rel="canonical". Ini harus diterapkan dengan benar di dalam tag head halaman dan arahkan ke versi halaman utama yang ingin sobat rangking di mesin pencari. Atau, jika sobat dapat mengonfigurasi server, sobat dapat menunjukkan URL kanonis menggunakan header HTTP rel="canonical".
2. Bagian BODY
Gambaran tentang wujud dimana sebuah website terlihat pada fitur-fitur website pada browser. Nah, apa saja yang termasuk dalam bagian BODY? Setidaknya ada bagian-bagian terpenting yang harus sobat kerjakan dan modifikasi pada bagian gaya CSS berikut ini:
  1. Header.
  2. Navbar atau menu.
  3. Main section atau Widget Blog Posts.
  4. Sidebar.
  5. Footer.
  6. Credit.
Mana yang lebih menarik, kreasi sobat atau kami? Tapi kami yakin sepenuh hati bahwa sobat juga dapat membuat template jauh lebih baik. Tidak cukup sampai di petualangan ini, untuk menambah petualangan bersama kami, sobat dapat melanjutkan beberapa bagian mendasar dari sebuah template di: Bagian-bagian Terpenting Template Blogger.
Jika masih terdapat pertanyaan atau kekurangan pada: Tutorial dasar template blogger. Jangan sungkan untuk bertanya atau menambahkan pada kolom komentar di bawah ini. Happy Blogging.
Tentang kami
No text ...

No comments:

Kirim komentar ke teman

Tampilkan Kotak Komentar