Use jQuery for optimizing website blog blogspot

Optimasi SEO blog atau website via install Simple Javascript  dan jQuery Scheme

Hampir 3 tahun saya sharing ilmu SEO di blog “Website Design” sejak Juli 2011, mencoba membantu pemula di Blogosphere membuat blog mereka lebih ramah terhadap mesin pencari (Search Engine Friendly). Blog SEO Friendly punya “magnet” penarik perhatian pengunjung. Kali ini kita bahas script jQuery simple untuk optimize SEO blog blogger.

Anda beruntung, jika Anda user paltform WordPess. Karena tidak terlalu mengkhawatirkan SEO blog. WordPress telah menyediakan banyak plugins membantu optimize SEO blog.

How should website platform Blogger optimize SEO?

Blogger sediakan fungsi penambahan description, custom permalink dan banyak tool untuk optimizing SEO Blogspot, namun sayangnya tidak memadai. Faktanya optimize SEO blog tergantung design template Blogger yang bervariasi, judul post (heading1), sub-heading 2,3, 4, 5 dan h6. Agar hasil pencarian tinggi, Anda harus mengeksplorasi teknik SEO.

Saya temukan script Simple jQuery yang mudah dipasang. Bagaimana kerja script?

Menurut sumber posting artikel ini*  pasca ditambahkan script ke Blogger, script akan meningkatkan hasil pencarian lebih tinggi ke blog Anda, semua link eksternal terbuka di jendela baru, menambahkan secara otomatis title gambar and tag alt.  Script akan mengubah semua link menjadi No-following (nofollow) links.

Topik Nofollow dan Dofollow silahkan baca :

-     List Dofollow dengan PageRank tinggi – Direktori 2011
-     Perbedaan Link Dofollow dan Nofollow
-     Meta tag Rel="nofollow" dan Pagerank di blog Blogger

Saya kutipkan kegunaan script tersebut dari sumber posting.

After adding this jQuery to your blog it will simply boost a lot of things, it will provide you with more higher search results, now if you are think that actually what will do this script for SEO optimizing your blog, after adding the jQuery in blog will open all external link’s into new window automatically, it will give automatic image title and alt tags and also it will make your all links to No-following (nofollow) links as well.

Tutorial Pemasangan script simple jQuery

• Buka Blogger–>Template—>Edit HTML
• Tekan tombol CTRL + F untuk mencari  </head> di HTML Editor
• Copy script code dibawah ini
• Paste tepat diatas </head>
  
  
  
  Untuk SCRIPT ASLI download disini.
  
  
  SCRIPT  SIMPLE  jQUERY
  CATATAN PENTING!
  Jika blog Anda sebelumnya sudah ada jQuery Plugin seperti script yang ditandai dengan teks berwarna merah, Anda harus menghapusnya dari script diatas.
• SAVE template.
• SELESAI

• Sekarang BLOG telah optimized dengan opsi external links No-Following (link nofollow). Otomatis setiap image diberi judul dan tag alt. Pembukaan semua external link juga diarahkan ke tab baru. 

* SOURCE  
SEO Optimize Your Blogger Blogspot Using Simple jQuery

---

Happy blogging!

---

jQuery Scroll to Top to Bottom for website blog

Posting lama tombol jQuery back to top hanya menawarkan satu arah ke laman ATAS webpage. Kali ini saya ingin posting tombol jQuery back to top lain, yaitu tombol Back to Top plus tombol Back to Bottom disertai fade-In and fade-Out effect. Pengunjung blog dapat segera kembali ke atas dan ke bawah halaman. Dengan efek fade-In dan fade-Out ini, kedua tombol akan memudar sedikit ketika kita menggulir ke atas atau ke bawah halaman.

Ada 2 tombol dengan posisi FIXED di bagian kanan-tengah webpage, masing-masing dengan fungsi untuk bergerak sebagai pintasan baik ke paling bawah atau ke paling atas webpage secara otomatis. Jika Anda menggulir halaman, kedua tombol akan lenyap sehingga memberikan efek bagus dan halus.  Saya temukan widget bagus ini dari Helpblogger, maka penghargaan penuh layak diberikan kepadanya.

How To Install the Widget To website blog Blogger?

1. Buka Blogger–>Template—>Edit HTML
2. Tekan tombol keyboard CTRL + F untuk mencari  ]]></b:skin>  dalam HTML Editor blog
3. Copy dan paste kode CSS berikut ini, dan letakkan tepat diatas  ]]></b:skin>
   
   
   
   
   
   CATATAN
   Kedua tombol ditampilkan di sisi kanan web page. Jika ingin menampilkan di sisi kiri, ganti saja teks warna merah right yang ada di 2 tempat dengan Left.  Anda bisa mengganti image tombol Arrow-Up (link warna biru … /arrow_up.png) dan Arrow-Bottom (… /arrow_down.png) dengan URL image lain.

   The Javascript - website archives

   Script Javascript dibawah ini akan berfungsi menggulung (scroll) halaman blog menuju ke atas dan bisa juga ke bawah dengan menggunakan  jQuery.
4. Kemudian Tekan tombol keyboard CTRL + F untuk mencari </body>
5. Copy dan paste script code di bawah ini dan letakkan tepat diatas  </body>
   
   
   
   
   
   CATATAN PENTING
   

   • Jika blog sudah ada jQuery plugin, HAPUS saja teks warna merah di atas.
   • Mohon maaf HANYA saya tampilkan kedua snippet diatas dalam bentuk image gambar untuk mengurangi script (code) yang tidak bagus untuk SEO dan berpengaruh ke loading time blog ini. Untuk mendapatkan kedua snippet (script) tersebut silahkan download DISINI.
   
   
6. SAVE TEMPLATE
   
7. SELESAI!

Source : add-jquery-back-to-top-and-go-to-bottom-buttons-to-blogger

Related Post : jQuery Scroll to Top Control : Cara balik ke Top Page

DEMO :  Dapat Anda lihat sepasang 'arrow to Top' dan 'arrow to Bottom' di blog ini di sebelah kanan bawah halaman web.

That's all we know - Happy Blogger - Good Luck!!!

---

JQuery Zoomooz : Zoom Effect on Gallery - website files

“Everyone loves images.”

Jika blog atau website menampilkan gallery foto, seperti website Toko Online, maka setting image menjadi masalah besar. Ada sejumlah besar gambar berukuran Large, Medium atau Small yang jika tampil “apa adanya” tentu tidak efisien, kacau dan Loading Time sangat lambat, sehingga berpengaruh negatif terhadap search engine dan pengunjung pun akan pergi. Apa solusinya?

Efek Zoom Galeri Foto untuk website Toko Online

Image tidak bisa dipisahkan dari website Toko Online. Image dimaksudkan untuk memberi informasi efektif dan efisien karena alinea-alinea panjang bisa terwakili oleh 1 gambar. Image juga untuk unsur keindahan tampilan blog berfungsi sebagai background, header, logo, header slider, menu navigasi etc. Koleksi foto bagus dapat menjadi galeri foto seperti Toko Online Boneka Bagus.

jika Anda klik salah satu foto akan terjadi efek “Pembesaran” dan “Pengecilan.” Kita gunakan >JQuery dan plugin Zoomooz untuk membuat efek zoom.

Bagaimana membuat galeri foto dengan zooming effect?

• Step 1: Import Library Jquery dan Zoomooz.js

  Download semua library (framework) yang diperlukan. Untuk JQuery download dari Official Site. Untuk plugin Zoomooz download  dan Anda browsing saja di Google. Pasca download dan ekstrak, pastikan Anda mengetahui letaknya.
  
  
  Import library JQuery dan Zoomooz sebagai berikut :
  
  
  Lihar Tabel di bawah garis MERAH – pergi ke bagian bawah artikel ini (TABEL Snippet I)
  
  Pada baris 1 snippet I, diimport library JQuery ver. 1.4.4 Sesuaikan dengan versi yang Anda gunakan. Pada baris 2-5, kita import beberapa file library yang diperlukan, termasuk library inti zoomooz.js.

• Step 2: Siapkan dan Tampilkan Gambar di halaman dengan HTML

  Image bisa berasal dari album foto Anda, Flickr, Photobucket, Google Picasa etc. Kita akan mengambil foto dari http://lorempixel.com/ yang menyediakan ribuan image gratis siap pakai.
  
  
  Cukup dengan mengarahkan source image ke alamat dengan format http://lorempixum.com/600/600/ maka akan dihasilkan gambar secara random dengan ukuran 600 x 600 pixel. Kita juga dapat mengambil image kategori tertentu, misalnya format ttp://lorempixum.com/600/600/nature/.
  
  
  Untuk menampilkan image, kita “bungkus” dalam sebuah “ul” (un-ordered list). Kita juga membungkus “ul” dalam suatu <div> dengan id “gallery” dan class “zoom”. Hal tersebut untuk mempermudah CSS dan JQuery mengatur tampilan maupun pengaturan.
  
  
  Berikut ini snippet (potongan) untuk menampilkan gambar :
  
  
  Lihar Tabel di bawah garis BIRU – pergi ke bagian bawah artikel ini (TABEL Snippet II)
  
  

• Step 3: Percantik Galeri Foto dengan CSS

  Tanpa bantuan CSS, tampilan tentu berantakan. “Tugas” CSS adalah mengatur tampilan halaman secara umum seperti font, perataan dan sebagainya, lalu untuk mengatur tampilan image agar berjajar dalam sejumlah baris dan kolom. CSS juga yang akan mengatur ukuran halaman menjadi lebih kecil (thumbnail) dengan ukuran 100 x 100 pixel.
  
  
  Berikut ini potongan program CSS yang digunakan :
  
  
  Lihar Tabel di bawah garis HIJAU – pergi ke bagian bawah artikel ini (TABEL Snippet III)

• Step 4: Terapkan Efek Zoom

  Langkah terakhir adalah menerapkan efek zoom saat suatu image foto diklik. Untuk melakukan tidak sulit, karena cukup memanggil fungsi yang sudah didefinisikan oleh plugin JQuery, yaitu Zoomooz.
  
  
  Berikut ini snippet (potongan) programnya :
  Lihar Tabel di bawah garis ORANGE – pergi ke bagian bawah artikel ini (TABEL Snippet IV)

  
  

  Untuk membuat object dikenai efek perbesar (zoom) saat klik, cukup dengan memanggil fungsi zoomTo(). Baris 3-6 terlihat selector class “zoom” akan menjadikan image dan area gallery kena efek zooming. Baris 7-11 akan menjadikan halaman secara keseluruhan juga memiliki efek zoom saat diklik.

• Step 5: Coba dan Lihat hasilnya.

  Kita lihat hasilnya. Dibawah ini tampilan Awal Halaman Galeri Foto.
  
  
  
  
  
  
  
  

  

   DEMO : KLIK SAJA GAMBAR DIATAS
                 Tampilan Foto Saat Diklik (Zooming)
  

Demo dan Download

*      Lihat demo program secara langsung disini.
**    Download Program Lengkap (termasuk JQuery dan plugin Zoomooz)
***  Download Tutorial Lengkap (PDF)

Referensi

1. Situs Resmi JQuery, http://jquery.com
2. Plugin Zoomooz.js
3. Create an Awesome Zooming Web Page With jQuery, http://designshack.co.uk/?p=20521
4. http://achmatim.net/2011/05/29/membuat-efek-zoom-pada-galeri-foto-dengan-jquery-zoomooz/

---

Code block Snippet I kelengkapan STEP 1 - Import library JQuery dan Zoomooz                   

1. <script type="text/javascript" src="zoomooz/lib/jquery-1.4.4.js"></script>
2. <script type="text/javascript" src="zoomooz/lib/sylvester.js"></script>
3. <script type="text/javascript" src="zoomooz/js/purecssmatrix.js"></script>
4. <script type="text/javascript" src="zoomooz/js/jquery.animtrans.js"></script>
5. <script type="text/javascript" src="zoomooz/js/jquery.zoomooz.js"></script>

---

Code block    Snippet II Kelengkapan STEP 2 - snippet untuk menampilkan gambar                  

1. <div id="headline">
2. <h1>Galeri Foto</h1>
3. <p>Klik gambar untuk Perbesar foto dan klik di luar foto untuk memperkecil</p>
4. </div>
5.  
6. <div id="gallery" class="zoom">
7. <ul>
8. <liclass="zoom"><imgsrc="http://lorempixum.com/600/600/people/1"/></li>
9. <liclass="zoom"><imgsrc="http://lorempixum.com/600/600/people/2"/></li>
10. <li class="zoom"><img src="http://lorempixum.com/600/600/people/3"/></li>
11. <li class="zoom"><img src="http://lorempixum.com/600/600/people/4"/></li>
12. <li class="zoom"><img src="http://lorempixum.com/600/600/people/5"/></li>
13. <liclass="zoom"><img src="http://lorempixum.com/600/600/people/6"/></li>
14. <li class="zoom"><img src="http://lorempixum.com/600/600/people/7"/></li>
15. <li class="zoom"><img src="http://lorempixum.com/600/600/people/8"/></li>
16. <li class="zoom"><img src="http://lorempixum.com/600/600/people/9"/></li>
17. <li class="zoom"><img src="http://lorempixum.com/600/600/people/10"/></li>
18. <li class="zoom"><img src="http://lorempixum.com/600/600/nature/1"/></li>
19. <li class="zoom"><img src="http://lorempixum.com/600/600/people/2"/></li>
20. <li class="zoom"><img src="http://lorempixum.com/600/600/people/3"/></li>
21. <li class="zoom"><img src="http://lorempixum.com/600/600/people/4"/></li>
22. <li class="zoom"><img src="http://lorempixum.com/600/600/people/5"/></li>
23. <li class="zoom"><img src="http://lorempixum.com/600/600/people/6"/></li>
24. <li class="zoom"><img src="http://lorempixum.com/600/600/people/7"/></li>
25. <li class="zoom"><img src="http://lorempixum.com/600/600/people/8"/></li>
26. </ul>
27. </div>

---

Code block   Snippet III - Kelengkapan STEP 3 - Snippet CSS yang digunakan                               

1. <style type="text/css">
2. * {
3. margin: 0;
4. padding: 0;
5. }
6.  
7. /*Text Styles*/
8.  
9. #headline {
10. text-align: center;
11. margin: 20px 0;
12. }
13.  
14. h1 {
15. font-family: 'Arvo', Georgia, Times, serif;
16. font-size: 50px;
17. line-height: 65px;
18. }
19.  
20. p {
21. font-family: 'PT Sans', Helvetica, Arial, sans-serif;
22. font-size: 13px;
23. line-height: 25px;
24. }
25. /*Gallery Styles*/
26.  
27. #gallery {
28. width: 720px;
29. height: 370px;
30. margin: 0 auto;
31. padding: 10px;
32. background: #383131;
33. }
34.  
35. /*List Styles*/
36. ul {
37. list-style-type: none;
38. position: absolute;
39. width: 720px;
40. }
41. #gallery ul li {
42. float: left;
43. margin: 10px;
44. background: white;
45. height: 100px;
46. width: 100px;
47. }
48.  
49. #gallery ul li:hover {
50. border: 3px solid white;
51. margin: 7px;
52. }
53.  
54. #gallery ul li img{
55. height: 100px;
56. width: 100px;
57. }
58.  
59. </style>

---

Code block  TABEL IV – Kelengkapan STEP 4  - snippet program memanggil fungsi                       

1. <script type="text/javascript">
2. $(document).ready(function() {
3. $(".zoom").click(function(evt) {
4. evt.stopPropagation();
5. $(this).zoomTo();
6. });
7. $(window).click(function(evt) {
8. evt.stopPropagation();
9. $("body").zoomTo();
10. });
11. $("body").zoomTo();
12. });
13. </script>

---