Tutorial Praktis

Alexa Rank (alexa.com) menyediakan fasilitas informasi tentang peringkat suatu situs. Perangkingan didasarkan pada jumlah trafik pengunjung yang masuk ke situs tersebut. Semakin besar traffic pengunjung sebuah web maka semakin tinggi peringkat dari situs tersebut dan juga sebaliknya semakin kecil traffiknya maka semakin rendah peringkat dari situs tersebut.

Alexa Rank mempunyai nilai peringkat dari nilai terkecil yaitu angka 1 sampai dengan seterusnya. Dalam perhitungan sistem di Alexa Rank apabila semakin kecil nilai Alexa Rank situs anda maka semakin baguslah peringkat situs tersebut.

Saat tulisan ini dibuat google menduduki urutan pertama diikuti facebook, youtube yahoo dan baidu. Berikut ini urutan 10 top site versi Alexa:

1. google.com
   Situs mesin pencari informasi, gambar, video. Komplit!
2. facebook.com
   A social utility that connects people, to keep up with friends, upload photos, share links.
3. youtube.com
   YouTube is a way to get your videos to the people who matter to you. Upload, tag and share
4. yahoo.com
   A major internet portal and service provider offering search results, customizable content.
5. baidu.com
   The leading Chinese language search engine, provides "simple and reliable"
6. wikipedia.org
   A free encyclopedia built collaboratively using wiki software.
7. qq.com
   China's largest and most used Internet service portal owned by Tencent, Inc
8. taobao.com
   Taobao Marketplace (www.taobao.com)
9. live.com
   Search engine from Microsoft.
10. linkedin.com
    A networking tool to find connections to recommended job candidates, industry experts.

Mengingat traffic adalah faktor utama ranking web dimata alexa, maka berikut ini adalah tips cara memperoleh rangking yang bagus dimata alexa:

1. Blogwalking
   Adalah kegiatan mengunjungi sebuah blog, tujuan utamanya adalah mendapat kunjungan balik dan terbangun komunikasi antar blogger.
2. Share link Facebook
   Membangikan link di facebook diyakini mampu mendapatkan pengunjung yang berlimpah.
3. Membuat FanPage & Group Facebook.
   Fanpage facebook bertujuan membangun komunikasi yang lebih intens dengan pengunjung web
4. SEO
   SEO masih menjadi cara paling efektif, murah untuk mendatangkan pengunjung web

Semoga bermanfaat!

Sebelumnya pastikan bahwa bootstrap sudah terinstall di blog Anda. Kalau belum, sempatkan baca tutorial sebelum ini tentang cara install twitter bootstrap di blogspot.

Button bisa menjadi daya tarik pengunjung sebuah blog, dan membuat betah pengunjung. Terdapat referensi yang cukup banyak di site get bootstrap, tapi ada banyak hal yang bisa di explore untuk mempercantik tampilan button Anda. Salah satu favorit saya adalah memanfaatkan ‘Bootstrap Button Generator” untuk mendapatkan code instan yang bisa diimplementasikan kedalam blog. Berikut ini situs penyedia layanan generator button yang layak Anda coba:

1. Bootstrap Button Generator By Plugolab

Silahkan ke TKP http Bootstrap Button Generator

Disini plugolab menawarkan banyak kelebihan memilih dan menentukan ukuran, warna sampai dengan pilihan ikon dalam button.

 

Setelah Anda tentukan ukuran, warna, type, ikon, posisi, dari preview yang nampak di panel sebelah kanan Anda bisa langsung copy dan terapkan di blog kita, kurang lebih seperti gambar dibawah ini

2. Beautiful Buttons for Twitter Bootstrappers

Seperti namanya, dari site ini kita bisa menggenerate code button cantik dengan pilihan warna dan ukuran yang ciamik. Beda dengan generator yang pertama, kita tidak perlu install bootstrap di blog terlebih dahulu.

Ok, silahkan ke TKP Bootstrap Button Generator

3. Bootsnip

Layak di coba pula ‘Button Builder for Bootsrap’ bootsnipp. Berisi banyak galeri elemen untuk web designer dan web developer. Bootsnipp diciptakan oleh Maks Surguy pada September 2012 sebagai tempat penyimpanan HTML snippets yang berguna untuk pengembang web menggunakan framework Bootstrap.

Ini telah sepenuhnya dibangun kembali setahun kemudian dan dirilis pada Oktober 2013 sebagai taman bermain Bootstrap dengan kemampuan lebih.

Semoga bermanfaat!

Kata orang menguasai twitter bootstrap sama halnya menguasai separoh ilmu design. He he he.. bisa jadi kalimat tersebut berlebihan, tapi karena kwalitas yang dihasilkan dari twitter bootstrap luar biasa banyak yang seetuju dengan kalimat tersebut. Kemampuannya bisa digunakan untuk mengatur layout lebih mudah, membuat button lebih mudah dan lebih cantik, dan lain sebagainya.

Pengguna wordpress self hosting bisa dengan mudah install twitter bootstrap. Bahkan terdapat juga shortcode yang lebih memudahkan dalam hal penggunaanya. Nah, bagaimana bagi pengguna blogspot?

Cara menikmati bootstrap di blogspot adalah sebagai berikut:

1. Download File Bootstrap

Download file twitter bootstrap disini.

2. Upload di Hosting

Ekstrak file yang sudah terdownload kemudian upload di penyedia layanan hosting kesukaan Anda. Untuk yang gratisan bisa memanfaatkan fasilitas googleode dan google drive. File yang diupload adalah file bootstrap.min.css dan bootstrap.min.js

3. Pemasangan di Blogspot

Berikut ini adalah cara memasang script code bootstrap di blogspot

1. Login Blogger
2. Klik Template
3. Klik Edit HTML
4. Masukkan script bootstrap yang sudah diupload di atas </head>

Yang tidak mau ribet upload script *.JS dan *.CSS tidak perlu khawatir, ambil saja code yang sudah disediakan oleh CDN berikut ini. Ingat tempatkan diatas </head>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://html5shim.googlecode.com/svn/trunk/html5.js' type='text/javascript'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"/>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"/>

Selanjutnya simpan template Anda.

Sekarang Anda mulai bisa menambahkan berbagai component dengan mudah. Untuk penambahan elemen silahkan lihat disini Componen . Bootstrap


 Download Twitter Bootstrap

Ada banyak cara melindungi hasil karya, baik tulisan, gambar maupun video. Sebuah blog atau web biasanya menyertakan disclaimer, tos atau semacamnya. Tapi ada juga pilihan semisal memprotek tulisan dengan cara tidak bisa dicopy. Kali ini sedikit berbeda, kita akan menyertakan link sumber blog kita setiap kali teks dari blog kita di copy oleh orang lain.

Berikut ini adalah cara membuat link sumber otomatis:

1. Login akun blogger Anda. 
2. Pilih Template ---> Edit HTML ---> klik Expand Template Widget. 
3. Copy kode dibawah ini dan letakkan tepat diatas kode <body>

   <script type="text/javascript"> if(document.location.protocol=='http:'){ var Tynt=Tynt||[];Tynt.push('cXIEhKYVSr4lJ5adbi-bpO');Tynt.i={"ap":"Sumber :"}; (function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='https://link-ke-sumber-blog.googlecode.com/svn/sumber-otomatis.txt';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})(); } </script>

   
   



4. Simpan template.

Selamat berkarya, semoga berhasil

Seringkali kita tidak ingin menampilkan navbar namun tidak ingin pula menghilangkannya. Artinya, kalau kursor mengarah pada bagian top blog kita masih bisa melihat navbar.

Berikut ini adalah langkah-langkah menyembunyikan Navbar pada blogspot:

1. Login akun blogger Anda. 
2. Pilih Template ---> Edit HTML ---> centang 'Expand Template Widget'. 
3. Kemudian cari kode ]]></b:skin>
4. Copy paste kode dibawah ini tepat diatas kode ]]></b:skin>

   #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
   #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

   
   



5. Simpan template.