Membuat Page Navigasi

Akhirnya setelah sekian lama menunggu penulis mendapatkan hal yang menarik yaitu menampilkan Page Navigasi yang letaknya pada footer. Caranya mudah tinggal memasukkan kode-kode yang ada, and mengikuti langkah-langkah yang akan penulis berikan.. Nah Untuk lebih jelas seperti apa bentuknya Page Navigasi itu, ini dia screenshoot Nya...

Ada beberapa pilihan untuk memasangnya. Untuk page navigation yang penulis pakai, caranya relatif mudah. Penulis hanya memasukkan script tersebut di Elemen Halaman blog, Tanpa mengotak atik template. Cara kedua, Anda bisa menambahkan kode CSS di atas kode ]]></b:skin>. Akan.. tetapi metode ini cukup memakan waktu, Karena kita harus mengedit template dan menambahkan kode-kode tertentu. Maka, Penulis ingin berbagi dengan cara yang pertama saja.

Langsung saja pada langkah-langkah yang harus ditempuh, Ada beberapa langkah.. yaitu :

1. Login ke account blogger anda and klik Tab Layout, Kemudian klik pada Add Page Element.
2. Pilih HTML/JAVASCRIPT pada windows Page Element tersebut.
3. Download Scriptnya DI SINI ato bisa langsung Co-Past script di bawah ini :
   

   PAGE NAVIGATION SCRIPT
   

   <style>
   .showpageArea a {
   text-decoration:underline;
   }
   
   .showpageNum a {
   text-decoration:none;
   border: 1px solid #bbb;
   margin:0 3px;
   padding:3px;
   }
   
   .showpageNum a:hover {
   border: 1px solid #bbb;
   background-color:#bbb;
   }
   .showpagePoint {
   color:#fff;
   text-decoration:none;
   border: 1px solid #fff;
   background: #000;
   margin:0 3px;
   padding:3px;
   }
   .showpageOf {
   text-decoration:none;
   padding:3px;
   margin: 0 3px 0 0;
   }
   .showpage a {
   text-decoration:none;
   border: 1px solid #bbb;
   padding:3px;
   }
   .showpage a:hover {
   text-decoration:none;
   }
   .showpageNum a:link,.showpage a:link {
   text-decoration:none;
   color:#333;
   }
   
   </style>
   
   <script type="text/javascript">
   function showpageCount(json) {
   var thisUrl = location.href;
   var htmlMap = new Array();
   var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
   var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
   var isPage = thisUrl.indexOf("/search?updated")!=-1;
   var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
   thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
   var thisNum = 1;
   var postNum=1;
   var itemCount = 0;
   var fFlag = 0;
   var eFlag = 0;
   var html= '';
   var upPageHtml ='';
   var downPageHtml ='';
   
   var pageCount=5;
   var displayPageNum=3;
   var firstPageWord = 'Awal';
   var endPageWord = 'Akhir';
   var upPageWord ='Sebelumnya';
   var downPageWord ='Selanjutnya'
   
   var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
   
   for(var i=0, post; post = json.feed.entry[i]; i++) {
   var timestamp = post.published.$t.substr(0,10);
   var title = post.title.$t;
   if(isLablePage){
   if(title!=''){
   if(post.category){
   for(var c=0, post_category; post_category = post.category[c]; c++) {
   if(encodeURIComponent(post_category.term)==thisLable){
   if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
   if(thisUrl.indexOf(timestamp)!=-1 ){
   thisNum = postNum;
   }
   
   postNum++;
   htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
   }
   }
   }
   }//end if(post.category){
   
   itemCount++;
   }
   
   }else{
   if(title!=''){
   if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
   if(thisUrl.indexOf(timestamp)!=-1 ){
   thisNum = postNum;
   }
   
   if(title!='') postNum++;
   htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
   }
   }
   itemCount++;
   }
   }
   
   for(var p =0;p< htmlMap.length;p++){
   if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
   if(fFlag ==0 && p == thisNum-2){
   if(thisNum==2){
   if(isLablePage){
   upPageHtml = labelHtml + upPageWord +'</a></span>';
   }else{
   upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
   }
   }else{
   upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
   }
   
   fFlag++;
   }
   
   if(p==(thisNum-1)){
   html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
   }else{
   if(p==0){
   if(isLablePage){
   html = labelHtml+'1</a></span>';
   }else{
   html += '<span class="showpageNum"><a href="/">1</a></span>';
   }
   }else{
   html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
   }
   }
   
   if(eFlag ==0 && p == thisNum){
   downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
   eFlag++;
   }
   }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
   }//end for(var p =0;p< htmlMap.length;p++){
   
   if(thisNum>1){
   if(!isLablePage){
   html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
   }else{
   html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
   }
   }
   
   html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;
   
   if(thisNum<(postNum-1)){
   html += downPageHtml;
   html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
   }
   
   if(postNum==1) postNum++;
   html += '</div>';
   
   if(isPage || isFirstPage || isLablePage){
   var pageArea = document.getElementsByName("pageArea");
   var blogPager = document.getElementById("blog-pager");
   
   if(postNum <= 2){
   html ='';
   }
   
   for(var p =0;p< pageArea.length;p++){
   pageArea[p].innerHTML = html;
   }
   
   if(pageArea&&pageArea.length>0){
   html ='';
   }
   
   if(blogPager){
   blogPager.innerHTML = html;
   }
   }
   
   }
   </script>
   
   <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
   <div style="text-align:right; display:none;"><a href="http://4downloadss.blogspot.com"><small>Grab this Widget ~ Navigasi Halaman</small></a></div>

4. Setelah Script yang sudah diCo-Past tersebut ditambahkan ke Widget yang baru tadi, Pindahkan (drag n drop) Widget tersebut kebawah widget utama ato yg di sebut Blog Post.
   
   
5. And yang terakir jangan lupa untuk SAVE template/layout kamu, Agar dapat menyimpan perubahan yang telah dilakukan.

Sekedar tambahan :
Untuk style Navigasi Nya dapat Kalian rubah sesuai keinginan kalian, And untuk Kode yang berwarna merah dapat kalian ganti juga :

var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'Awal';
var endPageWord = 'Akhir';
var upPageWord ='Sebelumnya';
var downPageWord ='Selanjutnya';

Wuuuhhzzzz... Akhirnya selesai jugaa, he..he..
Selamat mencoba and penulis ucapkan GOOD LUCK.!!!.

Read more

Cara Mempercepat Loading Blog

Seberapa cepat suatu blog untuk dibuka oleh pengunjungnya merupakan hal yang sangatlah penting. Kebayang gak seh, untuk membuka satu halaman saja membutuhkan waktu 15 detik lebih. Mungkin itu masih belum seberapa, bagaimana kalau 30 detik... atau bahkan 1 menit. Bisa-bisa, orangnya keburu pergi saking lamanya.

Di bawah ini ada beberapa trik untuk mempercepat loading blog kwand2 sekalian, Monggo di baca n kalo mang berguna di pake juga boleh!!!!

1. Menyingkatkan Kode CSS

Gunakan trik ini untuk mempersingkat kode CSS (disebut juga Inline CSS). Contoh berikut untuk trik background properties :

{ background: #000 url(image URL) repeat-x top left; }

Daripada :

background-image: url(image);
background-color: #000;
background-repeat: repeat-x;
background-position: top left;

Cara ini dapat juga diaplikasikan pada margin, border, dan padding.

{ margin: 1px 2px 3px 4px; }
{margin: [atas] [kanan] [bawah] [kiri];}

Daripada :

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px

2. Menyingkatkan Alamat Internal Link

Jika kamu membuat link yang masih dalam satu blog yang sama (link internal), Gunakan cara ini :

Misalkan penulis membuat link navigasi yang merujuk ke homepage blog ini, dimana seharusnya kita menuliskan <a href="http://4downloadss.blogspot.com/">
, penulis bisa menyingkatnya menjadi <a href="/">. Lalu penulis ingin membuat link menuju artikel ini. penulis bisa menyingkatnya dengan menulis <a href="/2009/07/cara-mempercepat-loading-blog.html">.

* Trik ini berguna hanya untuk link internal.

3. Mengoptimalkan Kode CSS

Kebanyakan orang terus saja memperindah desain blognya tanpa menghiraukan kode CSS-nya. Tahukah kamu setiap spasi, baik antar kata atau baris, berpengaruh terhadap kecepatan load blog kamu. Nah, kode CSS ini bisa kamu optimalkan dengan Icey’s CSS Compressor ato di CSS Drive (CSS Compressor). Optimalisasi ini akan menghilangkan spasi-spasi tersebut. Saran penulis, supaya memudahkan kamu dalam mengedit kode CSS tersebut, baiknya kamu membuat copy-an nya, terus baru diaplikasikan cara tadi.

4. Gunakan Eksternal CSS dan Script

Dengan meletakkan kode CSS dan Script di luar file HTML blog kamu, kode-kode tersebut hanya akan didownload sekali dan akan disimpan dalam komputer. Bandingkan dengan yang tidak, kode-kode tersebut harus didownload tiap kali kamu membuka halaman blog. Cara ini sangat membantu bagi yang banyak memiliki kode CSS atau Script.

Kamu bisa upload kode CSS atau Script kamu di Google Page Creator. Kamu tinggal upload, kemudian letakkan kode ini di bawah ]]></b:skin>.

Untuk kode CSS :
<link href='alamatkodecsskamu' rel='stylesheet' type='text/css'/>

Untuk Java Script :
<script src='alamatscriptkamu' type='text/javascript'></script>

5. Wesss ngunu tokk... he..he..

Sekian dan terima kasih... owh belom yaahhh!!! he..he... Silahkan mencoba, semoga berhasil dan jangan lupa dibagi untuk yang laen juga yaaa....

Read more

Membuat Save As PDF

Untuk trik kale ini penulis menyediakan tema yaitu "Menyimpan halaman blog dengan bentuk PDF".

Apakah kamu pernah melihat sebuah blog yang menyediakan widget menyimpan halaman sebagai PDF di blog (seperti di setiap pojok bawah posting blog ini), Penulis pikir ini sangat menarik untuk dicoba dan di praktekan karena selain memperindah halaman blog juga memudahkan pengunjung untuk menyimpan halaman blog kita. Tidak usah ngomong terlalu banyak langsung ke tkp saja ya!!! Untuk membuatnya silahkan ikuti langkah2 di bawah ini :

1. Login ke blogger dengan ID kamu tentunya
2. Pilih menu "Layout --> Edit HTML"
3. Beri tanda centang pada kotak "Expand Widgets Template"
4. Pada kotak Edit HTML cari Kode di bawah ini :



<data:post.body/>


Note : Untuk blog yang ada "readmore" nya biasanya akan terdapat 2 kode. Nha kamu taruhnya di bawah kode yang pertama.

5. Lalu copy kode berikut dan Pastekan dibawah kode di atas



<!-- START: PDF Online Script -->
<script type='text/javascript'>
var authorId = &quot;4D2009E0-017A-4BC3-BC97-AB23434373AE&quot;;
var pageOrientation = &quot;0&quot;;
var topMargin = &quot;0&quot;;
var bottomMargin = &quot;0&quot;;
var leftMargin = &quot;0&quot;;
var rightMargin = &quot;0&quot;;
</script>
<script src='http://web2.pdfonline.com/pdfonline/pdfonline.js' type='text/javascript'>
</script>



6. Lalu simpan template sobat.


7. Selesai dan lihat hasilnya..

Read more

Membuat Read More

Trik kale ini adalah membuat tulisan read more, ato yang lebih akrab selengkapnya. Biasanya postingan terbaru akan ditampilkan dihalaman utama blog. Namun jika postingan kamu terlalu panjang maka hal tersebut akan membuat penuh halaman utama. Jika kamu ingin supaya postingan kamu yang ditampilkan dihalaman utama cuma abstraksinya saja kemudian ada sebuah link Read More / Baca Selengkapnya untuk melihat selengkapnya maka ikutilah langkah-langkah berikut :

1. Buka menu Layout kemudian pilih Edit HTML.
2. Kasih tanda cek (centang) pada cekbox "expand widget template"
3. Cari kode berikut di Template blog kamu (tempatnya kira-kira pada 1/4 bagian bawah kode hmtl) :



<p><data:post.body/></p>



4. Kalau sudah ketemu, Ganti kode kode tersebut sehingga menjadi seperti ini :



<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More......</a>
</b:if>


Tulisan "Read More....." itu bisa kamu rubah, misalnya jadi "Baca Selengkapnya".

5. Simpan hasil pengeditan.
6. Kemudian pilih menu Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut :



<span class="fullpost">

</span>



8. Kemudian Simpan.
9. Ketika memposting, kan disana ada 2 tab pilihan tuh, yang "Compose" dan "Edit Html", Nhaa km pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut :



<span class="fullpost">

</span>



10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") diatas kode ini : <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span class="fullpost"> dan </span>
11. Selesai.. and selamat mencoba "GOOD LUCK"

Tips di atas penulis dapet dari kwand bloger juga !! Thanks Sobb...

Read more