Cara Menghapus Showing Posts with label

September 18, 2017
default pada blog widget label, jika kita klik link label, maka akan terbuka halaman label (label page) dengan tulisan di atasnya Showing Posts with label .... Itu teks default bawaan blogger.


Cara Menghapus Showing Posts with label

Jika terasa mengganggu, dan Anda ingin menghilangkan atau menghapusnya, maka tips jitu dari Help Logger berikut ini cara menghapus tulisan Showing Posts with label di halaman label blog Anda:

LANGKAH 1
Klik Template > Edit HTML

LANGKAH 2
TEMUKAN (Ctrl+F) kode:

<b:includable id='status-message'>

Di bawah kode tersebut ada rangkaian kode lainnya. Kode selengkapnya:

<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>

LANGKAH 3 Cara Menghapus Showing Posts with Label Blogger

HAPUS kode tersebut dan GANTI dengan kode berikut ini:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

 Save Template!

Silakan cek dengan klik salah satu label posting blog Anda, maka tulisan Showing Posts with label mestinya sudah lenyap alias tiada. Happy Blogging.

Cara Membuat / Memasang Widget Kotak atau Slot Iklan di Blog

September 17, 2017
Cara Membuat / Memasang Widget Kotak atau Slot Iklan di Blog. Sobat blogger, Pada kesempatan kali ini saya ingin membuat sebuah tutorial cara membuat kotak atau space iklan banner yang berukuran 125x125 yang mungkin anda bisa tempatkan di bagian sidebar atau bisa dimana saja, karena berhubung mungkin blog anda sudah memiliki popularitas yang memang sudah bisa kategorikan blog ramai pengunjung.
Cara Membuat / Memasang Widget Kotak atau Slot Iklan di Blog
Maka menyediakan sebuah banner atau menyediakan space banner untuk pengiklan adalah suatu keharusan jika anda ingin mendapatka hasil yang lebih dari blog, karena yang sudah kita tahu, menyediakan space iklan bukan hanya untuk di prioritaskan google adsense saja, maka untuk membuka peluang mendapatkan uang dari blog, dengan menyediakan banner atau kotak iklan di blog adalah cara yang sangat efektif untuk mendapatkan uang selain dari adsense.

Cara Membuat / Memasang Widget Kotak atau Slot Iklan di Blog Untuk cara membuat space kotak iklan yang berukuran 125x125 ini sangat mudah sekali, anda juga bisa meletakan kotak iklan ini tidak harus di sidebar, namun bisa di letakan di tempat lain di blog, itu anda bisa kreasikan sendiri dan anda atur sendiri, namun disini saya akan membuat kotak iklan ini bisa terpasang di bagian sidebar blog.

Cara Membuat Widget Kotak atau Slot Iklan di Blog
1. Buka akun blogger anda.
2. Pilih menu template >> klik edit HTML.
3. Sekarang anda letakan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>
/* space iklan 125x125 */
.space_iklan {text-align: center;}
.space_iklan  img {margin:0px 5px 5px 0px;padding:5px;text-align:center;border:1px solid #ddd;}
.space_iklan  img:hover {border:1px solid #aaa}
.space_iklan  img.noborder {border:0;}
4. Save template.
5. Sekarang pilih menu tata letak >> tambah gadget / add widget >> HTML Java/script
6. Paste kode di bawah ini di kotak yang disediakan.
<div class="space_iklan">
<a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>
<a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>
<a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>
<a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>
</div>
7. Klik save.
Cara Membuat / Memasang Widget Kotak atau Slot Iklan di Blog
Itu saja untuk artikel saya kali ini di tutorial cara memasang atau membuat kotak iklan diblog. kurang lebih mohon maaf, jika ada step / tutorial yang kurang jelas tanyakan saja dikomentar semoga sukses.. :)

Mengatasi Iklan Google Adsense Error, Tiba-tiba Hilang, Tidak Tayang

September 15, 2017
Mengatasi Iklan Google Adsense Error, Tiba-tiba Hilang, Tidak Tayang - Beberapa jam yang lalu ada sedikit kehebohan dimana iklan adsense tidak tampil di laman web/blog dimana Adsense Tiba-tiba Hilang. Setelah melakukan percarian, hampir seluruh dunia mengalaminya. Ada yang hilang tapi ada juga yang iklannya tetap tampil. Saat cek email juga tidak ada pemberitahuan tentang masalah ini. Ada banyak alasan untuk “Iklan Google Adsense Anda Berhenti Bekerja” tapi Jika anda merasa belum melanggar kebijakan apapun, ini mungkin bisa membantu anda.


Cara / Solusi Memperbaiki Iklan Google Adsense Berhenti Bekerja/Adsense Tiba-tiba Hilang atau tidak tayang:

1. Login ke Account Adsense anda.
2. Klik Iklan Saya, lalu klik Unit Iklan.
3. Sekarang klik pada unit iklan baru.
4. Buat unit Iklan baru, pilih salah satu opsi dari jenis Iklan.
5. Setelah membuat unit iklan baru, salin kode itu dan letakkan di manapun di situs Anda.
6. Tunggu 10-20 menit agar unit Iklan tersebut dapat ditayangkan di situs web Anda.
7. Setelah unit Iklan Anda ditayangkan, Anda akan melihat semua iklan Anda berfungsi dengan baik.

Saya mengalaminya juga, setelah mengikuti langkah diatas, adsense kembali tampil. Itulah tips untuk Adsense Tiba-tiba Hilang

Cara Membuat Template Default Blogger Menjadi Responsive

September 14, 2017
Cara Membuat Template Default Blogger Menjadi Responsive, Sobat blogger, tutorial membuat responsive template default blogger ini sangat cocok bagi anda yang ingin berkreasi untuk membangun sebuah template dari blogger yang responsive, biasnya yang ingin memodif template bawaan blogger ini sering terkendala karena templatenya tidak responsive, namun sekarang anda bisa membuat template tersebut menjadi responsive dengan mudah sekali sobat blogger, tak sesulit yang dipikir..dan untuk tutorial ini saya belajar dari KompiAjaib.


Cara Membuat Template Default Blogger Menjadi Responsive


Bagi anda yang ingin membuat template default blogger ini menjadi responsive anda bisa ikuti tutorialnya disini, sekaligus kita belajar juga dan saya sudah prektekan dan hasilnya berhasil. :)

Cara Membuat Template Default atau Bawaan Blogger Menjadi Responsive
1. Pertama, matikan fitur navbar, pilih menu tata letak > klik navbar > Pilih "OFF"
2. Sekarang cari kode di bawah ini :
.post-body img, .post-body .tr-caption-container {
  padding: $(image.border.large.size);
}
3. Lalu ganti kode tersebut dengan kode dibawah ini.
.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}
4. Selanjutnya cari kode dibawah ini :
 <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>
5. Lalu ganti kode tersebut dengan kode di bawah ini :
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>   
6. Sekarang letakan kode dibawah ini tepat diatas kode </head>
<style type='text/css'>
@media screen and (max-width:1024px){
body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}
@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
}
</style>
 7. Klik save template dan selesai.

Selesai sudah, dan anda sudah  membuat template default blogger menjadi responsive, mudah sekali bukan, silahkan di cek saja, terimakasih buat mas Adhy atas pelajarannya :) sekian tutorial "Cara Membuat Responsive Template Default Blogger"


Referensi : http://www.kompiajaib.com/2015/03/cara-mudah-membuat-responsive-template.html

Cara Memasang Widget Recent Comment di Blogger

September 13, 2017
Cara Memasang Widget Recent Comment di Blogger - Membuat dan memasang recent komen di blog dapat memudahkan anda dan pengunjung untuk mengetahui komentar terkahir yang baru saja masuk ke blog anda . Di samping itu widget recent Comment ini juga dapat mengisi ruang yang kosong yang biasanya terletak pada sidebar blog , sehingga blog tidak tampak kosong ala kadarnya begitu saja. Namun jika terlalu banyak widget , blog juga tidak seo frendly untuk pengunjung , dikarenakan loading blog akan bertambah semakin berat .

Dalam membuat widget Recent Comment ini tidaklah terlalu sulit , kita hanya tinggal pakai widget dari para mastah yang sudah membuat dan membagikanya , jadi anda tidak usah memikirkan koding css dan javascript yang bikin kepala pusing tujuh keliling , kecuali jika anda sudah terbiasa , maka tidak sulit bagi anda untuk meodifikasi widget recent Comment ini atau bahkan menciptakan widget yang jauh lebih keren lagi.

Cara Memasang Widget Recent Comment di Blogger
credit image : blog.kangismet.net
Bagi sobat yang belom tahu seperti apa itu recent comment dan sekaligus mematangkan sobat tentang pemahaman sobat mengenai widget ini ( sudah baca artikel diatas tadi ) silahkan sobat melihat gambar diatas , Nah nantinya widget recent komentar yang akan kita buat seperti itu

Tutorial / Cara Membuat Widget Recent Comment Keren di Blogger

Kelebihan widget recent komen ini adalah sudah valid html5 , jadi bagi anda pecinta validator , tidak usah susah - susah untuk mengeditnya lagi , selain itu widget recent comment ini juga di lengkapi dengan wajah avatar orang yang berkomentar sehingga kita dapat mudah siapa saja yang berkomentar , oke langsung saja ke tiknya :

1. Pastikan sobat sudah masuk terlebih dahulu ke dasbhor blog sobat
2. Lihat menu pada bagian samping kiri , pilih menu Tata Letak => Tambah Gadget => Html/Javascript
3. Lalu salin kode dibawah ini dan tempelkan di dalam kolom html/javascript tadi :
<style type="text/css" scoped>
ul.kangismet_recent{list-style:none;margin:0;padding:0;}
.kangismet_recent li{background:none !important;margin:0 0 6px !important;padding:3px 
!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid transparent;
border-radius:9px; max-height: 100px;}
.kangismet_recent li:hover{border: 1px solid #ddd;}
.kangismet_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px
#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;width:35px;height:35px}
.kangismet_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 35,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=50,
 adminBlog='Mas Yadi';
//]]>
</script>
<script type="text/javascript" src="https://kang-is.googlecode.com/svn/trunk/javascript/recentcomments2.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=kangismet_recent&amp;&amp;max-results=50">
</script>
4. Terkahir Klik Simpan

Namun sebelum menyimpanya sobat harus perhatikan dulu , kode - kode diatas , yaitu dengan menyesuaikan kode diatas dengan blog sobat , seperti menentukan jumlah komentar yang ingin di tampilkan dan lain sebagainya , untuk jelasnya silahkan perhatikan kostumisasinya.

Kostumisasi Widget Recent Comment With Avatar

Untuk membuat tampilan berbeda, silahkan edit CSS diatas. Penjelasan script yang bisa dikostumisasi :

numComments = 5 (jumlah komentar yang ditampilkan)
showAvatar = true (false, apabila ingin menyembunyikan avatar)
avatarSize = 35 (ukuran avatar dalam pixel)
roundAvatar = true (avatar bulat)
characters = 40 (jumlah karakter isi komentar)
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm" (avatar default)
adminBlog='Kang Ismet' (nama admin blog, wajib diganti)

Nah gimana bro cara membuat recent comment sendiri di blog ? begitu gampang sekali bukan ? saya yakin jika anda membaca dan mengikuti tutorial diatas insya Allah bisa , bahkan newbie sekalipun yang baru saja mengenal blog kemaren sore , bisa mempraktekan hal semacam ini.

Apa yang terjadi jika sering mengganti Template pada Blog?

September 12, 2017
 Apa yang terjadi jika sering mengganti Template pada Blog?  Sering gonta ganti template adalah sudah jadi tradisi seorang blogger yang masih pemula di dunia blogging, dan mungkin hal ini juga adalah suatu hobby yang mengasikan, yah memang benar, tak dipungkiri, ketika saya masih baru menginjak di dunia blogging, saya juga paling hobby sekali mengganti template dan mengeditnya dengan segala macem widget, saya selalu tertarik dengan sebuah template yang tampilannya baru dan tak ayal, yang bikin tertarik adalah dengan iming-iming template SEO friendly

Apa yang terjadi jika sering mengganti Template pada Blog?

Hal ini memanglah sangat wajar bagi seorang blogger yang masih pemula, ya namanya juga pemula, anggap sajalah suatu kenang-kenangan yang nantinya jadi masa lalu, namun disini saya bukan ingin membahas kalian ini pemula atau bukan, hanya saja ini adalah sebuah pembelajaran, karena pekerjaan seperti ini mempunyai dampak yang bisa membuat anda tidak pernah maju, ko bisa? apa saja sih dampak dari sering gonta ganti template?


Apa yang terjadi jika sering mengganti Template pada Blog?

1. Menurunkan Pageviews atau Visitor pada Blog
Kenapa bisa? jelas hal ini akan membuat pusing bot crawler google, karena setiap kita mengganti sebuah template blog, bot google akan merayapi ulang struktur-struktur template blog anda, karena hal tersebut akan tampak asing, apalagi anda tidak tahu bagaimana cara mengganti template yang baik, seperti kesalahan yang sering dilakukan adalah mengganti keseluruhan kode yang terdapat pada template blog anda, tanpa mengamankan kode-kode penting yang harus di amankan terlebih dahulu.

Solusi agar tidak kehilangan pengunjung saat mengganti template blog adalah anda harus backup meta tag terlebih dahulu dan menyiapkannya ke template yang akan anda pasang.

2. Menghabiskan waktu dan tidak menguntungkan
Anggap saja anda sudah sebulan ngeblog, dan pekerjaan anda hanyalah memperhatikan tampilan blog dan sering gonta ganti template, ketika ada rilis template baru, maka langsung ganti, sebenarnya ini tidak masalah jika anda membuat blog hanya untuk tempat curhat saja, tapi jika anda membuat blog untuk masa depan, maka hal ini akan membuang buang waktu tanpa menghasilkan apapun, coba anda tanya pada diri sendiri, apa yang sudah di dapat dari sering gonta ganti template?

3. Artikel tidak bertambah karena keasikan mengganti Template
Karena saking asiknya memperhatikan tampilan blog dan sering gonta ganti template, maka jelas anda akan lupa untuk membuat posting blog itu sendiri, padahal yang paling penting dalam blog adalah isinya, (Content Is King) Jika anda ada niat untuk membuat posting, maka sudah pusing duluan karena terlalu lama di depan pc, tapi hanya memperhatikan template saja, maka pemikiran pun akan buyar dan gak konsen.

4. Kalah Saing dan Tertinggal oleh Blogger Lain, dan mulai timbul rasa jenuh
Bagaimana tidak kalah saing? inti dari blogging adalah isinya, yaitu konten blog, orang lain sudah membuat seribu artikel, anda hanya memperhatikan template saja, orang lain sudah mempunyai pengunjung anda hanya melongo saja, lalu dalam hati berkata? kenapa blogku sepi?

5. Bosan, Frustasi, dan mengakibatkan Berhenti Menulis artikel / ngeblog
Jika anda sudah bosan karena blognya tidak ada pengunjung, maka akan ada titik jenuh yang akhirnya anda akan berhenti ngeblog, dan mungkin suatu saat kembali lagi dan mungkin aka melakukan hal yang sama.

KESIMPULAN.
Menurut saya ini adalah hal yang wajar, tapi jika anda sudah menyadari hal ini, yang harus anda lakukan adalah harus menjadi blogger sejati, yeah blogger yang tidak pernah menyerah dan konsisten dalam dunia blog, jika anda ingin maju, maka perbaiki kesalahan yang pernah dibuat, belajar lagi dan belajar lagi untuk menjadi blogger yang besar,  pada intinya seorang blogger yang sudah sukses adalah awalnya juga seorang pemula, maka jika mereka bisa sukses, kita pun bisa seperti mereka. :)

1 lagi yang terpenting bagi seorang penulis / blogger adalah KONSISTEN

Membuat Box Download Seperti Samehadaku NET

September 12, 2017
Membuat Box Download Seperti Samehadaku NET -  mungkin kebanyakan dari kalian pemilik blog download anime / ost atau apapun itu bingung karena ingin membuat box download mirip seperti milik situs samehadaku net,  karena apa? dengan membuat tabel seperti foto berikut, akan membuat tampilan link didalam postingan menjadi rapi & juga mempermudahkan pengunjung yang ingin mendownload.

Membuat Box Download / Tabel Link Seperti Samehadaku NET

Sebenarnya membuat model download box seperti diatas tidaklah terlalu sulit, karena kita tinggal Inspect element saja template yang di pakai situs tersebut, nanti kita akan bisa melihat kode-kode tersebut atau juga kita bisa mengintipnya lewat source (ctrl + u).

Namun memang bagi yang belum paham betul tentang kode HTML, hal ini dirasa mungkin agak sulit, maka untuk itu saya buatkan tutorial ini untuk mempermudah sobat bagi yang mau membuat link download seperti situs samehadaku.net.

Membuat Box Download / Tabel Link Seperti Samehadaku NET

1. Buka akun blogger anda.
2. Pilih menu template >> Klik edit HTML
3. Letakan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style> :
.download-eps {
    font-size: 9px;
    font-weight: bold;
    background: none repeat scroll 0% 0% #F5F5F5;
    padding: 10px;
    margin: 10px 0px;
}
.download-eps ul {
    margin: 0px;
    padding: 0px;
    list-style: outside none none;
}
.download-eps ul li {
    background: none repeat scroll 0% 0% #E4E4E4;
    margin-bottom: 2px;
    line-height: 26px;
    padding: 0px 5px;
    font-size: 15px;
}
.download-eps ul li strong {
    background: none repeat scroll 0% 0% #1e7ce5;
    border-right: 2px solid #F5F5F5;
    width: 150px;
    display: block;
    float: left;
    margin-left: -5px;
    margin-right: 2px;
    color: #FFF;
    padding: 0px 5px;
    text-align: left;
Nahh untuk membuat kode pemanggilnya silahkan sobat copy code dibawah ini dan letakan di mode HTML saat membuat artikel.
 <div class="download-eps">
<ul>
<li style="text-align: center;">
<strong>360p</strong>
<a href="URLANDA" target="_blank" rel="nofollow">Solidfiles</a> |
<a href="URLANDA" target="_blank" rel="nofollow">Tusfiles</a> |
<a href="URLANDA" target="_blank" rel="nofollow">Acefile</a> |
<a href="URLANDA" target="_blank" rel="nofollow">Mirror</a>
<li style="text-align: center;">
<strong>720p</strong>
<a href="URLANDA" target="_blank" rel="nofollow">Solidfiles</a> |
<a href="URLANDA" target="_blank" rel="nofollow">Tusfiles</a> |
<a href="URLANDA" target="_blank" rel="nofollow">Acefile</a> |
<a href="URLANDA" target="_blank" rel="nofollow">Mirror</a>
<li style="text-align: center;">
<strong>1080p</strong>
<a href="URLANDA" target="_blank" rel="nofollow">Solidfiles</a> |
<a href="URLANDA" target="_blank" rel="nofollow">Tusfiles</a> |
<a href="URLANDA" target="_blank" rel="nofollow">Acefile</a> |
<a href="URLANDA" target="_blank" rel="nofollow">Mirror</a>
</li>
</ul>
</div> 
Silahkan ganti nama "URLANDA" atau sobat sesuaikan dengan link dan nama situs downloadnya.

Memodifikasi Widget Label Cloud Flat UI Style

September 12, 2017
Memodifikasi Widget Label Cloud Flat UI Style - Helo Sobat, Kali ini saya akan membagikan artikel tentang bagaimana cara membuat Memodifikasi Widget Label Cloud Flat UI Style keren ala Saya sendiri RZKCODE, untuk membuat Widget Label ini hanya perlu menambahkan atau mengedit ulang css label cloud yang sebelumnya sudah ada, berikut screenshot nya :

Memodifikasi Widget Label Cloud Flat UI Style

Berikut Tutorial nya :

1. Sebelum membuat Widget Label ini sobat masuk ke Tata Letak > Klik "Edit" pada Widget Label atau Buat Widget Label baru apabila sobat belum membuat Widget nya, setelah itu buat seperti ini :

Memodifikasi Widget Label Cloud Flat UI Style

2. Apabila sudah langsung saja menuju Template > Edit HTML , Cari kode CSS Label Cloud blog sobat, lalu hapus saja css yang lama dan ganti dengan kode css dibawah ini, namun apabila di template blog sobat belum terdapat kode CSS Label Cloud langsung saja sobat tambahkan kode CSS berikut :
/*CSS Label*/
.Label a{
padding-left: 5px;
padding-right: 31.5px;
color: #fff!important;
height: 32px;
background: #1abc9c;
margin-right: 2px;
line-height: 32px;
text-decoration: none;
border: none !important;
-webkit-transition: all .3s ease-in-out !important;
float: left;
margin-top: 2px;
font-size: 13px;
text-align: left; }
.Label a:hover{
color:#fff !important;
background:#16a085; }
.Label a:after{
content: &quot;&quot;;
position: absolute;
width: 0px;
height: 0px;
border-width: 16.5px;
border-style: solid;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.3) rgba(0,0,0,0.1) transparent;
}
3. Selesai.

Sekian artikel saya hari ini, maaf atas segala kekurangan atau kelebihannya, Wassalam.


Cara Membuat Template Blogger Lengkap

September 11, 2017
Cara Membuat Template Blogger Lengkap - bosen dengan template buatan orang lain dan ingin membuat template sendiri yang elegant...??? Mulailah membangun template blogger kamu sendiri dengan mengikuti tutorial membuat template blogspot/blogger dibawah ini:

Cara Membuat Template Blogger Lengkap

  1. Mengenal Struktur Dasar Template Blogger
  2. Bagian 1 dasar element / Pola
  3. Bagian 2 Body dan Outer Wrapper
  4. Bagian 3 Header
  5. Bagian 4 Block Sidebar
  6. Bagian 5 Main Wrapper, Post dan Kotak komentar
  7. Selesai Bagian 6 Footer 
  8. Mengganti header dengan gambar
  9. Selamat Berkreasi . . .

Diatas merupakan list tutorial sederhana bagaimana membuat template blogger sendiri, menciptakan template blogspot, cara membuat blogger template.

Mengganti Header Dengan Gambar

September 11, 2017
Dari template yang telah dibuat kemarin header template berwarna hitam tanpa gambar, sekarang bagaimana jika merubah tampilan header dengan gambar,,,,,bagaimana caranya?

Jika dilihat dari kode CSSnya header yang terdapat pada (langkah 3 disini) memiliki kode seperti dibawah ini :
/* HEADER WRAPPER
==================================================== */
#header-wrapper {
width:960px;
height:150px;
background:#191919;
}

#header-inner {
background-position: left;
height:150px;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
text-align: left;
color:#FFF;
}

#header h1 {
padding:40px 20px 0 10px;
line-height:1.2em;
text-shadow:2px 2px 2px #fff;
text-transform:uppercase;
letter-spacing:.2em;
}

#header a {
color:#FFF;
text-decoration:none;
}

#header a:hover {
color:#FFF;
}

#header .description {
margin:0 5px 5px 0 ;
padding:0 20px 0 10px;
max-width:700px;
letter-spacing:.2em;
color:#FFF;
}

#header img {
margin-left: auto;
margin-top: auto;
}

Dari kode header diatas terlihat bahwa header memiliki tampilan sebagai berikut:
width:960px; (lebar header)
height:150px; (tinggi header)
background:#191919;  warna latar header hitam dengan kode warna #191919

Sekarang bagaimana cara mengganti dengan gambar?
Pertama : Siapkan terlebih dahulu gambar yang akan digunakan, gambar harus berukuran sama dengan besar header yaitu 960px (pixel) X 150px (pixel) agar hasilnya rapi dan sesuai, kamu bisa membuat dengan photoshop, photoscape atau editor gambar lainnya.

Kedua  : uploadlah gambar tersebut di blogger atau di image hosting lainnya / baca (cara upload gambar) dan ambilah URL gambar tersebut.

Ketiga : Perhatikan kode dibawah ini, kode yang harus kamu rubah :
#header-wrapper {
width:960px;
height:150px;
background:#191919; /* <--- ini kode yang dirubah */
}
Dan rubah kode warna biru background:#191919; 

Menjadi :

background:#191919 url(URL-GAMBAR-DISINI) top center no-repeat;
}

Maka contoh lengkapnya jadi seperti ini :

#header-wrapper {
width:960px;
height:150px;
background:#191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYggNH410JKxdhJI75YldBRb78XYW1f9aneX8IkNX4zgSK_nzm_ZAk11vaoHbKNSHAROHxafs7aZQeiKm0YQ-9otOOJYMntecASH7IwyqVhZx1fhbZicuxD8V0itJ-sMoRAL8PoJN7Lhqp/s1600/header2.jpg) top center no-repeat;
}
Rubah https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYggNH410JKxdhJI75YldBRb78XYW1f9aneX8IkNX4zgSK_nzm_ZAk11vaoHbKNSHAROHxafs7aZQeiKm0YQ-9otOOJYMntecASH7IwyqVhZx1fhbZicuxD8V0itJ-sMoRAL8PoJN7Lhqp/s1600/header2.jpg dengan URL gambar yang telah dibuat

Simpan template dan lihat perubahannya.
Jika tidak mau repot membuat gambar gunakan gambar dibawah ini yang sudah saya persiapkan untuk template tersebut.

URL Gambar 1 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyrOk9bN6fojrBBf6w9OyrxOxpT4YrhicGBOortFnXKiMNbsnUXfpexwZXHDboyFRtqby_UPS3ih98wUUY2fcDUN7XWodkVuRo193A8R9-xivoPjhQTmJSD37CvPh8Y9pCAoiZzN_OcY2P/s1600/header1.jpg
Mengganti Header Dengan Gambar

URL Gambar 2 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYggNH410JKxdhJI75YldBRb78XYW1f9aneX8IkNX4zgSK_nzm_ZAk11vaoHbKNSHAROHxafs7aZQeiKm0YQ-9otOOJYMntecASH7IwyqVhZx1fhbZicuxD8V0itJ-sMoRAL8PoJN7Lhqp/s1600/header2.jpg
Mengganti Header Dengan Gambar

URL Gambar 3 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOPjaBlPsJilZSrIf6tLqs2cc1SGJVHwDQOyglrNREIcPxtbDbHn966xkrzw86N4zF2tCNK3x8WaC_d6wSqAW7M4AOe9JHG_T00H5G0L8LQo-nn3KSFfp0OVqjzICXuTWHJOeXFjaMfTwc/s1600/header3.jpg
Mengganti Header Dengan Gambar

URL Gambar 4 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcVCjVysXxoKvBSAR6ZdVLkbCMZvd4u-Jyf4dVcmrXcDhmgJl168zqdWvyVEqaKJBLKNoWmmg3Mh1x_NMAz1KJHBHSr9z5lk-pVMMXkoKG-tqKiT5kUwe9DjtVCuGg7Y5cy2UtEbVSHFFG/s1600/header4.jpg
Mengganti Header Dengan Gambar

URL Gambar 5 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrdC4Ef9BpP06Z6pQw7thn0d5ZPvhYx6zjUG3FUi30PpDnN1ZxMI2DCAvAdnR4Qqi5j5OWmtSC2ic563J4ZjV7O6_YZShwx55dLgISe4e-QmyDupBOzCAlQxC7Wj0MshSOaYPks94GJqgs/s1600/header5.jpg
Mengganti Header Dengan Gambar

Membuat Template Blogspot Tahap 6

September 11, 2017
Tutorial dibawah ini merupakan kelanjutan dari Tutorial Membuat Template Blogspot Tahap 5 jika belum mengikuti bagian 1 yaitu Bagian Dasar Template silahkan masuk ke Tahap 5.

Membuat Template Blogspot Tahap 6

Footer Wrapper
Element footer / kaki-kaki ini terletak dibagian paling bawah mungkin sudah pada tau didengar dari namanya saja Footer pasti dibawah. Element ini biasanya menyimpan sebuah catatan atau informasi yang berupa tautan penting seperti tentang Hak Cipta / Copyright  dan informasi sejenisnya, akan tetapi tidak mutlak harus seperti itu kita bisa menempatkan link atau info apa saja di bagian footer ini.
Pada pembuatan template ini memiliki lebar Outer Wrapper 960px berarti kita juga harus memberi lebar Footer sebesar 960px jangan kurang ataupun lebih, karena jika lebih akan nampak tak rapi dan jelek pastinya dan jika kurang pasti tampilannya juga akan lebih jelek lagi karena tidak ada keserasian.

Oke kita lanjutkan menerapkan kode untuk footer wrappernya :
1. Buka Edit HTML template yang telah dibuat

2. Cari dan hapus kode CSS dibawah ini :
/* Awal kode css untuk footer wrapper
======================================================== */
#footer {

}
3. Kemudian ganti dengan kode CSS berikut :
/* AWAL KODE UNTUK FOOTER
======================================================== */
#footer {
margin-top:15px;
margin-bottom:5px;
width:960px;
height:50px;
background:#CCC;
padding-top:25px;
}
.hakcipta{
text-align:center;
font-size:11px;
}
4. Tuju bagian bawah dan cari hapus kode HTML dibawah ini :
<div id='footer'>
<!-- Ini untuk Wadah isi dari footer -->
</div>
5. Kemudian ganti dengan kode berikut :
<div id='footer'>
<!-- Ini untuk Wadah isi dari footer -->
<div class='hakcipta'>
(c) Hak Cipta 2017 <data:blog.title/><br/>
Original Template oleh : <a href='http://namablogkamu.blogspot.com/'>Nama Blog</a> | Desiain ulang oleh : <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> | Didukung Oleh : <a href='http://blogger.com/'>Blogger</a>
</div>
</div>
6. Sekarang Simpan template
7. Silahkan Lihat hasilnya

Keterangan :
- Width:960px : Lebar footer
- Height:50px : tinggi footer 50px kamu bisa mencoba merubah dengan menambah atau mengurangi angka 50px
background:#CCC; : memiliki warna latar silver / abu-abu, bisa dirubah menjadi warna hitam dengan kode #000 atau yang lainnya juga bisa.
text-align:center; Posisi Teks cenderung ketengah
- font-size:11px; ukuran huruf sebesar 11px bisa dirubah angkanya untuk memperbesar / memperkecil tulisan.
<data:blog.title/> : kode ini akan memanggil dan menampilkan judul blog
- expr:href='data:blog.homepageUrl' kode ini akan memanggil URL halaman utama blog.

Sampai disitu langkah membuat template blogger sederhana sudah selesai dan sekarang tinggal memodifikasinya sedemikian rupa agar sesuai dengan selera, mungkin template tersebut masih perlu dioptimalkan agar template bisa bekerja dengan bagus dan maksimal.
Saya juga masih akan meneruskan artikel ini sampai tahap Optimasi dan juga Modifikasi bagi yang tertearik mengikuti tutorial ini silahkan bisa berlangganan melalui email kamu dengan mendaftar dibagian samping.

Membuat Template Blogspot Tahap 5

September 11, 2017
 Tutorial dibawah ini merupakan kelanjutan dari Tutorial Membuat Template Blogspot Tahap 4 jika belum mengikuti bagian 1 yaitu Bagian Dasar Template silahkan masuk keTahap 4.



Membuat Template Blogspot Tahap 5

Main Wrapper
Main wrapper merupakan salah satu elemen yang paling penting pada sebuah blog dimana Semua isi posting, judul post, meta dan komentar akan disimpan diarea ini, jadi kita harus secara teliti menentukan tampilan dan ukuran agar bisa serasi dan rapi.
Diposting sebelumnya telah kita tentukan lebar masing-masing Sidebar memiliki lebar 200px nah sekarang kita akan menggunakan sisa lebar dari body tersebut, template yang akan kita buat ini memiliki lebar 960px bisa dilihat pada posting (bagian 1) :
- Jadi body 960px dikurangi
- Sidebar1 200px X Sidebar2 200px = 400px
- Berarti memiliki sisa 560px.
Tapi kita tidak akan mengambil habis 560px supaya rapi dan kolom tidak saling bertabrakan kita harus menyisakan sebagai padding dan margin agar ada jarak antara Block Sidebar dan Block Post, jadi saya akan memberi lebar Main Wrapper sebesar : 535px, dan margin kiri 10px - margin kanan 10px sisa 5px biarin aja untuk ruang cadangan.

Lalu penerapannya sebagai berikut :
1. Buka Edit HTML Templatenya...!

2. Cari dan hapus kodeCSS  berikut ini :
/* awal kode css untuk main wrapper dan posting
======================================================== */
#main-wrapper {

}
3. Kemudian ganti dengan CSS dibawah ini :
/* AWAL KODE MAIN WRAPPER DAN POSTING
======================================================== */
#main-wrapper {
width: 535px;
float: left;
margin:10px;
padding:0;
word-wrap: break-word;
overflow: hidden;
border:1px solid #CCC;
}

.date-header {
font-size:14px;
font-weight:normal;
color:#CCC;
}

.post {
overflow:hidden;
float:left;
}

.post h3 {
font-size:22px;
font-weight:normal;
margin:0px;
padding:0px;
line-height:1.6em;
}

.post blockquote {
font-style:normal;
font-size:13px;
padding:10px 20px;
margin:5px 0px 5px 25px;
background:#F3F6F9;
border:1px solid #D8D8D8;
}
.post-footer{
padding:3px 8px;
font-size:11px;
background:#F5F5F5;
margin:10px 0 10px 0;
border:1px solid #E3E3E3;
}
.post-body { padding:10px 25px 0px 0; }
.post-body h2 {font-size:16px;font-weight:normal;margin:0px; padding:0px;line-height:1.6em;}
.post-body ul {font-size:12px; line-height:18px; padding-left:12px}
.post-body ol{list-style-type:decimal; line-height:18px; margin:0px; padding:0px 0px 10px 35px}
.post-body ul{list-style:none; line-height:18px; margin:0px; padding:0px 0px 10px 0px}
.post-body li{margin:0px; padding:0px}
.post-body ul li{list-style:disc outside; line-height:18px; margin:0px 30px 0px 30px; padding:5px 0px 0px 0}

/* KODE CSS UNTUK KOMENTAR
================================================== */
#comments {
padding-left:18px;
padding-right:18px;
margin-top:10px;
}

#comments h4 {font-size:14px;padding:5px;}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
padding-left:20px;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
padding-left:20px;
}
#comments-block .comment-author {
margin:.5em 0;
margin-top:10px;
padding:5px;
background:#F5F5F5;
border-bottom:1px solid #D8D8D8;
}
#comments-block .comment-body {
padding:5px 5px 5px 10px;
margin:-6px 0 -9px 0;
background:#F5F5F5;
border-top:1px solid #fff;
}
#comments-block .comment-footer {
padding:0px 5px 0px 5px;
font-size:11px;
background:#F5F5F5;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float:left;
}
#blog-pager-older-link {
float:right;
margin-right:10px;
}
#blog-pager {
text-align:center;
padding:0px 2px 10px 12px;
}
#blog-pager-older-link,#blog-pager-newer-link {
background:#F5F5F5;
padding:1px 8px;
border:1px solid #D8D8D8;
}
.feed-links {
display:none;
}
4. Tuju bagian bawah cari kode berikut ini (letakknya diantara kode sidebar1 dan sidebar2)
<div id='main-wrapper'>
<!-- Ini untuk Wadah posting, komentar atau kontent lainnya -->
</div>
5. Hapus dan ganti dengan kode dibawah ini :
<div id='main-wrapper'>
<!-- Ini untuk Wadah posting, komentar atau kontent lainnya -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
Jika kode pada langkah 4 sudah sama atau menyerupai kode langkah 5, langkah ini bisa dilewati.

6. Simpan Template.

Sekarang template sudah bisa dilihat bentuknya dan sudah bisa digunakan untuk posting, pasang widget, masih kurang satu langkah lagi template sempurna yaitu Footer Wrapper. 


Keterangan :
showaddelement='no' : Ini menunjukkan bahwa Link "Add Gadget" tidak dipampilkan kamu bisa merubah 'no" menjadi 'yes' jika ingin menampilkan Link "Add Gadget".
-  locked='true' : Ini menunjukkan bahwa Element posting terkunci dan tidak bisa dipindah-pindah.

Membuat Template Blogspot Tahap 4

September 11, 2017
Tutorial dibawah ini merupakan kelanjutan dari Tutorial Mmebuat Template Blogspot Tahap 3 jika belum mengikuti bagian 1 yaitu Bagian Dasar Template silahkan masuk ke Bagian 3.


Membuat Template Blogspot Tahap 4


Sidebar Wrapper
Kemarin telah saya bahas mengenai yaitu mengenai penentuan dan pembuatan Header Wrapper sekarang masuk ke tahap selanjutnya yaitu menentukan dan membuat Block untuk Sidebar Wrapper dimana block sidebar tempat untuk menyimpan segala macam aksesoris dari blog kita nah langsung saja berikut langkah-langkahnya :

1. Buka Halaman Edit HTML yang kemaren dibuat
2. Cari dan hapus kode berikut ini :
/* Awal kode css untuk block sidebar1 dan block sidebar2
======================================================== */
#sidebar1 {
}
#sidebar2 {

}

3. Lalu ganti dengan kode dibawah ini
/* AWAL KODE SIDEBAR 1 DAN SIDEBAR 2
======================================================== */
#sidebar1 {
  width:200px;
  float:left;
  margin:10px 0 0 0;
  padding:0;
  word-wrap: break-word;
  overflow: hidden;
  }
#sidebar2 {
  width:200px;
  margin:10px 0 0 0;
  padding:0;
  float:right;
  word-wrap: break-word;
  overflow: hidden;

  }


#sidebar1 h2, #sidebar2 h2 { /* judul sidebar gan */
background:#CCC;
margin:0;
  padding:5px;
  font-size:14px;
  font-weight:bold;
  color:#191919;
  }

.sidebar {
  font-color:#151515;
  margin:0;
}
.sidebar ul {
list-style:none;
margin:0;
padding:0;
}
.sidebar ol {
list-style:decimal;
}
.sidebar li {
line-height:1.4em;
border-bottom:1px dotted #EAEAEA;
}
.sidebar .widget-content {
padding:10px;
margin:0;
}
.sidebar .widget {
margin:0px;
margin-bottom:10px;
border:1px solid #CCC;
}
.clear {
  height:1px;
  margin:0;
  padding:0;
  clear:both;
  }
/* BATAS AKHIR KODE SIDEBAR GANN...... */
4. Sekarang tuju bagian bawah dan cari kode seperti berikut ini:
<div id='sidebar1'>
<!-- Ini untuk Wadah widget blog sidebar1 -->
</div>
Kemudian ganti dengan kode dibawah ini :
<div id='sidebar1'>
<b:section class='sidebar' id='sidebar-kiri' preferred='yes'/>
</div>

5. Masih diarea ini cari kode berikut :
<div id='sidebar2'>
<!-- Ini untuk Wadah widget blog sidebar2 -->
</div>
Kemudian ganti dengan kode seperti berikut ini :
<div id='sidebar2'>
<b:section class='sidebar' id='sidebar-kanan' preferred='yes'/>
</div>
Sekarang Simpan template dan lihat hasilnya...!!! gimana masih berantakan ya tenang dulu masih ada kelanjutannya.
Keterangan :
Sidebar memiliki ukuran lebar masing-masing 200px kamu bisa menambah atau mengurangi lebar sidebar tersebut, tetapi harus diingat dalam penambahan lebar setiap element akan mempengaruhi element yang lain jadi jika melakukan perubahan pada lebar sidebar harap rubah juga lebar main-wrapper dengan menyesuaikan mengurangi lebar main-wrapper.

Membuat Template Blogspot Tahap 3

September 11, 2017
Tutorial dibawah ini merupakan kelanjutan dari Tutorial Membuat Template Blogspot Tahap 2 jika belum mengikuti bagian 2 yaitu Bagian Dasar Template silahkan masuk ke Bagian 2.

Membuat Template Blogspot Tahap 3

Setelah bagian body dan Outer wrapper telah ditentukan sekarang langkah selanjutnya yaitu menentukan bentuk atau model Header Wrapper, pada bagian header ini yang ditentukan yaitu meliputi :
- Lebar dan tinggi Header
- Warna latar header
- Judul blog dan deskripsi (kita juga bisa menentukan logo blog melalui bagian header ini)

1. Sekarang masuk ke Edit HTML blog kamu caranya (blog yang digunakan untuk experiment) :
- Klik Blog Yang Dibuat
- Klik Template
- Klik Edit HTML
- Akan muncul sebuah peringatan dalam kotak kuning klik saja Proceed / Lanjutkan
- Maka akan terlihat kode HTML template blog kamu. 


2. Cari dan hapus kode dibawah ini :
/* Awal untuk kode css header wrapper
======================================================== */
#header-wrapper {

}
3. Kemudian ganti kode tersebut dengan kode dibawah ini :
/* HEADER WRAPPER
==================================================== */
#header-wrapper {
width:960px;
height:150px;
background:#191919;
}

#header-inner {
background-position: left;
height:150px;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
text-align: left;
color:#FFF;
}

#header h1 {
padding:40px 20px 0 10px;
line-height:1.2em;
text-shadow:2px 2px 2px #fff;
text-transform:uppercase;
letter-spacing:.2em;
}

#header a {
color:#FFF;
text-decoration:none;
}

#header a:hover {
color:#FFF;
}

#header .description {
margin:0 5px 5px 0 ;
padding:0 20px 0 10px;
max-width:700px;
letter-spacing:.2em;
color:#FFF;
}

#header img {
margin-left: auto;
margin-top: auto;
}
Keterangan :
  • #header-wrapper :  memiliki lebar 960px dan tinggi 150px dengan warna latar hitam
  • #header h1 : ini akan menentukan karakter judul blog
  • #header .decription : ini akan menentukan karakter deskripsi atau keterangan blog

Membuat Template Blogspot Tahap 2

September 11, 2017
Tutorial dibawah ini merupakan kelanjutan dari Membuat Template Blogspot Tahap 1 jika belum mengikuti bagian 1 yaitu Bagian Dasar Template silahkan masuk ke Struktur Dasar Template.
Setelah kemarin memposting Artikel membuat template blogspot bagian 1 sekarang saya lanjutkan tentang membuat template blogspot untuk bagian 2, pada bagian 2 ini akan membahas penentuan tampilan pada bagian body dan Outer Wrapper, dimana body akan menentukan keseluruhan isi blog nantinya :

Membuat Template Blogspot Tahap 2


1. Sekarang masuk ke Edit HTML blog kamu caranya :
- Klik Blog Yang Dibuat
- Klik Template
- Klik Edit HTML
- Akan muncul sebuah peringatan dalam kotak kuning klik saja Proceed / Lanjutkan
- Maka akan terlihat kode HTML template blog kamu.


2. Kalau sudah hapus kode berikut :
body { /* disini nanti kode CSS untuk body */

}

#outer-wrapper { /* disini nanti kode css untuk outer wrapper */

}
3. Kalau sudah kemudian ganti dengan kode dibawah ini
* {
margin:0;
padding:0;
border:none;
vertical-align:baseline;
outline:none;
}
.clear {clear:both;}
a:active {outline:none;}
a:focus {moz-outline-style:none;}

body {
background:#FFF;
font-size:13px;
font-family:Arial;
margin:0;
padding:0;
}
a {color:#0378B2;text-decoration:none;}
a:hover {color:#0378B2;text-decoration:underline;}
a:visited {color:#084B8A;text-decoration:nounderline;}
a img {border-width:1px; color:#EAEAEA;}

/* OUTER WRAPPER
==================================================== */
#outer-wrapper {
width:960px;
margin:0 auto;
padding:0;
}
Keterangan :
Body :
  • Background warna #FFF yaitu putih kamu bisa menggantinya dengan warna lain
  • Ukuran font 13px dengan jenis font Arial (kamu juga bisa menggantinya dendan font yang kamu inginkan misalnya 12px atau 14px dan Arial bisa diganti misalnya Tahoma, Georgia dll.)
  • a {color:#0378B2;text-decoration:none;} ini menentukan warna link dasar
  • a:hover {color:#0378B2;text-decoration:underline;} ini menentukan karakter Link ketika disorot
  • a:visited {color:#084B8A;text-decoration:nounderline;} ini menentukan karakter Link yang sudah dikunjungi
  • a img {border-width:1px; color:#EAEAEA;} ini menentukan karakter sebuah Link gambar
Outer-Wrapper
  • Width:960px : memiliki ukuran lebar 960px kamu bisa merubahnya nanti ingat (perubahan ini akan mempengaruhi elemen yang lain jadi kalau ingin merubah lebar Outer-wrapper harus merubah juga elemen yang lain)
  • margin:0 auto : maksudnya margin atau jarak luar akan ditentukan secara otomatis berarti posisi tampilan akan tepat berada ditengah-tengah karena auto bersifat adil.

Membuat Template Blogspot Tahap 1

September 11, 2017
Membuat Template Blogger / Blogspot, kemarin saya membagikan template blogger secara gratis sudah ratusan yang mendownload walau jelek tapi saya tetap bangga karena buatan saya sendiri, akan tetapi pada artikel kali ini saya akan membahas langkah demi langkah bagaimana membuat template blogger mulai dari nol, Jika kamu belum pernah membuat sebuah template pernah membayangkan bagimana sulitnya membuat template tetapi harus diketahui bahwa membuat template tidak sesulit yang dibayangkan asalkan kita punya kemauan dan juga ketelitian sebuah template dapat dibuat dengan mudah.
Membuat template blogger merupakan salah satu pekerjaan yang susah-susah gampang , template blogger menggunakan platform HTML/XML, untuk itu saya akan membahas membuat template blogspot dengan XML/HTML version agar dalam panduannya tidak membingungkan dan mudah dipahami oleh siapa saja yang mengikuti saya bagi dalam beberapa sub bagian yang akan posting secara berkala.

Membuat Template Blogspot Tahap 1


Dokumentasi :
Pertama kita harus memiliki pola atau gambaran seperti apa template yang akan kita buat, nah di sini kita akan membuat sebuah template untuk blogspot 3 kolom dengan rincian elemen laman Header, Block Sidebar1 dan Sidebar2, Main-wrapper dan Footer, masing-masing block tersebut nanti sebagi wadah tampilnya konten widget, dan keperluan lainnya (hal ini dimaksudkan agar kita lebih mudah dalam membuat template). agar lebih mudah untuk diidentifikasi dikemudian hari maka template ini akan saya beri nama Perjuangan Template

1. Pertama kita harus mempersiapkan Struktur Dasar Template tersebut, disini kita akan membuat template langsung diblog secara Online dengan maksud agar langsung bisa dilihat hasilnya, untuk itu buatlah satu blog baru jangan menggunakan blog yang aktif, karena saya tidak bertanggung jawab dengan kerusakan apabila kamu menggunakan blog yang aktif.

2. Kalau blog sudah jadi silahkan masuk ke halaman Edit HTML dari blog yang baru saja dibuat tadi
- Klik Blog Yang Dibuat
- Klik Template
- Klik Edit HTML
- Akan muncul sebuah peringatan dalam kotak kuning klik saja Proceed / Lanjutkan
- Maka akan terlihat kode HTML template blog kamu.
- Hapus semua kode tersebut kemudian ganti dengan kode Struktur Dasar Template Blogger Versi XML dibawah ini

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' 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>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>  <!-- ini judul blog -->

    <b:skin><![CDATA[
/*
-----------------------------------------------
Blogger Template Style
Name:     Perjuangan Template
Designer: Nama Kamu
URL:      http://blogkamu.blogspot.co.id
----------------------------------------------- */
/* AREA KODE CSS */
body { /* disini nanti kode CSS untuk body */

}

#outer-wrapper { /* disini nanti kode css untuk outer wrapper */

}


/* Awal untuk kode css header wrapper
======================================================== */

#header-wrapper {

}

/* Awal kode css untuk block sidebar1 dan block sidebar2
======================================================== */
 #sidebar1 {
}
#sidebar2 {

}

/* awal kode css untuk main wrapper dan posting
======================================================== */
#main-wrapper {

}

/* Awal kode css untuk footer wrapper
======================================================== */
#footer {

}

]]></b:skin>  <!-- ini batas akhir css / skin -->

   <!-- Disini bisa diletakkan kode javascripts -->
  </head>
  <body>
   <div id='outer-wrapper'> <!-- Awal dari Outer Wrapper -->

       <div id='header-wrapper'>
               <!-- Ini untuk Wadah Judul dan keterangan Blog -->
        </div>

        <div id='sidebar1'>
               <!-- Ini untuk Wadah widget blog sidebar1 -->
        </div>

        <div id='main-wrapper'>
                  <!-- Ini untuk Wadah posting, komentar atau kontent lainnya -->
                <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
        </div>

       <div id='sidebar2'>
                    <!-- Ini untuk Wadah widget blog sidebar2 -->
       </div>

        <div class='clear'>&#160;</div>

<div class='clear'/> <!-- batas ruang dari outer: JANGAN DIHAPUS!!! -->

       <div id='footer'>
                      <!-- Ini untuk Wadah isi dari footer -->
       </div>

    </div> <!-- Akhir dari Outer Wrapper -->

  </body>
</html>

- Simpan template dan lihat blog (untuk keterangan lanjut dari kode tag diatas bisa dibaca di sini)
- Hasilnya masih kosong karena belum ada isi tunggu artikel berikutnya....!!!


Informasi Penting Membuat Template Blogger
Dalam setiap penambahan sebuah element juga harus disertai dengan kode CSS untuk mengkonfigurasi tampilannya, jadi ketika menambahkan widget baru harus ada pasangannya masing-masing antara Widget HTML dengan CSS. Dari kode diatas bisa dilihat bahwa :

Pemanggilan ID HTML dan CSS
  • <div id='header-wrapper'>  memiliki pasangan pada kode CSS yaitu #header-wrapper { } 
  • <div id='sidebar1'>  memiliki pasangan pada kode CSS yaitu #sidebar1 { } begitu juga yang lainnya.
ID ini harus bersifat unik atau tidak boleh ada yang sama, jika tidak maka template tidak akan bekerja dengan baik, bahkan tidak akan ada pengaruh perubahan pada template.
Jika akan menggunakan sebuah CSS untuk pemanggilan lebih dari satu element kamu harus mengganti <div id= menjadi <div class= dan juga merubah prefix pada CSS menjadi tanda titik (.) bukan tanda pagar (#)

Contoh :

CSS : #sidebar1 { }

HTML :
<div id='sidebar1'>
</div>

Maka bisa diganti dengan metode pemanggilan class bukan id

CSS : .sidebar1 { }

HTML
<div class='sidebar1'>
</div>

perubahan terjadi pada kode yang saya cetak biru.
Semua Elemen harus diawali dengan tag pembuka dan diakhiri dengan tag penutup, tanpa tag pembuka atau tag penutu sebuah HTML tidak akan berjalan sama sekali atau percuma.
Tag pembuka ditandai dengan < dan penutup ditandai dengan   </

Contoh 1:
<div class='sidebar1'>

</div> << ini adalah tag penutup dari div

Contoh 2 :
<title><data:blog.pageTitle/></title>

<title> : Tag pembuka
</title> : Tag penutup

Itu merupakan langkah awal dari membuat template blogspot, posting ini masih bersambung dalam beberapa bagian lagi jika tertarik silahkan bisa ditunggu kelanjutannya. Bila  ada kejanggalan dengan artikel diatas atau mungkin hal yang kurang jelas untuk dimengerti atau bahkan ada kesalahan mohon koreksinya.
Terima kasih.