Inilah Cara Mengatasi Loading Blog Dengan Menggunakan Code Javascript

BOS TUTORIAL - Hallo... Apa kabar semuanya. Lama kita tidak berjumpa yah. Saya juga sudah lama tidak memposting dalam blog kesayangan kita ini. Terakhir saya memposting tahun kemarin (Desember 2014), padahal sekarang sudah akhir bulan Februari 2015. Dua bulan juga yah.... wah wah wah... Gimana kabar Anda sekalian kawan-kawan Bos Tutorial. Semoga dalam keadaan sehat dan baik-baik saja toh. Amin....

Kali ini saya ingin berbagi tentang Cara Mengatasi Loading Blog Dengan Menggunakan Code Javascript. Awalnya tulisan ini saya buat ketika membuat blog baru dan memakai template blog gratisan dari hasil pencarian di google. Lumayan juga tampilan template blog tersebut. Walau sudah jadul tapi simpel dan terlihat elegan, kebenaran template blog tersebut hasil karya dari Mas Kolis (trims ya Mas Kolis). Mau tahu nama blog yang baru saja buat itu? Batak Network. Kawan-kawan bisa langsung berkunjung ke blog saya yang baru itu. Ini linknya: http://batak-network.blogspot.com. (Hehehehe jadi promosi deh...).

Kembali kepada topik. Mungkin Anda bertanya kenapa kita harus Mengatasi Loading Blog Dengan Menggunakan Code Javascript? Jawabannya sangat simpel.

Begini ceritanya, jika Anda dan saya memakai sebuah template blog (apalagi template tersebut gratisan, seperti saya menggunakannya) dengan menggunakan banyak script yang disimpan di Google Code (atau Media sejenisnya) oleh si pembuat template, pastinya tidak hanya Anda yang memakai template tersebut. Bisa teman anda, atau pengguna lain yang memakai template blog yang sama. Bayangkan jika anda dan pengguna lainnya menggunakan template yang sama di muka bumi ini, apalagi secara bersamaan, maka betapa beratnya loading blog yang kita kelola tersebut. Oleh karena itu, kita harus mengambil Code Script yang ada di template blog tsb dan menyimpannya di sebuah tempat seperti Google Code (atau Media sejenisnya) khusus untuk kita pribadi. Artinya, template blog yang kita gunakan sekarang hanya kita sendiri yang memakai Code Script tsb.

Alasan lainnya, terkadang Code Script yang dibuat oleh pembuat template tsb kemungkinan rentan rusak atau overload (bisa jadi karena banyak yang memakai) maka salah satu mencegahnya adalah dengan mengambil dan menyimpannya di sebuah tempat seperti Google Code (atau Media sejenisnya) khusus untuk kita pribadi.

Sudah paham maksudnya bukan? Belum paham juga?

Contohnya begini, bila anda menemukan Kode Script seperti di bawah ini:

<script src='http://yourjavascript.com/218437117/halamanav.js' type='text/javascript'/>
atau
<script src='http://bostuts.googlecode.com/files/related-post.js' type='text/javascript'/>
atau lainnya.

Lihat link yang berwarna merah di atas, itulah link code script yang harus kita ambil dan menyimpannya kembali ketempat yang kita inginkan lalu menggantinya dengan link yang baru saja kita buat.

Bagaimana Caranya? Simak selanjutnya di bawah ini.

Inilah Cara Mengatasi Loading Blog Dengan Menggunakan Code Javascript
Perlu Anda ketahui, ada beberapa situs yang menyediakan tempat penyimpanan (hosting) Kode-Kode HTML atau Code Javascript. Semua tergantung pilihan anda. Google sendiri memiliki Google Drive atau Google Code. Pada postingan kali ini, saya hanya menyarankan untuk menggunkana situs lain, yaitu: http://yourjavascript.com/.

Langkah-langkahnya:
Cara Pertama
1. Seperti biasa, bukalah Akun Blog Saudara.
2. Masuklah ke elemen Template. Lalu Klik Edit HTML
3. Carilah link yang berekstension .JS (lihat contoh Kode Script di atas) - Gunakan CTRL + F
4. Apabila sudah anda temukan, maka Copylah Link yang berekstension .JS
5. Bukalah TAP baru pada Browser Internet Anda (Lihat Gambar di bawah)

6. Lihat tab baru tsb apakah ada yang muncul atau tidak. Bila tidak ada yang muncul, itu artinya link yang anda copas tadi telah tersimpan filenya (lihat sebelah kiri pojok bila anda menggunkan Google Chrome, atau kanan atas tanda panah bila anda menggunakan Mozilla)

7. Bila link yang berekstension .JS tsb, muncul kode script di halaman browser anda, maka anda harus mencopasnya ke aplikasi NOTEPAD. Lalu simpanlah file yang di Notepad dengan extensi .JS (nama filenya terserah anda yang penting extensinya harus .JS) (Lihat gambar di bawah ini)

Catatan:

• Ketika Anda menyimpan File yang di Notepad, jangan lupa untuk menulis NAMAFILE.JS pada nama filenya.
• Ingatlah dimana anda menyimpan file tersebut. Karena masih ada langkah selanjutnya.

Langkah Kedua
1. Setelah Anda melakukan langkah pertama di atas, maka selanjutnya kita beralih ke langkah kedua.
2. Bukalah Tab baru dan bukalah situs http://yourjavascript.com/ (Lihat gambar di bawah ini)

3. Uploadlah File yang anda buat pada langkah pertama di atas,
4. Isilah email anda
5. Masukkan Kode chapca yang tertera
6. Klik UPLOAD
7. Akan ada muncul kotak baru, dimana Anda akan disuruh untuk mebuka email anda
8. Bukalah email yang anda masukkan tadi dan lihat kotak Inbox pada email anda.
9. Salinlah kode baru yang diberikan oleh http://yourjavascript.com/ melalui email anda tadi

Contoh:

<script src='http://yourjavascript.com/218437118/halamanav.js' type='text/javascript'/>

Langkah ketiga
1. Setelah Anda menerima email dari http://yourjavascript.com/ dan anda telah menyalin Alamat / Link baru yang diberikan, (lihat tulisan alamat link yang warna merah di atas - No 9. langkah kedua) maka anda harus beralih ke blog anda.
2. Blog anda masih posisi Langkah Pertama (blog anda belum anda tutup / masih dalam keadaan Elemen Template - Edit HTML. maka gantilah Kode lama dengan kode yang baru anda buat.
3. Simpan template Anda
4. Selesai dan lihat hasilnya.

Demikianlah postingan kali ini di awal 2015 mengenai "Inilah Cara Mengatasi Loading Blog Dengan Menggunakan Code Javascript". Selamat mencoba dan semoga bermanfaat. Salam blogger, Salan Sukses, BosTuts.

Read more ...

Cara Memasang Rating, Pesan Kata "Terimakasih" dan Admin di Setiap Akhir Postingan Blog

BOS TUTORIAL - Lucu juga judul Postingan Kali ini. Panjang banget. Tapi tujuannya agar gampang di mengerti dan dicerna oleh kita semua. Hehehehehe....

Ehh... sebagai basa-basi nih, Baru-baru ini kan Harga BBM dinaikkan oleh Presiden Kita, Ir. Joko Widodo. Bagaimana tanggapan Anda mengenai hal ini. Kalao menurut MasBro sih, sah-sah saja. Asal tujuannya baik dan benar-benar penempatannya (dana subsidi). Eh... malah omongin soal Harga BBM.... maaf ya cuma basa-basi saja...

Kembali ke topik permasalahan. Sebenarnya alasan MasBro membuat tulisan ini dikarenakan ada Sahabat Mas Bro yang menanyakan hal itu di dalam komentar beberapa hari yang lalu. Sebelumnya saya mohon maaf karena baru membacanya. Karena baru berkesempatan membuka blog ini. Maafin yah...

Cara Memasang Rating, Pesan Kata "Terimakasih" dan Admin di Setiap Akhir Postingan Blog
Langusng saja yah ke intinya:
1. Seperti biasa, buka Akun Blog Anda sendiri.
2. Masuklah ke Elemen Template
3. Pilih Edit HTML lalu carilah kode <data:post.body/> (gunakan Ctrl+F untuk mencari kode dengan cepar)
4. Salin dan tempatkalah Kode Script di bawah ini tepat di bawah Kode <data:post.body/> tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='margin-top:5px'>
<div itemscope='' itemtype='http://data-vocabulary.org/Review-aggregate'>
<div style='padding:5px; font-size:11px; float:left;'>
Terimakasih Anda telah membaca tulisan / artikel di atas tentang :<br/>
Judul: <span itemprop='itemreviewed'><b><data:post.title/></b></span><br/>
Rating: <span itemprop='rating' itemscope='' itemtype='http://data-vocabulary.org/Rating'>
<span itemprop='average'>100%</span>
</span>
based on <span itemprop='votes'>99998</span> ratings.
<span itemprop='count'>5</span> user reviews.<br/>
Ditulis Oleh <b><a href='https://plus.google.com/114981857040664646747'><data:post.author/></a></b><br/>
Semoga informasi mengenai <a expr:href='data:post.url'><data:post.title/></a> bisa memberikan manfaat bagi Anda. Jangan lupa <b>Komentar Anda</b> sangat dibutuhkan, di bawah ini.<br/>
</div>
</div>
</div>
</b:if>

5. Simpan template blog anda dengan mengklik Save Template
6. Selesai dan lihat hasilnya.

Catatan:

• Pilih kode <data:post.body/> yang tepat yah, Anda akan menemukan beberapa kode yang sama, so... pilih saja yang tepat. (bila gak tepat, nanti tidak akan muncul di dalam postingan, so... ulang lagi saja, jangan takut mencoba)
• Silahkan Anda ganti kata-kata di atas sesuai dengan keinginan Anda
• Apabila Anda tidak suka penempatannya di bawah artikel Anda atau di bawah kode <data:post.body/>, coba lihat tampilan postingan blog Anda dan bereksperimen sedikit.

Bagaimana? Gampang bukan. Sebagai hasilnya, silahkan lihat di bawah postingan ini.

Itulah tips dan trik yang bisa MasBro bagikan pada kesempatan kali ini. Harapan saya, semoga bermanfaat dan selamat mencoba yah. Salam Blogger, salam sukses. [Bos Tutorial]

Read more ...

Memasang / Mengganti Gambar Header Pada Blog Dengan Cepat

BOS TUTORIAL - Memasang / Mengganti Gambar Header Pada Blog Dengan Cepat. Selamat liburan dan Selamat Datang kembali di blog kesayangan kita ini. Blog yang mengulas mengenai Tutorial Blog, bagi pemula dan bagi kita semua. Beberapa hari lagi negara kita Indonesia akan merayakan Dies Natalis Kemerdekaan Indonesia yang ke 69 tahun. Wah... tidak sadar, bahwa Indonesia sudah merdeka selama itu yah. Semoga Hari Kemerdekaan Republik Indonesia ini menjadi momen penting untuk kita bangkit dan semakin jaya di republik ini dan di mancanegara. Amin...

Kali ini, Mas Bro akan membahas mengenai Cara Memasang / Mengganti Gambar Header Pada Blog Dengan Cepat. Mungkin anda bertanya, memangnya ada cara lambat yah? Jawabnya ada saja, coba saja kita memasang gambar header sambil lari-lari di jalan... bisa-bisa lama jadinya heheheeh... (bercanda ya MasBaro dan MbakBro).

Kenapa kita harus mengganti Header Blog kita dengan Gambar atau Logo? Alasannya cuma klasik kok. Biar blog kita semakin menarik untuk dilihat oleh pengunjung juga oleh kita sendiri. Setuju... Disisi lain, blog yang kita kelola terlihat rapi.

Biasanya, ketika kita membuat sebuah blog, maka tampilan Header Blog kita adalah Nama Blog dan Deskripsi Blog. Coba bayangkan apabila Deskripsi Blog kita sangat panjang sekali... bisa-bisa akan memakan tempat dan kelihatannya tidak elegan. So... diperlukan ruang yang luas. Terkecuali Deskripsi Bloha hanya 4 kata saja, tentu akan pendek bukan. Tapi semua tergantung selera saja kok. Ada yang sukanya blog apa adanya, ada juga yang mengantinya dengan gambar. Contohnya Blog yang anda baca ini. Saya menggantinya dengan gambar sendiri.

Kembali ke topik permasalahan kita, yaitu Memasang / Mengganti Gambar Header Pada Blog Dengan Cepat. Yuk simak di bawah ini.

Yang harus kita persiapkan adalah : File / Gambar dengan Type JPG, JPEG, PNG, GIF dengan ukuran sesuai tampilan Template Blog (Widget Headernya).

Langkah-langkahnya:
1. Bukalah Akun Blogger Anda sendiri yah (seperti biasanya)
2. Masuklah ke Elemen Tata Letak atau Layout
3. Pilih / Klik Widget Header (lihat gambar di bawah)

4. Klik Pilih File (lihat gambar di bawah lingkaran warna merah) lalu masukkanlah File Gambar yang telah anda sediakan tadi.

5. Bila koneksi Anda cepat, maka File Gambar akan langsung masuk. Bila koneksi lambat ya sabar-sabar saja dulu sampai gambar tampil seperti di bawah ini.

6. Apabila File Gambar Anda sudah masuk / tampil seperti gambar di atas, maka jangan lupa untuk Centang Selain Judul dan Keterangan (lihat tanda panah merah yang ada angka 1)

7. Lalu Simpan Widget dengan mengklik tanda Simpan (lihat tanda panah merah yang ada angka 2)

8. Selesai dan lihat hasilnya.

Bagaimana? Gampang sekali bukan. Itulah bagaimana cara Memasang / Mengganti Gambar Header Pada Blog Dengan Cepat. Semoga bermanfaat dan selamat mencoba. Salam sukses. Tuhan memberkati. [Bos Tutorial]

Read more ...

Cara Mengganti Logo Blog [Favicon] Dengan Gambar Sendiri

BOS TUTORIAL - Cara Mengganti Logo Blog [Favicon] Dengan Gambar Sendiri. Selamat datang di blog Masbro tentang Blog Tutorial yang ringan dan simpel ini. Kembali Bos Tutorial berbagi dan berbagi tentang tips dan tutorial blogger. Kali ini adalah mengenai Cara Mengganti Logo Blog [Favicon] Dengan Gambar Sendiri.

Ide ini muncul ketika MasBro membaca pesan di Halaman Facebook Bos Tutorial. Demikian pesannya:

Min... Gimana cara menghapus gadget/widget di header blog? Saya ingin logo blog bisa menempati seluruh header... Mohon tutornya..

(karena begitu banyak komentar dan pesan di blog ini, silahkan Anda kunjungi halaman Facebook kami yah... kemungkinan besar akan ditanggapi. NB. Bila Pesan anda di blog ini belum terjawab Maksudnya)

Mungkin barangkali yang dimaksud oleh kawan Masbro di atas adalah mengenai FAVICON atau Logo Blog, kalau saya tidak salah. Untuk itu, yuk sama-sama membuatnya. Simak di bawah ini.


Cara Mengganti Logo Blog [Favicon] Dengan Gambar Sendiri

Syarat Utama adalah : Persiapkan Sebuah Gambar atau Logo Yang berbentuk KOTAK Persegi (Bujung Sangkar) Misalnya 100px x 100px, 200px x 200px, 300px x 300px dst dengan ukuran file tidak lebih dari 100KB. Selanjutnya ikut langkah-langkah berikut.

1. Buka Akun Blogger Anda sendiri.

2. Masuklah ke Elemen Tata Letak (Layout) -> Akan muncul seperti gambar di bawah ini.

3. Pilihlah Widget / Gadget FAVICON (Lihat gambar di bawah ini)

4. Klik Telusuri lalu Masukkan Gambar atau Logo Blog Yang Anda inginkan.

5. Klik Save/Simpan dan Simpan Setelan blog Anda.
6. Selesai dan lihat hasilnya.

Bagaimana? Gampang bukan. Itulah bagaimana Cara Mengganti Logo Blog [Favicon] Dengan Gambar Sendiri. Selamat mencoba dan Salam Sukses. Tuhan Memberkati. [Bos Tutorial]

Catatan:
Langah di atas sudah sayacoba dan praktekan di blog saya yang lain. Silahkan lihat Blog Becak Siantar dan Loker Mantap (Cari Aja di Google dengan kata kunci nama blog tersebut)

Read more ...

Inilah Cara Memasang Kolom Komentar Facebook dan Blog Model Tab

Inilah Cara Cepat Memasang Kolom Komentar Facebook dan Blog Model Tab - Membuat Blog semanarik mungkin adalah keinginan para blogger. Semuanya bertujuan agar blog tersebut disukai dan disenangi dari segi design dan tata letak. Sehingga, penampilan dari blog tersebut bisa menarik perhatian para pengunjung blog. Tidak ketinggalan juga mempercantik tampilan kolom komentar pada blog.

Memasang Kolom Komentar Facebook dan Blog secara bersamaan merupakan salah satu cara mempercantik tampilan blog, khususnya tampilan postingan / artikel yang ada pada blog tersebut. Dimana Komentar-komentar dari pengunjung seakan-akan disembunyikan, dan komentar-komentar tersebut akan terlihat kembali apabila kita memilih berdasarkan Facebook atau Blog, bukan sepenuhnya dihilangkan (komentar tetap ada selama tidak kita hapus). Tujuannya adalah agar tampilan isi postingan terlihat ramping dan jelas (Apabila komentar artikel banyak loh).

Seperti inilah tampilan yang anda lihat bila Memasang Kolom Komentar Facebook dan Blog Model Tab

Inilah Cara Memasang Kolom Komentar Facebook dan Blog Model Tab
Langkah-langkah yang harus dilakukan adalah sebagai berikut:
1. Tentunya seperti biasa anda harus membuka akun blogger anda sendiri.
2. Pada Dasbor blog anda, masuk elemen Template, Lalu pilih Edit HTML
3. Cari Kode : <div class='comments' id='comments'>
4. Copy atau salin Kode Script yang tertera di bawah ini, dan selanjunya Pastekan tepat di bawah Kode : <div class='comments' id='comments'>

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url'/> Comments</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'><div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='550'/></b:if></div>
<div class='comments comments-page' id='blogger-comments-page'>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='IDFANPAGEFACEBOOK' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(".comments-tab").addClass("inactive-select-tab");$(selectTab).removeClass("inactive-select-tab");$(".comments-page").hide();$(selectTab + "-page").show();}</script>

<style>.comments-page { background-color: #f2f2f2;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;}</style>

5. Apabila sudah selesai, Simpanlah Template Blog anda.
6. Lihat hasilnya.

Catatan:

• Ganti IDFANPAGEFACEBOOK dengan Kode / No / Id Fan Page Facebook yang anda punya.
• Cara melihat IDFANPAGEFACEBOOK adalah: Masuklah ke Halaman Facebook Anda, lalu masuk lagi ke Pengaturan, Lihat Info Halaman, lalu lihat paling bawah sekali ada tulisan ID Halaman Facebook : 10026565009xxxx
• Anda tidak punya Halaman Facebook saat ini? Anda tidak perlu mengganti tulisan IDFANPAGEFACEBOOK di atas (saran sih gunakan Halaman Facebook) abaikan saja. Gunakan saja Kode Script di atas apa adanya.
• Ukuran atau panjang Kolomo Komentar FB sesuaikan dengan Ukuran Blog anda. Silahkan ganti angka yang berwana Ungu di atas. (width='550')
• Apabila kode <div class='comments' id='comments'> ada 2, pilih saja salah satu.

Bagaimana, gampang bukan. Demikianlah tips tutorial kali ini mengenai "Inilah Cara Memasang Kolom Komentar Facebook dan Blog Model Tab". Selamat mencoba dan salam sukses selalu. [Bos Tutorial]

Read more ...

Cara Cepat Memasang Tool Parse HTML di Blog

Cara Cepat Memasang Tool Parse HTML di Blog - Mungkin anda bertanya kenapa perlu PARSE HTML? Sama halnya yang pernah timbul dalam pikiran saya jauh-jauh sebelum mengenal Blogger. Maklum... kita sama-sama belajar ngeblog kawan... Newbie kita ini. Okaylah kalau begitu, yuk kita bahas mengenai PARSE HTML lebih dalam di bawah ini.

Apa itu PARSE HTML
Menurut Wikipedia bahwa "Fungsi parser" dalam bahasa Inggris: parser function (berbeda dengan ekstensi ParserFunctions yang merupakan kumpulan fungsi parser) adalah semacam template yang memberikan nilai sesuai dengan paling sedikit satu parameter tak bernama, yang dipisahkan dari nama fungsi menggunakan tanda titik dua ":"; seperti template biasa, fungsi ini mungkin memiliki beberapa parameter, masing-masing diawali dengan garis tegak "|". Sintaks dapat ditulis dengan atau tanpa tanda pagar "#" di awalnya:

Kalau Bahasa Bos Tutorial, bahwa PARSE HTML itu adalah salah satu cara mengubah text html/javascript yang baku (apa adanya) ke dalam bentuk text html/javascript yang disertai dengan perubahan-perubahan atau tambahan kode agar text html/javascript yang kita inginkan tersebut tetap menjadi sebuah text html/javascript dan bukan hasil dari text html/javascript itu.

Tool Parse HTML
Tool Parse HTML adalah sebuah aplikasi yang digunakan untuk mengkonversi kode HTML sebelum dipasang di posting atau template blog agar kode tersebut bisa ditampilkan.

Sebagai contohnya adalah:
Saya ingin menampilkan sebuah link Bos Tutorial (link saling tukar link) agar para pembaca langsung menyalin linknya :

<b><a href="http://bos-tutorial.blogspot.com/" target="_blank">Bos Tutorial</a></b>

Kode diatas agar tampil seperti itu, maka diperlukan PARSE HTML. Setelah di-PARSE, hasilnya seperti di bawah ini.

&lt;b&gt;&lt;a href=&quot;http://bos-tutorial.blogspot.com/&quot; target=&quot;_blank&quot;&gt;Bos Tutorial&lt;/a&gt;&lt;/b&gt;

(catatan: penempatan kode tersebut bila ingin ditampilkan dalam sebuah Postingan / artikel, harus dalam bentuk HTML dan bukan COMPOSE).

Saya harap kawan-kawan mengerti penjelasan di atas, bila masih belum faham juga coba baca pelan-pelan dan direnungkan. Apabila sudah mengerti, maka kita akan lanjutkan seterusnya.

Cara Cepat Memasang Tool Parse HTML di Blog
Selanjutnya adalah bagaimana kita memasang Tool Parse HTML. Bagi kawan-kawan yang mahir dalam pengolahan text html/javascript, tentu sudah tidak asing lagi dengan yang namanya Tool Parse HTML.

Perhatikan langkah-langkah berikut ini.
1. Masuklah atau manfaatkan fasilitas yang diberikan oleh Google melalui GMODULES, www.gmodules.com (tampilannya seperti gambar di bawah)

2. Lihat paling bawah ada Tulisan atau 2 pilihan yaitu: "Lihat Dulu Perubahan" dan "Dapatkan Kode" (hasilnya seperti gambar di bawah ini)

3. Silahkan anda klik terlebih dahulu "Lihat Dulu Perubahan" untuk memastikan apakah ada yang berubah atau ada yang ingin anda rubah. Sebelum anda setuju dengan model awal yang ditawarkan oleh GMODULES diatas, Anda juga bisa merubah Judul, Ukuran, Warna, dan lain-lainya. Yang di centrang jangan dirubah yah... biarkan itu semua ter-centrang. (saran: kotak yang di centrang harus di centrang) (hasilnya seperti gambar di bawah ini)

4. Apabila anda sudah setuju dengan semua makan langkah selanjutnya adalah mengambil kode script yang telah disediakan. Caranya: klik "Dapatkan Kode" lihat dibawah akan muncul kotak baru yang berisi sebuah Kode atau text html/javascript.

5. Salinlah kode text html/javascript tersebut lalu tempatkan sesuai keinginan anda. Apakah dalam bentut WIDGET / Gadget atau sama persis seperti yang MasBro buat (dalam bentuk postingan) semua tergantung anda.

6. Selesai. Hasilnya silahkan anda lihat di bawah ini.



Bagaimana? Gampang bukan. Semoga postingan mengenai "Cara Cepat Memasang Tool Parse HTML di Blog" di atas bisa bermanfaat bagi anda. Selamat menooba salam blogger. Jjangan lewatkan Tips dan Trik serta tutorial lainnya. [Bos Tutorial]

Read more ...

Cara Cepat dan Mudah Mengganti Template Blog

Cara Cepat dan Mudah Mengganti Template Blog - Sebenarnya tulisan mengenai Mengganti Template Blog sudah banyak bertebaran dimana-mana (khusus blog yang berisikan tutorial blog). Anda sudah pernah membaca tulisan Bos Tutorial mengenai Cara Mengganti Template Blog Pada Blogspot di blog kesayangan kita ini bukan. Itu adalah cara yang lama. Meskipun demikian, itu masih bisa dilakukan, tapi hasilnya tidak sesuai keinginan kita. Karena tampilan blog akan terlihat amburadul. So... sebaiknya jangan pakai lagi cara itu. Bos Tutorial akan memberikan Cara Cepat dan Mudah Mengganti Template Blog.

Mungkin anda bertanya memangnya ada cara yang lain? Jawabnya tidak. Caranya hampir sama kok. Hanya cara yang akan kita paparkan sekarang adalah cara yang cepat dan mudah tanpa embel-embel lainnya.

Cara Cepat dan Mudah Mengganti Template Blog
Ada dua cara atau langkah yang harus kita lakukan,

Langkah Pertama

• Anda harus memiliki sebuah blog
• Anda sudah mempersiapkan Script / atau file template blog yang baru. Biasanya file tersebut bertype / ekstensinya *.XML atau *.TXT

Langkah Kedua
1. Bukalah akun blog anda (Dasbor Blog) pilihlah elemen Template lalu Pilih Edit HTML

2. Tinggalkan blog anda sejenak, lalu bukalah File / Script Template Blog yang baru anda simpan. Gunakan Program WORDPAD atau NotePad. (disarankan pakai WORDPAD) lihat gambar di bawah ini.

3. Masih di WORDPAD, Salinlah / Copy semua script template baru itu (gunakan CTRL + A lalu Copy)

4. Kembali lagi ke Blog Anda (lihat Gambar b pada langkah kedua bagian 1)

5. Arahkan mouse anda ke Script Template Blog, lalu tekan CTRL + A (pastikan semua tersorot / terblok)

6. Selanjutnya pastekanlah script template baru yang sudah di copy tadi (atau gunakan CTRL + V)

7. Simpanlah Template Blog anda (Klik Simpan Template)

8. Selesai dan lihat hasilnya.

Bagaimana, gampang bukan. Begitulah Cara Cepat dan Mudah Mengganti Template Blog pada blogspot. Selamat mencoba. Salam Blogger. [Bos Tutorial]

Catatan :

• Klik Gambar-gambar di atas bila ingin melihat ukuran yang besar.
• Bila anda ragu-ragu, simpan dahulu Template Blog lama anda (untuk jaga-jaga).
• Mengganti Template Blog merupakan salah satu untuk mempercantik blog.

Read more ...

Cara Terbaik Membuat Anti Copas dan Anti Klik Kanan di Blog

Cara Terbaik Membuat Anti Copas dan Anti Klik Kanan di Blog - Di kalangan blogger bicara tentang COPAS sudah sering kita dengar. Bahkan dibeberapa blog anda akan membaca tulisan, COPAS ijin dulu, bila ingin COPAS baca ini dulu, klik disini, bla...bla...bla...bla... dan seterusnya...

Sebenarnya, orang atau blogger tersebut bila menulis kata-kata di atas, dia suka bila postingannya di copas. (maaf ini hanya pandangan saya...) Alasan saya, kalao memang artikelnya tidak ingin di COPAS, pasang saja script anti copas atau anti klik kanan. Sipembaca pun dengan sendirinya akan tidak meng-COPAS-nya. Benar gak sih.... hehehehe

Apa itu Copas
Di blog lain yang saya kelola, saya menulis tentang Bagaimana Cara COPAS yang baik (silahkan klik disini untuk membacanya). Oh iya, tahukah Apa itu COPAS?

COPAS berasal dari kata CO dan PAS, CO itu singkatan COPY, PAS singkatan dari PASTE. COPAS adalah tindakan atau melakukan COPY (salin) langsung sebuah artikel dari sumber tulisan tanpa repot-repot menulis artikel hasil karya sendiri. Dan biasanya, artikel yang di COPAS oleh tukang Copas, tidak mencantumkan sumber atau LINK artukel tersebut.

Bila kita lihat secara hukum, bahwa orang yang melakukan tindakan COPAS merupakan sebuah pelanggaran atau pencurian hasil karya orang lain.

Bagaimana Cara Agar Atikel kita Tidak Bisa di Copas?
Untuk selanjutnya ikuti langkah-langkah berikut.

1. Silahkan buka akun blog anda sendiri.
2. Masuklah ke Elemen Layout atau Tata Letak
3. Pilih Add a Gadget atau Gadget Baru
4. Setelah muncul kotak baru, lalu pilih HTML/JavaScript
5. Salin / Copy lah Script di bawah ini lalu tempatkan (Paste) di Gadget yang baru anda buat.

<script> var message="Maaf,,, Untuk sementara dilarang klik kanan !!!";
///////////////////////////////////
function clickIE4(){if (event.button==2){alert(message);return false;}} function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}} if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;} else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;} document.oncontextmenu=new Function("alert(message);return false")</script>

6. Apabila semua sudah beres, lalu SIMPAN Gadget Baru tersebut.
7. Selesai dan lihat hasilnya.

Gampang bukan, demikianlah Bagaimana Cara Terbaik Membuat Anti Copas dan Anti Klik Kanan di Blog. Selamat Mencoba. Salam. [Bos Tutorial]

Referensi : Kumpulan Adsen Blogspot

Read more ...

Cara Membuat Related Post Dengan Gambar

Cara Membuat Related Post Dengan Gambar - Untuk Postingan ini merupakan postingan lanjutan dari Cara Membuat Related Post Dengan Gambar Mini Di Blog tidak berbeda jauh tampilan dari tutorial sebelumnya. tutorial ini merupakan jawaban dari  request teman blogger yang sudah menyempatkan berkomentar yang menginginkan related post dengan gambar pada blog saya ini 

Sekilas Tentang Related Post adalah satu Teknik Blog dimana Related Post Akan Menampilkan Article-Article Yang Saling Berhubungan. Berhubungan disini Yang bermaksud adalah Setiap Artikel Yang Memiliki Kesamaan Label, Keyword Maka dengan Otomatis Artikel-artikel yang merupakan tautan yang terhubung atas kesamaan label atau keyword tersebut akan dimunculkan pada halaman di mana anda menempatkan related Post ini.

Tutorial Blog ini cukup simple dan ringan. Jadi tidak perlu takut jika blog kamu loading nya lambat, berikut dibawah ini merupakan tampilan dari related post ( Postingan Terkait) Pada Blog Ini :

Contoh Tampilan Related Post dengan Gambar

Tujuan dari Related Post ini Adalah salah satu teknik yang menguntungkan bagi pembaca atau yang sedang mencari-cari sesuatu artikel, maka setiap artikel yang saling berhubungan akan terlihat oleh sipembaca dan akan kembali membuka tautan yang berada pada Related post tersebut, dengan secara otomatis trafik atau view halaman pada Blog kita akan semakin banyak karena setiap halaman artikel memiliki tautan yang akan selalu dibuka oleh pembaca, pembaca akan berlama-lama di blog kita karena tautan akan menghubungkan artikel yang satu dengan artikel lainya yang dihubungkan oleh label.

 

Berikut ini Cara Membuat Related Post dengan Gambar :

1. Login ke Blogger
2. Buka menu Template > Edit HTML > Centang "Expand Template Widget.
3. Cari kode </head>, lalu masukkan kode berikut diatasnya.

<style type='text/css'>
/*RelatedPost Mas Oktri*/
#related_posts h4 {color: rgb(230, 230, 230);font-size: 11px;font-weight: bold;margin: 0px;padding: 2px 5px 1px 5px;text-shadow: 1px 1px rgb(0, 0, 0);text-transform: uppercase;border-bottom: 1px solid rgb(70, 0, 0);box-shadow: 0px 1px 0px rgb(150, 0, 0);}
#related_posts{font-size:12px;}
#relpost_img_sum {margin: 0;padding: 4px;line-height: 16px;}
#relpost_img_sum:hover {background: none;}
#relpost_img_sum ul {list-style-type: none;margin: 0;padding: 0;}
#relpost_img_sum li {margin: 0px;padding: 5px;height: 35px;list-style: none outside none;border-bottom: 1px solid rgb(20, 20, 20);box-shadow: 0px 1px 0px rgb(51, 51, 51);-webkit-transition: all .2s linear;-moz-transition: all .2s linear;-o-transition: all .2s linear;transition: all .2s linear;}
#relpost_img_sum li:hover {background-color: rgb(51, 51, 51);}
#relpost_img_sum a, #relpost_img_sum a:visited{color:rgb(230, 230, 230);text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);-webkit-transition: all .2s linear;-moz-transition: all .2s linear;-o-transition: all .2s linear;transition: all .2s linear;}
#relpost_img_sum a:hover{color:#ff0000;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);}
#relpost_img_sum .news-title {display: block;font-family:&quot;Segoe UI&quot;,Calibri,&quot;Myriad Pro&quot;,Myriad,&quot;Trebuchet MS&quot;,Helvetica,Arial,sans-serif;margin-bottom: 2px;}
#relpost_img_sum .news-text {display: block;text-align: justify;font-weight: normal;text-transform: none;font-size:10px;}
#relpost_img_sum img {float: left;margin-right:5px;margin-top:0px;padding:0px!important;width: 30px;height: 30px;}</style>

4. Lalu cari kode <data:post.body/> atau <div class='post-footer-line post-footer-line-3'>
<!-- Untuk kode artikel terkait -->
</div>.

5. Ganti kode <!-- Untuk kode artikel terkait --> dengan kode dibawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'>
<h4>Related Posts - <data:blog.pageName/></h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<a href='http://tutorialbelajarblogger.blogspot.com/' style='display:none;'>Related Posts with thumbnails and summary post for blogger</a>
<ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</div>
</b:if>  

6. Jika kamu menggunakan kode <data:post.body/>, taruh kode no. 5 dibawahnya.

7. Simpan dan lihat hasilnya. (Ingat sebelum mengutak-atik template, backup template untuk menghindari kesalahan)

Sekian dari saya tentang Cara Membuat Related Post Dengan Gambar, semoga dapat bermanfaat. TERIMAKASIH

Read more ...

Cara Membuat Posting Dua Kolom Di Homepage Blog

Tutorial Belajar Blog - Cara Membuat Posting Dua Kolom Di Homepage Blog adalah judul posting yang akan kita bahas kali ini, Tutorial ini sebelumnya inspirasi dari template mas sugeng dan template yang saya gunakan ini.

Sesuai dengan judul postingan Cara Membuat Posting Dua Kolom Di Homepage Blog kenapa banyak blogger ingin mempunyai tampilan sesimple mungkin ataupun semenarik, banyak juga yang membuat tampilan homepage ( Halaman Utama ) Blog yang biasanya satu kolom di homepage menjadi dua ( 2 ) kolom .

Berikut gambar dari  hasil cara membuat posting dua kolom homepage blogspot yang telah saya buat di blog uji coba pada template yang akan saya share setelah postingan ini.

Before ( Sebelum )

After ( Sesudah )

Berikut Cara Membuat Posting Dua Kolom Di Homepage Blog

1. Masuk ke akun blogger anda
2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
3. Cari Kode ]]></b:skin>
4. Letakkan kode berikut dibawah kode ]]></b:skin>
   

   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <style>
   .post {width:250px;height:200px;margin:0 20px 5px 0;overflow:hidden;float:left;}
   </style>
   </b:if>

   
   Catatan 1 :
   
   • Jika anda ingin menambahkan background cukup memasang kodenya saja seperti berikut ini
     

     .post {background:#00000;width:250px;height:200px;margin:0 20px 5px 0;overflow:hidden;float:left;}

   • Atur lebar dan tinggi postingan
     

     width:250px;height:200px;

   • Atur jarak antar postingan
     

     margin:0 20px 5px 0;

   
   Catatan 2 :
   Jika di blog anda terdapat Readmore, atur juga jumlah kata, lebar dan tinggi gambar yang terdapat didalam kode Readmore tersebut
   Contoh:
   

   <script type='text/javascript'>
   var thumbnail_mode = "float" ;
   summary_noimg = 250; ? perkecil angka ini
   summary_img = 250; ? perkecil angka ini
   img_thumb_height = 200; ? perkecil angka ini
   img_thumb_width = 200; ? perkecil angka ini
   </script>
   <script type='text/javascript'>
   .............
   </script>

5. Selanjutnya cari kode .post {
   Pasang auto diantara kode jarak dalam .post {
   Sebelum
   

   .post {margin:0.5em 0 1.5em;}

   Sesudah
   

   .post {margin:0.5em auto 0 1.5em;}

   
   
   Penambahan auto ini sebenarnya hanya tambahan saja agar jarak antar artikel sesuai. Bisa anda tambahkan, bisa juga tidak, namun untuk mengetahuinya apakah perlu menambahkan auto, silahkan preview blog terlebih dahulu dan bandingankan hasilnya antara ada dan tidak adanya auto
   
   
6. Setelah selesai. Preview blog anda terlebih dahulu dan lihat hasilnya. Jika hasilnya seperti gambar berikut ini, dimana link Posting Lama terlihat seperti gambar berikut ini
   
   
   
   Pada gambar diatas, link Posting Lama atau sejenisnya berada sejajar dengan artikel blog dan untuk mengembalikan ke posisi sebenarnya yaitu berada di bawah kanan, silahkan cari kode <b:include name='nextprev'/> dan tambahkan kode <div style='clear: both;'/> tepat diatas <b:include name='nextprev'/>
   Hasilnya:
   <div style='clear: both;'/>
   <b:include name='nextprev'/>
7. Preview lagi blog anda
8. Selamat! Halaman depan atau homepage blog anda sudah berubah menjadi dua kolom posting

Demikian Tutorial Tentang Bagaimana membuat dua kolom post di halaman utama blog ini, Semoga Dapat membantu teman - teman blogger semua 

Referensi  : Mbah Google , PanduanTemplateblog , Oktri Darmadi

Read more ...

Inilah Memasang Widget Like Box Facebook Melayang di Blog

Inilah Memasang Widget Like Box Facebook Melayang di Blog - Masih suasana bulan Ramadhan. Sebelumnya Bos Tutorial mengucapkan Selamat menunaikan Ibadah Puasa bagi yang merayakannya. Ok. Tetap semangat yah kawan-kawan.

Kembali kepada topik yaitu "Memasang Widget Like Box Facebook Melayang di Blog". Oh iya, sebelumnya Bos pernah membagikan kepada kawan mengenai Cara Memasang Fans Page Facebook Tersembunyi. Untuk tutotor kali ini berbeda namun hampir sama. Bingungkan. Maksudnya, Memasang Widget Like Box Facebook Melayang di Blog pengunjung diminta untuk mengklik sebuah kotak apakah dia mau menyukai halaman facebook kita atau tidak (tombol Close). Sementara Memasang Fans Page Facebook Tersembunyi, Widget Fans Page Facebook akan muncul ketika mouse di arahkan ke kotak Widget itu dan tidak perlu menutup kotak widget (tanpa tombol Close).

Tujuan Memasang Widget Like Box Facebook Melayang di Blog
Pada dasarnya tujuan Memasang Widget Like Box Facebook Melayang di Blog adalah agar para pengunjung blog mau menyukai halaman facebook yang kita kelola dengan memberikan jempolnya, sehingga halaman halaman facebook yang anda kelola semakin banyak. Kelebihan lain dari Widget ini dilengkapi dengan tombol close sehingga pengunjung bisa dengan mudah menutup Kotak Widget ini dan walau pun agak sedikit mengganggu pengunjung tapi masih bisa menutupnya tanpa susah payah.

Penasaran ingin Memasang Widget Like Box Facebook Melayang di Blog anda? Ikuti langkah-langkah dibawah ini.

Inilah Memasang Widget Like Box Facebook Melayang di Blog

1. Syarat utama : Memiliki Sebuah Halaman Facebook. Bila belum ada, silahkan buat dulu. Baca disini Cara Membuat Halaman Facebook. Setelah anda memiliki sebuah halaman facebook, ikuti langkah selanjutnya.
2. Buka Akun Blog yang anda kelola.
3. Pada Dasbor Blog anda, masuklah ke Elemen Tata Letak, pilih Add Widget / Tanmah Gadget
4. Lalu pilih HTML/Jawascript
5. Selanjutnya copylah kode script di bawah ini ke dalam Widget/Gadget Baru yang anda buat.

<!-- FB melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:40%;
margin:0px 0px 0px -182px;
width:310px;
height:auto;
padding:16px;
-webkit-box-shadow: 0px 0px 7px #222;
-moz-box-shadow: 0px 0px 7px #222;
box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;}
#kotak-facebook a.close {
position:absolute;
top:-10px;
right:-10px;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
cursor:pointer;
}
</style>
<script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#kotak-facebook').animate({bottom:"50px"}, 1000);
// hilangkan kotak pesan saat tombol (x) di klik
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='kotak-facebook'>
<p style=" margin-right:10px; font-size:15px; color:#000000;">Please Bantu Saya,<blink> Like This !!!</blink> </p>
<!-- Mulai --!>

<div class="fb-like-box" data-href="https://www.facebook.com/NongkronglDiKedaiKopi" data-width="292" data-show-faces="true" data-stream="false" data-show-border="true" data-header="true"></div>

<!-- Selesai --!><a class='close' href='#'>&times;</a>
<p style=" float:right; margin-right:35px; font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://kumpulan-adsen.blogspot.com/">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://bos-tutorial.blogspot.com/2013/07/inilah-memasang-widget-like-box.html">Get This Widget</a></p>
</div>

6. Simpat Widget/Gadget Baru yang anda buat tersebut.
7. Lihat hasilnya.

Perlu diperhatikan :
1. Tulisan berwarna Merah adalah Kode Script dari Halaman Facebook Kedai Kopi. Silahkan anda ganti Kode Script tersebut dengan Kode Script dari Halaman Facebook Anda.
2. Bila tidak berhasil, coba ulang dari awal.
3. Mohon Halaman Facebook Bos Tutorial di Like juga yah

Sebagai contohnya, silahkan lihat disini. Demikianlah tutorial ringan mengenai Inilah Memasang Widget Like Box Facebook Melayang di Blog, Selamat mencoba salam sukses. Salam. BOS TUTORIAL.

Read more ...

Cara Membuat Lightbox Pada Gambar Blog

Lightbox Pada Gambar Blog

Cara Membuat Lightbox Pada Gambar Blog - Postingan ini merupakan insiprasi template yang saya gunakan, Pada Kesempatan ini ( Tutorial Belajar Blog) akan memberikan Javascript untuk membuat Lightbox ini terotomatisasi pada setiap gambar yang ada pada postingan blog/web anda.

Apa Itu Lightbox Gambar , Lightbox itu Sejenis Pop Up, Tetapi Bukan Pop Up,Lightbox gambar itu Jika Di Click pada gambar kemudian muncul kotak yang muncul pada saat mengklik atau melihat suatu gambar.

Contoh Tampilan

KLIK DISINI DEMO

Untuk memasang Lightbox Gambar Pada Blog dengan Jquery ikuti langkah-langkah berikut :

1. Login akun Blogger anda.
2. Pada Dashboard pilih Template � Edit HTML
3. Letakkan kode berikut ini dibawah kode ]]></b:skin>
 

#jquery-overlay{position:absolute;
top:0;left:0;z-index:90;
width:100%;height:500px}
#jquery-lightbox
{position:absolute;top:0;left:0;width:100%;
z-index:100;text-align:center;line-height:0}
#jquery-lightbox a,#jquery-lightbox a:hover
{border:none}
#jquery-lightbox a img{border:none}
#lightbox-container-image-box
{position:relative;background-color:#fff;border-radius: 5px 5px 0px 0px;
width:250px;height:250px;margin:0 auto}
#lightbox-container-image{padding:10px}
#lightbox-loading{position:absolute;top:40%;left:0%;
height:25%;width:100%;text-align:center;
line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;
height:100%;width:100%;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext
{width:49%;height:100%;zoom:1;display:block}
#lightbox-nav-btnPrev{left:0;float:left}
#lightbox-nav-btnNext{right:0;float:right}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;
background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;
width:100%;padding:0 10px 0;border-radius: 0px 0px 5px 5px;}
#lightbox-container-image-data
{padding:0 10px;color:#666}
#lightbox-container-image-data
#lightbox-image-details
{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:bold}
#lightbox-image-details-currentNumber
{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;
padding-bottom:0.7em}

Kemudian letakkan kode berikut ini diatas kode </body>

<script src='http://lightbox-blogger.googlecode.com/files/jquery.min.js' type='text/javascript'/>
<script src='http://lightbox-blogger.googlecode.com/files/lightbox.min.js' type='text/javascript'/>

Simpan Template Kemudian Lihat hasilnya dengan klik gambar pada postingan anda.

Read more ...

Cara Membuat Persentase pada Scrollbar Blog

Tutorial Belajar Blog - Cara Membuat Persentase pada Scrollbar Blog - Melanjutkan tutorial sebelumnya yaitu Cara Mengganti Tampilan Scroll Bar Menjadi Keren di Blog apabila pada tutorial sebelumnya membuat scroll lebih keren akan tetapi tutorial ini untuk mencoba menerapkan persentase pada scrollbar.

Sebelumnya sempat bingung asal muasal siapa yang pertama membuat tutorial tentang persentase scroll pada blog, sebab pada saat saya ( Mas Oktri ) search di mbah google ternyata banyak yang menuju ke bloggertut, semoga pembuat pertama tutorial ini dapat berkomentar supaya saya bisa tidak penasaran karena banyak blog yang share tentang tips ini. 

 Demo persentase pada scroll blog

Untuk membuatnya silahkan ikuti langkah-langkahnya :

Langkah 1 : Seperti biasa masuk ke Template dan Edit HTML. Simpan kode ini di atas ]]></b:skin>

#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #2187e7;
  color: #fff;
  border-radius: 3px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: #2187e7;
}

Biasakan untuk membackup template sebelum melakukan editing pada template blog.

Langkah 2 : Simpan kode ini di bawah </head>

<div id='scroll'></div>

Langkah 3 : Simpan JavaScript ini di atas </body>

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>

Simpan Template.

Keterangan :
untuk mengganti warna background, cari background-color: #2187e7,lalu ganti warnanya, untuk mengatur jarak Scroolba Persentase dengan Scrollbar cari kode right: 20px; lalu ganti, untuk menggantinya kode 20px ganti menjadi 10px, 20px, dan selanjutnya, dan yang terakhir untuk mengubah warna teks cari kode color: #fff; dan ganti kode warna biru muda tersebut dengan kode warna yang kalian inginkan.

Demikian Tutorial  persentase di samping scrollbar Semoga Bermanfaat

Read more ...

Cara Membuat Tooltip Keren Pada Blog

Contoh Tooltips Keren

Cara Membuat Tooltip Keren Pada Blog - Kali ini saya ( Mas Oktri ) akan share cara membuat tooltip yang keren menggunakan CSS3. Sobat Mas Oktri pasti sudah gak asing lagi kan dengan tooltip, Maksud dari tooltips keren ini adalah berbeda dengan tooltip - tooltip yang ada, karena tooltip yang ini memiliki fungsi yang lebih yaitu bisa memberikan informasi dengan kategori sampai 5 kategori, yaitu : Standard tooltip, Critical tooltip, Warning tooltip, Help tooltip, dan Information tooltip.

Tutorial Ini Inspirasi dari Amatullah Syukur Seorang Blogger Indonesia yang bisa dikatakan Blogger Profesional Menurut saya pribadi karena tutorial di blog tersebut banyak dicari oleh blogger bloggger lain atau pengunjung yang hanya mencari suatu informasi, cukup sekian basa basi dari Mas Oktri   Berikut Ini Langkah Langkah Untuk Membuat Tooltips Tersebut

  Demo tooltip Keren  part I

Demo tooltip Keren part II

Cara Membuat Tooltip Keren Pada Blog

1. Login ke akun blogger anda >> Template >> Edit HTML >> Proceed
2. Cek lists Expand Widget Templates
3. Cari kode ]]></b:skin> (Tips: Untuk mempermudah pencarian gunakan Ctr + F)
4. Letakkan kode berikut diatas kode ]]></b:skin>

.tbi-tooltip {
 outline: none;
 cursor: help;
 position: relative;
 text-decoration: none;
 border-bottom: 1px dotted #000;
}

.tbi-tooltip span {
 margin-left: -999em;
 position: absolute;
 color: #000;
}

.tbi-tooltip:hover span {
 font-family: Trebuchet MS, Calibri, Tahoma, Geneva, sans-serif;
 position: absolute;
 left: 1em;
 top: 2em;
 z-index: 99;
 margin-left: 0;
 width: 250px;
 -moz-border-radius: 12px;
 -webkit-border-radius: 12px;
 border-radius: 12px;
 -moz-box-shadow: 0px 0px 9px #000000;
 -webkit-box-shadow: 0px 0px 9px #000000;
 box-shadow: 0px 0px 9px #000000;
}

.tbi-tooltip:hover img {
 border: 0;
 margin: -10px 0 0 -55px;
 float: left;
 position: absolute;
}

.tbi-tooltip:hover em {
 font-family: Candara, Tahoma, Geneva, sans-serif;
 font-size: 1.2em;
 font-weight: bold;
 display: block;
 padding: 0.2em 0 0.6em 0;
}

.custom {
 padding: 0.5em 0.8em 0.8em 2em;
}

.tbi-general {
 background: #EDEDED;
 background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZjVmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iI2UzZWFlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjOGQ3ZGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,245,246,1)), color-stop(37%,rgba(227,234,237,1)), color-stop(100%,rgba(200,215,220,1)));
 background: -webkit-linear-gradient(top,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
 background: -o-linear-gradient(top,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
 background: -ms-linear-gradient(top,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
 background: linear-gradient(to bottom,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 );
 -webkit-box-shadow: 4px 4px 1px 1px #ccc;
 box-shadow: 4px 4px 1px 1px #ccc;
}

.tbi-critical {
 border: 1px solid #FF3334;
 background: #ffccaa;
 background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2NhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjg0ODIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #ffccaa 0%, #ff8482 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffccaa), color-stop(100%,#ff8482));
 background: -webkit-linear-gradient(top,  #ffccaa 0%,#ff8482 100%);
 background: -o-linear-gradient(top,  #ffccaa 0%,#ff8482 100%);
 background: -ms-linear-gradient(top,  #ffccaa 0%,#ff8482 100%);
 background: linear-gradient(to bottom,  #ffccaa 0%,#ff8482 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffccaa', endColorstr='#ff8482',GradientType=0 );
}

.tbi-help {
 border: 1px solid #2BB0D7;
 background: #a9e4f7;
 background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZTRmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZmI0ZTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #a9e4f7 0%, #0fb4e7 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7));
 background: -webkit-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: -o-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: -ms-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: linear-gradient(to bottom,  #a9e4f7 0%,#0fb4e7 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 );
}

.tbi-info {
 border: 1px solid #2BB0D7;
 background: #a9e4f7;
 background: url(data:image/svg+xml;
base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZTRmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZmI0ZTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #a9e4f7 0%, #0fb4e7 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7));
 background: -webkit-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: -o-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: -ms-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: linear-gradient(to bottom,  #a9e4f7 0%,#0fb4e7 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 );
}

.tbi-warning {
 border: 1px solid #FFAD33;
 background: #f1e767;
 background: url(data:image/svg+xml;
base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxZTc2NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmY2JjNWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #f1e767 0%, #fcbc5d 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1e767), color-stop(100%,#fcbc5d));
 background: -webkit-linear-gradient(top,  #f1e767 0%,#fcbc5d 100%);
 background: -o-linear-gradient(top,  #f1e767 0%,#fcbc5d 100%);
 background: -ms-linear-gradient(top,  #f1e767 0%,#fcbc5d 100%);
 background: linear-gradient(to bottom,  #f1e767 0%,#fcbc5d 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#fcbc5d',GradientType=0 );
}

5. Simpan template sobat.

Nah sekarang cara menampilkan tooltips nya , cukup tambahkan kode berikut sesuai dengan spesifikasi tooltips yang sobat inginkan pada bagian HTML editor post.


Untuk tooltip umum dan standar/ General tooltip Gunakan Kode:

<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-general"> TOOLTIP HERE</span></a> 

 Untuk Critical Tooltip Gunakan Kode:

<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-critical"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhePKDjDvJMTkWhg6q-UrgZ0zLYwg1pJnOi3pzIEkXzrRPaqkVAeZJXxsr5Nr8ke1w3WaYgC-0zAEF5TkHXdk6P5sVU1VsHDjO0gheHD8jRLFO2Sf51rWWXEDgZ4dm3PazQ9P5_0pB8s-s/s48/Critical.png" alt="Error" height="48" width="48" /><em>Critical</em>TOOLTIP HERE</span></a>

Untuk Warning Tooltip Gunakan Kode:

<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-warning"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixvFEYupg7cSj3Lk1d491ekiy8LcgFIyjvVZj3bMB4uJ7_RQV2a31LbGOCdpfZ9cnz3VrQa6j_mZJCisk4O8hWDRoYkFZVJhED6ggqbNOM89s0LhTt3ovHoOoMgSpso0fe7_Sl-trEK0c/s48/Warning.png" alt="Warning" height="48" width="48" /><em>Warning</em>TOOLTIP HERE</span></a>

Untuk Help Tooltip Gunakan Kode:

<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-help"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgulFttr4j9qy8GpF6oomh5rCnKHENVM6cKimEbvvFCTppLsxGJN8etZigTwU8z-SxVcpxbGr-mfcNlXbUyS_4YTMW0cTJjrkL-JI1rTyxioSloMmY2XQ0hzdcRPopti2WjvoSwIGIl6dQ/s48/Help.png" alt="Help" height="48" width="48" /><em>Help</em>TOOLTIP HERE</span></a>

 Untuk Information Tooltip Gunakan Kode:

<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-info"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSHJMyFEXFF7VGnQ1M2GOGGLgTrmI_TVQ8TXRa-RAHF_hSC-mrtR5XyHHewMxPGKxZGeYFMMAWg4fM072fs8xC-uNtCJz1jv497rDKiGRddjo_icG1UDvaeFBRSz0G9pmI-OY3HWx8hJ4/s48/Info.png" alt="Information" height="48" width="48" /><em>Information</em>TOOLTIP HERE</span></a>

• Anda dapat mengganti tanda pager # dengan link yang akan ditampilkan padanya tooltips


• Ganti ANCHOR TEXT HEREdengan kalimat yang anda inginkan


• Ganti TOOLTIP HEREdengan kalimat informasi yang ingin anda tambahkan

Demikian Tutorial Cara Membuat Tooltip Keren Pada Blog. Semoga sobat suka dengan widget ini dan seemoga bermanfaat.


Thanks to Amatullah

Read more ...