. .

WEB DESIGN : MY FIRST RESPONSIVE WEB LOGGING/BLOG TEMPLATE MODIFICATION (FREE TO DOWNLOAD)

Posted by CHRISTIANTO D,WIBOWO | D3MI-2016 STMIK BUMI GORA On Senin, Januari 09, 2017 No comments

WEB DESIGN : Modifikasi Responsif Blog Template, Sabar-sabar-sabar akhirnya tidak sabar juga ingin mengaplikasikan apa yang sudah dipelajari walaupun masih sedikit sekali yang dipahami mengenai membangun webpage atau weblogging/Blog, berbekal pengetahuan sedikit itu saya coba menerapkannya dengan membuat web logging rensposive template sekaligus membuat aplikasi androidnya agar reader mudah mengakses dari smartphone android yang saat ini sedang digandrungi.

Sebelum melanjutkan pembelajaran ini, perlu diketahui bacalah dulu artikel pembelajaran sebelumnya dan kuasai pengenalan pengetahuan dasar di :
WEB PROGRAMMING
  1. WEB DESIGN
  2. MEMULAI BELAJAR WEB PROGRAMMING
  3. Memulai Membangun WEBSITE Dengan HTML - Panduan Bagi Pemula
Jika ingin meng-INSTALL aplikasi android D3MI2016 BUMIGORA silahkan download file ini dari Google Drive dan install manual lewat smartphone android kita, harap maklum belum cukup ilmu untuk memasukkan aplikasinya ke Google Play (tapi menginstallnya mudah, cukup download, selesai ter-download, buka file D3MI2016 BUMI GORA.apk dan INSTALL, selanjutnya SELESAI) CLICK TO DOWNLOAD, jika sudah terinstal akan tampil di layar smartphone android kita tampilan icon aplikasi D3MI2016 BUMIGORA seperti ini
sentuh D3MI2016 BUMI GORA APPLICATION ICONnya, dan akan muncul learning weblogging https://d3mi2016.blogspot.co.id/ yang akan menjadi layar menu utama untuk masuk ke learning web logging https://christcay.blogspot.co.id/ :
Responsive web logging D3MI-STMIK BUMIGORA
Main Menu Learning Blog
Display Web Logging https://christcay.blogspot.co.id/
Hal ini saya lakukan agar READER bisa dengan mudah mengakses WEB LOGGINGnya dan mengefesienkan waktu loading serta akses bisa lebih efektif dengan meminimalisasi memory cache yang akan dikonsumsi oleh smartphone android.

Kita lanjutkan dengan WEB LOGGING DESIGNnya, web logging atau Blog dari Blogger, tidak bisa serta merta menerima file dengan ekstensi HTLM, file harus berisi dengan ekstensi XML, sehingga jika kita membuat atau mendesign dengan HTML ditambah CSS file sebagai style Blog dan file-file Javascript serta JQuery harus kita gabungkan/convert menjadi satu file ddengan ekstensi file XML baru kemudian bisa kita UPLOAD ke template Blog kita.

Template Responsive, adalah istilah yang digunakan dalam konsep membuat design template yang memungkinkan tata letak bisa berubah tergantung pada resolusi layar saat tampil. Misalnya, pada template layout 2 kolom kita buat di layar resolusi 1024 pixel dan dan untuk layar yang lebih kecil misalnya 767 pixel kita buat dari 2 kolom menjadi satu kolom. Fungsi dari template responsive adalah sebagai alternatif untuk membuat situs mobile yang terpisah, Seperti pada smartphone, ipad ada landscape dan portrait, bila dilakukan dengan cara yang baik. Nanti kita akan membuktikannya setelah selesai membuat template responsive ini, gampangnya saat kita men-ZOOM OUT/IN display akan mengikuti ukuran yang kita gunakan sehingga kita bisa lebih nyaman dalam menelusuri WEB LOGGING atau WEB SITE.
Apa itu Template?
Sebelum bergerak lebih jauh, pertama mari kita mendefinisikan bahwa apa yang template? Template adalah kombinasi dari set yang berbeda dari unsur-unsur untuk membangun sebuah desain sistem. Tapi ketikakita membangun web template, maka itu berarti masih sangat mirip dengan mendesign sebuah sistem. Sebuah web template dasar terdiri dari header, area konten, sidebar dan footer.
Pastikan bahwa kita ingat hal-hal ini. <head> bagian dari situs web kita yang tidak ditampilkan kepada pengguna tapi sangat penting. Jadi pertama kita akan membahas tentang pentingnya sebuah template <head> dan bagaimana membangunnya. 
Membuat Bagian Blogger Template Head Section
Seperti yang saya sampaikan sebelumnya <head> adalah yang paling penting. Jika kita sudah familiar dengan HTML, maka kita harus sudah tahu itu. Di dalam tag <head> </ head>  kita menyimpan semua informasi yang diperlukan tentang situs web kita. 
Sebagai contoh di dalam tag <head> </ head> terdapat ; meta description, judul situs, stylesheet 'link/CSS, link Javascript dan rincian viewport.
Kita juga dapat menyimpan semua kode CSS kita di dalam tag <head> </ head>. Dan kita juga harus melakukannya di blogger. Sekarang mari kita mulai menjadi lebih praktis.
Buatlah Blog baru dari Blogger.com dan klik pada tombol New Blog. Sekarang tempatkan judul dan menempatkan alamat untuk blog kita (misalnya dalam hal ini saya membuat https://d3mi2016.blogspot.co.id/) dan klik pada tombol buat Blog.
Sekarang kita akan secara otomatis diarahkan ke blog baru. Sebelum melakukan hal lebih jauh, buatlah beberapa artikel di blog kita yang baru, setidaknya 3-5 artikel. Pastikan bahwa setiap artikel memiliki satu gambar.

Jika sudah membuat artikel, sekarang masuk ke bagian template blog kita, klik Edit Html dan menghapus setiap baris kode yang ada di dalam panel kode.
Sekarang kita telah menghapus template sebelumnya dan saatnya untuk membuat template sendiri. Untuk itu salin kode yang diberikan di bawah dan salin ke editor template Blogger, seperti yang berikut ini:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html 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'>
 <head>
 <b:include data='blog' name='all-head-content'/>
<title>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <data:blog.pageTitle/>
 <b:else/>
 <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
 <data:blog.pageName/> | <data:blog.title/>
 <b:else/>
 Page Not Found | <data:blog.title/>
 </b:if>
 </b:if>
 </title>
 <b:skin><![CDATA[ body#layout #widgetID { The Properties For Widget In Layout Page Goes Here } body { background:white; color:black; }
]]></b:skin>
</head>
Mari kita membahas singkat tentang apa yang telah kita lakukan sekarang.
Pertama kita menambahkan baris "<? Xml version =" 1.0 "encoding =" UTF-8 "?>". Ini memberitahu browser bahwa kita menggunakan dokumen XML.
Kedua, kami menambahkan "<! DOCTYPE html>" untuk memberitahu browser bahwa kita juga menggunakan HTML5 dalam dokumen ini.
Setelah <head> tag kita dimasukkan kode yang diperlukan termasuk kode yang ada di dalam tag judul untuk memberitahu browser tentang judul situs.
Di dalam <b: skin> tag kami akan menempatkan stylesheet CSS kami untuk merancang elemen template kita. Sekarang kita mulai mengatur template’s head area. Tapi jangan mencoba untuk menyimpan template kita sekarang. Karena template kita tidak dapat disimpan saat ini karena tidak lengkap.
Mengembangkan Blogger Template Header Section
Sekarang ketika kita telah menciptakan head template Blogger kita, saatnya untuk mulai membangun body template. Untuk itu kita harus terlebih dahulu membuat header dari template kita. Ingat, ada perbedaan besar antara head dan head area.
Dalam head area, kita menaruh informasi tentang situs, seperti situs judul dll dan di bagian header kita dapat menempatkan logo situs atau menu.
Untuk membangun area header sederhana Template Blogger kita, kita akan menambahkan kode di bawah ini :
<body>
<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>
Seperti yang saya katakan sebelumnya sekarang kita sedang mengembangkan body Template yang terdiri dari 4 elemen utama (header, area konten, sidebar dan footer). Jadi kita mulai dengan html <body> tag setelah kita menambahkan bagian <header>.
Jadi keseluruhan kode kita seperti berikut:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html 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'>
 <head>
 <b:include data='blog' name='all-head-content'/>
<title>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <data:blog.pageTitle/>
 <b:else/>
 <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
 <data:blog.pageName/> | <data:blog.title/>
 <b:else/>
 Page Not Found | <data:blog.title/>
 </b:if>
 </b:if>
 </title>
 <b:skin><![CDATA[ body#layout #widgetID { The Properties For Widget In Layout Page Goes Here } body { background:white; color:black; }
]]></b:skin>
</head>
<body>
<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>
Membangun Content Area Blogger
Ketika kita telah menciptakan <head> area dan header section dalam tag body, sekarang saatnya untuk mulai mengembangkan bagian terpenting dari template kita yang merupakan content area.
Untuk membangun itu tulis/salin kode di bawah ini :
<article>
<b:section class='main' id='main' preferred='yes' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
</b:widget>
</b:section>
</article>
Sehingga saat ini kita sudah memiliki kode keseluruhan di panel kode template :
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'>
 <head>
 <b:include data='blog' name='all-head-content'/>
<title>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <data:blog.pageTitle/>
 <b:else/>
 <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
 <data:blog.pageName/> | <data:blog.title/>
 <b:else/>
 Page Not Found | <data:blog.title/>
 </b:if>
 </b:if>
 </title>
<b:skin><![CDATA[ body#layout #widgetID { The Properties For Widget In Layout Page Goes Here } body { background:white; color:black; }
]]></b:skin>
</head>
<body>
<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>
<article>
<b:section class='main' id='main' preferred='yes' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
</b:widget>
</b:section>
</article>
Membangun Sidebar Template
Kita telah berhasil menciptakan dua daerah yang paling penting dari template Blogger, Header section dan content area. Sekarang kita perlu membangun sebuah sidebar, tulis/salin kode di bawah ini :
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'>
 <head>
 <b:include data='blog' name='all-head-content'/>
<title>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <data:blog.pageTitle/>
 <b:else/>
 <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
 <data:blog.pageName/> | <data:blog.title/>
 <b:else/>
 Page Not Found | <data:blog.title/>
 </b:if>
 </b:if>
 </title>
<b:skin><![CDATA[ body#layout #widgetID { The Properties For Widget In Layout Page Goes Here } body { background:white; color:black; }
]]></b:skin>
</head>
<body>
<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>
<article>
<b:section class='main' id='main' preferred='yes' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
</b:widget>
</b:section>
</article>
<aside>
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
</b:section>
</aside>
Sekarang kita juga telah menambahkan sidebar dan Anda dapat menambahkan sebanyak yang Anda inginkan dengan menambahkan kode yang sama.

Membangun Footer Template
Sekarang ketika inti dari template kita dibangun dan kita harus hanya menambahkan footer. Sekarang jika kita ingin menambahkan footer sederhana dalam template dengan deskripsi hak cipta, tulis/salin kode di bawah ini :
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'>
 <head>
 <b:include data='blog' name='all-head-content'/>
<title>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <data:blog.pageTitle/>
 <b:else/>
 <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
 <data:blog.pageName/> | <data:blog.title/>
 <b:else/>
 Page Not Found | <data:blog.title/>
 </b:if>
 </b:if>
 </title>
<b:skin><![CDATA[ body#layout #widgetID { The Properties For Widget In Layout Page Goes Here } body { background:white; color:black; }
]]></b:skin>
</head>
<body>
<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>
<article>
<b:section class='main' id='main' preferred='yes' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
</b:widget>
</b:section>
</article>
<aside>
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
</b:section>
</aside>
<footer>
<div class="copyrights" style="clear: both;">
Copyrights © 2015 Your blogger template
</div>
</footer>
</body>
</html>
Ini adalah footer sederhana, kita juga dapat menambahkan lebih banyak footer dengan widget.
Sekarang simpan template dan klik pada tombol lihat blog. Kita akan melihat halaman web yang sangat sederhana dengan header judul, Content Article Area dan SideBar serta Footer, sederhana dan fullpage. 

Merancang Template Blogger
Sekarang kita akan mulai merancang template kita yang kita buat. Untuk itu kita mencari tag <b: skin>  di mana semua styling CSS kita akan ditempakan.
Pertama, kita akan menetapkan margin body template dan padding untuk 0. Untuk itu salin kode CSS di bawah ini diberikan dan letakkan sebelum tag ]]> </ b: skin> seperti ini :
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'>
 <head>
 <b:include data='blog' name='all-head-content'/>
<title>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <data:blog.pageTitle/>
 <b:else/>
 <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
 <data:blog.pageName/> | <data:blog.title/>
 <b:else/>
 Page Not Found | <data:blog.title/>
 </b:if>
 </b:if>
 </title>
<b:skin><![CDATA[ body#layout #widgetID { The Properties For Widget In Layout Page Goes Here }
body { background:white; color:black; }
body {
           padding: 0px;
           margin: 0px;
}
]]></b:skin>
</head>
<body>
<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>
<article>
<b:section class='main' id='main' preferred='yes' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
</b:widget>
</b:section>
</article>
<aside>
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
</b:section>
</aside>
<footer>
<div class="copyrights" style="clear: both;">
Copyrights © 2015 Your blogger template
</div>
</footer>
</body>
</html>
Sekarang mari kita mulai merancang header dari template kita, untuk itu menyalin stylesheet CSS yang diberikan di bawah dan letakkan di sebelum tag ]]> </ b: skin >:
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'>
 <head>
 <b:include data='blog' name='all-head-content'/>
<title>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <data:blog.pageTitle/>
 <b:else/>
 <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
 <data:blog.pageName/> | <data:blog.title/>
 <b:else/>
 Page Not Found | <data:blog.title/>
 </b:if>
 </b:if>
 </title>
<b:skin><![CDATA[ body#layout #widgetID { The Properties For Widget In Layout Page Goes Here }
body { background:white; color:black; }
body {
           padding: 0px;
           margin: 0px;
}
header h1 {
                   margin: 0px;
                  }
header {
                  padding: 10px 0px;
                  border-bottom: 2px solid #262424;
                  font-family: sans-serif;
                 background: #F2B25C;
                 color: white;
                 text-shadow: 2px 2px 2px black;
             }
]]></b:skin>
</head>
<body>
<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>
<article>
<b:section class='main' id='main' preferred='yes' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
</b:widget>
</b:section>
</article>
<aside>
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
</b:section>
</aside>
<footer>
<div class="copyrights" style="clear: both;">
Copyrights © 2015 Your blogger template
</div>
</footer>
</body>
</html>
Sekarang mari kita merancang bagian artikel Blogger template, di mana semua konten akan muncul. Untuk itu hanya menyalin kode CSS di bawah ini diberikan  sebelum  tag ]]> </ b: skin> :
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'>
 <head>
 <b:include data='blog' name='all-head-content'/>
<title>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <data:blog.pageTitle/>
 <b:else/>
 <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
 <data:blog.pageName/> | <data:blog.title/>
 <b:else/>
 Page Not Found | <data:blog.title/>
 </b:if>
 </b:if>
 </title>
<b:skin><![CDATA[ body#layout #widgetID { The Properties For Widget In Layout Page Goes Here }
body { background:white; color:black; }
body {
           padding: 0px;
           margin: 0px;
}
header h1 {
                   margin: 0px;
                  }
header {
                  padding: 10px 0px;
                  border-bottom: 2px solid #262424;
                  font-family: sans-serif;
                 background: #F2B25C;
                 color: white;
                 text-shadow: 2px 2px 2px black;
             }
article {
             width: 65%;
             float: left;
             font-family: sans-serif;
             border-right: 1px solid #F4EEEE;
            }
]]></b:skin>
</head>
<body>
<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>
<article>
<b:section class='main' id='main' preferred='yes' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
</b:widget>
</b:section>
</article>
<aside>
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
</b:section>
</aside>
<footer>
<div class="copyrights" style="clear: both;">
Copyrights © 2015 Your blogger template
</div>
</footer>
</body>
</html>
Untuk merancang sidebar template, kita perlu beberapa widget di sidebar. Untuk itu, masuk ke bagian Layout dan menambahkan beberapa widget. Kitaa akan menambahkan widget Populer Pos dan Email widget.
Setelah itu kembali ke daerah Edit HTML dan tepat sebelum tag  ]]> </ b: skin> tempatkan kode di bawah ini :
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'>
 <head>
 <b:include data='blog' name='all-head-content'/>
<title>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <data:blog.pageTitle/>
 <b:else/>
 <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
 <data:blog.pageName/> | <data:blog.title/>
 <b:else/>
 Page Not Found | <data:blog.title/>
 </b:if>
 </b:if>
 </title>
<b:skin><![CDATA[ body#layout #widgetID { The Properties For Widget In Layout Page Goes Here }
body { background:white; color:black; }
body {
           padding: 0px;
           margin: 0px;
}
header h1 {
                   margin: 0px;
                  }
header {
                  padding: 10px 0px;
                  border-bottom: 2px solid #262424;
                  font-family: sans-serif;
                 background: #F2B25C;
                 color: white;
                 text-shadow: 2px 2px 2px black;
             }
article {
             width: 65%;
             float: left;
             font-family: sans-serif;
             border-right: 1px solid #F4EEEE;
            }
aside {
           float: left;
          width: 35%;
           }
aside h2 {
          background: #262424;
          font-family: sans-serif;
          border-bottom: 2px solid #F2B25C;
         color: white;
         padding: 2px;
         }

&nbsp;
]]></b:skin>
</head>
<body>
<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>
<article>
<b:section class='main' id='main' preferred='yes' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
</b:widget>
</b:section>
</article>
<aside>
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
</b:section>
</aside>
<footer>
<div class="copyrights" style="clear: both;">
Copyrights © 2015 Your blogger template
</div>
</footer>
</body>
</html>
Akhirnya, kita akan merancang footer blogger template. Untuk itu salin kode di bawah ini dan diberikan tepat sebelum tag ]]> </ b: skin>:

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'>
 <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <b:include data='blog' name='all-head-content'/>
<title>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <data:blog.pageTitle/>
 <b:else/>
 <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
 <data:blog.pageName/> | <data:blog.title/>
 <b:else/>
 Page Not Found | <data:blog.title/>
 </b:if>
 </b:if>
 </title>
<b:skin><![CDATA[ body#layout #widgetID { The Properties For Widget In Layout Page Goes Here }
body { background:white; color:black; }
body {
           padding: 0px;
           margin: 0px;
}
header h1 {
                   margin: 0px;
                  }
header {
                  padding: 10px 0px;
                  border-bottom: 2px solid #262424;
                  font-family: sans-serif;
                 background: #F2B25C;
                 color: white;
                 text-shadow: 2px 2px 2px black;
             }
article {
             width: 65%;
             float: left;
             font-family: sans-serif;
             border-right: 1px solid #F4EEEE;
            }
aside {
           float: left;
          width: 35%;
           }
aside h2 {
          background: #262424;
          font-family: sans-serif;
          border-bottom: 2px solid #F2B25C;
         color: white;
         padding: 2px;
         }

&nbsp;
footer {
             float: left;
            width: 100%;
            background: #262424;
            border-top: 1px solid black;
            color: #F2B25C;

            }
]]></b:skin>
</head>
<body>
<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>
<article>
<b:section class='main' id='main' preferred='yes' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
</b:widget>
</b:section>
</article>
<aside>
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
</b:section>
</aside>
<footer>
<div class="copyrights" style="clear: both;">
Copyrights © 2015 Your blogger template
</div>
</footer>
</body>
</html>
Kita telah melakukan beberapa styling dari template kita.  Sekarang simpan template dan klik pada tombol lihat blog. Kita akan melihat halaman web yang sudah stylist, dan bagaimana dengan anda, sudah impresifkah ?
Tentu saja, template kita tidak terlihat spektakuler tapi setidaknya kita telah berhasil membuat template sederhana yang dapat diubah menjadi template lebih baik dengan melakukan beberapa modifikasi berguna dan tambahan seperti memasang menu baru dan dengan menyesuaikan widget . Kita dapat melakukan banyak perubahan yang kita inginkan, tapi sekarang kita tahu bagaimana membangun sebuah template sederhana. Jadi inilah desain template yang pertama kita.
Setiap kali Anda sedang membangun sebuah template Blogger, pastikan bahwa kita membuat template yang mobile friendly . Untuk itu selalu menambahkan berikut <meta> elemen viewport sebelum </ head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Setelah itu lakukan tes apakah template kita sudah mobile friendly atau tidak pada Google Mobile friendly test tool. Kita juga harus memastikan bahwa kecepatan template kita sudah cukup untuk memenuhi persyaratan mesin pencari modern. Untuk menguji kecepatan Blogger Template kita di Pagespeed insights tool.

Dan berbekal hal sudah dipelajari tersebut saya coba modifikasi menjadi tampilan template responsive kondisi display real 100% untuk Blog baru https://d3mi2016.blogspot.co.id/ menjadi seperti ini :
Dan tampilan template responsive kondisi display ZOOM OUT 150% untuk Blog baru https://d3mi2016.blogspot.co.id/ menjadi seperti ini :
Kita bisa lihat perubahan display pixelnya pada kondisi normal header berada seperti di RIGHT SIDEBAR, tetapi saat di zoomout 150% header menjadi TOP HEADER. Berikut detailnya :

XML FILE
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html expr:dir='data:blog.languageDirection' 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'>
<head>
<base target='_blank'/>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<meta content='text/html;charset=UTF-8' http-equiv='Content-type'/>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab%3A300%2C400%2C700' media='all' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=Montserrat%3A400%2C700%7CCrimson+Text%3A400%2C700%2C400italic%2C700italic' media='all' rel='stylesheet' type='text/css'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' rel='stylesheet'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
<b:else/>
<title>404 ~ Page Not Found!</title>
</b:if>
</b:if>
<b:skin><![CDATA[/*
-----------------------------------------------
D3 MI STMIK BUMI GORA MATARAM
Author: Christianto Dharma Wibowo
Author URL: https://christcay.blogspot.co.id/
05 January 2017
----------------------------------------------- */
body#layout ul{list-style-type:none;list-style:none}
body#layout ul li{list-style-type:none;list-style:none}
body#layout #headerbwrap {height:auto;}
body#layout #content {}
body#layout #slider {display:none;}
body#layout .sidebar-innernbt {margin-top: 20px;}

/* Variable definitions
   ====================
*/
/* Use this with templates/template-twocol.html */
.section, .widget, .widget-content {
  margin:0;
  padding:0;
}

/* -------------------------------------------------------------------------------- */
/* 0. CSS Reset
/* -------------------------------------------------------------------------------- */

html, body { margin:0; padding:0;}

h1, h2, h3, h4, h5, h6, p, blockquote, address, big, cite, code, em, font, img, small, strike, sub, sup, li, ol, ul, fieldset, form, label, legend, button, table, caption, tr, th, td {
margin:0;
padding:0;
border:0;
font-weight:normal;
font-style:normal;
font-size:100%;
line-height:1;
font-family:inherit;
text-align:left;
}

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

ol, ul {
list-style:none;
}

blockquote:before, blockquote:after {
content:"";
}

a { outline:none; }

input[type=search] {
   -moz-appearance:none;
   -webkit-appearance:none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

/* -------------------------------------------------------------------------------- */
/* 1. Document setup
/* -------------------------------------------------------------------------------- */

body {
margin: 0;
padding: 0;
border: none;
color: #333;
background: #f5f5f5;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
-webkit-text-size-adjust: 100%;
position: relative;
}

body * { -webkit-font-smoothing: antialiased; }

body a {
color: #0b0ff6;
text-decoration: none;
}

body a:hover {
color: #ff2008;
text-decoration: none;
}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

img {
max-width: 100%;
height: auto;
}

.hiddennbt { display: none; }
.ninja { visibility: hidden; }
.clearnbt { clear: both; }
.left { float: left; }
.right { float: right; }

.fleft { float: left; }
.fright { float: right; }

::selection {
background: #b70000;
color: #FFF;
}

::-webkit-input-placeholder { color: #A9A9A9; }
:-ms-input-placeholder { color: #A9A9A9; }


/* Transitions --------------------------------------- */

body a {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}

.post-title a,
.flex-direction-nav a,
.post-quote,
.post-body input[type="submit"],
.post-body input[type="reset"],
.post-body input[type="button"],
.post-nav a,
.post-body a.more-linknbt {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.header .blog-titlenbt,
.post-meta-togglenbt,
.post-meta-togglenbt p,
.post-meta-togglenbt .barnbt,
.nav-togglenbt .barnbt,
.nav-togglenbt p {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

.blog-titlenbt span {
  display: block;
  font-size: 14px;
  margin: 5px 0 0;
}

/* -------------------------------------------------------------------------------- */
/* 2. Structure
/* -------------------------------------------------------------------------------- */

.sidebarnbt {
width: 300px;
padding: 5% 20px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
}

.wrappernbt { margin: 1.0% 0 1.0% 300px; }

.wrapper-innernbt {
width: 950px;
max-width: 100%;
margin: 0 auto;
}

/* Sections --------------------------------------- */

.bg-light { background: #fafafa; }
.bg-darknbt { background: #444; }
.bg-mint { background: #b70000; }

/* Gridiriffic --------------------------------------- */

.one-half,
.one-third,
.two-thirds {
float: left;
margin-left: 5%;
}

.one-half { width: 47.5%; }
.one-third { width: 30%; }
.two-thirds { width: 65%; }

.one-half:first-child,
.one-third:first-child,
.two-thirds:first-child {
margin-left: 0;
}

/* -------------------------------------------------------------------------------- */
/* 3. Header
/* -------------------------------------------------------------------------------- */

.blog-titlenbt {
font-size: 1.5em;
line-height: 1;
font-weight: 700;
text-align: right;
}

.blog-titlenbt:after {
content: "";
display: block;
width: 100%;
height: 2px;
margin: 30px 0;
background: #fff;
background: rgba(255,255,255,0.2);
}

.blog-titlenbt a { color: #fff; }
.blog-titlenbt a:hover { color: #fff; }

/* Main menu --------------------------------------- */

.main-menunbt li {
position: relative;
text-align: right;
margin-top: 10px;
}

.main-menunbt > li:first-child { margin-top: 0; }

.main-menunbt .sub-menu { margin-right: 20px; }

.main-menunbt a {
display: block;
font-size: 1.5em;
font-weight: 700;
color: #fff;
color: rgba(255,255,255,0.6);
}

.main-menunbt a:hover,
.main-menunbt .current_menu_item > a,
.main-menunbt .current_page_item > a { color: #fff; }

/* Credits --------------------------------------- */

.creditsnbt {
  bottom: 6%;
  color: rgba(255, 255, 255, 0.25);
  font-size: 11px;
  line-height: 14px;
  position: absolute;
  right: 30px;
  text-align: center;
  color: #eee;
}

.creditsnbt a {
color: #eee;
}

.creditsnbt a:hover { color: #fff; }

/* -------------------------------------------------------------------------------- */
/* 4. Blog
/* -------------------------------------------------------------------------------- */

.post {
background: #fff;
}

.postsnbt .post {
margin-bottom: 5%;
}

.post-innernbt { padding: 8%; }

/* Post header --------------------------------------- */

.post-headernbt { margin-bottom: 20px; }

.post-datenbt {
font-size: 0.9em;
font-weight: 700;
margin-bottom: 10px;
color: #999;
}

.post-datenbt a { color: #999; }
.post-datenbt a:hover { color: #666; }

.post-datenbt .sep {
font-weight: 400;
color: #ddd;
margin: 0 5px;
}

.post-title {
font-size: 2em;
line-height: 120%;
font-weight: 700;
letter-spacing: -1px;
word-break: break-word;
-ms-word-break: break-word;
}

.post-title a { color: #222; }

.post-body a.more-linknbt {
padding: 15px 20px;
background: #444;
border: none;
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem;
font-weight: 400;
color: #fff;
}

.post-body a.more-linknbt:hover {
background: #b70000;
color: #fff;
text-decoration: none;
}

/* -------------------------------------------------------------------------------- */
/* 5. Post formats
/* -------------------------------------------------------------------------------- */


/* Format gallery --------------------------------------- */

.flexslider {
position: relative;
overflow: hidden;
}

.flex-direction-nav {
position: absolute;
top: 50%;
right: 0;
left: 0;
margin-top: -25px;
}

.flex-direction-nav a {
display: block;
width: 50px;
height: 50px;
background: #444 no-repeat center;
background-size: auto 10px;
position: absolute;
}

.flex-direction-nav .flex-prev {
left: 0;
background-image: url(images/icons/chevron-left_w.png);
}

.flex-direction-nav .flex-next {
right: 0;
background-image: url(images/icons/chevron-right_w.png);
}

.flex-direction-nav a:hover { background-color: #0b0ff6; }

.flex-direction-nav .flex-prev:active { margin-left: -2px; }
.flex-direction-nav .flex-next:active { margin-right: -2px; }

/* -------------------------------------------------------------------------------- */
/* 6. Single post
/* -------------------------------------------------------------------------------- */

/* Post meta --------------------------------------- */

.post-meta-togglenbt {
display: block;
padding: 6% 4%;
background: #e6e6e6;
}

.post-meta-toggle-innernbt {
display: block;
text-align: center;
margin: 0 auto;
position: relative;
}

.post-meta-togglenbt p,
.post-meta-togglenbt .barsnbt {
vertical-align: middle;
}

.post-meta-togglenbt p {
display: inline-block;
margin-left: 4px;
color: #666;
font-size: 14px;
line-height: 11px;
font-weight: 700;
text-transform: uppercase;
}

.post-meta-togglenbt .barsnbt {
display: inline-block;
height: 10px;
width: 15px;
position: relative;
}

.post-meta-togglenbt .barnbt {
width: 15px;
height: 2px;
background: #666;
position: absolute;
left: 0;
top: 0;
}

.post-meta-togglenbt .barnbt:nth-child(2) { top: 4px; }
.post-meta-togglenbt .barnbt:nth-child(3) { top: 8px; }

.post-meta-togglenbt:hover { cursor: pointer; }

/* active state */

.post-meta-togglenbt.active { background: #555; }

.post-meta-togglenbt.active p { color: #fff; }
.post-meta-togglenbt.active .barnbt { background: #fff; }

.post-meta-togglenbt.active .barnbt:nth-child(1),
.post-meta-togglenbt.active .barnbt:nth-child(3) { top: 4px; }

.post-meta-togglenbt.active .barnbt:nth-child(2) {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
}

.post-meta-togglenbt.active .barnbt:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

.post-meta-togglenbt.active .barnbt:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* post meta inner */

.no-js .post-meta-togglenbt { display: none; }
.no-js .post-meta-innernbt { display: block; }

.post-meta-innernbt {
display: none;
background: #444;
padding: 8%;
font-size: 0.95em;
text-align: center;
color: #fff;
}

.post-meta-innernbt a { color: #fff; }
.post-meta-innernbt a:hover { color: #0b0ff6 ; }

.post-meta-innernbt p {
display: inline-block;
width: 46%;
margin: 20px 5% 20px 0;
vertical-align: top;
text-align: center;
line-height: 130%;
}

.post-meta-innernbt p:nth-child(2n),
.post-meta-innernbt p:last-child { margin-right: 0; }

.post-meta-innernbt p strong {
display: block;
margin-bottom: 4px;
font-size: 0.8em;
font-weight: 700;
text-transform: uppercase;
color: #999;
text-align: center;
}

/* -------------------------------------------------------------------------------- */
/* 7. Post content
/* -------------------------------------------------------------------------------- */

.post-body {
font-family: 'Crimson Text', 'Times New Roman', 'Times', serif;
font-size: 1.50em;
color: #000000;
}

.post-body a { border-bottom: 1px solid #ea8175; }
.post-body a:hover { border-bottom-color: #b70000; }

.post-body p,
.post-body blockquote,
.post-body ul,
.post-body ol,
.post-body li,
.post-body address,
.post-body dl,
.post-body pre {
line-height: 90%;
margin-bottom: 0.50em;
}

.post-body > *:first-child { margin-top: 0; }
.post-body *:last-child { margin-bottom: 0; }

.post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 {
margin: 10px 0 20px;
font-family: 'Montserrat', sans-serif;
line-height: 100%;
font-weight: 500;
color: #333;
}

.post-body h1 { font-size: 1.75em; }
.post-body h2 { font-size: 1.5em; }
.post-body h3 { font-size: 1.2em; }

.post-body h4 {
font-size: 1.1em;
font-weight: 400;
}

.post-body h5 {
font-size: 1em;
font-weight: 400;
}

.post-body h6 {
font-size: 0.8em;
font-weight: 700;
color: #666;
text-transform: uppercase;
margin-bottom: 10px;
}

.post-body h1+h1, .post-body h1+h2, .post-body h1+h3, .post-body h1+h4, .post-body h1+h5, .post-body h1+h6,
.post-body h2+h1, .post-body h2+h2, .post-body h2+h3, .post-body h2+h4, .post-body h2+h5, .post-body h2+h6,
.post-body h3+h1, .post-body h3+h2, .post-body h3+h3, .post-body h3+h4, .post-body h3+h5, .post-body h3+h6,
.post-body h4+h1, .post-body h4+h2, .post-body h4+h3, .post-body h4+h4, .post-body h4+h5, .post-body h4+h6,
.post-body h5+h1, .post-body h5+h2, .post-body h5+h3, .post-body h5+h4, .post-body h5+h5, .post-body h5+h6,
.post-body h6+h1, .post-body h6+h2, .post-body h6+h3, .post-body h6+h4, .post-body h6+h5, .post-body h6+h6 {
margin-top: 10px;
}

.post-body blockquote {
padding: 10px 10px 10px 10px;
background: #ea8175;
background: rgba(255,0,0,0.3);
position: relative;
}

.post-body blockquote:before {
/*
content: '”';
display: block;
width: 90px;
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 72px;
line-height: 72px;
font-weight: 700;
color: #AAA;
text-align: center;
-webkit-font-smoothing: antialiased;
position: absolute;
top: 32px;
left: 0px;
*/
}

.post-body blockquote p {
color: #666;
font-style: italic;
}

.post-body cite {
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem;
font-weight: 700;
line-height: 140%;
text-transform: uppercase;
letter-spacing: 1px;
}

.post-body cite:before { content: "— "; }

.post-body blockquote cite {
display: block;
margin-top: 25px;
}

.post-body blockquote cite em { font-style: italic; font-weight: bold; }

em, q {  font-style: italic;  }

.post-body strong em,
.post-body em strong {
font-weight: bold;
font-style: italic;
}

.post-body big { font-size: 1.25em; }

abbr, acronym { cursor: help; }

.post-body code,
.post-body kbd,
.post-body pre,
.post-body tt {
font-size: 15px;
background: #EEE;
font-family: Menlo, Monaco, monospace;
}

.post-body kbd,
.post-body code,
.post-body tt {
padding: 5px;
border-radius: 3px;
}

.post-body dl { line-height: 160%; }

.post-body dl dt {
font-size: 0.8em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}

.post-body dd + dt { margin-top: 0.5em; }

.post-body hr {
display: block;
width: 96px;
height: 3px;
background: #ddd;
background: rgba(0,0,0,0.1);
margin: 40px auto;
border: none;
}

.post-body ul,
.post-body ol {
margin-left: 2em;
}

.post-body ul { list-style: disc; }
.post-body ul ul { list-style: circle; }
.post-body ul ul ul { list-style: square; }

.post-body ol { list-style: decimal; }
.post-body ol ol { list-style: lower-alpha; }
.post-body ol ol ol { list-style: lower-roman; }

.post-body ul ul,
.post-body ul ol,
.post-body ol ul,
.post-body ol ol {
margin-bottom: 0;
}

.post-body li ul li:first-child,
.post-body li ol li:first-child { margin-top: 0.5em; }

.post-body li { margin-bottom: 0.75em; }

.post-body ol > li:last-child,
.post-body ul > li:last-child {
margin-bottom: 0;
}

.post-body address {
padding: 3% 3.5%;
background: #f1f1f1;
font-family: 'Montserrat', sans-serif;
font-size: 0.85em;
line-height: 200%;
font-weight: 400;
color: #666;
text-transform: uppercase;
letter-spacing: 1px;
}

.post-body pre {
white-space: pre-wrap;       /* css-3 */
white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
line-height: 140%;
padding: 2% 2.5%;
background: #FAFAFA;
border: 1px solid #DDD;
color: #333;
font-size: 0.7em;
}

.post-body abbr,
.post-body acronym {
border-bottom: 1px dashed #ccc;
}

/* Tables --------------------------------------- */

.post-body table {
border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    width: 100%;
}

.post-body th,
.post-body td {
padding: 2%;
margin: 0;
overflow: visible;
line-height: 120%;
border-bottom: 1px solid #eee;
}

.post-body tr:last-child td { border-bottom: none; }

.post-body caption {
color: #444;
text-align: center;
padding: 2%;
}

.post-body thead {
vertical-align: bottom;
white-space: nowrap;
}

.post-body th {
font-size: 1rem;
font-weight: 700;
}

.post-body table tbody > tr:nth-child(odd) > td {
background: #f9f9f9;
}

/* Forms --------------------------------------- */

.post-body fieldset {
padding: 8px;
border: 2px solid #eee;
margin-bottom: 0.25em;
}

.post-body fieldset legend {
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem;
line-height: 1;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #666;
padding: 5px 5px;
background: #666;
color: #fff;
}

.post-body label {
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #666;
}

.post-body input { font-family: 'Montserrat', sans-serif; }

.post-body input[type="file"] {
padding: 12px;
background: #fdfdfd;
border: 1px solid #eee;
border-radius: 3px;
}

.post-body input[type="text"],
.post-body input[type="tel"],
.post-body input[type="url"],
.post-body input[type="password"],
.post-body input[type="search"],
.post-body textarea {
width: 100%;
padding: 20px;
font-family: 'Montserrat', sans-serif;
font-size: 0.8em;
border: none;
color: #444;
border: 2px solid #eee;
background: #fdfdfd;
-webkit-transition: background 0.2s ease-in-out;
-moz-transition: background 0.2s ease-in-out;
-ms-transition: background 0.2s ease-in-out;
-o-transition: background 0.2s ease-in-out;
transition: background 0.2s ease-in-out;
-webkit-appearance: none;
border-radius: 0;
}

.post-body textarea {
height: 180px;
line-height: 140%;
}

.post-body input[type="text"]:focus,
.post-body input[type="tel"]:focus,
.post-body input[type="url"]:focus,
.post-body input[type="password"]:focus,
.post-body input[type="search"]:focus,
.post-body textarea:focus {
background: #666;
color: #fff;
outline: none;
}

.post-body input[type="submit"],
.post-body input[type="reset"],
.post-body input[type="button"] {
padding: 10px 10px;
margin: 0;
border: none;
background: #444;
color: #fff;
font-size: 0.9rem;
-webkit-appearance: none;
border-radius: 0;
}

.post-body input[type="submit"] + input[type="reset"],
.post-body input[type="submit"] + input[type="reset"],
.post-body input[type="reset"] + input[type="submit"],
.post-body input[type="reset"] + input[type="button"],
.post-body input[type="button"] + input[type="button"],
.post-body input[type="button"] + input[type="reset"],
.post-body input[type="button"] + input[type="submit"] {
margin-left: 8px;
}

.post-body input[type="submit"]:hover,
.post-body input[type="reset"]:hover,
.post-body input[type="button"]:hover {
cursor: pointer;
background: #b70000;
color: #fff;
}

.post-body input[type="submit"]:focus,
.post-body input[type="submit"]:active {
outline: none;
}

/* -------------------------------------------------------------------------------- */
/* 11. Responsive
/* -------------------------------------------------------------------------------- */

@media (max-width: 1000px) {

/* structure */

.sidebarnbt {
width: 200px;
padding: 6% 25px;
}

.wrappernbt { margin-left: 200px; }

}

@media (max-width: 945px) {

/* structure */

.sidebarnbt {
width: 100%;
padding: 10px 0;
position: relative;
top: auto;
right: auto;
bottom: auto;
}

.sidebar-innernbt {
width: auto;
max-width: 90%;
margin: 0 auto;
}

.wrapper-innernbt {
max-width: none;
margin: 0;
width: auto;
}

.wrappernbt { margin: 5%; }

/* header */

.blog-titlenbt {
margin-right: 100px;
text-align: left;
}

.blog-titlenbt:after,
.main-menunbt,
.creditsnbt { display: none; }

/* navigation */

.nav-togglenbt {
display: block;
position: absolute;
right: 7%;
top: 50%;
margin-top: -5px;
}

.nav-togglenbt .barsnbt {
height: 10px;
width: 15px;
float: right;
position: relative;
}

.nav-togglenbt .barnbt {
width: 10px;
height: 2px;
background: #fff;
position: absolute;
left: 0;
top: 0;
}

.nav-togglenbt .barnbt:nth-child(2) { top: 4px; }
.nav-togglenbt .barnbt:nth-child(3) { top: 8px; }

.nav-togglenbt p {
font-size: 14px;
line-height: 10px;
font-weight: 700;
text-transform: uppercase;
text-align: right;
color: #fff;
float: right;
margin-right: 8px;
}

.nav-togglenbt .closenbt { display: none; }

.nav-togglenbt:hover { cursor: pointer; }

/* active state */

.nav-togglenbt.active .barnbt:nth-child(1),
.nav-togglenbt.active .barnbt:nth-child(3) { top: 4px; }

.nav-togglenbt.active .barnbt:nth-child(2) {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
}

.nav-togglenbt.active .barnbt:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

.nav-togglenbt.active .barnbt:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.nav-togglenbt.active .menunbt { display: none; }
.nav-togglenbt.active .closenbt { display: block; }


/* mobile menu */

.mobile-menunbt { padding: 40px 7%; }

.mobile-menunbt li { margin-top: 25px; }
.mobile-menunbt > li:first-child { margin-top: 0; }

.mobile-menunbt .sub-menu { margin-left: 25px; }

.mobile-menunbt a {
display: block;
font-size: 16px;
font-weight: 700;
color: #bbb;
text-transform: uppercase;
letter-spacing: 1px;
}

.mobile-menunbt a:hover { color: #fff; }

}

@media (max-width: 700px) {

/* structure */

.wrappernbt,
.wrapper-innernbt {
margin: 0;
max-width: none;
width: auto;
}

/* header */

.sidebarnbt { padding: 25px 0; }

.sidebar-innernbt { max-width: 90%; }

/* navigation */

.nav-togglenbt { right: 5%; }

.mobile-menunbt { padding: 35px 5%; }

.mobile-menunbt a { font-size: 14px; }

/* blog */

.post-headernbt { margin-bottom: 30px; }

.postsnbt .post,
.postsnbt .page { margin-bottom: 0; }

.post + .post { border-top: 1px solid #eee; }

.post-innernbt,
.archive-nav { padding: 40px 5%; }

.page-links { padding: 0 5%; }

.page-links > span,
.page-links > a {
padding: 15px 20px;
}

/* single post */

.post-meta-innernbt { padding: 40px 5%; }

}


@media (max-width: 600px) {

body { font-size: 16px; }

/* format gallery */

.flex-direction-nav { margin-top: -16px; }

.flex-direction-nav a {
height: 32px;
width: 32px;
}

/* post content */

.post-body h1 { font-size: 1.5em; }
.post-body h2 { font-size: 1.25em; }
.post-body h3 { font-size: 1.1em; }
.post-body h4 { font-size: 1em; }
.post-body h5 { font-size: 0.9em; }
.post-body h6 { font-size: 0.7em; }

.post-body input[type="text"],
.post-body input[type="tel"],
.post-body input[type="url"],
.post-body input[type="password"],
.post-body textarea {
padding: 13px;
font-size: 0.8em;
}

}

@media (max-width: 500px) {

/* sidebar */

.sidebarnbt { padding: 20px 0; }

.blog-titlenbt { font-size: 1.25em; }

/* blog */

.post-headernbt { margin-bottom: 20px; }

.post-title { font-size: 1.75em; }

/* post formats */

.post-quote blockquote { font-size: 1.5em; }

/* post content */

.post-body blockquote { padding: 25px; }

.post-body blockquote:before { content: none; }

.post-body .alignleft,
.post-body .alignright {
display: block;
max-width: 100%;
float: none;
margin-left: auto;
margin-right: auto;
}

.post-body .alignleft img,
.post-body .alignright img {
display: block;
margin: 0 auto;
}

}

@media ( max-width: 400px ) {

/* single post */

.post-meta-togglenbt { padding: 30px 4%; }

.post-meta-datenbt span { display: none; }

.post-body a.more-linknbt { padding: 12px 16px; }

/* post content */

.post-body p,
.post-body blockquote,
.post-body ul,
.post-body ol,
.post-body address,
.post-body dl,
.post-body .wp-caption,
.post-body pre {
line-height: 150%;
margin-bottom: 1.2em;
}

.post-body li,
.post-body blockquote p { line-height: 140%; }

}

@media ( max-width: 350px ) {
}

h2.date-header {
  margin: 10px 0px;
  display: none;
}

.main .widget {
  margin: 0 0 5px;
  padding: 0 0 2px;
}

.main .Blog {
  border-bottom-width: 0;
}

#header .description {
}

/* Comments----------------------------------------------- */
#comments {
padding:20px;
margin-bottom:20px;
background:#fff;
}

#comments h4 {
    font-size:22px;
    margin-bottom:10px;
}

.deleted-comment {
  font-style: italic;
  color: gray;
}

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

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

#blog-pager {
  text-align: center;
  padding:5px;
  margin:10px 0;
}

.feed-links {
  clear: both;
  margin:10px 0;
}

.comment-form {
}

#navbar-iframe {
  height: 0;
  visibility: hidden;
  display: none;
}

.separator a[style="margin-left: 1em; margin-right: 1em;"] {margin-left: auto!important;margin-right: auto!important;}

.separator a[style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"] {clear: none !important; float: none !important; margin-bottom: 0em !important; margin-right: 0em !important;}
.separator a[style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"] img {float: left !important; margin: 0px 10px 10px 0px;}

.separator a[style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"] {clear: none !important; float: none !important; margin-bottom: 0em !important; margin-right: 0em !important;}
.separator a[style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"] img {float: right !important; margin: 0px 0px 10px 10px;}

.PopularPosts .widget-content ul li {
  padding:6px 0px;
}

.reaction-buttons table{
  border:none;
  margin-bottom:5px;
}

.reaction-buttons table, .reaction-buttons td{
  border:none !important;
}

.pbtthumbimg {
  float:left;
  margin:0px 10px 5px 0px;
  padding:4px;
  border:0px solid #eee;
  background:none;
  width:200px;
  height:auto;
}

.pbtsharethisbutt  {
    overflow: hidden;
    padding: 20px 0 0px 0;
    margin: 0;
}

.pbtsharethisbutt ul  {
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.pbtsharethisbutt ul li  {
    float: left;
    margin: 0;
    padding: 0;
}

.pbtsharethisbutt ul li a  {
    padding: 0px 10px;
    display: inline-block;
}

.related-postbwrap {
    margin: 10px auto 0;
padding: 20px;
}

.related-postbwrap h4 {
    font-weight: bold;
    margin: 0 0 .5em;
}

.related-post-style-2,.related-post-style-2 li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.related-post-style-2 li {
    border-top: 0px solid #eee;
    overflow: hidden;
    padding: 10px 0px;
}

.related-post-style-2 li:first-child {
    border-top: none;
}

.related-post-style-2 .related-post-item-thumbnail {
    width: 80px;
    height: 80px;
    max-width: none;
    max-height: none;
    background-color: transparent;
    border: none;
    float: left;
    margin: 2px 10px 0 0;
    padding: 0;
}

.related-post-style-2 .related-post-item-title {
    font-weight: normal;
    font-size: 100%;
}

.related-post-style-2 .related-post-item-summary {
    display: block;
}

.author-profile {
    background: #f6f6f6;
    border: 1px solid #eee;
    margin: 10px 0 10px 0;
    padding: 8px;
    overflow: hidden;
}

.author-profile img {
    border: 1px solid #ddd;
    float: left;
    margin-right: 10px;
}

.post-iconspbt {
    margin: 5px 0 0 0;
    padding: 0px;
}

.post-locationpbt {
    margin: 5px 0;
    padding: 0px;
}

.post-body .separator a {
  border: none !important;
}

/*-------- Post Views  ----------*/
#views-container {
width: 85px;
float: right;
}
.mbtloading {
background: url('http://4.bp.blogspot.com/-PZMStRDcchY/USOp3xFp4yI/AAAAAAAAJOo/rm5FSsaSKh0/s320/mbtloading.gif') no-repeat left center;
width: 16px;
height: 16px;
}
.viewscount {
float: right;
color: #EE5D06;
font: bold italic 14px arial;
}
.views-text {
float: left;
font: bold 12px arial;
color: #333;
}
.views-icon{
background: url('http://4.bp.blogspot.com/-_dXedKDHIws/USOp369zEPI/AAAAAAAAJOs/Cv3fTZUaBTU/s1600/postviews.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}

]]></b:skin>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

/*! jQuery Migrate v1.2.1 | (c) 2005, 2013 jQuery Foundation, Inc. and other contributors | jquery.org/license */
jQuery.migrateMute===void 0&&(jQuery.migrateMute=!0),function(e,t,n){function r(n){var r=t.console;i[n]||(i[n]=!0,e.migrateWarnings.push(n),r&&r.warn&&!e.migrateMute&&(r.warn("JQMIGRATE: "+n),e.migrateTrace&&r.trace&&r.trace()))}function a(t,a,i,o){if(Object.defineProperty)try{return Object.defineProperty(t,a,{configurable:!0,enumerable:!0,get:function(){return r(o),i},set:function(e){r(o),i=e}}),n}catch(s){}e._definePropertyBroken=!0,t[a]=i}var i={};e.migrateWarnings=[],!e.migrateMute&&t.console&&t.console.log&&t.console.log("JQMIGRATE: Logging is active"),e.migrateTrace===n&&(e.migrateTrace=!0),e.migrateReset=function(){i={},e.migrateWarnings.length=0},"BackCompat"===document.compatMode&&r("jQuery is not compatible with Quirks Mode");var o=e("<input/>",{size:1}).attr("size")&&e.attrFn,s=e.attr,u=e.attrHooks.value&&e.attrHooks.value.get||function(){return null},c=e.attrHooks.value&&e.attrHooks.value.set||function(){return n},l=/^(?:input|button)$/i,d=/^[238]$/,p=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,f=/^(?:checked|selected)$/i;a(e,"attrFn",o||{},"jQuery.attrFn is deprecated"),e.attr=function(t,a,i,u){var c=a.toLowerCase(),g=t&&t.nodeType;return u&&(4>s.length&&r("jQuery.fn.attr( props, pass ) is deprecated"),t&&!d.test(g)&&(o?a in o:e.isFunction(e.fn[a])))?e(t)[a](i):("type"===a&&i!==n&&l.test(t.nodeName)&&t.parentNode&&r("Can't change the 'type' of an input or button in IE 6/7/8"),!e.attrHooks[c]&&p.test(c)&&(e.attrHooks[c]={get:function(t,r){var a,i=e.prop(t,r);return i===!0||"boolean"!=typeof i&&(a=t.getAttributeNode(r))&&a.nodeValue!==!1?r.toLowerCase():n},set:function(t,n,r){var a;return n===!1?e.removeAttr(t,r):(a=e.propFix[r]||r,a in t&&(t[a]=!0),t.setAttribute(r,r.toLowerCase())),r}},f.test(c)&&r("jQuery.fn.attr('"+c+"') may use property instead of attribute")),s.call(e,t,a,i))},e.attrHooks.value={get:function(e,t){var n=(e.nodeName||"").toLowerCase();return"button"===n?u.apply(this,arguments):("input"!==n&&"option"!==n&&r("jQuery.fn.attr('value') no longer gets properties"),t in e?e.value:null)},set:function(e,t){var a=(e.nodeName||"").toLowerCase();return"button"===a?c.apply(this,arguments):("input"!==a&&"option"!==a&&r("jQuery.fn.attr('value', val) no longer sets properties"),e.value=t,n)}};var g,h,v=e.fn.init,m=e.parseJSON,y=/^([^<]*)(<[\w\W]+>)([^>]*)$/;e.fn.init=function(t,n,a){var i;return t&&"string"==typeof t&&!e.isPlainObject(n)&&(i=y.exec(e.trim(t)))&&i[0]&&("<"!==t.charAt(0)&&r("$(html) HTML strings must start with '<' character"),i[3]&&r("$(html) HTML text after last tag is ignored"),"#"===i[0].charAt(0)&&(r("HTML string cannot start with a '#' character"),e.error("JQMIGRATE: Invalid selector string (XSS)")),n&&n.context&&(n=n.context),e.parseHTML)?v.call(this,e.parseHTML(i[2],n,!0),n,a):v.apply(this,arguments)},e.fn.init.prototype=e.fn,e.parseJSON=function(e){return e||null===e?m.apply(this,arguments):(r("jQuery.parseJSON requires a valid JSON string"),null)},e.uaMatch=function(e){e=e.toLowerCase();var t=/(chrome)[ \/]([\w.]+)/.exec(e)||/(webkit)[ \/]([\w.]+)/.exec(e)||/(opera)(?:.*version|)[ \/]([\w.]+)/.exec(e)||/(msie) ([\w.]+)/.exec(e)||0>e.indexOf("compatible")&&/(mozilla)(?:.*? rv:([\w.]+)|)/.exec(e)||[];return{browser:t[1]||"",version:t[2]||"0"}},e.browser||(g=e.uaMatch(navigator.userAgent),h={},g.browser&&(h[g.browser]=!0,h.version=g.version),h.chrome?h.webkit=!0:h.webkit&&(h.safari=!0),e.browser=h),a(e,"browser",e.browser,"jQuery.browser is deprecated"),e.sub=function(){function t(e,n){return new t.fn.init(e,n)}e.extend(!0,t,this),t.superclass=this,t.fn=t.prototype=this(),t.fn.constructor=t,t.sub=this.sub,t.fn.init=function(r,a){return a&&a instanceof e&&!(a instanceof t)&&(a=t(a)),e.fn.init.call(this,r,a,n)},t.fn.init.prototype=t.fn;var n=t(document);return r("jQuery.sub() is deprecated"),t},e.ajaxSetup({converters:{"text json":e.parseJSON}});var b=e.fn.data;e.fn.data=function(t){var a,i,o=this[0];return!o||"events"!==t||1!==arguments.length||(a=e.data(o,t),i=e._data(o,t),a!==n&&a!==i||i===n)?b.apply(this,arguments):(r("Use of jQuery.fn.data('events') is deprecated"),i)};var j=/\/(java|ecma)script/i,w=e.fn.andSelf||e.fn.addBack;e.fn.andSelf=function(){return r("jQuery.fn.andSelf() replaced by jQuery.fn.addBack()"),w.apply(this,arguments)},e.clean||(e.clean=function(t,a,i,o){a=a||document,a=!a.nodeType&&a[0]||a,a=a.ownerDocument||a,r("jQuery.clean() is deprecated");var s,u,c,l,d=[];if(e.merge(d,e.buildFragment(t,a).childNodes),i)for(c=function(e){return!e.type||j.test(e.type)?o?o.push(e.parentNode?e.parentNode.removeChild(e):e):i.appendChild(e):n},s=0;null!=(u=d[s]);s++)e.nodeName(u,"script")&&c(u)||(i.appendChild(u),u.getElementsByTagName!==n&&(l=e.grep(e.merge([],u.getElementsByTagName("script")),c),d.splice.apply(d,[s+1,0].concat(l)),s+=l.length));return d});var Q=e.event.add,x=e.event.remove,k=e.event.trigger,N=e.fn.toggle,T=e.fn.live,M=e.fn.die,S="ajaxStart|ajaxStop|ajaxSend|ajaxComplete|ajaxError|ajaxSuccess",C=RegExp("\\b(?:"+S+")\\b"),H=/(?:^|\s)hover(\.\S+|)\b/,A=function(t){return"string"!=typeof t||e.event.special.hover?t:(H.test(t)&&r("'hover' pseudo-event is deprecated, use 'mouseenter mouseleave'"),t&&t.replace(H,"mouseenter$1 mouseleave$1"))};e.event.props&&"attrChange"!==e.event.props[0]&&e.event.props.unshift("attrChange","attrName","relatedNode","srcElement"),e.event.dispatch&&a(e.event,"handle",e.event.dispatch,"jQuery.event.handle is undocumented and deprecated"),e.event.add=function(e,t,n,a,i){e!==document&&C.test(t)&&r("AJAX events should be attached to document: "+t),Q.call(this,e,A(t||""),n,a,i)},e.event.remove=function(e,t,n,r,a){x.call(this,e,A(t)||"",n,r,a)},e.fn.error=function(){var e=Array.prototype.slice.call(arguments,0);return r("jQuery.fn.error() is deprecated"),e.splice(0,0,"error"),arguments.length?this.bind.apply(this,e):(this.triggerHandler.apply(this,e),this)},e.fn.toggle=function(t,n){if(!e.isFunction(t)||!e.isFunction(n))return N.apply(this,arguments);r("jQuery.fn.toggle(handler, handler...) is deprecated");var a=arguments,i=t.guid||e.guid++,o=0,s=function(n){var r=(e._data(this,"lastToggle"+t.guid)||0)%o;return e._data(this,"lastToggle"+t.guid,r+1),n.preventDefault(),a[r].apply(this,arguments)||!1};for(s.guid=i;a.length>o;)a[o++].guid=i;return this.click(s)},e.fn.live=function(t,n,a){return r("jQuery.fn.live() is deprecated"),T?T.apply(this,arguments):(e(this.context).on(t,this.selector,n,a),this)},e.fn.die=function(t,n){return r("jQuery.fn.die() is deprecated"),M?M.apply(this,arguments):(e(this.context).off(t,this.selector||"**",n),this)},e.event.trigger=function(e,t,n,a){return n||C.test(e)||r("Global events are undocumented and deprecated"),k.call(this,e,t,n||document,a)},e.each(S.split("|"),function(t,n){e.event.special[n]={setup:function(){var t=this;return t!==document&&(e.event.add(document,n+"."+e.guid,function(){e.event.trigger(n,null,t,!0)}),e._data(this,n,e.guid++)),!1},teardown:function(){return this!==document&&e.event.remove(document,n+"."+e._data(this,n)),!1}}})}(jQuery,window);

//]]>
</script>

</head>

<body>
<div class='sidebarnbt bg-mint'>

<div class='sidebar-innernbt'>
<b:section class='headersec' id='headersec' maxwidgets='2' showaddelement='yes'>
  <b:widget id='Header1' locked='true' title='D3MI-STMIK BUMIGORA MATARAM (Header)' type='Header' version='1' visible='true'>
    <b:includable id='main'>
 <h1 class='blog-titlenbt'><a expr:href='data:blog.homepageUrl'><b:include name='title'/><span><b:include name='description'/></span></a></h1>
    </b:includable>
    <b:includable id='description'><data:description/></b:includable>
    <b:includable id='title'><data:title/></b:includable>
  </b:widget>
</b:section>
<a class='nav-togglenbt hiddennbt' href='#' title='Click to view the navigation'>
<div class='barsnbt'>
<div class='barnbt'/>
<div class='barnbt'/>
<div class='barnbt'/>
<div class='clearnbt'/>
</div>
<p>
<span class='menunbt'>Menu</span>
<span class='closenbt'>Close</span>
</p>
</a>
<b:section class='nbttopmenutop' id='nbttopmenutop' maxwidgets='3' showaddelement='yes'>
  <b:widget id='LinkList7' locked='false' title='' type='LinkList' version='1' visible='true'>
    <b:includable id='main'>
 <div class='widget-content'>
   <ul class='main-menunbt' id='nbtmenusectopul'>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
  </b:widget>
</b:section>
<p class='creditsnbt'>
<!-- Do not edit or remove credits without our permission: newbloggerthemes.com -->
Copyright &#169; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> | Powered by <a href='http://www.blogger.com/'>Blogger</a><br/>Modify by <a href='https://christcay.blogspot.co.id/' target='_blank'>Christianto Dharma Wibowo</a><br/>D3 MI STMIK BUMI GORA<a href='https://christcay.blogspot.co.id/' target='_blank' title='NewBloggerThemes.com'>  Be Informatics Ones</a>
</p>
<div class='clearnbt'/>

</div><!-- /sidebar-inner -->
</div><!-- /sidebar -->

<div class='wrappernbt' id='wrappernbt'>
<div class='section-innernbt wrapper-innernbt'>
<div class='contentnbt'>
<div class='postsnbt' id='postsnbt'>
<b:section class='mainblogsec' id='mainblogsec' preferred='yes'>
  <b:widget id='HTML1' locked='false' title='' type='HTML' visible='true'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
  <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1' visible='true'>
    <b:includable id='main' var='top'>
  <b:if cond='data:mobile == &quot;false&quot;'>

    <!-- posts -->
    <div class='blog-posts hfeed'>

      <b:include data='top' name='status-message'/>

      <data:defaultAdStart/>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </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'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>
        <b:include data='post' name='post'/>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        </div>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
          <data:adStart/>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
      <data:adEnd/>
    </div>

<div style='clear: both;'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>

    <!-- feed links -->
    <b:include name='feedLinks'/>

    <b:if cond='data:top.showStars'>
      <script src='//www.google.com/jsapi' type='text/javascript'/>
      <script type='text/javascript'>
        google.load(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});
        function initialize() {
          google.annotations.setApplicationId(<data:top.blogspotReviews/>);
          google.annotations.createAll();
          google.annotations.fetch();
        }
        google.setOnLoadCallback(initialize);
      </script>
    </b:if>

  <b:else/>
    <b:include name='mobile-main'/>
  </b:if>

  <b:if cond='data:top.showDummy'>
    <data:top.dummyBootstrap/>
  </b:if>

</b:includable>
    <b:includable id='backlinkDeleteIcon' var='backlink'>
  <span expr:class='&quot;item-control &quot; + data:backlink.adminClass'>
    <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
      <img src='//www.blogger.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'>&#160;</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 + &quot;_backlinks-create-link&quot;' 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 + &quot;_comment-editor-toggle-link&quot;' 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' frameborder='0' height='410' 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' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>
    <b:includable id='commentDeleteIcon' var='comment'>
  <span expr:class='&quot;item-control &quot; + 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='//www.blogger.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.canonicalUrl'>
    </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:else/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
  </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>
        <b:if cond='data:post.numComments == 1'>
          1 <data:commentLabel/>:
        <b:else/>
          <data:post.numComments/> <data:commentLabelPlural/>:
        </b:if>
      </h4>

      <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>
          &#160;
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
        </span>
      </b:if>

      <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
          <b:loop values='data:post.comments' var='comment'>
            <dt expr:class='&quot;comment-author &quot; + 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>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <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:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </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 + &quot;_backlinks-container&quot;'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
  </div>
</b:includable>
    <b:includable id='feedLinks'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'> <!-- 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:if cond='data:post.allowComments'>
          <b:if cond='data:post.feedLinks'>
            <b:include data='post.feedLinks' name='feedLinksBody'/>
          </b:if>
        </b:if>
      </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.allowComments'>
    <script expr:src='data:post.commentSrc' type='text/javascript'/>
    <div class='cmt_iframe_holder'/>

    <b:if cond='data:post.embedCommentForm == &quot;false&quot;'>
      <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'>
          <data:post.title/>
        </h3>

        <div class='mobile-index-arrow'>&amp;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:if cond='data:blog.pageType != &quot;static_page&quot;'>
          <b:if cond='data:post.allowComments'>
            <b:if cond='data:post.numComments != 0'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
            </b:if>
          </b:if>
        </b:if>
      </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 == &quot;index&quot;'>
        <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 + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&amp;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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>&amp;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'>
          <a expr:name='data:post.id'/>
          <b:if cond='data:post.title'>
            <h3 class='post-title entry-title'>
              <b:if cond='data:post.link'>
                <a expr:href='data:post.link'><data:post.title/></a>
              <b:else/>
                <b:if cond='data:post.url'>
                  <b:if cond='data:blog.url != data:post.url'>
                    <a expr:href='data:post.url'><data:post.title/></a>
                  <b:else/>
                    <data:post.title/>
                  </b:if>
                <b:else/>
                  <data:post.title/>
                </b:if>
              </b:if>
            </h3>
          </b:if>

          <div class='post-header'>
            <div class='post-header-line-1'/>
          </div>

          <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
            <data:post.body/>
            <div style='clear: both;'/> <!-- clear for photos floats -->
          </div>
          <!-- Post Views Counter by MBT-->
          <div id='views-container'><span class='views-icon'/><div class='views-text'>Sudah Dibaca:</div> <div class='mbtloading viewscount' id='postviews'/>
          </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'>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <data:post.author/>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn'><data:post.author/></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'>
                    <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
                  </b:if>
                </b:if>
              </span>

              <span class='post-comment-link'>
                <b:if cond='data:blog.pageType != &quot;item&quot;'>
                  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                    <b:if cond='data:post.allowComments'>
                      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
                    </b:if>
                  </b:if>
                </b:if>
              </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:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
      </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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' 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' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
  <meta expr:content='data:post.firstImageUrl' itemprop='image'/>
</b:if>
<a expr:name='data:post.id'/>
<div class='post-innernbt'>
<div class='post-headernbt'>
<p class='post-datenbt'><b:if cond='data:top.showTimestamp'><b:if cond='data:post.url'><meta expr:content='data:post.canonicalUrl' itemprop='url'/><a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><span class='published updated' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></span></a></b:if></b:if><b:if cond='data:post.allowComments'>&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>No comments</b:if><b:if cond='data:post.numComments == 1'>1 comment</b:if><b:if cond='data:post.numComments &gt;= 2'><data:post.numComments/> comments</b:if></a>&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;</b:if><b:include data='post' name='postQuickEdit'/></p>
    <b:if cond='data:post.title'>
      <h2 class='post-title entry-title' itemprop='name'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h2>
    </b:if>
</div>

<div class='post-header-line-1'/>

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
  <!-- Then use the post body as the schema.org description,
 for good G+/FB snippeting. -->
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<b:if cond='data:post.hasJumpLink'>
 <div class='jump-link'>
<a class='more-linknbt' expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
 </div>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
<b:else/>
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<data:post.body/>
<b:if cond='data:post.hasJumpLink'>
 <div class='jump-link'>
<a class='more-linknbt' expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
 </div>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
</b:if>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='pbtsharethisbutt'>
<ul class='pbt-social-icons' id='social-post-un'>
<li class='Share-this-arti'>Share:&amp;nbsp;&amp;nbsp;</li>
<li class='pbtfacebook'><a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' onclick='window.open(this.href,&quot;sharer&quot;,&quot;toolbar=0,status=0,width=626,height=436&quot;); return false;' rel='nofollow' target='_blank' title='Share this on Facebook'><i class='fa fa-facebook-square'/>&amp;nbsp;Facebook</a></li><li class='pbttwitter'><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url' rel='nofollow' target='_blank' title='Tweet This!'><i class='fa fa-twitter-square'/>&amp;nbsp;Twitter</a></li><li class='pbtgoogle'><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,   &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;' rel='nofollow' target='_blank' title='Share this on Google+'><i class='fa fa-google-plus-square'/>&amp;nbsp;Google+</a></li><li class='pbtstumbleupon'><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Stumble upon something good? Share it on StumbleUpon'><i class='fa fa-stumbleupon-circle'/>&amp;nbsp;Stumble</a></li><li class='pbtdigg'><a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Digg this!'><i class='fa fa-digg'/>&amp;nbsp;Digg</a></li>
</ul>
</div>
</b:if>

</div>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='post-metanbt'>
    <a class='post-meta-togglenbt' href='#' title='Show information about the post'>
        <div class='post-meta-toggle-innernbt'>
            <div class='barsnbt'>
                <div class='barnbt'/>
                <div class='barnbt'/>
                <div class='barnbt'/>
            </div>
            <p>Post meta</p>
            <div class='clearnbt'/>
        </div>
    </a>
    <!-- /post-meta-toggle -->

    <div class='post-meta-innernbt'>
        <p><strong>Author</strong><b:if cond='data:top.showAuthor'><span class='post-author vcard'><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></span></b:if></p>
        <p class='post-meta-datenbt'><strong>Posted</strong><a expr:href='data:post.url'><data:post.timestamp/></a></p>
        <p><strong>Categories</strong><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if></b:loop></b:if></p>
    </div>
    <!-- /post-meta-inner -->
</div>
<!-- /post-meta -->
</b:if>

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='post-iconspbt'>
      <span class='post-icons' style='padding-right:10px;'>
        <!-- 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='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>
      </span>

      <!-- share buttons -->
      <div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div>
 <div style='clear: both;'/>
 </div>
 </b:if>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='post-location post-locationpbt'>
        <b:if cond='data:top.showLocation'>
          <b:if cond='data:post.location'>
            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
          </b:if>
        </b:if>
      </div>
 </b:if>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <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:else/>
   <img itemprop='image' src='http://1.bp.blogspot.com/-JNIOn2bYVAY/U-LrAZ5hx5I/AAAAAAAAMwU/qyca43soga8/s1600/no-avatar-50.png' 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>
 </b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-postbwrap' id='bpostrelated-post'/>
<div style='clear: both;'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;Related Posts:&lt;/h4&gt;&quot;,
      numPosts: 5,
      summaryLength: 150,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 80,
      noImage: &quot;http://1.bp.blogspot.com/-Xakmg4CGXnA/Uw_8uqsGlwI/AAAAAAAALjg/AdRZNmOJpIA/s1600/no-img.png&quot;,
      containerId: &quot;bpostrelated-post&quot;,
      newTabLink: false,
      moreText: &quot;Read More&quot;,
      widgetStyle: 2,
      callBack: function() {}
};
</script>
<script type='text/javascript'>
//<![CDATA[

/*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);

//]]>
</script>
</b:if>

</div>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>

</b:includable>
    <b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <img alt='' class='icon-action' height='18' src='http://img2.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 + &quot;&amp;target=email&quot;' 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 + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' 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 + &quot;&amp;target=twitter&quot;' 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 + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' 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.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToOrkutMsg/></span></a></b:if><b:if cond='data:top.showDummy'><div class='goog-inline-block dummy-container'><data:post.dummyTag/></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' frameborder='0' height='410' 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' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </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) {
        if (entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
            }
          }
        }
        return entry.content.$t;
      }

      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;
                }
              }
            }
            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)) {
          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:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <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 + &quot;_backlinks-container&quot;'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
  </div>
</b:includable>
  </b:widget>
</b:section>
</div> <!-- /posts -->
</div> <!-- /content section-inner -->
</div> <!-- /wrapper -->
</div> <!-- /wrapper-inner -->

<script type='text/javascript'>
//<![CDATA[

jQuery(document).ready(function($) {

// Toggle blog-menu
$(".nav-togglenbt").on("click", function(){
$(this).toggleClass("active");
$(".mobile-menunbt").slideToggle();
return false;
});


// Hide mobile-menu > 960
$(window).resize(function() {
if ($(window).width() > 960) {
$(".nav-togglenbt").removeClass("active");
$(".mobile-menunbt").hide();
}
});

// Toggle post-meta
$(".post-meta-togglenbt").on("click", function(){
$(this).toggleClass("active");
$('.post-metanbt').toggleClass("active");
$(".post-meta-innernbt").slideToggle();
return false;
});


// Load Flexslider
    $(".flexslider").flexslider({
        animation: "slide",
        controlNav: false,
        prevText: "",
        nextText: "",
        smoothHeight: true
    });
 
 
    // Post meta tabs
    $('.tab-selector a').click(function() {
    $('.tab-selector a').removeClass('active');
$('.post-meta-tabs .tab').hide();
return false;
    });
 
    $('.tab-selector .tab-comments').click(function() {
    $(this).addClass('active');
$('.post-meta-tabs .tab-comments').show();
    });
 
    $('.tab-selector .tab-post-meta').click(function() {
    $(this).addClass('active');
$('.post-meta-tabs .tab-post-meta').show();
    });
 
    $('.tab-selector .tab-author-meta').click(function() {
    $(this).addClass('active');
$('.post-meta-tabs .tab-author-meta').show();
    });


// Resize videos after container
var vidSelector = "iframe, object, video";
var resizeVideo = function(sSel) {
$( sSel ).each(function() {
var $video = $(this),
$container = $video.parent(),
iTargetWidth = $container.width();

if ( !$video.attr("data-origwidth") ) {
$video.attr("data-origwidth", $video.attr("width"));
$video.attr("data-origheight", $video.attr("height"));
}

var ratio = iTargetWidth / $video.attr("data-origwidth");

$video.css("width", iTargetWidth + "px");
$video.css("height", ( $video.attr("data-origheight") * ratio ) + "px");
});
};

resizeVideo(vidSelector);

$(window).resize(function() {
resizeVideo(vidSelector);
});


});

// After Jetpack Infinite Scroll posts have loaded
( function( $ ) {
$( document.body ).on( 'post-load', function () {

// Run Flexslider
$(".flexslider").flexslider({
   animation: "slide",
   controlNav: false,
   prevText: "",
   nextText: "",
   smoothHeight: true
});

} );
} )( jQuery );

//]]>
</script>

<script src='https://www.gstatic.com/firebasejs/3.6.4/firebase.js'/>
<script>
  // Initialize Firebase
  var config = {
    apiKey: &quot;AIzaSyChnx6RTjGMQrc3dLcLC7FET-PtBf4qefM&quot;,
    authDomain: &quot;fir-pagecount.firebaseapp.com&quot;,
    databaseURL: &quot;https://fir-pagecount.firebaseio.com&quot;,
    storageBucket: &quot;fir-pagecount.appspot.com&quot;,
    messagingSenderId: &quot;908166793918&quot;
  };
  firebase.initializeApp(config);
</script>

<!-- Post Views Script by MBT -->
<script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
      }, 10);
  </script>
<script src='https://www.gstatic.com/firebasejs/3.6.4/firebase.js' type='text/javascript'/>
<script>
$.each($(&#39;a[name]&#39;), function(i, e) {
var elem = $(e).parent().find(&#39;#postviews&#39;).addClass(&#39;mbtloading&#39;);
var blogStats = new Firebase(&quot;https://fir-pagecount.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;));
blogStats.once(&#39;value&#39;, function(snapshot) {
var data = snapshot.val();
var isnew = false;
if(data == null) {
data= {};
data.value = 0;
data.url = window.location.href;
data.id = $(e).attr(&#39;name&#39;);
isnew = true;
}
elem.removeClass(&#39;mbtloading&#39;).text(data.value);
data.value++;
if(window.location.pathname!=&#39;/&#39;)
{
if(isnew)
blogStats.set(data);
else
blogStats.child(&#39;value&#39;).set(data.value);
}
});
});
</script>

</body>
</html>

Untuk pembelajaran bersama, downloadlah semua file (dalam 1 folder) pembentuknya agar kita bisa memahami dasar-dasar membangun sebuat webpage atau website atau web logging, DOWNLOAD.

Setelah mendownload file XMLnya d3MISTMIKBumigora.xml , upload kembali ke template Blog kita :
TEMPLATE MENU
Backup/Restore Menu
Choose File lalu Upload
Setelah terUpload, EDIT HTML dan lihat file XMLnya, Lalu SAVE dan klik Lihat Blog
SELAMAT MENCOBA DAN SUKSES

0 komentar:

Posting Komentar