√ Cara Menciptakan Template Blog Blogger Sendiri Mulai Dari Awal

Membuat Template Blog » Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri. Namun tidak bisa kita pungkiri kalau menciptakan template itu susah dan membutuhkan pemahan mengenai coding. namun semua itu akan bisa kau atasi kalau kau mau serius berguru menciptakan template blogspot sendiri.

Sebagai informasi aja, Jika kau tidak mau pusing 7 keliling memikirkan kode-kode yang tidak jelas, sebaiknya kau cari atau beli aja template yang ada di internet. atau kau bisa mencari template yang keren di halaman lapak lama ini.

Menggunakan template blog buatan orang lain itu rasanya tidak puas, lantaran pastinya tampilan blog kita akan sama dengan tampilan blog orang lain yang memakai template yang sama. Namun kalau kau merasa tidak bermasalah dengan hal tersebur kau bisa memakai template orang lain, selain lantaran tidak perlu pusing kau juga bisa lengsung menciptakan konten di blog kau tanpa harus pusing memikirkan template.

Belajar menciptakan template blog blogger secara belajar sendiri memang lebih sulit dan pastinya menghabiskan banyak waktu kalau dibandingkan berguru melalui kursus atau tunjangan orang lain secara langsung.

Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Template blog yaitu jantung blog itu sendiri, Dengan template kita bisa dengan gampang menambah atau memodifikasi fitur template dengan sesuai yang kita inginkan.

Template blogger mempunyai struktur yang kompleks. Nah supaya teman-teman bisa memahami setiap step-step yang saya maksud, saya akan menciptakan panduan ini menjadi beberapa panduan.

Jika kau benar-benar niat untuk menciptakan template blogger, saya sarankan kau untuk membaca semua artikel ini, gres kemudian membaca serial panduan menciptakan template dibawah ini.

Panduan Membuat Template Blog Blogger

Serial	Pemahaman
Pemahaman Dasar	5%
Membuat Blog Ringan, Valid HTML5, dan SEO Friendly	10%
Struktur Dasar Template Blog	20%
Menu Navigasi	30%
Desain Header	40%
Desain Posting	50%
Desain Kolom Komentar	60%
Desain Sidebar	70%
Desain Footer	80%
Kustomisasi Font	90%
Responsive Template	100%

Blogger merupakan sebuah layanan blog publishing yang dirilis oleh Pyra Labs pada tahun 1999, dan dibeli oleh Google pada tahun 2003.

Sebuah blog dengan blogger secara defaul akan mempunyai subdomain blogspot, namun tetap bisa di upgrade menjadi top level domain menyerupai Lapaklama.com.

Semua data yang ada di blog kau menyerupai gambar, foto, vidio ataupun script di simpan server Google, dan sanggup pribadi diunggah melalui Blogger. Data yang dihosting pada server luar atau pribadi tetap sanggup dimuat dan ditampilkan pada blog dengan platform Blogger.

Untuk melihat source code template blog kau sanggup dilakukan dengan cara, Masuk kedalam dasboard blogger kamu, kemudian pilih sajian Template, kemudian klik edit HTML. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

di halaman inilah kau sanggup memodifikasi template blog kamu.

XML

Blog yang dibangun dengan platform blogger dibangun memakai XML atau kepanjangan dari (Extensible Markup Language) adalah bahasa markup (manipulasi) untuk keperluan umum yang disarankan oleh W3C (World Wide Web Consortium) untuk menciptakan dokumen markup untuk keperluan pertukaran data antar sistem yang beraneka ragam.

Pada pada dasarnya semua dokument yang dibentuk memakai XML bisa dijalankan pada multi-platform seperti, Android, Apple, Ataupun windows.

Dibawah ini yaitu dua baris script paling atas yang menujukan kalau blog tersebut bangkit memakai XML.

Script

<?xml version=”1.0″ encoding=”UTF-8″ ?>

<!DOCTYPE html>

XML sendiri berfungsi mendefinisikan syntax penulisan kode-kode bahasa pemrograman menjadi tidak standar, yang sanggup kita tentukan sendiri. Seperti :

Script

<penulis>Nama Penulis Blog</penulis>

Fungsi “penulis” disini merupakan fungsi yang kita definisikan sendiri, yang mana kalau dipanggil akan menampilkan nilai berupa Nama Penulis Blog.

XML hanya sebatas melaksanakan pendefinisian fungsi saja, untuk menampilkan fungsi tersebut harus dilakukan pemanggilan memakai bahasa pemrograman lain.

Pemanggilan fungsi XML dalam template blogger dilakukan memakai HTML. Selain itu fungsi XML juga sanggup diatur tampilannya memakai CSS.

CSS

Pada dasarnya sebuah template blogger tersusun dari kumpulan fungsi-fungsi XML. CSS (Cascading Style Sheets) berfungsi untuk mengatur desain atau tampilan fungsi-fungsi tersebut.

Di dalam CSS tampilan (style) template blog didefinisikan dalam bentuk nilai yang diapit dalam kurung kurawa “{…}” atau bracket.

Script

•CSS_id {style-CSS-satu:nilaipertama;style-CSS-dua:nilaikedua;}

3 cara penulisan CSS :

Script

table { // tanpa awalan apapun

width:100%;

margin:10px;

}

Yang pertama penulisan tanpa awalan tag apapun sebelum CSS table. Penulisan menyerupai ini akan mengatur tampilan semua tabel yang dibentuk memakai fungsi <table>.

Script

#keren{ // dengan hashtag

width:100%;

margin:10px;

color:red;

}

Yang kedua yaitu penulisan CSS diawali dengan tagar (tanda pagar) “#” atau hashtag. CSS menyerupai ini sanggup dipanggil dengan menyisipkan tag id pada fungsi. Contoh pemanggilannya :

Script

Tagar biasanya dipakai untuk menandai bagian-bagian utama template blog.

Script

.keren{ // dengan dot

width:100%;

margin:10px;

color:red;

}

Yang terakhir penulisan CSS yang diawali tanda titik “.” atau dot, sanggup dipanggil dengan menyisipkan tag class pada fungsi. Contoh pemanggilannya :

Script

Tanda titik ini biasanya dipakai untuk menandai elemen-elemen di dalam bagian-bagian utama template blog.

XML

Secara umum HTML berfungsi untuk menampilkan fungsi-fungsi yang telah didefinisikan sebelumnya oleh XML.

Struktur HTML sendiri terdiri dari 2 kepingan yaitu kepingan head (kepala) dan body (tubuh).

Script

<HTML>

<head>

// untuk meta, j4vascript, CSS

</head>

<body>

// untuk memanggil fungsi yang telah didefinisikan pada kepingan head

</body>

</HTML>

Bagian head ini berisi pendeklarasian fungsi menyerupai meta, j4vascript, dan CSS. Fungsi-fungsi ini hanya disimpan saja dalam memori head, belum ditampilkan.

Untuk menampilkan fungsi-fungsi di dalam memori head, dilakukan pemanggilan terhadap fungsi-fungsi tersebut pada kepingan body.

Contoh HTML di bawah ini menyimpan CSS wrapper pada kepingan head dan dipanggil pada kepingan body untuk ditampilkan.

Script

<HTML>

<head>

#wrapper {background: #fff; width: 90%; padding: 20px;margin:20px}

</head>

<body>

<div id=’wrapper’>

isi konten

</div>

</body>

</HTML>

Membuat Template Blog Blogspot Mulai Dari Nol

Sekarang kita akan pribadi praktek. Sebaiknya Anda mengikuti tutorial di bawah sambil mempraktekkannya. Buatlah blog gres yang khusus dipakai untuk belajar, jangan gunakan blog utama Anda.

Silahkan hapus seluruh isyarat template Anda sebelumnya dengan cara seleksi semua isyarat (Ctrl+A), kemudian tekan Delete atau Backspace untuk menghapusnya. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Membuat Struktur XML dan HTML

Silahkan copy dan paste isyarat di bawah ini ke dalam Template Editor, kemudian pilih Save Theme untuk menyimpannya.

Script

<?xml version=”1.0″ encoding=”UTF-8″ ?>

<!DOCTYPE html>

<HTML>

<head>

</head>

<body>

</body>

</HTML>

Apa yang terjadi? Error!

There should be one and only one skin in the theme, and we found: 0

Perhatikan kata skin yang saya cetak tebal. Jika diterjemahkan artinya kulit, tetapi dalam masalah ini berarti tampilan. Anda tahu kan siapa yang bertanggung jawab mengatur tampilan?

Error di atas muncul lantaran kita belum mengatur tampilan blog kita. CSS berperan sebagai pengatur tampilan. Kaprikornus solusi untuk error di atas tentu saja yaitu dengan menambahkan CSS.

Menambahkan CSS

Secara default CSS diletakkan di antara tag b:skin dan penutupnya.

Script

<b:skin><![CDATA[

/*CSS di sini…*/

]]></b:skin>

Sekarang coba letakkan CSS berikut pada kepingan head, kemudian coba simpan.

Script

Apa yang terjadi? Error lagi!

We did not find any section in your theme. A theme must have at least one b:section tag.

Perhatikan kata section yang tercetak tebal. Error di atas muncul lantaran kita belum menampilkan apapun di dalam blog kita. CSS di atas hanya disimpan di dalam memori head, belum ditampilkan.

Ingat bahwa untuk menampilkan suatu fungsi, maka fungsi tersebut harus dipanggil terlebih dahulu. Untuk memanggil fungsi salah satunya dilakukan memakai tag b:section.

Memanggil Bagian Posting

Contoh tag b:section untuk menampilkan kepingan posting.

Script

<b:section class=’main’ id=’main’>

<b:widget id=’Blog1′ locked=’true’ title=’Posting Blog’ type=’Blog’></b:widget>

</b:section>

Sekarang masukkan tag b:section untuk postingan pada kepingan body kemudian simpan.

Script

<?xml version=”1.0″ encoding=”UTF-8″ ?>

<!DOCTYPE html>

<HTML>

<head>

<b:skin><![CDATA[

body {background-color: #cab894;background-position: center center;}

a:link {font-family: ‘PT Serif Caption’, serif; font-size: 15px; color:#3094db;}

a:hover {color: #4d4544;}

a {color: #3094db;}

]]></b:skin>

</head>

<body>

<b:section class=’main’ id=’main’>

<b:widget id=’Blog1′ locked=’true’ title=’Posting Blog’ type=’Blog’></b:widget>

</b:section>

</body>

</HTML>

Berhasil! Kali ini tidak ada error yang muncul.

Sekarang coba lihat tampilan blog Anda dengan menentukan View Blog. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Seharusnya tampilan sementara blog Anda akan menyerupai gambar di bawah ini.

Perhatikan kepingan tab browser yang Anda gunakan untuk membuka blog Anda. Di situ tertera alamat blog Anda, bukan? Padahal seharusnya judul blog. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Menambah Tag Title

Cara menciptakan judul blog kita muncul pada tab browser yaitu dengan menyisipkan tag title berikut.

Script

Masukkan tag title ke kepingan head, kemudian simpan.

Script

<?xml version=”1.0″ encoding=”UTF-8″ ?>

<!DOCTYPE html>

<HTML>

<head>

<title><data:blog.title/></title>

<b:skin><![CDATA[

body {background-color: #cab894;background-position: center center;}

a:link {font-family: ‘PT Serif Caption’, serif; font-size: 15px; color:#3094db;}

a:hover {color: #4d4544;}

a {color: #3094db;}

]]></b:skin>

</head>

<body>

<b:section class=’main’ id=’main’>

<b:widget id=’Blog1′ locked=’true’ title=’Posting Blog’ type=’Blog’></b:widget>

</b:section>

</body>

</HTML>

Lihat kembali blog Anda, harusnya sudah menyerupai gambar di bawah ini. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Sampai disini apakah Anda sudah siap untuk menciptakan template blog Anda sendiri? Jika sudah silahkan lanjutkan membaca serial kedua panduan menciptakan template blog sendiri berikut : Membuat Blog yang Ringan, Valid HTML5, dan SEO Friendly.

Selamat, Anda gres saja menuntaskan serial pertama dari 11 serial panduan menciptakan template blog sendiri. Pemahaman Anda sudah mencapai 5%.

Cara Membuat Blog yang Ringan, Valid HTML5, dan SEO Friendly

Blog yang baik itu blog yang menyerupai apa sih?

Sobat Blogger, salah satu cara yang cukup efektif untuk mendatangkan pengunjung ke blog kita yaitu dengan menciptakan blog kita ditemukan pada halaman pertama mesin pencari (search engine).

Ketika pengunjung mencari informasi melalui Google, Yahoo, Bing, atau mesin pencari lainnya, maka mereka akan cenderung mengunjungi situs-situs yang berada pada halaman pertama pencarian, bukan?

Hal ini dulu sempat menciptakan para webmaster berpikir bahwa blog yang baik yaitu blog yang terlihat baik oleh mesin pencari, bukan pengunjung.

Artinya mereka hanya berfokus menciptakan blog yang disukai oleh mesin pencari, tanpa mempedulikan konten yang tolong-menolong sangat penting untuk pengunjung.

Lain dulu lain sekarang. Mesin pencari juga mempunyai algoritma canggih untuk menyeleksi blog-blog mana saja yang benar-benar bermanfaat untuk pengunjung, mana blog yang dibentuk asal-asalan.

Blog yang baik yaitu blog yang sanggup mengatakan informasi yang dicari pengunjung dan bisa menciptakan pengunjung betah berlama-lama berada di blog tersebut.

Mesin pencari sanggup mengolah waktu yang dihabiskan oleh pengunjung dikala mengunjungi suatu blog menjadi tingkat kepuasan pengunjung. Artinya blog yang disukai pengunjung akan disukai pula oleh mesin pencari.

Blog yang baik mempunyai 4 kriteria sebagai berikut :

Desain yang tidak menciptakan frustasi, struktur dan navigasi yang jelas, font goresan pena gampang dibaca.

Ringan dan cepat loadingnya. Tidak dipenuhi widget-widget yang kurang berkhasiat bagi pengunjung.

Valid HTML5, penulisan syntax-nya mengikuti hukum yang ditetapkan W3C.

Search engine friendly, baik di mata mesin pencari (pelengkap).

Tutorial kali ini mungkin akan menciptakan para master yang berjualan template premium geram, lantaran saya akan membagikan tutorial menciptakan blog dengan 4 kriteria di atas secara gratis!

Cara Membuat Blog yang Ringan, Valid HTML5, dan SEO Friendly

Ini yaitu serial kedua dari 11 seri panduan menciptakan template blog sendiri, kalau Anda belum membaca serial pertama, silahkan baca terlebih dahulu : Cara Membuat Template Blog Blogger Sendiri Mulai Dari Nol.

Terakhir kita sudah menciptakan template blog dengan source code berikut :

Script

Percaya atau tidak dengan source code di atas blog kita sudah valid HTML5?

Anda sanggup mengecek valid tidaknya blog Anda melalui W3C Validation Service. Masukkan alamat blog Anda, kemudian pilih Check. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Perhatikan tidak ada error yang muncul, yang berarti blog Anda telah valid HTML5. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Meta Tag Dasar Blogger

Meta tag berfungsi sebagai sarana komunikasi pengelola blog untuk menginformasikan sesuatu kepada mesin pencari.

Di dalam template blogger biasanya akan dipasang meta tag dasar yang dikemas dalam satu baris isyarat meta tag all head content di bawah ini.

Script

<b:include data=’blog’ name=’all-head-content’/>

Meta tag all head content berisi informasi dasar berikut sehingga sangat penting untuk diinformasikan kepada mesin pencari.

Favicon

Canonical untuk menghindari duplikat konten

Atom RSS

OpenID delegate untuk berkomentar dengan openID

Meta description halaman posting

Post thumbnail

Masalahnya yaitu dikala kita menyisipkan meta tag all head content ke dalam kepingan head, akan muncul error pada hasil validasi. Coba sisipkan meta tag tersebut pada kepingan head, kemudian simpan, dan ulangi validasi.

Script

<?xml version=”1.0″ encoding=”UTF-8″ ?>

<!DOCTYPE html>

<HTML>

<head>

<b:include data=’blog’ name=’all-head-content’/>

<title><data:blog.title/></title>

<b:skin><![CDATA[

body {background-color: #cab894;background-position: center center;}

a:link {font-family: ‘PT Serif Caption’, serif; font-size: 15px; color:#3094db;}

a:hover {color: #4d4544;}

a {color: #3094db;}

]]></b:skin>

</head>

<body>

<b:section class=’main’ id=’main’>

<b:widget id=’Blog1′ locked=’true’ title=’Posting Blog’ type=’Blog’></b:widget>

</b:section>

</body>

</HTML>

Maka seharusnya akan muncul error menyerupai gambar di bawah ini. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Lalu solusinya bagaimana? Solusinya yaitu dengan mengubah meta tag all head content dengan meta tag berikut :

Script

Sehingga source code template blog kita menjadi menyerupai berikut :

Script

<?xml version=”1.0″ encoding=”UTF-8″ ?>

<!DOCTYPE html>

<HTML>

<head>

<meta content=’text/html; charset=UTF-8′ http-equiv=’Content-Type’/>

<meta content=’blogger’ name=’generator’/>

<link expr:href=’data:blog.homepageUrl + "favicon.ico"’ rel=’icon’ type=’image/x-icon’/>

<link expr:href=’data:blog.url’ rel=’canonical’/>

<link expr:href=’data:blog.homepageUrl + "feeds/posts/default"’ expr:title=’data:blog.title + " – Atom"’ rel=’alternate’ type=’application/atom+xml’/>

<link expr:href=’data:blog.homepageUrl + "feeds/posts/default?alt=rss"’ expr:title=’data:blog.title + " – RSS"’ rel=’alternate’ type=’application/rss+xml’/>

<link expr:href=’"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"’ expr:title=’data:blog.title + " – Atom"’ rel=’alternate’ type=’application/atom+xml’/>

<link href=’http://www.blogger.com/openid-server.g’ rel=’openid.server’/>

<link expr:href=’data:blog.homepageUrl’ rel=’openid.delegate’/>

<b:if cond=’data:blog.pageType == "item"’>

<b:if cond=’data:blog.postImageThumbnailUrl’>

<link expr:href=’data:blog.postImageThumbnailUrl’ rel=’image_src’/>

</b:if>

<b:if cond=’data:blog.metaDescription != ""’>

<meta expr:content=’data:blog.metaDescription’ name=’description’/>

<b:else/>

<meta expr:content=’data:blog.pageName + " – " + data:blog.title’ name=’description’/>

</b:if>

</b:if>

<title><data:blog.title/></title>

<b:skin><![CDATA[

body {background-color: #cab894;background-position: center center;}

a:link {font-family: ‘PT Serif Caption’, serif; font-size: 15px; color:#3094db;}

a:hover {color: #4d4544;}

a {color: #3094db;}

]]></b:skin>

</head>

<body>

<b:section class=’main’ id=’main’>

<b:widget id=’Blog1′ locked=’true’ title=’Posting Blog’ type=’Blog’></b:widget>

</b:section>

</body>

</HTML>

Silahkan cek kembali validasi blog Anda, seharusnya blog Anda sudah kembali valid HTML5.

Cara Membuat Template Blog SEO Friendly

Saya tidak akan membahas SEO secara detail di postingan ini lantaran SEO itu sangat kompleks dan kita masih berguru tahap awal. Di sini hanya akan dibahas SEO mudah sebagai langkah awal saja.

Sebelumnya saya pernah berkata bahwa blog yang baik berdasarkan pengunjung maka akan baik juga bagi mesin pencari.

Pada source code template blog terakhir, dilakukan pemanggilan tag title yang berfungsi menampilkan judul blog kita pada tab browser.

Script

Tag title di atas tidak dinamis sama sekali. Halaman apapun di dalam blog kita yang dikunjungi, pada tab browser hanya akan menampilkan judul blog kita.

Sebagai teladan dikala saya mencoba mengakses halaman yang tidak ditemukan atau page not found di dalam blog kita, maka tab pada browser tetap akan menampilkan judul blog kita. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Padahal seharusnya tab browser menampilkan informasi halaman yang sedang dikunjungi. Kaprikornus misalkan saya mengakses halaman yang tidak ditemukan dalam blog saya, maka tab pada browser juga memperlihatkan informasi halaman yang sedang saya kunjungi menyerupai gambar di bawah ini. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Solusinya yaitu dengan mengubah tag title sebelumnya,

Script

dengan tag title di bawah ini.

Script

<!– SEO Title Tag –>

<b:if cond=’data:blog.url == data:blog.homepageUrl’><title><data:blog.title/></title></b:if>

<b:if cond=’data:blog.pageType == "item"’><title><data:blog.pageName/> – <data:blog.title/></title></b:if>

<b:if cond=’data:blog.pageType == "archive"’><title>Archive for <data:blog.pageName/></title></b:if>

<b:if cond=’data:blog.pageType == "static_page"’><title><data:blog.pageName/></title></b:if>

<b:if cond=’data:blog.pageType == "index"’><b:if cond=’data:blog.searchLabel’><title><data:blog.title/> – <data:blog.pageName/></title></b:if></b:if>

<b:if cond=’data:blog.pageType == "error_page"’><title>Page Not Found</title></b:if>

<b:if cond=’data:blog.pageType == "index"’><b:if cond=’data:blog.url != data:blog.homepageUrl’><title><data:blog.pageTitle/> – All Post</title></b:if></b:if>

Akan saya jelaskan satu per satu.

Ketika yang dikunjungi yaitu homepage (halaman utama) blog, maka tab browser akan menampilkan “Judul Blog” saja, diatur dalam tag berikut.
Script
<b:if cond=’data:blog.url == data:blog.homepageUrl’><title><data:blog.title/></title></b:if>

Ketika yang dikunjungi yaitu halaman posting, akan menampilkan “Judul Posting – Judul Blog”.
Script
<b:if cond=’data:blog.pageType == "item"’><title><data:blog.pageName/> – <data:blog.title/></title></b:if>

Ketika yang dikunjungi yaitu halaman arsip, akan menampilkan “Archive for Judul Posting”.
Script
<b:if cond=’data:blog.pageType == "archive"’><title>Archive for <data:blog.pageName/></title></b:if>

Ketika yang dikunjungi yaitu halaman statis, akan menampilkan “Judul Blog”.
Script
<b:if cond=’data:blog.pageType == "static_page"’><title><data:blog.pageName/></title></b:if>

Ketika yang dikunjungi yaitu halaman index, akan menampilkan “Judul Posting – Judul Blog” berdasarkan label.
Script
<b:if cond=’data:blog.pageType == "index"’><b:if cond=’data:blog.searchLabel’><title><data:blog.title/> – <data:blog.pageName/></title></b:if></b:if>

Ketika yang dikunjungi yaitu halaman error (tidak ditemukan), akan menampilkan “Page Not Found”.
Script
<b:if cond=’data:blog.pageType == "error_page"’><title>Page Not Found</title></b:if>

Ketika yang dikunjungi yaitu halaman index, akan menampilkan “Judul Posting – All Post”.
Script
<b:if cond=’data:blog.pageType == "index"’><b:if cond=’data:blog.url != data:blog.homepageUrl’><title><data:blog.pageTitle/> – All Post</title></b:if></b:if>

Jadi sekarang, kita sudah mempunyai source code template blog dengan title tag yang SEO friendly.

Script

<b:skin><![CDATA[

body {background-color: #cab894;background-position: center center;}

a:link {font-family: ‘PT Serif Caption’, serif; font-size: 15px; color:#3094db;}

a:hover {color: #4d4544;}

a {color: #3094db;}

]]></b:skin>

</head>

<body>

<b:section class=’main’ id=’main’>

<b:widget id=’Blog1′ locked=’true’ title=’Posting Blog’ type=’Blog’></b:widget>

</b:section>

</body>

</HTML>

Cara Membuat Template Blog yang Ringan dan Fast Loading

Selanjutnya kita akan menciptakan template blog kita menjadi sangat ringan dan cepat loadingnya.

Sebelumnya kita cek terlebih dahulu kecepatan loading blog kita melalui Google PageSpeed Insights. Masukkan alamat blog Anda kemudian pilih Analyze. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Perhatikan perbedaan hasil yang diperlihatkan dikala blog dibuka pada perangkat mobile, dan pada perangkat desktop. Bedanya sangat signifikan. Pada tampilan mobile didapat nilai 75, sementara pada tampilan desktop diperoleh nilai 91. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Hal ini terjadi lantaran secara default Blogger memang membedakan template mobile dan desktop. Kaprikornus modifikasi template yang telah kita lakukan hingga di sini hanya berlaku kalau blog kita dibuka di perangkat desktop. Ketika blog dibuka pada perangkat mobile, template-nya akan bermetamorfosis template bawaan Blogger.

Menonaktifkan Template Mobile

Solusinya yaitu dengan menonaktifkan template mobile, sanggup Anda lakukan dengan masuk ke Theme, kemudian pilih roda gerigi yang terletak di bawah template mobile. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Pilih No. Show desktop theme on mobile devices. Save untuk menonaktifkan template mobile. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Sekarang cek kembali kecepatan blog Anda. Ternyata skornya masih tetap sama! Tidak ada perubahan.

Tetapi setidaknya kini dikala blog dibuka pada perangkat mobile akan sama tampilannya dengan tampilan desktop.

Belum ada posting, tidak ada widget, font standar, tidak ada hal-hal yang bisa dikatakan memberatkan loading. Tetapi kenapa skornya mentok hanya di 91? Padahal source code template blog kita sangat sederhana.

Hal ini diakibatkan lantaran tanpa sepengetahuan kita, secara default Blogger memuat Javascript dan CSS yang dihosting (tidak tertanam pribadi di template), sehingga memberatkan loading blog kita.

Lalu bagaimana solusinya?

Selain memperlihatkan skor kecepatan blog kita dalam rentang nilai maksimal 100, Google PageSpeed Insights juga memperlihatkan solusi yang sanggup dilakukan pengelola blog untuk mempercepat kecepatan loading blog mereka.

Perhatikan pada kepingan Possible Optimizations. Ada 2 duduk masalah utama yang mengakibatkan template blog kita lambat dimuat. Yang pertama lantaran CSS bundle, yang kedua lantaran Leverage Browser Caching. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Menghapus Javascript Google Plus One

Kita mulai dari Leverage Browser Caching terlebih dahulu. Berisi j4vascript Google Plus One yang dimuat oleh blog kita, padahal kita tidak menggunakannya. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Bagaimana cara menghapusnya sedangkan j4vascript tersebut tidak ada di dalam source code?

Solusinya dengan mengubah tag epilog body </body>

Menjadi tag epilog body yang telah dimodifikasi menyerupai di bawah ini.

Script

<!–</body>–>

Jika Anda mengecek kembali kecepatan loading blog Anda, permasalahan Leverage Browser Caching tidak akan ditemukan lagi, tetapi skornya tetap, tidak bertambah.

Hal ini disebabkan lantaran kita belum mengatasi duduk masalah utama yang mengakibatkan lemotnya blog kita, yaitu 2 CSS bundle yang dihosting, bukan ditanam secara pribadi di template, sehingga membutuhkan waktu lebih untuk melaksanakan kontak server terlebih dahulu. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Menghilangkan CSS Bundle

Kita sanggup meningkatkan kecepatan loading blog kita dengan menghilangkan CSS bundle, yang sanggup dilakukan dengan mengubah tag head berikut. <head>

Menjadi tag head modifikasi di bawah ini. <head>

Modifikasi juga perlu dilakukan pada tag epilog head. </head>

Menjadi menyerupai ini. <!–<head/>–>

Sekarang source code template blog Anda menjadi menyerupai berikut.

Script

<b:skin><![CDATA[

body {background-color: #cab894;background-position: center center;}

a:link {font-family: ‘PT Serif Caption’, serif; font-size: 15px; color:#3094db;}

a:hover {color: #4d4544;}

a {color: #3094db;}

]]></b:skin>

<!–<head/>–>

<body>

<b:section class=’main’ id=’main’>

<b:widget id=’Blog1′ locked=’true’ title=’Posting Blog’ type=’Blog’></b:widget>

</b:section>

</body>

</HTML>

Simpan dan lihat tampilan blog Anda, Anda akan menemukan sedikit perubahan. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Perhatikan ada 2 goresan pena No Posts di blog kita. Hal ini terjadi lantaran CSS bundle tolong-menolong juga mempunyai tugas sebagai pengatur tampilan blog kita. Oleh lantaran itu, menghilangkan CSS bundle sedikit banyak akan menghipnotis tampilan blog kita.

Solusinya yaitu dengan menanamkan style CSS yang saya dapatkan dari dalam file CSS bundle berikut pribadi di dalam template kita.

Script

#blog-pager-newer-link {float: left;}

#blog-pager-older-link {float: right;}

#blog-pager {text-align: center;margin: 20px 0px 0px 1px;}

.status-msg-wrap{font-size:110%;width:90%;margin:10px auto;position:relative}

.status-msg-border{border:1px solid #000;filter:alpha(opacity=40);-moz-opacity:.4;opacity:.4;width:100%;position:relative}

.status-msg-bg{background-color:#ccc;opacity:.8;filter:alpha(opacity=30);-moz-opacity:.8;width:100%;position:relative;z-index:1}

.status-msg-body{text-align:center;padding:.3em 0;width:100%;position:absolute;z-index:4}

.status-msg-hidden{visibility:hidden;padding:.3em 0}

.status-msg-wrap a{padding-left:.4em;text-decoration:underline}

Sehingga source code template blog kita akan menjadi menyerupai berikut.

Script

#blog-pager-newer-link {float: left;}

#blog-pager-older-link {float: right;}

#blog-pager {text-align: center;margin: 20px 0px 0px 1px;}

Simpan template blog Anda dan lihat tampilannya sekarang. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Cek kecepatan loading blog Anda sekarang. Seharusnya Anda mendapat skor hampir tepat baik pada tampilan mobile maupun desktop, 99! Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Sampai tahap ini apakah Anda paham dengan langkah-langkah yang saya berikan? Jika belum silahkan tinggalkan pertanyaan pada kolom komentar. Jika sudah paham silahkan melanjutkan membaca serial ketiga panduan menciptakan template blog sendiri berikut : Membuat Struktur Dasar Template Blog Blogger.

Selamat, Anda gres saja menuntaskan serial kedua dari 11 serial panduan menciptakan template blog sendiri. Pemahaman Anda sudah mencapai 10%.

Membuat Struktur Dasar Template Blog Blogger

Saat ini Anda sedang membaca serial ketiga dari 11 seri panduan menciptakan template blog sendiri. dengan source code template blog sebagai berikut.

Script

<b:skin><![CDATA[

/* RESET */

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, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;height: auto;border-top-width: 0;border-bottom-width: 0;border-left-width: 0;}

blockquote:before, blockquote:after,q:before, q:after {content: ”;content: none;}

blockquote, q {quotes: none;}

:focus {outline: 0;}

.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}

ins {text-decoration: none;}

del {text-decoration: line-through;}

table {border-collapse: collapse;border-spacing: 0;}

body {background-color: #cab894;background-position: center center;}

a:link {font-family: ‘PT Serif Caption’, serif; font-size: 15px; color:#3094db;}

a:hover {color: #4d4544;}

a {color: #3094db;}

#blog-pager-newer-link {float: left;}

#blog-pager-older-link {float: right;}

#blog-pager {text-align: center;margin: 20px 0px 0px 1px;}

Kali ini kita akan berguru mengatur tampilan struktur dasar atau tata letak template blog, yang tentu saja dilakukan memakai CSS.

Berbicara ihwal CSS, sebelumnya kita telah berguru bahwa CSS di dalam template blog di letakkan di dalam tag b:skin.

Script

<b:skin><![CDATA[

/*CSS di sini…*/

]]></b:skin>

Sebenarnya selain diletakkan di dalam tag b:skin, CSS juga sanggup diletakkan di dalam tag style berikut.

Script

Semua tag CSS yang diletakkan di dalam tag b:skin mempunyai warna yang sama, sedangkan kalau diletakkan di dalam tag style akan berwarna spesifik sehingga memudahkan pengeditan. Perbedaannya silahkan perhatikan gambar di bawah ini. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Selain itu, berdasarkan pengalaman, CSS yang diletakkan di dalam tag style lebih terjamin ditampilkan pada browser lintas platform, daripada dikala ditempatkan di dalam tag b:skin.

Oleh lantaran itu saya sangat merekomendasikan untuk meletakkan CSS template blog Anda di dalam tag style.

Mengubah tag b:skin Menjadi tag style Untuk Penempatan CSS

Pertama amankan CSS Anda terlebih dahulu dengan mem-backup-nya ke dalam notepad.

Kemudian nonaktifkan tag b:skin dengan cara mengubah tag b:skin berikut.

Script

<b:skin><![CDATA[

]]></b:skin>

Menjadi menyerupai ini.

Script

Tambahkan tag style di bawahnya. Kemudian tempatkan CSS yang telah Anda backup di antara tag style, sehingga kurang lebih menyerupai berikut.

Script

Jadi source code template blog kita kini akan menjadi menyerupai berikut.

Script

a:link {font-family: ‘PT Serif Caption’, serif; font-size: 15px; color:#3094db;}

a:hover {color: #4d4544;}

a {color: #3094db;}

#blog-pager-newer-link {float: left;}

#blog-pager-older-link {float: right;}

#blog-pager {text-align: center;margin: 20px 0px 0px 1px;}

<!–<head/>–>

<body>

<b:section class=’main’ id=’main’>

<b:widget id=’Blog1′ locked=’true’ title=’Posting Blog’ type=’Blog’></b:widget>

</b:section>

<!–</body>–>

</HTML>

6 Elemen Utama Template Blog

Berdasarkan tata letaknya, secara umum template blog terdiri dari 6 elemen utama, yaitu :

Body

Body atau badan merupakan kepingan dari HTML yang bertanggung jawab untuk menampilkan elemen-elemen blog. Semua elemen blog harus berada di dalam body biar sanggup ditampilkan.

Wrapper

Wrapper atau sering disebut juga sebagai outer-wrapper merupakan wadah pembungkus terluar elemen-elemen blog sesudah body.

Header-Wrapper

Header-wrapper merupakan kepingan yang bertanggung jawab terhadap tampilan header blog. Header-wrapper menempati kepingan paling atas sebuah blog. Biasanya berisi informasi judul dan deskripsi blog.

Content-Wrapper

Content-wrapper yaitu kepingan yang mengatur tampilan posting. Posisinya biasanya berada di tengah dan berfungsi sebagai daerah konten atau isi blog.

Sidebar-Wrapper

Sidebar-wrapper yaitu kepingan yang mengatur tampilan sidebar. Letaknya biasanya berdampingan dengan content-wrapper lantaran bertindak sebagai pendukung. Sidebar-wrapper biasanya berisi widget atau gadget, informasi penulis, kolom pencarian, dan sebagai daerah iklan.

Footer-Wrapper

Footer-wrapper merupakan kepingan yang bertanggung jawab mengatur tampilan footer blog. Footer-wrapper menempati kepingan paling bawah sebuah blog. Biasanya footer-wrapper dimanfaatkan oleh pengelola blog sebagai daerah untuk menginformasikan kontak pengelola blog atau sebagai daerah memasang iklan.

Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Gambar di atas merupakan susunan elemen-elemen template blog yang akan kita buat.

Sebenarnya Anda bisa menambah atau mengurangi jumlah dan mengatur posisi elemen blog sesuka hati. Namun sebagai awalan, kita akan menciptakan template blog dengan susunan elemen blog sederhana menyerupai gambar di atas.

Menambahkan CSS Struktur Dasar Template Blog

Pertama yang harus kita lakukan yaitu mengatur tampilan struktur dasar template blog kita memakai CSS di bawah ini.

Script

#wrapper {background: #fff; width: 90%; padding: 20px; margin: 20px auto;}

#header-wrapper {background:#fff; width: 100%; height:auto; margin: 0 auto; border:1px solid #eaeaea;}

.header {text-align:center}

#content-wrapper {background: transparent; width:65%; float:left; border:1px solid #eaeaea; margin:10px 0;}

#sidebar-wrapper {background: transparent; width:30%; float:right; border:1px solid #eaeaea; margin:10px 0;}

#footer-wrapper {background:transparent; width:100%; border:1px solid #eaeaea; margin:10px 0;}

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}

Penjelasan singkat :

#wrapper untuk mengatur template secara keseluruhan.

#header-wrapper mengatur tampilan header.

.header untuk mengatur kepingan header secara lebih spesifik. Misal mengatur judul blog.

#content-wrapper mengatur kepingan konten atau posting.

#sidebar-wrapper mengatur daerah widget.

#footer-wrapper mengatur kepingan footer.

.clearfix ditambahkan untuk menghilangkan imbas float biar tidak merusak tampilan elemen selanjutnya.

Memanggil Elemen-elemen Utama Template Blog

Selanjutnya yaitu menulis syntax pemanggilan terhadap elemen-elemen utama template blog yang diletakkan di dalam kepingan body.

Script

Jadi kini source code template kita menjadi menyerupai di bawah ini.

Script

a:link {font-family: ‘PT Serif Caption’, serif; font-size: 15px; color:#3094db;}

a:hover {color: #4d4544;}

a {color: #3094db;}

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}

#blog-pager-newer-link {float: left;}

#blog-pager-older-link {float: right;}

#blog-pager {text-align: center;margin: 20px 0px 0px 1px;}

<!–<head/>–>

<body>

<div id=’wrapper’>

<header id=’header-wrapper’><b:section class=’header’ id=’header’ maxwidgets=’1′>

<b:widget id=’Header1′ locked=’true’ title=’Ganteng id (Header)’ type=’Header’></b:widget>

</b:section>

</header>

<div class=’clearfix’/>

<aside id=’content-wrapper’>

<b:section class=’main’ id=’main’>

<b:widget id=’Blog1′ locked=’true’ title=’Posting Blog’ type=’Blog’></b:widget>

</b:section>

</aside>

<aside id=’sidebar-wrapper’>

<b:section class=’sidebar’ id=’sidebar’ showaddelement=’yes’></b:section>

</aside>

<div class=’clearfix’/>

<footer id=’footer-wrapper’>

<b:section class=’footer’ id=’footer’ showaddelement=’yes’></b:section>

</footer>

</div>

<!–</body>–>

</HTML>

Sekarang simpan template blog Anda dan lihat hasilnya, seharusnya akan tampak menyerupai gambar di bawah ini. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Setelah menyimpan template blog Anda, cobalah menutup tab browser yang sedang Anda gunakan. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Perhatikan peringatan yang muncul seolah Anda belum menyimpan template Anda. Jangan khawatir, pilih saja Leave Page, template Anda sudah tersimpan, kok. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Peringatan muncul lantaran secara default Blogger akan menambahkan elemen-elemen aksesori di dalam content-wrapper menyerupai kotak komentar, penanggalan posting, posting mobile, sharing button, dan lain-lain. Sebagai seorang blogger niscaya kita ingin mempunyai template sendiri √ Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

Meskipun tidak semua elemen yang ditambahkan tersebut kita gunakan semua, namun hingga kini belum ada yang berhasil menghapus dan mengatur ulang secara total elemen-elemen tersebut. Tapi damai saja, elemen-elemen tersebut sudah saya cek tidak menghipnotis validasi maupun kecepatan blog.

Bahkan pada tahap selanjutnya kita juga akan memodifikasi elemen-elemen tersebut.

Silahkan melanjutkan membaca serial keempat panduan menciptakan template blog sendiri berikut : Membuat Menu Navigasi Blog.

Selamat, Anda gres saja menuntaskan serial ketiga dari 11 serial panduan menciptakan template blog sendiri. Pemahaman Anda sudah mencapai 20%. Kini Anda sudah mengerti bagaimana cara menciptakan struktur dasar template blog sederhana.

Sumber aciknadzirah.blogspot.com

blog ruangguru

Monday, January 1, 2018

√ Cara Menciptakan Template Blog Blogger Sendiri Mulai Dari Awal

Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

XML

CSS

XML

Membuat Template Blog Blogspot Mulai Dari Nol

Membuat Struktur XML dan HTML

Menambahkan CSS

Memanggil Bagian Posting

Menambah Tag Title

Cara Membuat Blog yang Ringan, Valid HTML5, dan SEO Friendly

Cara Membuat Blog yang Ringan, Valid HTML5, dan SEO Friendly

Meta Tag Dasar Blogger

Cara Membuat Template Blog SEO Friendly

Cara Membuat Template Blog yang Ringan dan Fast Loading

Menonaktifkan Template Mobile

Menghapus Javascript Google Plus One

Menghilangkan CSS Bundle

Membuat Struktur Dasar Template Blog Blogger

Mengubah tag b:skin Menjadi tag style Untuk Penempatan CSS

6 Elemen Utama Template Blog

Menambahkan CSS Struktur Dasar Template Blog

Memanggil Elemen-elemen Utama Template Blog

hiyahiya

Ads 970x90

blog ruangguru

Monday, January 1, 2018

√ Cara Menciptakan Template Blog Blogger Sendiri Mulai Dari Awal

Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal

XML

CSS

XML

Membuat Template Blog Blogspot Mulai Dari Nol

Membuat Struktur XML dan HTML

Menambahkan CSS

Memanggil Bagian Posting

Menambah Tag Title

Cara Membuat Blog yang Ringan, Valid HTML5, dan SEO Friendly

Cara Membuat Blog yang Ringan, Valid HTML5, dan SEO Friendly

Meta Tag Dasar Blogger

Cara Membuat Template Blog SEO Friendly

Cara Membuat Template Blog yang Ringan dan Fast Loading

Menonaktifkan Template Mobile

Menghapus Javascript Google Plus One

Menghilangkan CSS Bundle

Membuat Struktur Dasar Template Blog Blogger

Mengubah tag b:skin Menjadi tag style Untuk Penempatan CSS

6 Elemen Utama Template Blog

Menambahkan CSS Struktur Dasar Template Blog

Memanggil Elemen-elemen Utama Template Blog

Artikel Terkait

hiyahiya

Ads 970x90