Tutorial Praktis

Home » Archives for January 2014

Cara Mudah Install Bootstrap di Blogspot

Posted by Unknown Friday, January 31, 2014 10 comments

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

Login Blogger
Klik Template
Klik Edit HTML
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

Cara Membuat Link Sumber Otomatis saat Copy-Paste Teks Blog

Posted by Unknown 0 comments

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:

Login akun blogger Anda.
Pilih Template ---> Edit HTML ---> klik Expand Template Widget.

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>

Simpan template.

Selamat berkarya, semoga berhasil Thumbs up

Cara Menyembunyikan Navbar Blogger

Posted by Unknown 0 comments

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:

Login akun blogger Anda.
Pilih Template ---> Edit HTML ---> centang 'Expand Template Widget'.
Kemudian cari kode ]]></b:skin>

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)}

Simpan template.