Kita tahu Jutaan blog telah diberdayakan oleh platform Google Blogger. Mereka menciptakan sebuah platform yang bisa dihuni banyak orang untuk menelurkan uneg unegnya dalam bentuk BLOG.
{getToc} $title={Table of Contents}
Taukah kalian, Hal pertama yang diperhatikan pengunjung saat mengunjungi blog adalah desain atau templateenya. Tema yang dirancang khusus dengan konsep yang matang dan user friendly memiliki kekuatan untuk mempertahankan pengunjung untuk jangka waktu yang lebih lama. Apalagi dengan muatan blog yang cepat, atau kecepatan loading blognya ringan.
BTW RahmanCyber.NET ini udah ringan belum ya, hehe.. sepertinya saya belum menemukan cara lagi untuk mengkompres templateenya lebih dari ini, karena memang disini saya menggunakan berbagai script yang membutuhkan loading, tentunya mendukung tampilan utama, jadi jika kalian cek skor page speednya, kemungkinan akan berbeda hasilnya antara halaman utama dengan halaman per materi postingan.. dihalaman utamanya saya menggunakan banyak Recent Post by Label, karena saya mengkonsep website ini agar mirip seperti website berita.. tapi isinya malah tidak berita.. hehe
BTW, langsung ke pembahasan aja...
Hari ini, kita akan belajar untuk membuat kode templatee Blogger kustom. Penekanan dan fokus kita terutama akan pada konsep-konsep desain templatee inti daripada pergi untuk desain mewah. Dengan cara ini, kamu dapat membuat berbagai jenis templatee dengan desain unik. Jika kamu sudah terbiasa dengan HTML dan CSS dasar, kamu dapat membawa desain kamu ke tingkat selanjutnya — cukup mudah. Saya tidak perlu mengatakan bahwa kamu harus mencoba latihan mendesain templatee ini di blog demo pribadi. Kemudian, kamu dapat mengekspor dan mengimpornya di blog langsung. Jika kamu membuat template seperti itu untuk pertama kalinya, hindari memilih tata letak yang rumit dan mulailah dengan yang lebih sederhana untuk memahami dasar-dasarnya. Mari kita mulai dan belajar merancang template Blogger khusus — dalam beberapa langkah.
Hampir semua konsep desain yang disajikan di sini dapat diterapkan ke template yang ada juga asalkan kamu tahu persis apa yang kamu lakukan dan bagaimana perubahan yang diperkenalkan akan mempengaruhi desain dan tata letak.
Sekarang, silahkan sobat buat blog pengujian (Jangan di Blog utama ya...) di dashboard Bloggermu untuk memulai proses mendesain template.
Kita akan mulai dengan membuat kerangka mentah dari template. Ini akan membantu kita dalam memahami struktur dan tata letak templat — dengan cara yang mudah.
Baris pertama dari template menyatakannya sebagai dokumen XML. Ini penting agar browser web dapat mem-parsing dan memproses kode templat dengan cara yang benar.
Baris berikutnya <! DOCTYPE html> menentukan bahwa kita akan menggunakan kode HTML5 dalam dokumen XML kami. Sekali lagi, ini membantu browser web memproses kode templat secara efisien.
Atribut yang ditambahkan ke tag menyatakan ruang nama XML untuk dokumen. Itu juga memiliki atribut bahasa untuk dokumen. Jika kamu mengkodekan templat kamu dalam bahasa selain bahasa Inggris, ubah kode bahasanya.
Bagian tag <head> kosong adalah tempat metadata halaman web akan pergi. Ini mencakup berbagai meta tag, gaya CSS, dan skrip. kita juga memiliki bagian <body> kosong di mana desain dan tata letak akan dikodekan.
Mari beralih ke langkah selanjutnya dan tambahkan metadata dasar dan esensial ke bagian <head>.
Tag <b: include> pertama menambahkan beberapa tag SEO paling penting dalam bagian ini. Ini termasuk tag deskripsi halaman yang sangat penting juga.
Yang berikutnya cukup jelas dan mudah dipahami. Tag <title> menambahkan judul halaman ke bagian kepala. Semua tag ini penting untuk mesin pencari dan perayap.
Tag <meta> yang memiliki nama atribut = 'viewport' ditambahkan untuk mengaktifkan mode desain responsif sehingga tata letak ditampilkan — dengan baik — pada perangkat yang lebih kecil juga.
Tag <b: skin> mencakup semua kode CSS untuk membuat tata letak dan desain blog. Saat ini, ia kosong dan akan diisi dengan aturan CSS yang relevan — pada tahap selanjutnya.
Sekarang, mari kita beralih ke bagian <body> dan melihat semua elemen penting di dalamnya.
Mari kita mulai dengan bagian <header>. Ini berbeda dari bagian kepala yang berisi metadata dokumen.
Bagian <header> termasuk judul dan deskripsi blog. kamu juga dapat menggantinya dengan logo khusus. kamu mungkin melihat tag <b: section>. Itulah cara kita membuat berbagai jenis bagian dalam template Blogger.
Dalam bagian ini, kita telah membuat <b: widget> yang memiliki atribut type = 'Header' yang mencakup semua fungsionalitas header template khas Blogger.
Berikutnya adalah bagian posting blog utama di mana semua artikel tertulis muncul di halaman. Inilah cara membuat bagian ini.
kamu dapat mencatat bahwa kita telah menambahkan atribut type = 'Blog' ke tag <b: widget>. Ini adalah atribut yang sudah ditentukan sebelumnya yang secara otomatis menambahkan semua fungsi yang diperlukan untuk bagian spesifik ini.
Secara otomatis menghasilkan konten yang diperlukan untuk homepage, halaman arsip, halaman pencarian, dan tentu saja untuk halaman posting tunggal.
Widget tambahan dapat ditambahkan ke bagian ini karena kita telah menambahkan atribut showaddelement = 'yes' ke tag <b: section>. Blogger sering menggunakan fitur ini untuk menambahkan konten khusus di bagian atas atau bawah pos.
Bagian penting berikutnya adalah bilah samping yang akan muncul di sisi kanan konten utama.
kita telah menggunakan tag HTML5 <aside> untuk bilah sisi. Meskipun tidak wajib untuk menggunakannya dan dapat dengan mudah diganti dengan tag <div> biasa, saya sangat merekomendasikan menggunakannya untuk bagian ini.
kamu mungkin memperhatikan bahwa bagian sidebar tidak mengandung widget apa pun. Jadi, pada dasarnya, kita telah membuat sidebar kosong yang dapat diisi dengan widget yang diinginkan melalui antarmuka dasbor.
Dan, yang terakhir adalah bagian catatan kaki kita. Berikut cuplikan kode.
Ini bagian footer sederhana yang terdiri dari deklarasi hak cipta. Perhatikan penggunaan tag HTML5 <footer> untuk yang ini. Nama blog ditulis — secara dinamis — setelah pernyataan hak cipta.
Kita juga bisa kok membuat bagian footer multi-kolom dan widget juga bisa kita aktifkan. Kesimpulannya Kompleksitas atau fleksibilitas tata letak sepenuhnya tergantung pada kebutuhan kamu dan pada keterampilan teknis kamu.
Jadi, beginilah sobat tampilannya seluruh kode templat — pada tahap ini
Pertama-tama, saya menyertakan konten bagian tubuh dalam tag <div>. Ini adalah pembungkus untuk seluruh struktur blog.
kamu mungkin memperhatikan bahwa saya telah merangkum bagian konten posting dan sidebar di dalam 3 tag <div>. Masing-masing tag ini telah diberi beberapa kelas dan id CSS.
kamu juga dapat mencatat bahwa .clumn kelas CSS telah ditambahkan ke bagian posting dan sidebar. Semua tambahan baru ini digunakan untuk membuat struktur tata letak inti blog kita dengan benar dengan bantuan aturan CSS khusus.
Sebelum kita melanjutkan mendesain tata letak kita melalui aturan CSS, mari kita lihat mockup untuk mendapatkan ide yang adil tentang itu. Ini akan menjadi tata letak dua kolom klasik yang umumnya digunakan untuk blog.
Semua aturan CSS khusus akan ditulis di antara tag <b: skin> seperti yang ditunjukkan di bawah ini. Saya telah memberikan tinjauan umum (lihat di bawah) tentang urutan aturan CSS ini akan muncul.
Alih-alih menyajikan seluruh kode CSS — yang cukup panjang — saya memasukkan aturan CSS untuk struktur tata letak inti. Lihatlah!
Kamu dapat memeriksa semua aturan CSS di dalam file template yang tersedia sebagai bonusss di akhir tutorial ini. Dan, inilah skema yang digunakan... standard ya.. hehe
Langsung aja sedot buat latihan.. eh copy paste ke blog baru.. dan lihatlah hasilnya..
nah saya harap, semoga tutorial ini bermanfaat.. ^_^ | oh iya, itu template saya tekankan lagi ya.. sangat basic... untuk belajar aja..
F.N.A - Red
BTW RahmanCyber.NET ini udah ringan belum ya, hehe.. sepertinya saya belum menemukan cara lagi untuk mengkompres templateenya lebih dari ini, karena memang disini saya menggunakan berbagai script yang membutuhkan loading, tentunya mendukung tampilan utama, jadi jika kalian cek skor page speednya, kemungkinan akan berbeda hasilnya antara halaman utama dengan halaman per materi postingan.. dihalaman utamanya saya menggunakan banyak Recent Post by Label, karena saya mengkonsep website ini agar mirip seperti website berita.. tapi isinya malah tidak berita.. hehe
BTW, langsung ke pembahasan aja...
Pelajaran Pertama Blogger CUSTOM TEMPLATE
Hari ini, kita akan belajar untuk membuat kode templatee Blogger kustom. Penekanan dan fokus kita terutama akan pada konsep-konsep desain templatee inti daripada pergi untuk desain mewah. Dengan cara ini, kamu dapat membuat berbagai jenis templatee dengan desain unik. Jika kamu sudah terbiasa dengan HTML dan CSS dasar, kamu dapat membawa desain kamu ke tingkat selanjutnya — cukup mudah. Saya tidak perlu mengatakan bahwa kamu harus mencoba latihan mendesain templatee ini di blog demo pribadi. Kemudian, kamu dapat mengekspor dan mengimpornya di blog langsung. Jika kamu membuat template seperti itu untuk pertama kalinya, hindari memilih tata letak yang rumit dan mulailah dengan yang lebih sederhana untuk memahami dasar-dasarnya. Mari kita mulai dan belajar merancang template Blogger khusus — dalam beberapa langkah.
Hampir semua konsep desain yang disajikan di sini dapat diterapkan ke template yang ada juga asalkan kamu tahu persis apa yang kamu lakukan dan bagaimana perubahan yang diperkenalkan akan mempengaruhi desain dan tata letak.
Sekarang, silahkan sobat buat blog pengujian (Jangan di Blog utama ya...) di dashboard Bloggermu untuk memulai proses mendesain template.
Biasanya pembuat template yang biasa kita kenal juga melakukan hal yang sama.. dia membuat blog baru khusus untuk merancang template baru.
Buat Kerangka Template Baku atau Dasar
Kita akan mulai dengan membuat kerangka mentah dari template. Ini akan membantu kita dalam memahami struktur dan tata letak templat — dengan cara yang mudah.
Deklarasi Dokumen XML
Gunakan editor kode favorit kamu untuk membuat templat ini. Mari kita mulai dengan struktur minimal berikut.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='en-US' 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' xmlns:og='http://ogp.me/ns#'>
<head>
</head>
<body>
</body>
</html>
Baris pertama dari template menyatakannya sebagai dokumen XML. Ini penting agar browser web dapat mem-parsing dan memproses kode templat dengan cara yang benar.
Baris berikutnya <! DOCTYPE html> menentukan bahwa kita akan menggunakan kode HTML5 dalam dokumen XML kami. Sekali lagi, ini membantu browser web memproses kode templat secara efisien.
Atribut yang ditambahkan ke tag menyatakan ruang nama XML untuk dokumen. Itu juga memiliki atribut bahasa untuk dokumen. Jika kamu mengkodekan templat kamu dalam bahasa selain bahasa Inggris, ubah kode bahasanya.
Perancangan Bagian Head
Bagian tag <head> kosong adalah tempat metadata halaman web akan pergi. Ini mencakup berbagai meta tag, gaya CSS, dan skrip. kita juga memiliki bagian <body> kosong di mana desain dan tata letak akan dikodekan.
Mari beralih ke langkah selanjutnya dan tambahkan metadata dasar dan esensial ke bagian <head>.
<head>
<b:include data='blog' name='all-head-content' />
<title><data:blog.pageTitle/></title>
<meta content='width=device-width, initial-scale=1' name='viewport' />
<b:skin>
<![CDATA[
/* Custom CSS rules goes here... */
]]>
</b:skin>
</head>
Tag <b: include> pertama menambahkan beberapa tag SEO paling penting dalam bagian ini. Ini termasuk tag deskripsi halaman yang sangat penting juga.
Yang berikutnya cukup jelas dan mudah dipahami. Tag <title> menambahkan judul halaman ke bagian kepala. Semua tag ini penting untuk mesin pencari dan perayap.
Tag <meta> yang memiliki nama atribut = 'viewport' ditambahkan untuk mengaktifkan mode desain responsif sehingga tata letak ditampilkan — dengan baik — pada perangkat yang lebih kecil juga.
Tag <b: skin> mencakup semua kode CSS untuk membuat tata letak dan desain blog. Saat ini, ia kosong dan akan diisi dengan aturan CSS yang relevan — pada tahap selanjutnya.
Perancangan Bagian Body
Sekarang, mari kita beralih ke bagian <body> dan melihat semua elemen penting di dalamnya.
Bagian <body> merangkum semua elemen — yang terlihat — ke pengunjung situs dalam browser web. kamu bebas menambahkan tata letak pilihan kamu di bagian ini.
Mari kita mulai dengan bagian <header>. Ini berbeda dari bagian kepala yang berisi metadata dokumen.
<header>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
</b:section>
</header>
Bagian <header> termasuk judul dan deskripsi blog. kamu juga dapat menggantinya dengan logo khusus. kamu mungkin melihat tag <b: section>. Itulah cara kita membuat berbagai jenis bagian dalam template Blogger.
Dalam bagian ini, kita telah membuat <b: widget> yang memiliki atribut type = 'Header' yang mencakup semua fungsionalitas header template khas Blogger.
Berikutnya adalah bagian posting blog utama di mana semua artikel tertulis muncul di halaman. Inilah cara membuat bagian ini.
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts Section' type='Blog' />
</b:section>
kamu dapat mencatat bahwa kita telah menambahkan atribut type = 'Blog' ke tag <b: widget>. Ini adalah atribut yang sudah ditentukan sebelumnya yang secara otomatis menambahkan semua fungsi yang diperlukan untuk bagian spesifik ini.
Secara otomatis menghasilkan konten yang diperlukan untuk homepage, halaman arsip, halaman pencarian, dan tentu saja untuk halaman posting tunggal.
Widget tambahan dapat ditambahkan ke bagian ini karena kita telah menambahkan atribut showaddelement = 'yes' ke tag <b: section>. Blogger sering menggunakan fitur ini untuk menambahkan konten khusus di bagian atas atau bawah pos.
Bagian penting berikutnya adalah bilah samping yang akan muncul di sisi kanan konten utama.
<aside>
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
</b:section>
</aside>
kita telah menggunakan tag HTML5 <aside> untuk bilah sisi. Meskipun tidak wajib untuk menggunakannya dan dapat dengan mudah diganti dengan tag <div> biasa, saya sangat merekomendasikan menggunakannya untuk bagian ini.
kamu mungkin memperhatikan bahwa bagian sidebar tidak mengandung widget apa pun. Jadi, pada dasarnya, kita telah membuat sidebar kosong yang dapat diisi dengan widget yang diinginkan melalui antarmuka dasbor.
Perancangan Bagian Footer
Dan, yang terakhir adalah bagian catatan kaki kita. Berikut cuplikan kode.
<footer>
<div>
Copyright © 2019 <strong><data:blog.title/></strong>
</div>
</footer>
Ini bagian footer sederhana yang terdiri dari deklarasi hak cipta. Perhatikan penggunaan tag HTML5 <footer> untuk yang ini. Nama blog ditulis — secara dinamis — setelah pernyataan hak cipta.
Kita juga bisa kok membuat bagian footer multi-kolom dan widget juga bisa kita aktifkan. Kesimpulannya Kompleksitas atau fleksibilitas tata letak sepenuhnya tergantung pada kebutuhan kamu dan pada keterampilan teknis kamu.
Jadi, beginilah sobat tampilannya seluruh kode templat — pada tahap ini
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='en-US' 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' xmlns:og='http://ogp.me/ns#'>
<head>
<b:include data='blog' name='all-head-content' />
<title>
<data:blog.pageTitle/>
</title>
<meta content='width=device-width, initial-scale=1' name='viewport' />
<b:skin>
<![CDATA[
/* Custom CSS code goes here... */
]]>
</b:skin>
</head>
<body>
<div id="blog-wrapper">
<header>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
</b:section>
</header>
<div id="content-wrapper">
<div class="content-table">
<div class="content-row">
<b:section class='main column' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts Section' type='Blog' />
</b:section>
<aside class="column">
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
</b:section>
</aside>
<div>
</div>
</div>
<footer>
<div>
Copyright © 2019 <strong><data:blog.title/></strong>
</div>
</footer>
</div>
</body>
</html>
Pertama-tama, saya menyertakan konten bagian tubuh dalam tag <div>. Ini adalah pembungkus untuk seluruh struktur blog.
kamu mungkin memperhatikan bahwa saya telah merangkum bagian konten posting dan sidebar di dalam 3 tag <div>. Masing-masing tag ini telah diberi beberapa kelas dan id CSS.
kamu juga dapat mencatat bahwa .clumn kelas CSS telah ditambahkan ke bagian posting dan sidebar. Semua tambahan baru ini digunakan untuk membuat struktur tata letak inti blog kita dengan benar dengan bantuan aturan CSS khusus.
Mengenal Tata Letak Basic Blogger
Sebelum kita melanjutkan mendesain tata letak kita melalui aturan CSS, mari kita lihat mockup untuk mendapatkan ide yang adil tentang itu. Ini akan menjadi tata letak dua kolom klasik yang umumnya digunakan untuk blog.
Aturan CSS
Semua aturan CSS khusus akan ditulis di antara tag <b: skin> seperti yang ditunjukkan di bawah ini. Saya telah memberikan tinjauan umum (lihat di bawah) tentang urutan aturan CSS ini akan muncul.
<b:skin>
<![CDATA[
/*
1. CSS Reset
2. Core Layout Structure
3. Template Design
4. Utility Classes
5. Media Queries
*/
]]>
</b:skin>
Alih-alih menyajikan seluruh kode CSS — yang cukup panjang — saya memasukkan aturan CSS untuk struktur tata letak inti. Lihatlah!
/* Template's Core Layout */
#blog-wrapper {
width: 1024px;
margin: 0 auto;
}
#content-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.content-table {
display: table;
border-collapse: separate;
}
.content-row {
display: table-row;
}
#main {
padding: 25px 25px 25px 20px;
width: auto;
height: 100%;
display: table-cell;
}
aside {
width: 32%;
height: 100%;
border-left: 1px solid #ddd;
padding: 25px;
display: table-cell;
}
footer {
width: 100%;
clear: both;
border-top: 1px solid #ddd;
padding: 20px;
}
Bonus Template Basic
Kamu dapat memeriksa semua aturan CSS di dalam file template yang tersedia sebagai bonusss di akhir tutorial ini. Dan, inilah skema yang digunakan... standard ya.. hehe
Langsung aja sedot buat latihan.. eh copy paste ke blog baru.. dan lihatlah hasilnya..
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='en-US' 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' xmlns:og='http://ogp.me/ns#'>
<head>
<b:include data='blog' name='all-head-content'/>
<title>
<data:blog.pageTitle/>
</title>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<b:skin><![CDATA[
html{box-sizing:border-box;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}*,*:before,*:after{box-sizing:inherit;margin:0;padding:0;word-wrap:break-word}h1,h2,h3,h4,h5,h6{font-weight:400}table{border-collapse:collapse;border-spacing:0}img,fieldset{border:0}abbr,acronym{text-decoration:none}code{font-family:Consolas,"Courier New",monospace;background:#eee;padding:0 5px;border-radius:2px;border:1px solid #E1DADA}sub,sup{line-height:.5em}img{max-width:100%;height:auto}iframe,video,embed,object{display:block;max-width:100%}img{display:block}img[align="left"]{display:block;float:left;margin-right:1em;margin-bottom:.8em}img[align="right"]{display:block;float:right;margin-bottom:.8em;margin-left:1em}img[align="middle"]{display:block;margin-right:auto;margin-left:auto;text-align:center;float:none;clear:both}input[type="submit"],button{cursor:pointer;overflow:visible;-webkit-appearance:none}body{font-family:Georgia,"Times New Roman",Times,serif;font-size:16px;line-height:27px;font-weight:400;color:#111;background-color:#fff}a{text-decoration:none;color:#2e3ca1}p a{text-decoration:underline}input[type="text"],input[type="number"],input[type="url"],input[type="tel"],input[type="email"],input[type="password"]{border-radius:3px;height:30px!important;padding:15px 10px;-webkit-box-shadow:none;box-shadow:none;border:1px solid #ddd!important;background-color:#f8f8f8;margin-bottom:10px}input[type="submit"],button{border-radius:3px!important;height:32px!important;padding:5px 10px!important;border:1px solid #c0c0c0!important;background:#ddd!important;color:#111!important;width:auto}select,textarea{border-radius:3px;height:auto;padding:15px 10px;-webkit-box-shadow:none;box-shadow:none;border:1px solid #ddd!important;background-color:#f8f8f8;margin-bottom:10px;width:50%}.widget input[type="submit"],.widget button{margin-bottom:8px!important;width:auto!important}#blog-wrapper{width:1024px;margin:0 auto}#content-wrapper{width:100%;height:100%;overflow:hidden}.content-table{display:table;border-collapse:separate}.content-row{display:table-row}#main{padding:25px 25px 25px 20px;width:44em;height:100%;display:table-cell}aside{width:32%;height:100%;border-left:1px solid #ddd;padding:25px;display:table-cell}footer{width:100%;clear:both;border-top:1px solid #ddd;padding:20px}header{border-top:1px solid #ddd;border-bottom:1px solid #ddd;padding:30px 20px;margin-top:25px}h1.title{font-size:40px;font-weight:700;line-height:1.5em}.description span{color:#727272}.date-header span{font-size:15px;color:#696969}.post-title{font-size:28px;line-height:1.25em}.post-body{margin:15px auto}.post-body h1{font-size:33px;margin:0 auto 18px}.post-body h2{font-size:28px;margin:0 auto 14px}.post-body h3{font-size:24px;margin:0 auto 10px}.post-body h4{font-size:20px;margin:0 auto 8px}.post-body h5{font-size:18px;margin:0 auto 8px}.post-body h6{font-size:16px;margin:0 auto 6px;font-weight:700}.post-body a{text-decoration:underline}.post-body a:hover{text-decoration:none}.post-body ul,.post-body ol{margin:0 0 0 25px}.post-body ul{list-style-type:square}.post-body ul li:not(:last-child),.post-body ol li:not(:last-child){margin-bottom:5px}.post-body blockquote{border-left:7px solid #d2d2d2;padding-left:20px;font-style:italic;margin:0 15px;color:#626262}.post-outer{margin-bottom:25px}.post-footer{border-bottom:1px solid #ddd}.post-footer-line-1,.post-footer-line-2,.author-profile{margin-bottom:10px}.post-labels,.post-author,.post-timestamp{font-weight:700}.post-labels a,.post-author a,.post-timestamp a{font-weight:400}.jump-link{float:right}.reactions-iframe{padding-top:8px}.blog-feeds,.post-feeds{margin-bottom:25px}#comments{margin-top:25px}#comments h4{font-size:20px;font-weight:700}#comment-post-message{font-size:16px!important;font-weight:normal!important}#sidebar{overflow:hidden}#sidebar ul li{margin:.25em 0!important}#sidebar .widget{margin-bottom:20px}#sidebar .widget h2{font-size:22px;margin-bottom:10px}#sidebar .Profile .profile-img{margin:0 10px 5px 2px!important}.quickedit,span.blog-admin{display:none!important}.status-msg-wrap{font-size:110%;width:100%;margin:35px auto 10px;position:relative;font-size:15px}.status-msg-border{border:1px solid #868686;filter:alpha(opacity=40);opacity:.4;width:100%;position:relative}.status-msg-bg{background-color:#eee;opacity:.8;filter:alpha(opacity=30);width:100%;position:relative;z-index:1}.status-msg-body{color:#444;text-align:center;padding:.3em 10px;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}p.note,div.note{background:#ddd;padding:15px 20px}p.alert,div.alert{background:#f6f697;padding:15px 20px}p.alert a:hover,div.alert a:hover,p.note a:hover,div.note a:hover{text-decoration:none}p.note a,p.alert a{color:#0a54ca}pre{background-color:#eee;width:100%;white-space:pre;word-wrap:normal;margin-bottom:0;line-height:22px;overflow:auto;clear:both}pre code{display:block;padding:0 15px 20px;border-radius:3px;border:none;font-size:15px;font-family:Consolas,"Courier New",monospace!important}img.frame{padding:.8em;background:#eee;border:1px solid #ddd}img.thin_frame{padding:5px;background:#eee;border:1px solid #ddd}@media screen and (max-width:1040px){.content-table,.content-row,.column{display:block}#blog-wrapper{width:100%}#main{padding:0 25px;width:100%;margin:25px auto 30px;display:block}.Blog{border-bottom:1px solid #ddd}aside{float:none;clear:both;padding:0;width:auto;margin:0 25px;position:relative;border:none}.post-body{line-height:30px}}@media screen and (max-width:900px){.post-body{line-height:29px}}@media screen and (max-width:800px){.post-body{line-height:28px}}@media screen and (max-width:650px){.post-body{line-height:27px}}@media screen and (max-width:500px){.post-body{line-height:26px}input[type="text"],input[type="number"],input[type="url"],input[type="tel"],input[type="email"],input[type="password"],select,textarea{width:100%}img[align="left"],img[align="right"]{display:block;margin-right:auto;margin-left:auto;text-align:center;float:none;clear:both}}@media screen and (max-width:350px){.post-body{line-height:25px}}
]]></b:skin>
</head>
<body>
<div id='blog-wrapper'>
<header>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Minimal Blogger Template (Header)' type='Header'>
<b:widget-settings>
<b:widget-setting name='displayUrl'/>
<b:widget-setting name='displayHeight'>0</b:widget-setting>
<b:widget-setting name='sectionWidth'>976</b:widget-setting>
<b:widget-setting name='useImage'>false</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
<b:widget-setting name='displayWidth'>0</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' 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:tag cond='data:blog.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'>
<data:title/>
</b:tag>
</b:includable>
</b:widget>
</b:section>
</header>
<div id='content-wrapper'>
<div class='content-table'>
<div class='content-row'>
<b:section class='main column' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:widget-settings>
<b:widget-setting name='showDateHeader'>true</b:widget-setting>
<b:widget-setting name='style.textcolor'>#000000</b:widget-setting>
<b:widget-setting name='showShareButtons'>false</b:widget-setting>
<b:widget-setting name='showCommentLink'>true</b:widget-setting>
<b:widget-setting name='style.urlcolor'>#008000</b:widget-setting>
<b:widget-setting name='showAuthor'>false</b:widget-setting>
<b:widget-setting name='disableGooglePlusShare'>true</b:widget-setting>
<b:widget-setting name='style.linkcolor'>#0000ff</b:widget-setting>
<b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
<b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
<b:widget-setting name='style.layout'>1x1</b:widget-setting>
<b:widget-setting name='showLabels'>true</b:widget-setting>
<b:widget-setting name='showLocation'>false</b:widget-setting>
<b:widget-setting name='postLabelsLabel'>Categories:</b:widget-setting>
<b:widget-setting name='showTimestamp'>false</b:widget-setting>
<b:widget-setting name='postsPerAd'>1</b:widget-setting>
<b:widget-setting name='showBacklinks'>false</b:widget-setting>
<b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showInlineAds'>false</b:widget-setting>
<b:widget-setting name='showReactions'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='top'>
<b:if cond='!data:mobile'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
</div></div>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-posts">
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>
</div>
<!-- Ad -->
<b:if cond='data:post.includeAd'>
<div class='inline-ad'>
<data:adCode/>
</div>
</b:if>
</b:loop>
<b:if cond='data:numPosts != 0'>
</div></div>
</b:if>
</div>
<!-- navigation -->
<b:include name='nextprev'/>
<!-- feed links -->
<b:include name='feedLinks'/>
<b:else/>
<b:include name='mobile-main'/>
</b:if>
<b:include cond='data:top.showPlusOne' name='googlePlusBootstrap'/>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
<span expr:class='"item-control " + data:backlink.adminClass'>
<a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
<img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
</a>
</span>
</b:includable>
<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
<span class='backlink-toggle-zippy'> </span>
<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>
<dd class='comment-body collapseable'>
<data:backlink.snippet/>
</dd>
<dd class='comment-footer collapseable'>
<span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>
<span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
</dd>
</div>
</b:loop>
</dl>
</b:if>
<p class='comment-footer'>
<a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>
</p>
</b:includable>
<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<h4 id='comment-post-message'>
<a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>
</div>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<b:if cond='data:showCmtPopup'>
<div class='goog-toggle-button'>
<div class='goog-inline-block comment-action-icon'/>
</div>
<b:else/>
<a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
<img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
</a>
</b:if>
</span>
</b:includable>
<b:includable id='comment_count_picker' var='post'>
<b:if cond='data:post.commentSource == 1'>
<span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-post-url='data:post.url' expr:data-url='data:post.url.canonical.http'>
</span>
<b:else/>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.commentLabelFull/>:
</a>
</b:if>
</b:includable>
<b:includable id='comment_picker' var='post'>
<b:if cond='data:post.commentSource == 1'>
<b:include data='post' name='iframe_comments'/>
<b:elseif cond='data:post.showThreadedComments'/>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4><data:post.commentLabelFull/>:</h4>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<b:if cond='data:post.hasOlderLinks'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
</b:if>
<data:post.commentRangeText/>
<b:if cond='data:post.hasNewerLinks'>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</b:if>
</span>
</b:if>
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:elseif cond='data:post.allowComments'/>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</p>
</b:if>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:include cond='data:post.showBacklinks' data='post' name='backlinks'/>
</div>
</div>
</div>
</b:includable>
<b:includable id='feedLinks'>
<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>
<b:else/> <!--Post feed links -->
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:include cond='data:post.allowComments and data:post.feedLinks' data='post.feedLinks' name='feedLinksBody'/>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
<b:includable id='iframe_comments' var='post'>
<b:if cond='data:post.allowIframeComments'>
<script expr:src='data:post.iframeCommentSrc' type='text/javascript'/>
<div class='cmt_iframe_holder' expr:data-href='data:post.url.canonical' expr:data-viewtype='data:post.viewType'/>
<b:if cond='data:post.embedCommentForm == "false"'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</b:includable>
<b:includable id='mobile-index-post' var='post'>
<div class='mobile-date-outer date-outer'>
<b:if cond='data:post.dateHeader'>
<div class='date-header'>
<span><data:post.dateHeader/></span>
</div>
</b:if>
<div class='mobile-post-outer'>
<a expr:href='data:post.url'>
<h3 class='mobile-index-title entry-title' itemprop='name'>
<data:post.title/>
</h3>
<div class='mobile-index-arrow'>&rsaquo;</div>
<div class='mobile-index-contents'>
<b:if cond='data:post.thumbnailUrl'>
<div class='mobile-index-thumbnail'>
<div class='Image'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</div>
</b:if>
<div class='post-body'>
<b:if cond='data:post.snippet'><data:post.snippet/></b:if>
</div>
</div>
<div style='clear: both;'/>
</a>
<div class='mobile-index-comment'>
<b:include cond='data:blog.pageType != "static_page" and data:post.allowComments and data:post.numComments != 0' data='post' name='comment_count_picker'/>
</div>
</div>
</div>
</b:includable>
<b:includable id='mobile-main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<b:if cond='data:blog.pageType == "index"'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='mobile-index-post'/>
</b:loop>
<b:else/>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='mobile-post'/>
</b:loop>
</b:if>
</div>
<b:include name='mobile-nextprev'/>
</b:includable>
<b:includable id='mobile-nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<div class='mobile-link-button' id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>&lsaquo;</a>
</div>
</b:if>
<b:if cond='data:olderPageUrl'>
<div class='mobile-link-button' id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>&rsaquo;</a>
</div>
</b:if>
<div class='mobile-link-button' id='blog-pager-home-link'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</div>
<div class='mobile-desktop-link'>
<a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
</div>
</div>
<div class='clear'/>
</b:includable>
<b:includable id='mobile-post' var='post'>
<div class='date-outer'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<div class='date-posts'>
<div class='post-outer'>
<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.thumbnailUrl'>
<meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:elseif cond='data:post.url and data:blog.url != data:post.url'/>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.url.canonical' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
<span class='post-comment-link'>
<b:include cond='data:blog.pageType not in {"item","static_page"} and data:post.allowComments' data='post' name='comment_count_picker'/>
</span>
</div>
<div class='post-footer-line post-footer-line-2'>
<b:if cond='data:top.showMobileShare'>
<div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
<a href='javascript:void(0);'><data:shareMsg/></a>
</div>
</b:if>
<b:if cond='data:top.showDummy'>
<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
</b:if>
</div>
</div>
</div>
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>
</div>
</div>
</div>
</b:includable>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:includable>
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.url.canonical' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span> </td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>
<span class='post-comment-link'>
<b:include cond='data:blog.pageType not in {"item","static_page"} and data:post.allowComments' data='post' name='comment_count_picker'/>
</span>
<!-- backlinks -->
<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType not in {"item","static_page"} and data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</span>
<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='https://resources.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
<!-- share buttons -->
<div class='post-share-buttons goog-inline-block'>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
</div>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:top.showPostLabels and data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>
</b:loop>
</b:if>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
<b:if cond='data:top.showLocation and data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</span>
</div>
<b:if cond='data:post.authorAboutMe'>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:post.authorPhoto.url'>
<img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
</b:if>
<div>
<a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</div>
<span itemprop='description'><data:post.authorAboutMe/></span>
</div>
</b:if>
</div>
</div>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>
<b:includable id='shareButtons' var='post'>
<b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + "&target=pinterest"' expr:title='data:top.shareToPinterestMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToPinterestMsg/></span></a></b:if><b:if cond='data:top.showPlusOne'><div class='goog-inline-block google-plus-share-container'><data:post.googlePlusShareTag/></div></b:if>
</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>
</div>
</b:includable>
<b:includable id='threaded_comment_js' var='post'>
<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
<script type='text/javascript'>
(function() {
var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
var config = <data:post.commentConfig/>;
// <![CDATA[
var cursor = null;
if (items && items.length > 0) {
cursor = parseInt(items[items.length - 1].timestamp) + 1;
}
var bodyFromEntry = function(entry) {
var text = (entry &&
((entry.content && entry.content.$t) ||
(entry.summary && entry.summary.$t))) ||
'';
if (entry && entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
return '<span class="deleted-comment">' + text + '</span>';
}
}
}
return text;
}
var parse = function(data) {
cursor = null;
var comments = [];
if (data && data.feed && data.feed.entry) {
for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
var comment = {};
// comment ID, parsed out of the original id format
var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array) {
var auth = entry.author[0];
if (auth) {
comment.author = {
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
};
}
}
if (entry.link) {
if (entry.link[2]) {
comment.link = comment.permalink = entry.link[2].href;
}
if (entry.link[3]) {
var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
if (pid && pid[1]) {
comment.parentId = pid[1];
}
}
}
comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
} else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
comment.displayTime = entry.gd$extendedProperty[k].value;
}
}
}
comments.push(comment);
}
}
return comments;
};
var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor) {
url += '&published-min=' + new Date(cursor).toISOString();
}
window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length < 50 ? null
: parseInt(parsed[parsed.length - 1].timestamp) + 1
callback(parsed);
window.bloggercomments = null;
}
url += '&callback=bloggercomments';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
};
var hasMore = function() {
return !!cursor;
};
var getMeta = function(key, comment) {
if ('iswriter' == key) {
var matches = !!comment.author
&& comment.author.name == config.authorName
&& comment.author.profileUrl == config.authorUrl;
return matches ? 'true' : '';
} else if ('deletelink' == key) {
return config.baseUri + '/delete-comment.g?blogID='
+ config.blogId + '&postID=' + comment.id;
} else if ('deleteclass' == key) {
return comment.deleteclass;
}
return '';
};
var replybox = null;
var replyUrlParts = null;
var replyParent = undefined;
var onReply = function(commentId, domId) {
if (replybox == null) {
// lazily cache replybox, and adjust to suit this style:
replybox = document.getElementById('comment-editor');
if (replybox != null) {
replybox.height = '250px';
replybox.style.display = 'block';
replyUrlParts = replybox.src.split('#');
}
}
if (replybox && (commentId !== replyParent)) {
replybox.src = '';
document.getElementById(domId).insertBefore(replybox, null);
replybox.src = replyUrlParts[0]
+ (commentId ? '&parentID=' + commentId : '')
+ '#' + replyUrlParts[1];
replyParent = commentId;
}
};
var hash = (window.location.hash || '#').substring(1);
var startThread, targetComment;
if (/^comment-form_/.test(hash)) {
startThread = hash.substring('comment-form_'.length);
} else if (/^c[0-9]+$/.test(hash)) {
targetComment = hash.substring(1);
}
// Configure commenting API:
var configJso = {
'maxDepth': config.maxThreadDepth
};
var provider = {
'id': config.postId,
'data': items,
'loadNext': paginator,
'hasMore': hasMore,
'getMeta': getMeta,
'onReply': onReply,
'rendered': true,
'initComment': targetComment,
'initReplyThread': startThread,
'config': configJso,
'messages': msgs
};
var render = function() {
if (window.goog && window.goog.comments) {
var holder = document.getElementById('comment-holder');
window.goog.comments.render(holder, provider);
}
};
// render now, or queue to render when library loads:
if (window.goog && window.goog.comments) {
render();
} else {
window.goog = window.goog || {};
window.goog.comments = window.goog.comments || {};
window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
window.goog.comments.loadQueue.push(render);
}
})();
// ]]>
</script>
</b:includable>
<b:includable id='threaded_comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<h4><data:post.commentLabelFull/>:</h4>
<div class='comments-content'>
<b:include cond='data:post.embedCommentForm' data='post' name='threaded_comment_js'/>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>
<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
</p>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:include cond='data:post.showBacklinks' data='post' name='backlinks'/>
</div>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='Navbar1' locked='false' title='Navbar' type='Navbar'>
<b:includable id='main'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener('load',
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
if (gapi.iframes && gapi.iframes.getContext) {
gapi.iframes.getContext().openChild({
url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d5127135059647267952\x26blogName\x3dMinimal+Blogger+Template\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dDISABLED\x26layoutType\x3dLAYOUTS\x26searchRoot\x3dhttps://demo-template-minimal.blogspot.com/search\x26blogLocale\x3den\x26v\x3d2\x26homepageUrl\x3dhttps://demo-template-minimal.blogspot.com/\x26vt\x3d-8290810451444762270',
where: document.getElementById("navbar-iframe-container"),
id: "navbar-iframe"
});
}
});
</script><script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
</b:includable>
</b:widget>
</b:section>
<aside class='column'>
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
<b:widget id='BlogSearch1' locked='false' title='Search This Blog' type='BlogSearch'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div expr:id='data:widget.instanceId + "_form"'>
<form class='gsc-search-box' expr:action='data:blog.searchUrl'>
<b:attr cond='not data:view.isPreview' name='target' value='_top'/>
<table cellpadding='0' cellspacing='0' class='gsc-search-box'>
<tbody>
<tr>
<td class='gsc-input'>
<input autocomplete='off' class='gsc-input' expr:value='data:view.isSearch ? data:view.search.query.escaped : ""' name='q' size='10' title='search' type='text'/>
</td>
<td class='gsc-search-button'>
<input class='gsc-search-button' expr:value='data:messages.search' title='search' type='submit'/>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
<b:widget-settings>
<b:widget-setting name='showaboutme'>true</b:widget-setting>
<b:widget-setting name='showlocation'>false</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'>
<b:if cond='data:team'> <!-- team blog profile -->
<ul>
<b:loop values='data:authors' var='i'>
<li><a class='profile-name-link g-profile' expr:href='data:i.userUrl' expr:style='"background-image: url(" + data:i.profileLogo + ");"'><data:i.display-name/></a></li>
</b:loop>
</ul>
<b:else/> <!-- normal blog profile -->
<b:if cond='data:photo.url != ""'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:messages.myPhoto' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
</b:if>
<dl class='profile-datablock'>
<dt class='profile-data'>
<a class='profile-name-link g-profile' expr:href='data:userUrl' expr:style='"background-image: url(" + data:profileLogo + ");"' rel='author'>
<data:displayname/>
</a>
<b:if cond='data:hasgoogleprofile'>
<br/>
<div class='g-follow' data-annotation='bubble' data-height='20' expr:data-href='data:userUrl'/>
</b:if>
</dt>
<b:if cond='data:showlocation'>
<dd class='profile-data'><data:location/></dd>
</b:if>
<b:if cond='data:aboutme != ""'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
</dl>
<a class='profile-link' expr:href='data:userUrl' rel='author'><data:viewProfileMsg/></a>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:widget-settings>
<b:widget-setting name='showStyle'>FLAT</b:widget-setting>
<b:widget-setting name='yearPattern'>yyyy</b:widget-setting>
<b:widget-setting name='showWeekEnd'>true</b:widget-setting>
<b:widget-setting name='monthPattern'>MMMM</b:widget-setting>
<b:widget-setting name='dayPattern'>MMM dd</b:widget-setting>
<b:widget-setting name='weekPattern'>MM/dd</b:widget-setting>
<b:widget-setting name='chronological'>false</b:widget-setting>
<b:widget-setting name='showPosts'>false</b:widget-setting>
<b:widget-setting name='frequency'>MONTHLY</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'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:include cond='data:style == "HIERARCHY"' data='data' name='interval'/>
<b:include cond='data:style == "FLAT"' data='data' name='flat'/>
<b:include cond='data:style == "MENU"' data='data' name='menu'/>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul class='flat'>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='interval'>
<ul class='hierarchy'>
<li expr:class='"archivedate " + data:interval.expclass'>
<b:include cond='data:interval.toggleId' data='interval' name='toggle'/>
<a class='post-count-link' expr:href='data:interval.url'>
<data:interval.name/>
</a>
<span class='post-count' dir='ltr'>(<data:interval.post-count/>)</span>
<b:include cond='data:interval.data' data='interval.data' name='interval'/>
<b:include cond='data:interval.posts' data='interval.posts' name='posts'/>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='post'>
<li><a expr:href='data:post.url'><data:post.title/></a></li>
</b:loop>
</ul>
</b:includable>
<b:includable id='toggle' var='interval'>
<a class='toggle' href='javascript:void(0)'>
<span expr:class='"zippy" + (data:interval.expclass == "expanded" ? " toggle-open" : "")'>
<b:if cond='data:interval.expclass == "expanded"'>
▼ 
<b:elseif cond='data:blog.languageDirection == "rtl"'/>
◄ 
<b:else/>
► 
</b:if>
</span>
</a>
</b:includable>
</b:widget>
<b:widget id='Label1' locked='false' title='Categories' type='Label'>
<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'>true</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<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'><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'><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>
</b:includable>
</b:widget>
<b:widget id='FollowByEmail1' locked='false' title='Follow by Email' type='FollowByEmail'>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2 class='title'><data:title/></h2></b:if>
<div class='widget-content'>
<div class='follow-by-email-inner'>
<form action='https://feedburner.google.com/fb/a/mailverify' expr:onsubmit='"window.open(\"https://feedburner.google.com/fb/a/mailverify?uri=" + data:feedPath + "\", \"popupwindow\", \"scrollbars=yes,width=550,height=520\"); return true"' method='post' target='popupwindow'>
<table width='100%'>
<tr>
<td>
<input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>
</td>
<td width='64px'>
<input class='follow-by-email-submit' type='submit' value='Submit'/>
</td>
</tr>
</table>
<input expr:value='data:feedPath' name='uri' type='hidden'/>
<input name='loc' type='hidden' value='en_US'/>
</form>
</div>
</div>
<span class='item-control blog-admin'>
<b:include name='quickedit'/>
</span>
</b:includable>
</b:widget>
</b:section>
</aside>
</div>
</div>
</div>
<footer>
<div>
Copyright © 2019 <strong><data:blog.title/></strong>
</div>
</footer>
</div>
</body>
</html>
nah saya harap, semoga tutorial ini bermanfaat.. ^_^ | oh iya, itu template saya tekankan lagi ya.. sangat basic... untuk belajar aja..
Untuk Mendesain template Blogger kalian dapat memulainya dengan pengetahuan dasar tentang HTML dan CSS.
F.N.A - Red