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.

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]

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]

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)

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]