Cara Membuat Template Blog Sendiri 1

Membuat Template bolg sendiri?. Sepertinya menarik kalau kita bisa membuat satu blog dengan rancangan template hasil karya kita sendiri. Untuk pembelajaran disini kita akan coba membahas mengenai template minima. Template ini adalah yang paling banyak digunakan para blogger untuk melakukan eksperimen, karena template ini menggunakan kode css yang tidak begitu rumit. Sehingganya tidak terlalu sulit untuk dipelajari.

Ok deh, tidak sabar nih. Kita ke TPK aja yuk.

Pertama  
Sebelum kita memulai merancang template kita. Sebaiknya kita bahas dulu bagian paling mendasar dari pembuatan template blog, dengan kata lain kita harus mengenal dulu bagian - bagian template blogger
Di dalam template minima strukturnya terdiri atas bagian-bagian seperti di bawah 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">
Bagian ini merupakan deklarasi file XHTML pada template Blogger dengan jenis Strict. XHTML jenis Strict digunakan untuk membuat halaman yang layout dan formatnya dikontrol penuh oleh CSS. Pada deklarasi ini tidak menggunakan tag font dan table


<head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <meta expr:content='data:blog.metaDescription' name='description'/>
    <b:skin><![CDATA[/*
Ini bagian kepala atau head template blog yang berisi judul blog dan awal dari kode CSS. Di sinilah tempat untuk meletakkan meta tag baik deskripsi, keyword, atau meta - tag lainnya yang akan digunakan pada template.

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }
Body adalah bagian paling dasar dari bagian-bagian template lainya, body pada template blog biasanya memenuhi halaman dari browser baru setelah itu tersusun bagian-bagian lainya.

a:link {
  color:$linkcolor;
  text-decoration:none;
  }
Kode ini adalah deklarasi untuk mengubah tampilan link pada template blog, 

a:visited {
  color:$visitedlinkcolor;
  text-decoration:none;
  }
Kode ini untuk merubah tampilan link yang pernah di kunjungi

a:hover {
  color:$titlecolor;
  text-decoration:underline;
}
 Merubah tampilan link ketika pointer di atas link

a img {
  border-width:0;
  }
Mengubah tampilan link bergambar

/* Header
-----------------------------------------------
 */

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }
Terdapat pada bagian atas template yang berisi judul dan deskripsi blog dan merupakan bagian pertama yang di baca serach engine.

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}
mengubah tampilan header bagian dalam.

#header { 
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}
Mengubah tampilan judul blog dan deskripsi blog secara keseluruhan

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}
Mengubah tampilan judul dan deskripsi blog tingkat 1

#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }
Mengubah tampilan link yang terdapat pada header

#header a:hover {
  color:$pagetitlecolor;
  }
Mengubah tampilan link pada header jika pointer mouse berada di atas link.

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
 }
Mengubah tampilan deskripsi blog yang terdapat pada header. Biasanya pada tingkat 2 yaitu h2

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}
Mengubah tampilan gambar header.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }
berisi seluruh wrapper seperti header-wrapper, main-wrapper, sidebar-wrapper,  footer-wrapper dan content-wrapper.

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }
 adalah area postingan ( bagian yang dalamnya adalah artikel )

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
Berfungsi sebagai tempat widget/gadget yang sobat pasang baik widget dari pihak blogger atau melibatkan pihak ketiga dengan fasilitas HTML/Javascript.

/* Headings
----------------------------------------------- */
h2 {
  margin:1.5em 0 .75em;
  font:$headerfont;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:$sidebarcolor;
}
Kode CSS ini mengubah tampilan judul pada blog dengan kelas h2 seperti judul artikel, judul widget pada sidebar,judul widget-footer, dll.
sekarang kita masuk ke bagian post nya.

/* Posts
-----------------------------------------------
 */
h2.date-header {
  margin:1.5em 0 .5em;
  }
Mengubah tampilan tanggal artikel.

.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }
Mengubah tampilan artikel blog.

.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}
Mengubah tampilan judul artikel blog.

.post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:normal;
}
Mengubah tampilan link judul artikel.

.post h3 strong, .post h3 a:hover {
  color:$textcolor;
}
mengubah tampilan link judul artikel ketika di lewati pointer.

.post-body {
  margin:0 0 .75em;
  line-height:1.6em;
}
Mengubah tampilan bagian posting.

.post-body blockquote {
  line-height:1.3em; 
}
 Mengubah / memodifikasi blockquote pada postingan blog.

.post-footer {
  margin: .75em 0;
  color:$sidebarcolor;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  line-height: 1.4em;
}
Mengubah catatan kaki atau bagin footer pada postingan blog.

.comment-link {
  margin-$startSide:.6em;
}
Mengubah tampilan link komentar ( jumlah komentar ).

.post img, table.tr-caption-container {
  padding:4px;
  border:1px solid $bordercolor;
}
Mengubah tampilan image / gambar pada areal postingan.

/* Comments
----------------------------------------------- */
#comments h4 {
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color: $sidebarcolor;
  }
Mengubah tampilan judul bagian komentar.

#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
Mengubah tampilan bagian keseluruhan komentar.

#comments-block .comment-author {
  margin:.5em 0;
  }
Mengubah tampilan link author atau link komentator

#comments-block .comment-body {
  margin:.25em 0 0;
  }
 Mengubah tampilan isi komentar.

#comments-block .comment-footer {
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
Mengubah tampilan footer komentar. Comment-footer biasanya berisi tanggal komentar.

.deleted-comment {
  font-style:italic;
  color:gray;
  }
Mengubah tampilan komentar yang telah di hapus.

.feed-links {
  clear: both;
  line-height: 2.5em;
}
mengubah tampilan link feed

/* Sidebar Content
----------------------------------------------- */
.sidebar { 
  color: $sidebartextcolor;
  line-height: 1.5em;
 }
 Mengubah tampilan sidebar secara keseluruhan.

.sidebar ul {
  list-style:none;
  margin:0 0 0;
  padding:0 0 0;
}
Mengubah tampilan daftar pada sidebar.

.sidebar li {
  margin:0;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:.25em;
  padding-$startSide:15px;
  text-indent:-15px;
  line-height:1.5em;
  }
Mengubah tampilan definisi daftar dari tag <ul>

.sidebar .widget, .main .widget { 
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
 }
Mengubah tampilan widget secara keseluruhan termasuk area postingan dan footer.

/* Footer
----------------------------------------------- */
#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}
Pada dasarnya sam seperti sidebar namu lataknya yang berbeda. footer berada di bagian paling bawah atau di atas dari credits template blog ( hanya ada pada template yang di download ).

]]></b:skin>
Merupakan akhir dari kode css pada template blogger. Di bawah  kode ini,sobat bisa menyisipkan script. (seperti readmore, related post, dll )

</head>
Merupakan pasang atau tag penutup dari tag <head> pada dokumen HTML.

  <body>

Bagian ini di mulai dari kode berikut.
  <div id='outer-wrapper'><div id='wrap2'>
 Merupakan kode html dari outer-wrapper.

<div id='header-wrapper'>
 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='tes tatelu (Header)' type='Header'/>
</b:section>
 </div>
Merupakan kode html dari header-wrapper.

<div id='content-wrapper'>
Bagian main-wrapper dan sidebar-wrapper berada dalam tag ini

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>
 </div>
Bagian antara header-wrapper dan content-wrapper.

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
 </div>
Kode html dari area postingan atau main-wrapper

 <div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
</b:section>
 </div>
Kode html untuk sidebar-wrapper

<!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'>&#160;</div>
Mengatur ketinggian sidebar-wrapper dan main-wrapper supaya sama tinggi.

</div> <!-- end content-wrapper -->
akhir dari content-wrapper' .

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
 </div>
Kode html untuk area footer-wrapper

  </div></div> <!-- end outer-wrapper -->
Akhir dari outer-wrapper.


<b:include data='blog' name='google-analytics'/>
jika sobat menemukan kode seperti ini, kode ini adalah kode google analityc, yaitu fasilitas untuk menghitung jumlah pengunjung blog.

</body>
Merupakan tag penutup dari tag body pada dokumen html.

</html>
Merupakan tag penutup dari dokumen html.

Baca kelanjutan cara membuat template blog sendiri pada bagian 2 nya....

ADMINDES_PRO (Aplikasi Pemerintahan Desa yang Praktis)


Salam
Memasuki era komputerisasi pada tata Administrasi di Desa di Indonesia khususnya, disini saya ingin berbagi sedikit informasi berkaitan dengan software yang mungkin saja akan berguna di Desa anda semua.
Sebuah aplikasi lokal Indonesia yang khusus diperuntukkan untuk penanganan tata administrasi pemerintahan Desa di Indonesia. Namanya AdmindesPro. Saat ini serinya sudah update DsP_3.4.1
Aplikasi AdmindesPro ini merupakan aplikasi yang bersifat Server Client. Jadi dapat digunakan dalam sistem paralel LAN atau Wifi dengan banyak komputer / Laptop dengan data di satu Server. Sepertinya menarik untuk di pelajari.dan di implementasikan penggunaannya di desa-desa di wilayah NKRI.

App AdmindesPro menggunakan basis data MySql dan SqLite3. Maka, jika anda memilih basis data MySql sebagai database app AdmindesPro anda, untuk dapat menjalankan aplikasi AdmindesPro anda tentu wajib terinstal setidaknya MySql Server di Komputer / Laptop yang seting/difungsikan sebagai Server nya. Atau dapat juga menggunakan MySql yang terintegrasi kedalam sebuah server local seperti XAMPP/WAMPP.
Bagi anda yang ingin mencoba untuk mempelajari atau sekedar iseng-iseng ingin tahu seperti apa kemampuan aplikasi kecil ini. Di bagian akhir tulisan ini saya sertakan Link untuk menuju halaman informasi bagaimana cara Instalasi dan men seting aplikasi AdmindesPro ini. Menurut saya instalasinya tidak begitu sulit kok. Sistem koneksi ke database nya juga cukup sederhana. Sehingga tidak harus diperlukan pengetahuan yang khusus untuk itu. D.
Apa di Desa yang anda tangani saat ini masih melayani penduduknya yang meminta surat-surat dengan selalu di ketik secara manual satu persatu? Masih selalu menghitung jumlah penduduknya setiap akan membuat laporan data kependudukan dengan bantuan kalkulator?
Saya rasa yang seperti itu pekerjaan Pak Carik era seribu sembilan ratusan lah. D.D.
Tapi sukurlah, anda sudah berhasil menemukan halaman ini. Mudah2an hari ini merupakan hari terakhir anda membongkar-bongkar arsip surat yang ada di map. D.
Sekarang saat nya kita berbenah ADMINSTRASI TATA PEMERINTAHAN DESA KITA.
Kalau bukan kita yang memmulai, siapa yang akan peduli dengan desa kita.
Semoga informasi ini bermanfaat,  mohon maaf kalau ada salah kata.
Dan bagi yang ingin mendapatkan data Kode Wilayah Indonesia untuk pengisian data nama dan kode wilayah desa untuk kelengkapan data di app AdmindesPro bisa di unduh disini
Salam.
Penting !:
Bagi anda pengguna AdmindesPro_3.1.3 atau yang lebih baru yang sebelumnya sudah menggunakan admindesPro dengan seri dibawahnya (DsP_2.1.7 kebawah) perlu melakukan(disarankan) proses Update sistem database aplikasi melalui menu Extra>Update dari seri 2.x.x.
 Proses tersebut akan mensinkronkan sistem alamat pada database. Jika proses ini diabaikan, maka akan ada beberapa fitur yang berkemungkinan terjadi dibaca tidak sesuai dengan kondisi sebenarnya oleh sistem. Dan setelah proses update tersebut dilakukan disarankan jangan sekali-kali melakukan restore data lagi dari data hasil backup DsP seri 2.x.x. karena sistem data sudah mengalami perubahan. Sehingga akan bisa mengakibatkan data pada menu Pajak dan Keuangan akan hilang dari daftar.
Link Download nya

Aplikasi Air Bersih Aab_1.1.7 (Desktop)

Salam
Selamat datang di adituek.net Blog. Alhamdulillah selesai dirilis satu aplikasi Pembayaran Air Bersih yang sederhana namun cukup memadai untuk di terapkan dalam penanganan tagihan air bersih di desa-desa. dengan fitur mode tarip yang fleksibel. bisa di sesuaikan dengan kebutuhan sesuai dengan mode penagihan yang di berlakukan.
Aplikasi Aab ini sengaja dirilis untuk merespon banyaknya email yang masuk menanyakan keberadaan aplikasi pembayaran air bersih yang portable desktop offline. Terkait postingan saya beberapa waktu lalu mengenai aplikasi pembayaran air berbasis Excel yang sangat sederhana.
Aplikasi Pembayaran Air Aab ini akan baik berjalan di atas platform Windows XP ke atas baik 32bit maupun 64bit. Membutuhkan ruang minimal 350 MB ruang kosong di Hardisk untuk instalasi dan berjalannya aplikasi dengan baik. Database yang di gunakan bisa dipilih menggunakan SqLite dan MySql Server.
Pilihan database SqLite sangat disarankan jika hanya akan digunakan dengan mode satu komputer saja. Karena selain lebih ringan yang pasti tidak memerlukan adanya tambahan instalasi aplikasi yang lainnya dibandingkan apabila menggunakan pilihan database MySql. Sudah tentu wajib menginstal aplikasi pihak ketiga. Dalam hal ini MySql Server. Atau bisa menggunakan MySql yang sudah terintegrasi di XAMPP atau WAMPP yang proses instalasinya lebih mudah. Tapi jika anda memang ingin menggunakan aplikasi Aab ini sebagai aplikasi Server Client. Adalah wajib memilih database MySql sebagai tempat database aplikasinya.
Fitur-fitur nya apa saja yang ada di aplikasi Aab?
Untuk lebih jelasnya silakan di unduh aja file masternya. Disana sudah ada di sertakan panduan manual penggunaannya yang kalau menurut saya cukup mudah untuk di pahami. Link donlot nya akan saya berikan di akhir halaman ini.
Mudah-mudahan informasi singkat saya kali ini dapat bermanfaat.
Terima kasih atas kunjungan anda kemari. Berikut beberapa screenshoot halaman aplikasinya:




Spesifikasi :
Nama aplikasi : App Air Bersih
Seri / tipe  : Aab_1.1.7 / desktop
Ukuran File : 11,6 mb (instaler)
Author : adituek
Status : Shareware
Link Download:

DOWNLOAD Aab_117