Arduino Thermal Printer Untuk Mesin Antrian Sederhana dengan Auto Cutter

19 May 2017
Introdusing
Jika Anda sering ke Bank, atau tempat tempat yang menyediakan suatu layanan, pasti adakalanya harus mengantri dengan mengambil nomor antrian, baik itu dengan mesin ataupun manual.
Nah kendalanya adalah jika masih menggunakan nomor antrian manual, seringkali nomor ada yang hilang karena dibawa pulang, sehingga nomornya lompat, jika hanya hilang satu celah masih wajar. Tapi bayangkan jika yang hilang lebih dari 3 celah. Misal 1,2,3 ...kemudian...7,8,9,dst jika ada customer yang datang bersamaan yang pertama mendapat nomor antrian 3, berarti yang setelahnya akan dapat nomor antrian 7.
Biasanya pertimbangan dari pemilik usaha tidak menggunakan mesin antrian karena harga mesin antrian bisa dibilang sangat mahal, sekitar 2Juta lebih.
Disini Saya membuat mesin antrian dengan biaya yang tidak terlalu mahal, hanya sekitar 500Ribu. Dengan harga segitu sudah lumayan bisa digunakan, sehingga tidak perlu memikirkan nomor antrian tidak urut karena hilang.
Saya menggunakan Arduino dan Mini Thermal Printer 58mm, tentu saja kecepatan printnya tidak sehebat yang ada di Bank-bank. Sehingga mesin antrian yang saya buat ini mungkin tidak cocok jika digunakan untuk 2 layanan atau lebih.

Bahan - Bahan
Ø Arduino Nano
Ø Thermal Printer 58mm
Ø Servo
Ø DVD player bekas komputer - 2 buah
Ø Adaptor bekas laptor yang kabelnya putus
Ø LM2596 DC to DC Step Down
Ø RTC DS1307
Ø Beberapa PCB polos dan Bekas
Ø Cable
Ø Saklar Push Button
Ø Led

Checking
Sebelum memulai merakit sebaiknya memastikan bahwa Mini Thermal Printer bisa berfungsi dengan adaptor yang akan dipakai, karena jika Daya kurang Thermal Printer tidak akan ngprint dengan jelas atau bahkan tidak bisa untuk ngeprint sama sekali, dan Jika kelebihan daya akan terlalu tebal.
Hubungkan Mini Thermal Printer dengan Sumber daya (Jalur komunikasi TTL, Serial, Atau USB tidak perlu dikonek ke mana-mana) dan tekan tombol test yang ada di bagian belakang, lihat hasilnya apakah sudah sesuai, tidak terlalu tebal atau terlalu tipis. Hasil cetakan ini juga akan mencetak beberapa informasi termasuk Baudrate yang digunakan.
Jika sudah sesuai dicoba untuk berkomunikasi dengan arduino dengan mencoba program printertest dari library adafruit (lihat video). Library bisa diletakkan di Documents/Arduino/libraries atau jika anda biasanya meletakkan di dalam Program Files/Arduino/Libraries bisa juga.


Disini saya menggunakan komunikasi TTL, Baudrate TTL yang digunakan disesuaikan dengan Thermal Printernya, pastikan TX(transmiter) pada Thermal Printer terhubung dengan RX(Receiver) pada Arduino dan begitupun sebaliknya RX pada Thermal Printer terhubung dengan TX Arduino. Jika Baudrate sudah sesuai tetapi tidak mau ngprint coba balik kabel RX dan TX, mungkin terbalik.

Programing And Testing
Jika langkah diatas sudah berhasil saatnya mencoba untuk print bitmap(bmp).Program yang digunakan untuk generate menggunakan LCD Assistant.
Yang perlu diperhatikan adalah byte orientationnya pilih horizontal, karena byte, artinya isinya bit Sehingga akan menggenerate dengan kelipatan 8, maka buatlah gambar dengan bagian horisontal/mendatar(lebar) dengan kelipatan 8(misal yang saya gunakan 400px). Jika tidak, bisa jadi gambar yang muncul di printer tidak akan sesuai. Lebih jelasnya check dari web adafruit.

Built
Jika sudah berhasil atau tidak ingin menggunakan fungsi print bitmap, maka bisa langsung saja memahami dan memodifikasi program mesin antrian yang saya buat.

Schematic. 
Contoh isi Program berikut :

#define TX_PIN 3 // Arduino transmit  YELLOW WIRE  connect to RX printer
#define RX_PIN 2 // Arduino receive   GREEN WIRE   connect to TX printer
Pin TX dan RX bisa kalian sesuaikan tidak harus di 6 dan 5 sesuai printertest dari adafruit.


myservo.attach(9);      // attaches the servo on pin 9 to the servo object
myservo.write(137);     // tell servo to go to position in variable 'pos'
delay(1000);            // waits for the servo to reach the position
myservo.write(0);       // tell servo to go to position in variable 'pos'
delay(500);             // waits for the servo to reach the position
myservo.detach();       // detaches the servo
Fungsi diatas adalah menggerakkan Servo untuk memotong kertas supaya tidak perlu merobek, tinggal tarik saja. Servo akan berputar 137 derajat untuk menarik pisau setelah 1000milisecon(1detik) servo kembali lagi keposisi semula/mendorong pisau mundur. Setelah 0.5 detik servo akan di diskonek secara software supaya awet, karena dalam kondisi ini servo tidak ada beban.

Download
Arduino And Thermal Printer Ticketing machine with Auto Cutter.


Note : Thermal Printer adalah printer yang tidak menggunakan tinta, toner, ataupun pita. Printer ini hanya bisa ngprint pada kertas khusus yaitu thermal paper. Kertas ini jika diberikan panas misal solder akan muncul seperti tinta hitam, bukan akibat terbakar. Singkatnya kertas ini yang biasanya digunakan untuk bukti transaksi pada mesin ATM.

Mengubah jam berputar ke arah kiri / Backwards Clock dari Jam Dinding Standard

21 December 2016
Jika kalian merasa jam yang ada dirumah biasa saja bahkan membosankan, mungkin anda bisa sedikit memodifikasi jam yang sudah ada. Disini Saya ingin mencontohkan cara untuk mengubah arah putaran jarum jam supaya bergerak ke arah kiri. Standard nya putaran jam adalah kekanan, bahkan sampai digunakan sebagai bahan komunikasi acuan baku untuk menyatakan arah suatu putaran, misal untuk putaran kekanan disebutkan berputar searah jarum jam / clockwise, dan putaran kekiri disebutkan berlawanan arah jarum jam / anti clockwise.

Awalnya Saya berpikiran untuk membalik arah putaran jarum jam ke kiri harus mengubah kumparan / lilitan induktansinya, Setelah Saya cari di google dan Youtube ternyata ada cara yang lebih mudah, bahkan sanga mudah. Yaitu cukup membalik Besi induktansi yang berbentuk U, mudah sekali seperti membalik telapak tangan.

Cek gambar berikut ini, mungkin tidak sama persis bentuk besinya, yang penting kalian ingat posisinya jika perlu bisa dikasih tanda dengan spidol, kemudian tinggal dibalik saja.

Gambar sebelum dibalik.
If you feel you have around the house hours mediocre even boring, you may be able to slightly modify the existing hours. Here I would like an example of how to turn clockwise in order to move to the left. Standard her round the clock is right, even to be used as a reference standard communication materials to express the direction of a rotation, eg for round kekanan mentioned rotating clockwise / clockwise, and the left lap mentioned clockwise / anti-clockwise.   Initially I thought to turn clockwise to the left should change the coil / coil inductance, After I search on google turns out there was an easier way, even sanga easy. That is quite a reverse U-shaped iron inductance, easy as turning the palm of the hand.   Check the image below, may not exactly match the form of iron, which is important you remember its position if necessary can be given a sign with a marker, then stayed behind alone. 
Gambar Setelah dibalik
If you feel you have around the house hours mediocre even boring, you may be able to slightly modify the existing hours. Here I would like an example of how to turn clockwise in order to move to the left. Standard her round the clock is right, even to be used as a reference standard communication materials to express the direction of a rotation, eg for round kekanan mentioned rotating clockwise / clockwise, and the left lap mentioned clockwise / anti-clockwise.   Initially I thought to turn clockwise to the left should change the coil / coil inductance, After I search on google turns out there was an easier way, even sanga easy. That is quite a reverse U-shaped iron inductance, easy as turning the palm of the hand.   Check the image below, may not exactly match the form of iron, which is important you remember its position if necessary can be given a sign with a marker, then stayed behind alone.













Kebetulan jam yang saya pakai pada salah satu sisi ada bagian melengkung nya sehingga Lebih mudah sebagai tanda.
Jangan Lupa setelah membalik arah putaran jarum jam ke kiri supaya untuk mengganti tampilan yang lama dengan tampilan yang baru, maksudnya urutan nomor harus disesuaikan ulang.

Berikut contoh tampilan jam yang Saya buat  :










 












Template yang Saya buat sudah saya sesuaikan dengan ukuran standard jam dinding yaitu untuk jam dengan diameter 21cm.

Untuk gambar kedua jika kalian ingin menambahkan background photo, bisa di cetak di percetakan dengan ukuran 10R
Template dibuat dengan software Inkscape dengan format SVG dan PNG.

Template bisa di Download di bagian bawah posting.

Langsung saja supaya lebih mudah dipahami lihat video berikut ini.




Download File Template Face Clock


Blogspot View Code HTML / Menampilkan Kode HTML pada postingan di Blogspot

09 December 2016
Pada jaman dahulu ketika Saya masih baru memulai Bloging, Pernah suatu saat ingin menampilkan kode HTML atau semacamnya, Seperti biasa tulis title kemudian isi postingan pada mode Compose isi artikel, sesuaikan Bold italic underline dan lain sebagainya. Setelah yakin apa yang sudah Saya tulis, kemudian sebelum di Publish Saya pratinjau (preview) dan WAW alangkah kagetnya Saya melihat pratinjau itu karena kode HTML yang ingin Saya tampilkan hilang dari artikel entah kemana, Saya masuk lagi ke mode Compose cek Kode HTML nya masih ada dan jelas terlihat, coba di preview lagi, tapi tetep tidak muncul, ada apakah gerangan kenapa kode HTML yang Saya tulis tidak muncul di postingan, padahal Saya sudah pernah melihat Bloger lain yang menggunakan blogspot bisa menampilkan kode HTML.

Setelah saya googling akhirnya ketemu juga, kenapa script kode HTML yang saya tulis tidak bisa tampil di postingan.
Yaitu dikarenakan Script tersebut dianggap bagian dari kode Halaman itu sendiri, sehingga supaya bisa tampil kode Script HTML tersebut perlu di encode dan nanti ketika sudah di Publish otomatis Web akan men decode lagi script HTML tadi.

Yups itu adalah pengalaman indah pada waktu itu, dan jika ada yang belum tahu juga berikut cara untuk menampilkan kode / Script HTML pada postingan di Blogspot, ini juga berlaku di tempat lain.


  • Siapkan alat dan bahan
Tentu saja Kode / Script HTML yang akan di tampilkan.

  • Encode
Untuk encode bisa menggunkan aplikasi offline dan juga bisa lewat web, banyak penyedia jasa encode dan decode secara online / melalui web.
Disini saya coba jelaskan yang secara online, web nya bisa kalian gooling dengan kata sandi Free HTML Encoder silakan pilih salah satu sesuai selera. Misal saya pakai  dari Code Beatify.

  • Copy Paste
Setelah masuk tinggal di kopi paste saja kodenya pada tempat yang telah disediakan.
Pada jaman dahulu ketika Saya masih baru memulai Bloging, Pernah suatu saat ingin menampilkan kode HTML atau semacamnya, Seperti biasa tulis title kemudian isi postingan pada mode Compose isi artikel, sesuaikan Bold italic underline dan lain sebagainya. Setelah yakin apa yang sudah Saya tulis, kemudian sebelum di Publish Saya pratinjau (preview) dan WAW alangkah kagetnya Saya melihat pratinjau itu karena kode HTML yang ingin Saya tampilkan hilang dari artikel entah kemana, Saya masuk lagi ke mode Compose cek Kode HTML nya masih ada dan jelas terlihat, coba di preview lagi, tapi tetep tidak muncul, ada apakah gerangan kenapa kode HTML yang Saya tulis tidak muncul di postingan, padahal Saya sudah pernah melihat Bloger lain yang menggunakan blogspot bisa menampilkan kode HTML.   Setelah saya googling akhirnya ketemu juga, kenapa script kode HTML yang saya tulis tidak bisa tampil di postingan.  Yaitu dikarenakan Script tersebut dianggap bagian dari kode Halaman itu sendiri, sehingga supaya bisa tampil kode Script HTML tersebut perlu di encode dan nanti ketika sudah di Publish otomatis Web akan men decode lagi script HTML tadi.   Yups itu adalah pengalaman indah pada waktu itu, dan jika ada yang belum tahu juga berikut cara untuk menampilkan kode / Script HTML pada postingan di Blogspot, ini juga berlaku di tempat lain.       Siapkan alat dan bahan  Tentu saja Kode / Script HTML yang akan di tampilkan.      Encode  Untuk encode bisa menggunkan aplikasi offline dan juga bisa lewat web, banyak penyedia jasa encode dan decode secara online / melalui web.  Disini saya coba jelaskan yang secara online, web nya bisa kalian gooling dengan kata sandi Free HTML Encoder silakan pilih salah satu sesuai selera. Misal saya pakai  dari Code Beatify.      Copy Paste  Setelah masuk tinggal di kopi paste saja kodenya pada tempat yang telah disediakan.            Hasil  sehingga hasilnya seperti ini       <!--HTML-->  <div id="syntax"></div>       <!--Javascript-->  <script type='text/javascript'></script>       <!--CSS-->  .post-body img {  box-shadow: 0 0 10px #EEE;  height: auto;  Color:#0080ff;  Font:12px bold italic;  border-top:1px solid #333;  border-bottom:1px solid #666;  }      OK mudah bukan, selamat mencoba,.,  Akan tetapi tulisan masih biasa saja dan masih menyatu dengan tulisan artikel.       Tambahan  Jika Anda ingin menambahkan variasi tampilan, anda bisa membuat dan atau mengedit suatu class, sehingga nantinya tinggal dipanggil saja. Pada umumnya template blogspot memiliki suatu class untuk menampilkan script HTML supaya terlihat mencolok dan berbeda dengan tulisan artikel.   Karena ini akan mengedit template jangan lupa untuk backup terlebih dahulu untuk mengantisipasi hal2 yang tidak diinginkan.   Masuk ke Template ==> Edit HTML   Cari dan temukan kode ini :  ]]></b:skin>   Setelah ketemu letakkan kode berikut di atas tag kode tadi :   code {     display: block;     background: transparent;     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD-dgazCXRtYTF-uqQRwo6mJiFzEzBnMQDRfGwpIMtC0qDRUjAMjMzx9PdZUabmSy5L3a3P6Z9FH7vYuuTIyV20Y3tDdhy9elYMrzMu56tPOcDuU_ZKdADNUkr6e7_Gg0yczMZmQ6Tuz71/s320/codebg.gif);     color: #335;     border: 1px solid #E8E8D5;     padding: 5px 10px;     overflow: auto;     margin: 1em 0;     font-size: 0.9em;     line-height: 1.5em;   untuk memastikan tidak ada duplikasi class letakkan kursor pada bagian paling atas dan search / cari (CTRL + F) kata code, apakah ada script yang mirip seperti itu, jika sudah ada berarti anda tidak perlu menambahkan lagi script kode diatas, Anda hanya perlu menyesuaikan saja misal mengganti Jenis Font, warna, atau background  atau jika anda takut masih tetap duplikasi anda bisa memberi nama class sendiri sesuai selera sehingga tidak mungkin duplikasi misal diganti dengan nama code123, atau code321.  Setelah itu Save Template.    Cara penggunaannya sama dengan cara diatas tadi hanya perlu sedikit penambahan / pemanggilan class code sedangkan untuk pre digunakan supaya script tetap tertata rapi, jika script yang kita tulis terlalu panjang.  perhatikan baris berwarna merah.     <pre><code>       <!--HTML--> <div id="syntax"></div>      <!--Javascript--> <script type='text/javascript'></script>      <!--CSS--> .post-body img { box-shadow: 0 0 10px #EEE; height: auto; Color:#0080ff; Font:12px bold italic; border-top:1px solid #333; border-bottom:1px solid #666; }      </code></pre>






  • Hasil
sehingga hasilnya seperti ini

    <!--HTML-->
<div id="syntax"></div>

    <!--Javascript-->
<script type='text/javascript'></script>

    <!--CSS-->
.post-body img {
box-shadow: 0 0 10px #EEE;
height: auto;
Color:#0080ff;
Font:12px bold italic;
border-top:1px solid #333;
border-bottom:1px solid #666;
}
 

OK mudah bukan, selamat mencoba,.,
Akan tetapi tulisan masih biasa saja dan masih menyatu dengan tulisan artikel.

  • Tambahan
Jika Anda ingin menambahkan variasi tampilan, anda bisa membuat dan atau mengedit suatu class, sehingga nantinya tinggal dipanggil saja. Pada umumnya template blogspot memiliki suatu class untuk menampilkan script HTML supaya terlihat mencolok dan berbeda dengan tulisan artikel.

Karena ini akan mengedit template jangan lupa untuk backup terlebih dahulu untuk mengantisipasi hal2 yang tidak diinginkan.

Masuk ke Template ==> Edit HTML

Cari dan temukan kode ini :
]]></b:skin>

Setelah ketemu letakkan kode berikut di atas tag kode tadi :

code {
   display: block;
   background: transparent;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD-dgazCXRtYTF-uqQRwo6mJiFzEzBnMQDRfGwpIMtC0qDRUjAMjMzx9PdZUabmSy5L3a3P6Z9FH7vYuuTIyV20Y3tDdhy9elYMrzMu56tPOcDuU_ZKdADNUkr6e7_Gg0yczMZmQ6Tuz71/s320/codebg.gif);
   color: #335;
   border: 1px solid #E8E8D5;
   padding: 5px 10px;
   overflow: auto;
   margin: 1em 0;
   font-size: 0.9em;
   line-height: 1.5em;

untuk memastikan tidak ada duplikasi class letakkan kursor pada bagian paling atas dan search / cari (CTRL + F) kata code, apakah ada script yang mirip seperti itu, jika sudah ada berarti anda tidak perlu menambahkan lagi script kode diatas, Anda hanya perlu menyesuaikan saja misal mengganti Jenis Font, warna, atau background
atau jika anda takut masih tetap duplikasi anda bisa memberi nama class sendiri sesuai selera sehingga tidak mungkin duplikasi misal diganti dengan nama code123, atau code321.
Setelah itu Save Template.


Cara penggunaannya sama dengan cara diatas tadi hanya perlu sedikit penambahan / pemanggilan class code sedangkan untuk pre digunakan supaya script tetap tertata rapi, jika script yang kita tulis terlalu panjang.
perhatikan baris berwarna merah.


 <pre><code>

    <!--HTML-->
<div id="syntax"></div>

    <!--Javascript-->
<script type='text/javascript'></script>

    <!--CSS-->
.post-body img {
box-shadow: 0 0 10px #EEE;
height: auto;
Color:#0080ff;
Font:12px bold italic;
border-top:1px solid #333;
border-bottom:1px solid #666;
}  



</code></pre>


 Lihat Perbedaannya dengan yang pertama.
 Jika hasilnya belum sesuai coba chek melalui menu HTML pada saat menulis scipt.
dan yang terakhir adalah selamat berexperiment.
Terimakasih .

Mengganti Navigasi Halaman Older Post dengan Format Nomor Halaman pada Blogspot | Numbered Page Navigation Blogspot

04 December 2016
Pada Blogspot Kita dapat mengatur berapa jumlah postingan yang akan ditampilkan pada halaman utama atau main page.
Jika jumlah postingan sudah melebihi maka pada bagian bawah akan muncul halaman navigasi, yaitu post lebih lama (older post) dan post lebih baru (newer post). Sehingga untuk berpidah dari halaman ke halaman lainnya akan sedikit mengalami kesulitan.
perPage: 7, numPages: 6, var firstText ='First'; var lastText ='Last'; var prevText ='« Previous'; var nextText ='Next »'; }


Karena Hal tersebut disini saya akan memperlihatkan cara untuk menambahkan atau mengganti dengan Halaman Navigasi Bernomor ( Numbered Page Navigation ) untuk memudahkan pengunjung untuk berpindah dari halaman ke halaman lain, juga untuk mempercantik tampilan halaman. Ada 7 model yang saya sediakan kalian bisa pilih sesuai selera masing masing, jika kalian mengerti mengenai pemrograman web kalian bisa custom sendiri tampilannya.

Menambahkan Navigasi Halaman Bernomor : 
  • Menambahkan CSS ( Untuk Tampilannya )
  • Menambahkan Script ( Untuk Fungsi Navigasinya )
  • Setting / Konfigurasi Fungsi Navigasi
1. Menambahkan CSS ( Untuk Tampilannya ) 
a.
Masuk ke Dashboard ==> Template ==> Edit HTML


Masuk ke Dashboard ==> Template ==> Edit HTML


b.
Cari dan temukan tag kode seperti dibawah.
]]></b:skin>

Untuk lebih mudahnya gunakan fungsi pencarian dengan menekan CTRL + F














c.
Setelah ketemu tempel kode CSS dari salah satu dari 7 model yang ada di bawah, pilih sesuai selera masing - masing.
Tempel tepat diatas tag " ]]></b:skin> ".

Numbered Page Navigation on GRAY
Numbered Page Navigation on GRAY

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 
7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 
7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid 
#E9E9E9;}
.displaypageNum a:hover,.showpage 
a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: 
#000;}
 .showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: 
#888;}
 #blog-pager .pages{border:none;}



Numbered Page Navigation Black with Orange Current Page
Numbered Page Navigation Black with Orange Current Page
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 
7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 
10px;margin-right:5px; color: #F4F4F4; 
background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 
50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 
0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, 
.pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color:
 #000;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px 
rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50,
 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}



Numbered Page Navigation Dark with Blue Current Page
Numbered Page Navigation Dark with Blue Current Page
#blog-pager{clear:both;margin:30px auto; padding: 7px; 
text-align:center;font-size: 11px;background-image: 
-webkit-gradient(linear,left bottom,left top,color-stop(0, 
#000000),color-stop(1, #292929));background-image: 
-o-linear-gradient(top, #000000 0%, #292929 100%);background-image: 
-moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: 
-webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image:
 -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: 
linear-gradient(to top, #000000 0%, #292929 100%); padding: 
6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 
3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 
10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image:
 -webkit-gradient(linear,left bottom,left top,color-stop(0, 
#59A2CF),color-stop(1, #D9EAFF));background-image: 
-o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: 
-moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: 
-webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image:
 -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: 
linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: 
none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 
3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, 
.blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: 
#fff;}
#blog-pager .pages{border:none;background: none;}



Numbered Page Navigation Gray with Blue Current Page
Numbered Page Navigation Gray with Blue Current Page
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 
7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 
12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, 
.pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: 
#fff;background:#359BED;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}



Numbered Page Navigation Green with Orange and Pink on hover
Numbered Page Navigation Green with Orange and Pink on hover
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;
 }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 
12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, 
.pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: 
#D25E71;background:#FFDEDF;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}


  
Numbered Page Navigation Orange with Red Current Page 
Numbered Page Navigation Orange with Red Current Page
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;
 }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 
12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, 
.pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: 
#fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;} 



Numbered Page Navigation Gray wit Red Current Page
Numbered Page Navigation Gray wit Red Current Page

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}



Note : Jika ingin menghilangkan tombol "first" dan "last" tambahkan baris kode berikut dibawah kode CSS.
.firstpage, .lastpage {display: none;}



2. Menambahkan Script ( Untuk Fungsi Navigasinya ) 
a.
Cari dan temukan ( CTRL + F ) tag kode berikut :

</body>



b.
Tambahkan Script Kode Berikut tepat diatas Kode Tadi :


<b:if cond='data:blog.pageType != &quot;item&quot;'>  
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>  
 <script type='text/javascript'>  
  /*<![CDATA[*/  
   var perPage=3;  
   var numPages=3;  
   var firstText ='First';  
   var lastText ='Last';  
   var prevText ='« Previous';  
   var nextText ='Next »';  
   var urlactivepage=location.href;  
   var home_page="/";  
 if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages / 2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}  
 pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo / perPage)+1;if(lastPageNo-1==pageInfo / perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}  
 if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}  
 if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}  
 if(pageStart>2){html+=' ... '}  
 for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}  
 if(pageEnd<lastPageNo-1){html+='...'}  
 if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}  
 var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}  
 if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}}  
 var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}  
 if(pageArea&&pageArea.length>0){html=''}  
 if(blogPager){blogPager.innerHTML=html}}  
 function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}  
 function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}  
 if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}  
 document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}  
 if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}  
 document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}  
 function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}  
 function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}  
 function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}  
 location.href=pAddress}  
  /*]]>*/  
 </script>  
 </b:if>  
 </b:if>

Sampai Proses ini halaman navigasi bernomor sudah bisa digunakan, jika menginginkan konfigurasi lain dari defaultnya silahkan lihat bagaimana cara mengkonfigurasi seperti langkah selanjutnya.

3. Setting / Konfigurasi Fungsi Navigasi


perPage: 7,
numPages: 6,
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';



  • perPage : Berapa banyak postingan yang akan di tampilkan di setiap halaman ( contoh 7 ). Jumlah ini harus sama dengan jumlah postingan yang ditampilkan dihalaman utama.
  • numPage :  Berapa banyak halaman yang akan ditampilkan di navigasi ( contoh 6 ).
  • Untuk mengganti kata  "First", "Last",  "« Previous", "Next »" pada naviasi bar cukup ketik kata yang diinginkan didalam kutip.
Label Fix
Secara default blogspot akan menampilkan 20 post pada halaman label, sehingga kita perlu mengubah default tersebut sesuai yang kita inginkan ( disesuaikan dengan perPage: 7). Sehingga jika widget label diklik jumlah post yang akan ditampilkan tidak 20 lagi (contoh 7 postingan).

Cari setiap potongan tag kode berikut :
expr:href='data:label.url'


Ganti dengan tag kode berikut :
expr:href='data:label.url + "?&amp;max-results=7"'



Langkah terakhir adalah Klik tombol Save Template untu menyimpan settingan.
Jangan lupa sebelum mengedit Template sebaiknya backup dulu untuk menghindari hal-hal yang tidak diinginkan.



sumber : helplogger.blogspot.com

About Me

27 October 2016
Nama : Komarudin  Negara : Indonesia   Saya membuat Blog ini untuk mendokumentasikan apa yang sudah Saya pelajari, supaya jika suatu saat membutuhkan lebih mudah mencarinya, Isi dari blog ini mungkin akan semrawut atau campur2.   Dengan saya mendokumentasikan disini Saya juga berharap bisa sharing hal2 yang sudah saya tahu.   Jika dari pembaca ada yang ingin memberi masukan atau saran atau semacamnya bisa meninggalkan pesan melalui komen atau kontak form yang berada di samping artikel.   Video berikut merupakan Hal yang berarti bagi Saya, ini adalah video aini(putri Kami) sedang belajar mengendarai sepeda roda 2.  Pada saat itu usia nya 2 tahun 10 bulan tetapi Kami bangga dengan tekadnya karena tidak mudah menyerah walaupun dihari2 sebelumnya sempat jatuh beberapa kali, Semoga kamu lebih baik lagi Nak.  Ini adalah latihan di hari ke 5 sudah bisa naik sendiri (Good Job), Tidak terlalu lama lah belajarnya, setelah dihari2 sebelumnya untuk mengendarai harus didorong dulu, karena belum bisa untuk mengayuh / goes pertama kali, maklum kakinya belum sampai ke tanah secara sempurna (masih jinjit).  Maulida Aini Subhi belajar naik sepeda roda 2
Nama   : Komarudin
Negara : Indonesia
Status  : Menikah

Saya membuat Blog ini untuk mendokumentasikan apa yang sudah Saya pelajari, supaya jika suatu saat membutuhkan lebih mudah mencarinya, Isi dari blog ini mungkin akan semrawut atau campur2.

Dengan saya mendokumentasikan disini Saya juga berharap bisa sharing hal2 yang sudah saya tahu.

Jika dari pembaca ada yang ingin memberi masukan atau saran atau semacamnya bisa meninggalkan pesan melalui komen atau kontak form yang berada di samping artikel.

Video berikut merupakan Hal yang berarti bagi Saya, ini adalah video aini(putri Kami) sedang belajar mengendarai sepeda roda 2.
Pada saat itu usia nya 2 tahun 10 bulan tetapi Kami bangga dengan tekadnya karena tidak mudah menyerah walaupun dihari2 sebelumnya sempat jatuh beberapa kali, Semoga kamu lebih baik lagi Nak.
Ini adalah latihan di hari ke 5 sudah bisa naik sendiri (Good Job), Tidak terlalu lama lah belajarnya, setelah dihari2 sebelumnya untuk mengendarai harus didorong dulu, karena belum bisa untuk mengayuh / goes pertama kali, maklum kakinya belum sampai ke tanah secara sempurna (masih jinjit).
Maulida Aini Subhi belajar naik sepeda roda 2
 

Dan berikut cara untuk melatih keseimbangan naik sepeda roda 2 :
Berikut cara yang diperuntukan untuk melatih batita dan balita naik sepeda roda 2, khususnya untuk yang kakinya belum bisa napak ke tanah. Jika kaki sudah bisa napak ke tanah (kanan kiri) mungkin akan lebih mudah lagi.

1. Kepercayaan Diri
Ini adalah hal yang paling penting karena jika sebelumnya menggunakan sepeda roda 3 atau roda bantu, buah hati terbiasa naik sepeda dalam keadaan diam, ketika menaiki roda 2 ini tidak bisa dilakukan dan langsung akan jatuh.
Orang tua harus mengedukasi buah hati mengenai hal ini, yaitu bahwa untuk mengendarai sepeda roda 2 sepeda harus melaju, jika diam akan jatuh. Apalagi jika buah hati belum sampai kakinya, ini harus hati2 sekali membujuk buah hati karena jika tidak buah hati akan pobhia, dan tidak mau mencoba lagi.

Setelah mau mengendarai yakinkan buah hati jika nanti akan aman, misal dengan meyakinkan nanti jika akan jatuh nanti ayah tangkap, dan orang tua harus berada didekat buah hati terus untuk lebih meyakinkan bahwa buah hati masih dalam pengawasan orang tua.

2. Teori sangat simple
Jika ingin jatuh kekiri belokkan setang ke kiri begitupun sebaliknya jika ingin jatuh ke kanan langsung belokkan ke kanan.

3. Jangan Dipaksa
Apapun halnya jika dipaksa secara berlebihan hasilnya tidak baik, Orang tua harus tahu batas kemampuan buah hati, Jika memang masih sangat sulit, sebaiknya dihentikan dan menunggu beberapa minggu atau bulan.

Demikian kira kira hal yang Saya terapkan untuk mengajari Buah Hati Kami, semoga bermanfaat,.,.,.,.,.,.,.,.,.,.,