Showing posts with label Tutorial Blog. Show all posts
Showing posts with label Tutorial Blog. Show all posts

Sunday, August 10, 2014

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

Memasang / Mengganti Gambar Header Pada Blog Dengan Cepat

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)

bagaimana cara Memasang / Mengganti Gambar Header Pada Blog Dengan Cepat

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

bagaimana cara Memasang / Mengganti Gambar Header Pada Blog Dengan Cepat

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.

bagaimana cara Memasang / Mengganti Gambar Header Pada Blog Dengan Cepat

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]

Friday, July 25, 2014

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)


Cara Mengganti Logo Blog [Favicon] Dengan Gambar Sendiri - Bos Tutorial


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.
Cara Mengganti Logo Blog [Favicon] Dengan Gambar Sendiri - Bos Tutorial

3. Pilihlah Widget / Gadget FAVICON (Lihat gambar di bawah ini)
Cara Mengganti Logo Blog [Favicon] Dengan Gambar Sendiri - Bos Tutorial

4. Klik Telusuri lalu Masukkan Gambar atau Logo Blog Yang Anda inginkan.
Cara Mengganti Logo Blog [Favicon] Dengan Gambar Sendiri - Bos Tutorial

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)

Monday, May 26, 2014

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

Inilah Cara Memasang Kolom Komentar Facebook dan Blog Model Tab
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]

Tuesday, March 25, 2014

Cara Memasang Kolom Iklan Kiri Kanan Blog Pakai Tombol Close

Cara Memasang Kolom Iklan Kiri Kanan Blog Pakai Tombol Close - Kita masih membicarakan tentang Bagaimana Menempatkan Iklan di Dalam Blog. Silahkan anda baca lagi apa maksud dan tujuan dari penempatan iklan di dalam blog yang baik dan benar, KLIK DISINI. Apabila anda sudah paham benar, maka mari kita lanjutkan kembali mengenai topik ini.

Cara Memasang Kolom Iklan Kiri Kanan Blog Pakai Tombol Close

Cara Memasang Kolom Iklan Kiri Kanan Blog Pakai Tombol Close
Tentunya anda sudah tahu meletakkan iklan dalam blog. Ada yang menempatkan iklan di widget saja, ada juga yang menempatkan iklan di dalam postingan, baik di atas postingan maupun di bawah postingan (artikel). Semua tergantung selera dan tujuan isi dari konten blog tersebut.

Ada 2 cara penempatan iklan dalam blog.
  • Pertama adalah cara reguler dan cara khusus. Cara reguler disini adalah menempatkan iklan di lokasi yang sudah tersedia, seperti iklan di dalam widget atau footer / header. Iklan tidak selamanya dilihat oleh pengunjung blog, apabila kursor atau mouse diarahkan ke atas atau ke bawah.
  • Cara kedua adalah Cara Khusus. Cara khusus disini dengan menggunakan strategi atau trik tertentu, dimana si pengelola membuat iklan selalu dilihat oleh pengunjung. Biasa cara ini disebut Iklan Fload atau melayang. Postingan kali ini membicarakan pemasangan iklan secara fload. Kelemahan dari cara ini adalah ketika si pemasang iklan atau situs penyedia iklan tidak menyukai iklannya ditempatkan secara fload. Mungkin dianggap sebagai pemaksaan untuk meng-klik. Ssalah satu contoh penyedia iklan KLIKSAYA.COM terang-terangan melarang memasang iklan secara fload.

Apakah Baik Memasang Iklan secara Fload?
Semuanya tergantung anda dan kesepakatan anda dengan penyedia iklan. So... pintar-pintar sajalah.

Cara Memasang Kolom Iklan Kiri Kanan Blog Pakai Tombol Close
Adapun langkahnya sebagai berikut:
1. Bukalah Akun Blog Anda sendiri.
2. Pada Dasbor blog anda pilih Elemen Tata Letak atau LayOut
3. Pilihlah Add New Widget atau Tambah Gadget Baru
4. Selanjutnya pilih Javascript
5. Salin atau Copy lah Kode Script berikut di bawah ini dan Paste-kan pada kolom widget yang baru saja anda buat.

<script type='text/javascript'>

$(document).ready(function() {

$('img#closed').click(function(){

$('#btm_banner').hide(90);

});

});

</script>

<script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};

</script><script type="text/javascript">

if (window.jstiming) window.jstiming.load.tick('headEnd');

</script>

<!--start: floating ads-->

<div id="teaser2" style="width:autopx; height:0; text-align:left; display:scroll;position:fixed; top:0px;left:0px;">

<div><a id="close-teaser" onclick="document.getElementById('teaser2').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim5x16mxEO8RJdZfbf7LcH2i0xvNUqkGI3fgjYvbdqSET17Uzu-YCwYzu_cQPNmjE496SfeylMVocAhmutrf6eBbfzoLyHWownGu2g-T9gott85rDnQK_TaAPBoholiR8tCW4yhyphenhypheneKFc5F/s1600/close3.png' alt='close' title='close button'/></center></a></div>

<!--Mulai disini-->

<a href="http://iklan-bos.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZD39kPeuFdn4JqzcXR85pZS-9z9Zt9D1DDP3wBRVuz2e9N1kYERhMqIXRCV96ci8-GWMtdKgZgE2ajOeeuKFyYLMS5SJ21wBmnF_vbq_McXOmSi0lYbUBFJONVG-uY4NQjbHVwVjZNGOg/s1600/banner-space-iklan-160x600.JPG" border="0" alt="iklan 120 x 600 kanan" title="Pasang Iklan Murah" /></a>

<!--Akhir disini-->

</div>

<!--end: floating ads-->

<!--start: floating ads-->

<div id="teaser3" style="width:autopx; height:600; text-align:right; display:scroll;position:fixed; top:0px;right:0px;">

<div><a id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim5x16mxEO8RJdZfbf7LcH2i0xvNUqkGI3fgjYvbdqSET17Uzu-YCwYzu_cQPNmjE496SfeylMVocAhmutrf6eBbfzoLyHWownGu2g-T9gott85rDnQK_TaAPBoholiR8tCW4yhyphenhypheneKFc5F/s1600/close3.png' alt='close' title='close button'/></center></a></div>

<!--Mulai disini-->

<a href="http://iklan-bos.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZD39kPeuFdn4JqzcXR85pZS-9z9Zt9D1DDP3wBRVuz2e9N1kYERhMqIXRCV96ci8-GWMtdKgZgE2ajOeeuKFyYLMS5SJ21wBmnF_vbq_McXOmSi0lYbUBFJONVG-uY4NQjbHVwVjZNGOg/s1600/banner-space-iklan-160x600.JPG" border="0" alt="iklan 120 x 600 kiri" title="Pasang Iklan Murah" /></a>

<!--Akhir disini-->

</div>

<!--end: floating ads-->

6. Simpan Widget Baru Blog anda.
7. Selesai dan lihat hasilnya.

Catatan:
Gantilah Tulisan yang berwarna Biru tersebut dengan Kode / Script Iklan yang anda inginkan.

Bagaimana, gampang bukan? Demikianlah bagaimana Cara Memasang Kolom Iklan Kiri Kanan Blog Pakai Tombol Close. Seamat mencoba dan salam sukses. [Bos Tutorial]

Monday, March 24, 2014

Cara Memasang Iklan Fload Di Bawah Blog Dengan Tombol Close

Cara Memasang Iklan Fload Di Bawah Blog Dengan Tombol Close - Kembali lagi Bos Tutorial share sesuatu mengenai Penempatan Iklan di dalam blog. Sebelumnya, kawan-kawan sudah pernah membaca artikel yang mirip dengan postingan ini. Seperti "Cara Memasang Iklan Berdekatan Secara Otomatis di Dalam Postingan" dan "Cara Memasang Iklan Secara Otomatis Di Bawah Postingan". Semuanya dilakukan secara otomatis. Lebih lanjut mari kita simak di bawah ini.

Cara Memasang Iklan Fload Di Bawah Blog Dengan Tombol Close

Cara Memasang Iklan Fload Di Bawah Blog Dengan Tombol Close
1. Bukalah Akun Blogger anda.
2. Halaman Dasbor Blog anda pilih Elemen TATA LETAK atau LayOut.
3. Pilihlah Add New Widget atau Tambah Gadget Baru.
4. Pilih lah Tambah Javascript
5. Copy atau salin script di bawah ini dan paste-kan pada Gagdet Baru yang anda inginkan tadi.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'>
</script><br />
<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<style type='text/css'>
div#btm_banner {
bottom: 0;
position: fixed;
width: 100%;
opacity: 0.9;
left: 0;
}
div#btm_banner img{
border:0;
cursor:pointer;
}
</style>
<div style='height: 0px;'></div>
<div align='center' id='btm_banner' style='height: 90px; z-index: 9999;'>
<div style='text-align: right; width: 728px; height: 6px;'>
<img id='closed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb87UXCUas2_wHrzGAM-HqkBS_FzxS5Ps25_PgSDeYDWaiEhZH5jmpyk9Ps-iMQOmHvnc1xw6qX1pI1mV3CABAQTyPl4DzfFs3F3QEnBzN_TyfN8eDxlXP2uGxAfs2jhR0ee3Mxpj0ZRXH/s1600/close-icon.png'/></div>
<div style='clear: both;'></div>
<p>
<p>
<center>
PASANG KODE / SCRIPT IKLAN ANDA DISINI
</center>
</p>
</p>
</div>

6. Simpan Gadget Baru tersebut.
7. Selesai dan lihat hasilnya.

Catatan:
Gantilah tulisan PASANG KODE / SCRIPT IKLAN ANDA DISINI dengan Kode Script Iklan yang anda inginkan.

Bagaimana, gampang bukan. Demikianlah tulisan singkat mengenai Cara Memasang Iklan Fload Di Bawah Blog Dengan Tombol Close. Semoga bermanfaat dan Selamat Mencoba. Salam sukses dan salam bogger. [Bos Tutorial]

Monday, February 24, 2014

Inilah Cara Memasang Iklan Secara Otomatis Di Bawah Postingan Ala Bos Tutorial

Inilah Cara Memasang Iklan Secara Otomatis Di Bawah Postingan Ala Bos Tutorial - Bila anda membaca postingan ini, maka anda akan melihat Iklan yang terpasang tepat di bawah postingan. Caranya tidak susah, hanya diperlukan memodifikasi template html blog kita sendiri.

Sebenarnya semua trik dan cara penempatan iklan hampir sama saja. Tinggal kita memanipulasinya dengan baik. Langsung saja yah biar cepat, jadi gak lama-lama, soalnya kalao lama nanti malah kelamaan. Benarkan... Coba anda pikirkan kalao kerja itu dilakukan tidak cepat, eh.. malah bisa kapan selesainya... (lah ini malah makin lama... heheeh biar ngakak MasBro).

Inilah Cara Memasang Iklan Secara Otomatis Di Bawah Postingan Ala Bos Tutorial

Inilah Cara Memasang Iklan Secara Otomatis Di Bawah Postingan Ala Bos Tutorial
1. Bukalah akun blog anda.
2. Masuk Elemen Template lalu Pilih Edit HTML
3. Carilah kode <data:post.body/> (Gunakan CTRL + F untuk memudahkan pencarian)
4. Apabila sudah ketemu kode <data:post.body/> , maka letekkanlah Kode Iklan yang anda punya tepat di bawah kode <data:post.body/>
5. Simpan. Selesai dan lihat hasilnya.

Catatan:
  • Kode <data:post.body/> akan anda temui lebih dari satu, pilih salah satu saja (coba-coba letakkan satu-satu, bila iklan muncul artinya anda menempatkkannya sudah tepat.
  • Ukuran iklan harap disesuaikan dengan lebar dari Laman Postingan blog anda (disarankan: di bawah ukuran 600px)
  • Kode Iklan harus sudah di PARSE (KLIK DISINI untuk memparse Kode Iklan Anda).
  • Apabila anda ingin meletakkan di atas postingan, lakukan kebalikannya yah...

Bagaimana, gampang bukang. Inilah Cara Memasang Iklan Secara Otomatis Di Bawah Postingan Ala Bos Tutorial. Silahkan lihat contohnya di bawah postingan ini. Selamat Mencoba. Salam Blogger, salam sukses. [Bos Tutorial]