Cara Menciptakan 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 ialah 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 ialah blog yang terlihat baik oleh mesin pencari, bukan pengunjung.
Artinya mereka hanya berfokus menciptakan blog yang disukai oleh mesin pencari, tanpa mempedulikan konten yang bekerjsama 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 ialah 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 saat 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 mempunyai kegunaan 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 ialah 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 :
<?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> Percaya atau tidak dengan source code di atas blog kita sudah valid HTML5?
Cara Membuat Template Blog Valid HTML5
Anda sanggup mengecek valid tidaknya blog Anda melalui W3C Validation Service. Masukkan alamat blog Anda, kemudian pilih Check.
Perhatikan tidak ada error yang muncul, yang berarti blog Anda telah valid HTML5.
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 arahan meta tag all head content di bawah ini.
<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 ialah saat kita menyisipkan meta tag all head content ke dalam serpihan head, akan muncul error pada hasil validasi. Coba sisipkan meta tag tersebut pada serpihan head, kemudian simpan, dan ulangi validasi.
<?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.
Lalu solusinya bagaimana? Solusinya ialah dengan mengubah meta tag all head content dengan meta tag berikut :
<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>
Sehingga source code template blog kita menjadi menyerupai berikut :
<?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 mencar ilmu tahap awal. Di sini hanya akan dibahas SEO simpel 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.
<title><data:blog.title/></title>
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 pola saat 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.
Padahal seharusnya tab browser menampilkan informasi halaman yang sedang dikunjungi. Makara 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.
Solusinya ialah dengan mengubah tag title sebelumnya,
<title><data:blog.title/></title>
dengan tag title di bawah ini.
<!-- 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 ialah homepage (halaman utama) blog, maka tab browser akan menampilkan "Judul Blog" saja, diatur dalam tag berikut.
<b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if>
- Ketika yang dikunjungi ialah halaman posting, akan menampilkan "Judul Posting - Judul Blog".
<b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>
- Ketika yang dikunjungi ialah halaman arsip, akan menampilkan "Archive for Judul Posting".
<b:if cond='data:blog.pageType == "archive"'><title>Archive for <data:blog.pageName/></title></b:if>
- Ketika yang dikunjungi ialah halaman statis, akan menampilkan "Judul Blog".
<b:if cond='data:blog.pageType == "static_page"'><title><data:blog.pageName/></title></b:if>
- Ketika yang dikunjungi ialah halaman index, akan menampilkan "Judul Posting - Judul Blog" berdasarkan label.
<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 ialah halaman error (tidak ditemukan), akan menampilkan "Page Not Found".
<b:if cond='data:blog.pageType == "error_page"'><title>Page Not Found</title></b:if>
- Ketika yang dikunjungi ialah halaman index, akan menampilkan "Judul Posting - All Post".
<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>
Makara sekarang, kita sudah mempunyai source code template blog dengan title tag yang SEO friendly.
<?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> <!-- 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> <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.
Perhatikan perbedaan hasil yang diperlihatkan saat 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.
Hal ini terjadi lantaran secara default Blogger memang membedakan template mobile dan desktop. Makara 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 ialah dengan menonaktifkan template mobile, sanggup Anda lakukan dengan masuk ke Theme, kemudian pilih roda gerigi yang terletak di bawah template mobile.
Pilih No. Show desktop theme on mobile devices. Save untuk menonaktifkan template mobile.
Sekarang cek kembali kecepatan blog Anda. Ternyata skornya masih tetap sama! Tidak ada perubahan.
Tetapi setidaknya kini saat blog dibuka pada perangkat mobile akan sama tampilannya dengan tampilan desktop.
Sekarang perhatikan template blog Anda baik-baik.
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 mengatakan solusi yang sanggup dilakukan pengelola blog untuk mempercepat kecepatan loading blog mereka.
Perhatikan pada serpihan Possible Optimizations. Ada 2 duduk kasus utama yang menyebabkan template blog kita lambat dimuat. Yang pertama lantaran CSS bundle, yang kedua lantaran Leverage Browser Caching.
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.
Bagaimana cara menghapusnya sedangkan j4vascript tersebut tidak ada di dalam source code?
Solusinya dengan mengubah tag epilog body di bawah ini.
</body>
Menjadi tag epilog body yang telah dimodifikasi menyerupai di bawah ini.
<!--</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 kasus utama yang menyebabkan 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.
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.
<?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> <!-- 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> <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.
Perhatikan ada 2 goresan pena No Posts di blog kita. Hal ini terjadi lantaran CSS bundle bekerjsama juga mempunyai tugas sebagai pengatur tampilan blog kita. Oleh lantaran itu, menghilangkan CSS bundle sedikit banyak akan mensugesti tampilan blog kita.
Solusinya ialah dengan menanamkan style CSS yang saya dapatkan dari dalam file CSS bundle berikut pribadi di dalam template kita.
#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.
<?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> <!-- 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> <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;} #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} ]]></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 template blog Anda dan lihat tampilannya sekarang.
Cek kecepatan loading blog Anda sekarang. Seharusnya Anda mendapat skor hampir tepat baik pada tampilan mobile maupun desktop, 99!
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%.
10%
0 Response to "Cara Menciptakan Blog Yang Ringan, Valid Html5, Dan Seo Friendly"
Posting Komentar