Monday, April 24, 2017

Membuat Template Blogger Sendiri (1)

Membangun template Blogger saya sendiri adalah salah satu tujuan yang ingin saya capai. Saya dapat mengingat bahwa tidak banyak sumber daya yang membantu saya membangun template unik pertama saya dan masih belum cukup sumber di internet.
Saya juga melihat banyak orang di berbagai blog, Facebook, Twitter dan forum yang meminta posting atau sumber yang komprehensif yang dapat membantu mereka memahami dasar-dasar membangun template Blogger. Sayangnya, Seperti yang saya katakan tidak banyak sumber daya yang bisa membantu. Dan banyak yang tersedia di internet tidak berlaku lagi dan tidak berguna. Dan banyak penulis telah menghapus banyak sumber yang berguna. Saya memutuskan untuk mempublikasikan sebuah posting di blog saya yang akan membantu pengembang baru untuk memahami dasar-dasar pengembangan template blogger dan untuk membantu mereka membangun template Blogger pertama dan unik mereka.
Anda bisa menganggap posting ini kursus kecil tentang pengembangan template Blogger. Tapi sebelum bergerak lebih jauh pastikan bahwa Anda memiliki keterampilan yang dibutuhkan untuk membuat template pertama Anda:
  • HTML
  • CSS
  • Javascript / jQuery (Opsional untuk membuat halaman web interaktif)
Sekarang jika Anda tahu semua bahasa ini, maka kita siap untuk melanjutkannya.
Apa itu Template?
Sebelum bergerak lebih jauh, pertama mari kita definisikan itu apa itu template? Template adalah kombinasi dari serangkaian elemen yang berbeda untuk membangun disain sistem. Tapi ketika sampai pada pembuatan template web, maka itu berarti masih sangat mirip walau ada sedikit perbedaan.
Template web dasar terdiri dari header, area konten, sidebar dan footer.
Pastikan bahwa Anda mengingat hal-hal ini.
Jadi pertama kita akan membahas tentang pentingnya bagian <head> template dan bagaimana membangunnya ?
Membuat Bagian HEADER Blogger Template
Seperti yang saya katakan sebelumnya bagian <head> adalah yang paling penting. Jika Anda sudah familiar dengan HTML, maka Anda pasti sudah mengetahuinya. Di dalam tag <head> ...... </ head> Anda menyimpan semua informasi yang diperlukan tentang situs web Anda.
Misalnya: deskripsi meta, judul situs Anda, tautan stylesheet, tautan Javascript dan detail viewport (display design website/blog). Anda juga dapat menyimpan semua kode CSS Anda di dalam head tag. Dan Anda harus melakukannya di blogger.
Sekarang mari kita mulai menjadi lebih praktis. Buka Blogger.com dan klik tombol New Blog. Sekarang pasang judul dan taruh alamat blog anda (misal: kedailombokblogdemo.blogspot.com) dan klik tombol create blog.


Sekarang Anda akan diarahkan secara otomatis ke blog baru Anda. Sebelum melakukan apapun lebih jauh, letakkan beberapa artikel di blog Anda yang baru dibuat. (Setidaknya ada 10 artikel). Pastikan setiap artikel memiliki satu gambar.
Masuk ke Dashboard Blogger dan Pilih tab "Theme" :
Lalu EDIT HTML :
dan hapus setiap baris kode yang ada di dalam panel kode:
Sekarang Anda telah menghapus template sebelumnya dan saatnya membuat sendiri template Anda. Untuk itu salin kode yang diberikan di bawah ini dan salin ke editor template Blogger Anda seperti yang ditunjukkan pada beberapa kode 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 bahas deskripsi singkat tentang apa yang telah kita lakukan.
  • Pertama, kita menambahkan baris "<? Xml version =" 1.0 "encoding =" UTF-8 "?>", ini memberitahu browser bahwa kita menggunakan dokumen XML.
  • Kedua, kita menambahkan "<! DOCTYPE html>" untuk memberi tahu browser bahwa kita juga menggunakan HTML5 dalam dokumen ini.
Setelah tag <head> kita memasukkan kode yang diperlukan termasuk kode yang ada di dalam tag Title untuk memberitahukan browser tentang judul situs. Di dalam tag <b: skin> kita akan menempatkan stylesheet CSS untuk merancang elemen template. Kita akan membicarakannya nanti. Sekarang area head template Anda sudah diatur dan saatnya untuk bergerak lebih jauh. Tapi jangan coba simpan template anda sekarang. Karena template Anda tidak dapat disimpan sekarang karena tidak lengkap.
Mengembangkan Bagian Header Template Blogger
Sekarang ketika kita telah membuat head template Blogger, saatnya untuk mulai membangun body template. Untuk itu kita perlu terlebih dahulu membuat header template kita. Ingat, ada perbedaan besar antara head dan header area. Di dalam head area Anda menaruh informasi tentang situs Anda seperti judul situs dan lainnya, dan di dalam header area Anda dapat menempatkan logo atau menu situs Anda. Untuk membangun area header sederhana dari Template Blogger, kita akan menambahkan kode yang diberikan di bawah ini dalam kode yang ada 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 kita yang terdiri dari 4 elemen utama (header, content area, sidebar dan footer). Jadi kita mulai dengan tag html <body> setelah itu kita menambahkan bagian <header>.
Membangun Area Konten Template Blogger
Sekarang ketika kita telah membuat area <head> dan bagian header dalam tag body, saatnya untuk mulai mengembangkan bagian terpenting dari template kami yang merupakan area konten. Untuk membangunnya cukup copy kode dibawah ini dan paste ke kode yang sudah ada :
<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>
Sekarang sampai saat ini, Anda harus memiliki kode ini di panel kode template Anda:
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 Template’s Sidebar
Kita telah berhasil membuat dua area yang paling penting dari template Blogger bagian Header dan area konten. Sekarang kita perlu membuat sidebar yang akan kita copy di bawah kode yang diberikan dan akan menempelkannya di bawah kode yang sudah ada :
<aside>
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
</b:section>
</aside>
Sekarang kita sudah menambahkan sidebar dan Anda bisa menambahkan sebanyak yang Anda suka.
Membangun Template’s Footer
Sekarang ketika inti template kita dibangun dan kita hanya perlu menambahkan footer, semuanya sangat mudah bagi kita. Sekarang jika Anda ingin menambahkan footer sederhana di template Anda dengan deskripsi hak cipta, maka cukup salin kode yang diberikan di bawah ini dan tempelkan semua kode yang sudah ada :
<footer>
<div class="copyrights" style="clear: both;">
Copyrights © 2015 Kedai Lombok blogger template
</div>
</footer>
</body>
</html>
Ini adalah footer sederhana, Anda juga bisa menambahkan footer yang jauh lebih maju dengan beberapa widget.
Merancang CSS-Stylesheet Template Blogger
Sekarang kita akan mulai merancang template kita yang baru saja kita buat. Untuk itu kita mencari tag <b: skin> dimana semua styling CSS akan disimpan.
Pertama, kita akan mengatur margin body dan padding template menjadi 0. Untuk itu salin kode CSS di bawah ini dan tempelkan di depan tag ]]> </ b: skin> seperti yang ditunjukkan dibawah ini :
body {
padding: 0px;
margin: 0px;
}
Sehingga keselurahan kode menjadi :
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 Kedai Lombok blogger template
</div>
</footer>
</body>
</html>
Sekarang mari mulai merancang header template, untuk itu salin stylesheet CSS yang diberikan di bawah dan tempelkan tepat di diatas tag ]]> </ b: skin> :
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;
}
Sehingga keselurahan kode menjadi :
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 Kedai Lombok blogger template
</div>
</footer>
</body>
</html>
Sekarang mari kita desain bagian artikel template Blogger kita dimana semua konten akan muncul. Untuk itu cukup salin kode CSS di bawah ini dan tempelkan lagi tepat sebelum tag ]]> </ b: skin> :
article {
 width: 64%;
 float: left;
 font-family: sans-serif;
 border-right: 1px solid #F4EEEE;
}
Sehingga keselurahan kode menjadi :
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: 64%;
 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 Kedai Lombok blogger template
</div>
</footer>
</body>
</html>
Sudah saatnya desain sidebar template kita sekarang, tapi sebelumnya kita butuh beberapa widget di sidebar. Untuk itu, masuk ke bagian Layout dan tambahkan beberapa widget. Saya ingin Anda menambahkan widget Popular Post dan beberapa widget lainnya juga. Apalagi cari widget dan ikuti dengan widget Email. Setelah itu kembali ke area Edit HTML dan tepat sebelum tag ]]> </ b: skin> paste di bawah kode yang diberikan seperti ini :
aside {
float: left;
width: 35%;
}
aside h2 {
background: #262424;
font-family: sans-serif;
border-bottom: 2px solid #F2B25C;
color: white;
padding: 2px;
}
&nbsp;
Sehingga keselurahan kode menjadi :
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: 64%;
 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 Kedai Lombok blogger template
</div>
</footer>
</body>
</html>
Akhirnya, kita akan merancang footer template blogger. Untuk itu salin kode yang diberikan di bawah ini dan tempelkan sebelum/diatas tag ]]> </ b: skin> :
footer {
float: left;
width: 100%;
background: #262424;
border-top: 1px solid black;
color: #F2B25C;
}
Sehingga keselurahan kode menjadi :
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: 64%;
 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 Kedai Lombok blogger template
</div>
</footer>
</body>
</html>
Selesai, tentu saja, template kita tidak terlihat spektakuler tapi setidaknya kita telah berhasil membuat template sederhana yang bisa diubah menjadi template yang jauh lebih maju dengan melakukan beberapa modifikasi dan penambahan yang berguna seperti memasang menu baru dan dengan menyesuaikan widget. . Anda bisa melakukan banyak perubahan sesuai keinginan, tapi sekarang Anda tahu cara membuat template sederhana. Jadi desain template pertama Anda.
Pastikan Anda membuat template SEO ramah dan lebih cepat untuk hasil pencarian mesin pencari yang lebih baik. Jika Anda telah membuatnya, maka bagikan dengan kami, pastikan Anda membuat template ramah seluler. Untuk itu selalu tambahkan elemen metadata <meta> sebelum tag </ head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Sehingga keselurahan kode menjadi :
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: 64%;
 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>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</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 Kedai Lombok blogger template
</div>
</footer>
</body>
</html>
Setelah itu uji apakah itu mobile friendly atau tidak pada alat uji Google Mobile friendly. Juga pastikan kecepatan template Anda sudah cukup untuk memenuhi persyaratan mesin telusur modern. Untuk itu ujilah kecepatan template Blogger Anda di Pagespeed insights tool.
at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)