Seting Auto Read More di Blogger

Halo Sahabat Pustaka Kreasi , pada kesempatan kali ini kita akan membahas tentang bagaimana memasang auto read more di blogger,...tujuan dari pemasangan auto read more adalah  ketika kita melakukan posting  suatu artikel pada blog  yang  biasanya akan  tampil di halaman utama, maka posting kita tersebut  akan di peringkas isi kalimatnya, dan untuk membaca artikel secara lengkap pada bagian bawah ringkasan artikel  akan  tersedia link yang menuju ke artikel lengkap dengan  tulisan Read More  atau bisa  di  ganti dengan  gambar atau kalimat  pilihan kita, mungkin bahasan kita kali ini bagi kalangan blogger kawakan  tidak asing lagi, tapi ya .. mungkin ini ada manfaatnya untuk sobat blogger yang baru memulai untuk membangun sebuah blog yang kebetulan pada template pilihanya belum terdapat fitur auto read more yang terintegrasi di dalamnya, okey sebelum kita memulai pastikan kita dalam kondisi tenang  alias rilax's.... he he he ;

Mari kita coba ikuti langkah - langkahnya ;

• Login ke Blogger >> Dashboard  >> Design >> Edit HTML >> Download Template Lengkap untuk pemulihan bila terjadi kesalahan >> Klik Expand Widget ;

• Cari code   ; </head> agar lebih mudah gunakan fungsi Ctrl + F , setelah ketemu letakan code berikut diatas code </head> ;

Keterangan ;

• summary_noimg = 750; jumlah karakter yang akan di tampilkan bila posting tanpa gambar, bisa di ubah untuk penyesuaian.

• summary_img = 370; jumlah karakter yang akan di tampilkan bila posting dengan gambar, bisa di ubah untuk penyesuaian.

• img_thumb_height = 180; adalah tinggi gambar thumbnail, bisa di ubah untuk penyesuaian.

• img_thumb_width = 180; adalah lebar gambar thumbnail, bisa di ubah untuk penyesuaian.

Langkah berikutnya cari code berikut untuk mempermudah gunakan Ctrl+F ; 

<data:post.body/>

Bila sudah ditemukan code diatas ganti dengan code berikut ;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/><span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span>
</b:if>

Keterangan ;

• padding-top: 5px,  jarak dengan tulisan di atas readmore.

• float: right, adalah posisi readmore pada tampilan posting jika ingin readmore muncul di sebelah kiri ganti  right dengan  left

• Anda bisa mengganti  Read more dengan kalimat sesuai pilihan,

Jika tampilan readmore masih dalam posisi rata kiri dan kita ingin mengubahnya menjadi rata kanan-kiri ( justify ) berikut langkahnya ;

Klik kotak expand widget kemudian cari code di seperti di bawah ini;

<div expr:id='&quot;summary&quot; + data:post.id'>

Dan ganti dengan code di atas dengan code di bawah ini;

<div expr:id='&quot;summary&quot; + data:post.id' style='text-align:justify;'>

Sahabat Pustaka Kreasi demikian sharing kita kali ini tentang seting auto read more di blogger, selamat mencoba dan semoga bermanfaat salam Happy Blogging.

Read More >>

HTML 5 + Validasi Error W3C di Blogger

HTML5 Sebuah standar baru untuk HTML, XHTML dan DOM HTML , yang merupakan buah hasil kerjasama antara W3C (World Wide Web Consortium) dan WHATWG ( Web Hypertext Application Technology Working Group ) Yang mana WHATWG bekerja sebagi pembangun web dan aplikasi dan W3C sebagai pengembang dari XHTML, dan dari kedua lembaga riset tersebut mereka memutuskan untuk bekerja sama dalam membentuk versi baru dari HTML (Hyper Text Markup Language),yang dimulai pada tahun 2009, meskipun HTML5 sudah sedikit demi sedikit di aplikasikan namun pada prosesnya masih terus mengalami pengembangan karena belum semua web browser mendukung dan mengaplikasikan  HTML5, tujuan pengembangan HTML5 secara garis besar adalah untuk melakukan MarkUp yang lebih flexible serta dapat mengikuti perkembangan fitur dimasa mendatang yang lebih mudah dan lebih stabil dan menurut informasi terahir setelah melalui perjalanan cukup panjang target rekomendasi dan standarisasi penggunaan HTML5 akan dijadwalkan tahun 2014,

Sahabat Pustaka Kreasi di atas adalah sekilas informasi mengenai  HTML5 yang kami ketahui, untuk selanjutnya kita akan mencoba salah satu kelebihan dari HTML5 pada Blogger, sebagaimana yang telah kami alami sebelumnya setelah kami melakukan pengujian melalui W3C Markup Validator terhadap template yang kami gunakan saat ini ternyata kami menemukan lebih dari  80 Error MarkUp atau kesalahan Code MarkUp pada template kami dan setelah kami melakukan sedikit modifikasi menggunakan HTML 5  maka ada penurunan Error yang cukup significan, meskipun jumlah Error MarUp masih ada namun tidak sebanyak sebelum dimodifikasi,

Langkah untuk modifikasi adalah melakukan perubahan terhadap beberapa elemen default bawaan template  Blogger,

Untuk jelasnya begini ;

1. Pertama cek dulu markup validasi blog kita di  http://validator.w3.org/  masukan url blog kita dan coba perhatikan berapa jumlah Error serta Warning yang ditampilkan bilamana perlu dicatat hasilnya.
2. Kemudian kita tinggalkan sejenak langkah di atas kita menuju ke tahap berikutnya, Login ke Blogger >> Design>> Edit HTML >> Download Template Lengkap untuk Back Up >>  Klik  Expand Widget Template kemudian lihat disisi paling atas di kolom edit HTML cari code seperti berikut ;
   

<?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>
     <b:include data='blog' name='all-head-content'/>
     <title><data:blog.pageTitle/></title>

Seletah ketemu hapus code di atas kemudian ganti dengan code MarkUp berikut ;

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

Setelah itu letakan kode berikut di atas code </head> ;

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
<script src="js/IE8.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->

Dan code berikut dibawah </head> ini untuk menghapus navbar bawaan Blogger ;

<!-- <body><div></div> -->

Selanjutnya cari dan hapus semua code icon Quick edit ( gambar tang dan obeng ) berikut codenya ;

<b:include name='quickedit'/>

Kemudian kurangi penggunaan  Slash ( / ), Star ( *  ), Dash ( - ) contoh ;

/* ------- slash star dash -------  */     <<< Tidak di anjurkan

/* slash star dash */                             <<< Di anjurkan

< ------------------- Code Start ------------------ >    <<< Tidak di anjurkan

< --- Code Start --- >                                                   <<< Di anjurkan

Selain itu  juga yang menjadi salah satu penyebab terjadinya error markup adalah kurangnya Quotes atau tanda petik ( " ) atau ( ' ) dalam penulisan code contoh ;

<div style=text-align: justify;></div>    <<< Tidak di anjurkan

<div style="text-align: justify;"></div>  <<< Di anjurkan

Setelah itu jika sudah dilakukan beberapa langkah di atas di Preview dan bila tidak ada kesalahan Save.

Jika muncul Peringatan : Template baru Anda tidak berisi widget berikut:

* Navbar1

Ingin mempertahankan widget ini di blog Anda atau menghapusnya? Penghapusan widget tidak dapat diurungkan. Pilih Hapus Widget, setelah semua selesai silahkan validasi kembali ke http://validator.w3.org/ Selamat mencoba dan semoga berhasil, salam Happy Blogging.

Read More >>

W3C - World Wide Web Consortium ???

Hallo Sahabat Pustaka Kreasi , pada kesempatan kali ini kami akan berbagi sedikit infomasi mengenai  World Wide Web Consortium (  W3C  ) mungkin sahabat pustaka kreasi ada yang sudah tahu mengenai hal ini?, dan bagi sahabat yang belum tahu mungkin ada baiknya bila kami share mengenai w3c di dini .

Oke, berdasar dari apa yang telah kami ketahuai bahwa world wide web consortium - w3c merupakan sebuah lembaga konsorsium yang di dirikan pada 20 Oktober 1994 oleh Tim Berners-Lee, oleh Massachusetts Institue of Tekchnology (MIT) yang di dalamnya di ikuti oleh beberapa provider ternama  seperti IBM, Microsoft, Apple, Sun Microsystem, Adobe, Macromedia, dan  anggota-anggota lain baik swasta maupun pemerintah, lembaga ini mencanangkan serta  mengembangkan sebuah standarisasi internasional sebuah website maupun blog agar dapat ditampilkan oleh berbagai jenis web browser baik web browser versi yang terdahulu maupun versi yang akan datang, bentuk kinerja dari w3c adalah mengembangkan standar-standar world wide web berdasarkan spesifikasi  tehnologi yang telah digunakan sebagai basis utama dalam sebuah website, seperti misalnya URL (Uniform Resource Locator), HTTP (Hypertext Transfer Protocol), dan HTML ( HyperText Markup Language)  dasar-dasar inilah yang kemudian di kembangkan dan diatur oleh badan ini, w3c juga bekerja dengan komunitas global untuk membuat standard internasional client dan server yang memungkinkan perdagangan dan komunikasi online melalui internet.

Selain dari pada itu konsorsiun ini juga  menghasilkan software -software acuan untuk direkomendasikan yang dalam proses pengembanganya di danai oleh industri yang menjadi anggotanya dan hingga sampai pada saat sekarang software-software tersebut masih bersifat free atau gratis, untuk informasi lebih detilnya silahkan berkunjung ke situsnya di sini  , Salam Happy Blogging.

Read More >>

Blogger Speed Up With Lazy Load - jQuery

Hallo sahabat Pustaka Kreasi pada kesempatan kali ini kita akan  membahas mengenai Plugin Lazy Load - jQuery , apa itu  Lazy loader plugin ? oke kami akan menyampaikan sesuai dengan apa yang kami pahami mengenai apa yang dimaksud dengan Lazy loader plugin secara singkat yang dimaksud Lazy Loader adalah; sebuah script open source berbasis JavaScript yang yang telah di modifikasi oleh para pengembang  jQuery  Library , Lazy loader plugin berfungsi untuk meringankan beban  loading suatu halamam website maupun blog yang didalamnya banyak terdapat konten berupa foto maupun gambar agar lebih cepat ditampilkan oleh browser, secara umum sebuah web browser pada saat melakukan  load  conten suatu halaman web maupun blog akan melalui proses tertentu yang terstruktur atau istilah kerennya DOM ( Document Object Model ) , DOM diperlukan oleh JavaScript untuk mengubah tampilan sebuah website secara dinamis atau dengan kata lain DOM adalah cara JavaScript melihat suatu halaman HTML maka disinilah Lazy Loader di perlukan untuk berperan.

Dari sekian hasil proses pengembangan Lazy Loader script, ada beberapa jenis versi yang telah digunakan dan tentunya memiliki beragam fungsi sesuai dengan versinya masing-masing, sebelum  kita mencoba  kemampuan Lazy Loader ada baiknya kita uji dulu kecepatan loading halaman Website atau Blog yang kita kelola untuk mengetahui berapa lama waktu loading yang dibutuhkan untuk menampilan halaman secara menyeluruh,  coba di uji dulu disini , untuk selanjutnya kami akan memberikan sebuah contoh dari salah satu code Lazy Loader yang kami gunakan pada blog ini, dan bilamana sahabat Pustaka Kreasi membutuhkan silahkan di gunakan;

Cara penggunannya cukup sederhana ;

1. Login ke akun Blogger  >> Design  >> Edit HTML  >> Download Template lengkap untuk pemulihah bilamana terjadi kesalahan.
2. Temukan Tag < /head > letakan code berikut di atasnya ; 

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='https://sites.google.com/site/addinblogger/how-to-add-in-blogger/lazyload-min.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
$(function() {
$(&quot;img&quot;).lazyload({placeholder : &quot;https://sites.google.com/site/addinblogger/how-to-add-in-blogger/grey.gif&quot;,threshold : 200});
});
</script>

Setelah pemasangan code selesai Preview terlebih dahulu bila tidak terjadi kesalahan  pemasangan kode silahkan di Save, setelah itu kita lakukan pengujian kembali terhadap proses loading halaman website atau blog yang telah terpasang script Lazy Loader disini, bilamana koneksi jaringan internet bagus dan stabil maka akan terlihat perubahanya kecepatan dalam proses load halaman, dan bilamana belum ada perubahan kemungkinan versi Lazy Loader yang kami share belum kompatibel dengan template yang anda gunakan, mungkin di butuhkan versi lain yang lebih tinggi, mudah-mudahan pada kesempatan lain setelah kami melakukan pengujian terhadap Lazy Loader versi lainnya akan di share kembali di Pustaka Kreasi , oke...sementara cukup sekian  dulu info dari kami selamat mencoba dan semoga bermanfaat, Salam Happy Blogging.

Read More >>

Blogger Syntax Highlighter - Template

Halo sahabat Pustaka Kreasi,.... Jumpa lagi dengan kami dan selamat berkunjung ke blog kami, langsung saja pada kesempatan kali ini kami akan mencoba berbagi informasi tentang bagaimana mengubah tampilan template Syntax Highlighter yang telah kami share terdahulu, bagi sahabat Pustaka Kreasi yang belum tau atau mungkin membutuhkan informasi tentang Syntax Highlighter silahkan di lihat infonya di sini

Dan bagi yang sudah menyematkan Syntax Highlighter di blognya namun tampilannya mungkin belum sesuai dengan warna template yang digunakan maka disini akan diberikan sedikit solusi untuk mengubah tampilan dari Syntax Highlighter yang sudah terpasang sebelumnya , ada beberapa pilihan warna template yang dapat digunakan, mari kita coba ikuti langkah-langkah berikut :

1. Loging ke >>   Blogger   >>  Design  >> Edit HTML  >> Download Template lengkap untuk back-up jika terjadi kesalahan pemasangan code sehingga dapat di kembalikan seperti keadaan semula.
2. Temukan code Template Default Syntax Highlighter yang sudah terpasang lebih dulu yang untuk mempercepat gunakan Ctrl+F , cari code seperti dibawah ini :
3. Setelah code di atas ketemu silahkan ganti code tersebut dengan code template dibawah ini sesuai dengan yang Anda butuhkan,

ThemeDjango

ThemeEmacs

ThemeFadeToGrey

ThemeEclipse

ThemeMidnight

ThemeRDark

Setelah selesai Preview kalau sudah oke silahkan di save, Salam Happy Blogging,

Read More >>