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

Menampilkan Widget Tertentu Di Halaman Tertentu

Menampilkan Widget Tertentu Di Halaman Tertentu - Ketika kita sedang menuju blog seseorang, terlihat tampilan widget blog tersebut kadang ganti-ganti. Misalnya, di halaman depan Wigdet A, di halalaman lainnya Widget A tidak muncul. Ada apa gerangan....

Sebenarnya, ada beberapa cara yang dilakukan oleh blogger untuk melakukan hal tersebut. Maksudnya Menampilkan Widget Tertentu Di Halaman Tertentu. Mau tahu?

Beginilah caranya secara umum (tips ini tujuannya adalah mempercantik tampilan blog).

1. Menampilkan widget hanya di halaman depan saja (homepage)

<b:if cond='data:blog.url == data:blog.homepageUrl'>
......................................................
</b:if>

2. Menampilkan di semua halaman kecuali homepage.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
......................................................
</b:if>

3. Menampilkan widget hanya di halaman Archive saja.

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
......................................................
</b:if>

4. Menampilkan widget di semua halaman kecuali halaman archive.

<b:if cond='data:blog.pageType != &quot;archive&quot;'>
......................................................
</b:if>

5. Menampilkan widget hanya di halaman posting.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
......................................................
</b:if>

6. Menampilkan widget di semua halaman, kecuali halaman posting.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
......................................................
</b:if>

7. Menampilkan widget hanya di postingan tertentu saja.

<b:if cond='data:blog.pageType == &quot;alamat-postingan&quot;'>
......................................................
</b:if>

8. Menampilkan widget selain di postingan tertentu.

<b:if cond='data:blog.pageType != &quot;alamat-postingan&quot;'>
......................................................
</b:if>

9. Menampilkan widget hanya di halaman staticpages.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
......................................................
</b:if>

10. Menampilkan widget di semua halaman, kecuali halaman staticpages.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
......................................................
</b:if>

Catatan : Tanda Titik - titik di atas adalah kode widget yang harus di tempatkan

Sebagai Contoh perhatikan di bawah ini.
Coba anda menuju Dunia Sarah. Di halaman depan Widget Fan Facebook tidak muncul. Lalu di halaman kedua ketika klik sebuah artikel, maka Widget Fan Facebook muncul. Untuk melakukan hal itu silahkan coba ikuti langkah berikut.

Menampilkan Widget Tertentu Di Halaman Tertentu
1. Tentunya anda harus buka akun blog anda sendiri.
2. Masuklah ke Elemen Template. Lalu klik Edit HTML
3. Carilah widget yang anda sembunyikan (sebelumnya anda sudah memasang widget di dalam blog anda).
4. Misalnya Widget Fan Facebook. Silahkan cari tulisan "Fan Facebook" (gunakan Ctrl + F untuk mencari secara cepat)
5. Setelah ketemu, maka akan muncul kode persis seperti dibawah ini.

<b:widget id='HTML4' locked='false' title='Fan Facebook' type='HTML'> <b:includable id='main'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/> </b:includable> </b:widget>

6. Selanjutnya tambahkan kode

<b:if cond='data:blog.pageType == &quot;item&quot;'>

sebelum kode

<!-- only display title if it's non-empty -->

7. Setelah ditambahkan lalu masukkan kode </b:if> sebelum kode

</b:includable>
</b:widget>

8. Maka hasilnya akan persis seperti di bawah ini.

<b:widget id='HTML4' locked='false' title='Fan Facebook' type='HTML'> <b:includable id='main'><b:if cond='data:blog.pageType == &quot;item&quot;'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/></b:if> </b:includable> </b:widget>

9. Selesai. Simpan Template blog anda.

Catatan : Huruf yang berwarna biru adalah Kode yang ditambahkan. Ingat satuhal, penempatannya jangan salah yah. Harus pas. Kalao gak pas, maka eror. Untuk mengantisipasinya, sebaiknya sebelum memulai langkahlangkah di atas, Simpan Template Blog anda terlebih dahulu.

Okay sudah yah... Bos kira sudah cukup dulu mengenai Menampilkan Widget Tertentu Di Halaman Tertentu. Semoga bisa dipergunakan sebaik mungkin. Salam blogger semoga bermanfaat dan selamat mencoba.

Cara Membuat Widget Recent Post Dengan Gambar Seperti Bos Tutorial

BOS TUTORIAL - Cara Membuat Widget Recent Post Dengan Gambar Seperti Bos Tutorial. Judulnya panjang yah. Tidak apa-apa yah. Biar lebih paham saja. Dan langsung melihat contohnya.

Membuat Widget Recent Post Dengan Gambar Seperti Bos Tutorial ini sebenarnya bertujuan untuk mempercantik blog saja. Biar terlihat rapi. Kalau kawan-kawan suka, boleh deh mencobanya.

Inilah Cara Membuat Widget Recent Post Dengan Gambar Seperti Bos Tutorial
1. Buka akun blogger kawan sendiri
2. Masuk Elemen Tata Letak
3. Pilih Add Widget atau Tambah Gadget
4. Apabila kotak baru muncul lalu pilih HTML/Javascript
5. Copy atau salin kode script di bawah ini

<div id='bp_recent'></div>
<script style='text/javascript' src='http://yourjavascript.com/02415211738/artikel-terkait.js'></script>
<script style='text/javascript'>
var numberOfPosts = 20;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 55;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://bos-tutorial.blogspot.com/feeds/posts/summary?max-results=20&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

6. Simpan Widget / Gadget yang baru anda buat.
7. Lihat hasilnya.

Catatan :

• Tulisan http://bos-tutorial.blogspot.com silahkan anda ganti dengan alamat URL / Blog anda.
• Silahkan anda atur sedemikian rupa, mengenai jumlah artikel yang akan dipajang dalam recent post blog anda, sesuai keinginan anda. Blog ini sementara jumlah artikel yang dipajang dalam recent post sebanyak 20

Sebagai dari hasl Cara Membuat Widget Recent Post Dengan Gambar Seperti Bos Tutorial, lihat saja Recen Post pada blog ini. Karena menggunakan widget di atas. Selamat mencoba, salam sukses. Salam.

Memasang Widget Google Plus di Blog

Memasang Widget Google Plus di Blog - Memasang Widget Google Plus di Blog. Google Plus atau Google + atau G+ atau + Me adalah situs jejaring sosial keluaran Google. Sudah anda memasang Widget Google + di blog anda? Kali ini bos tutorial akan mencoba berbagi tentang bagaimana Memasang Widget Google Plus di Blog.

Memasang Widget Google Plus di Blog sangatlah mudah. Karena G+ merupakan milik Google.com, maka kita tinggal menggunakan fasilitas elemen widget yang disediakan oleh blogger.com. Yang penting anda memiliki akun Google +. Tutor di bawah ini diberikan kepada kawan-kawan yang sudah memiliki akun Google +. Oh iya, nanti Bos Tutotorial di jadikan teman (masuk lingkaran) yah sama kawan.

Memasang Widget Google Plus di Blog sebagai berikut:
1. Seperti biasa, bukalah akun blog anda kawan.
2. Pada Dasbor blog kawan, pilihlah Tata Letak (klik opsi lain tepatnya sebelah kiri lihat blog)
3. Pilih Tambah Gadget atau Add Widget (tampilannya seperti di bawah ini)

4. Selanjutnya akan muncul tampilan seperti di bawah ini

5. Pilihlah Lencana Google + biasanya letaknya no 2 tuh setelah Tombol +1, jadi tidak perlu menggeser mouse.

6. Setelah klik gadget Lencana Google + (biasa kalau belum ada gadget di blog anda, maka disebelah kanan pasti ada tanda + ) maka akan muncul gambar seperti di bawah ini.

7. Selanjutnya, masukkanlah ID Profil Google + anda di kolom yang disediakan.misalnya 1152299094120349xxxxx (tanda xxxxx sengaja disembunyikan hehehehe) biasanya jumlah angkanya 21. Tunggu sejenak. Akan muncul gambar dibawah ini. (lihat gambar di bawah ini).

6. Klik simpan apabila sudah ada tampilan pada pratinjau.
7. Simpan tamplate anda kawan (simpan setelan) lalu lihat hasilnya. Beres.

Memasang Widget Google Plus di Blog
Anda tidak tahu bagaimana melihat ID Profile Google + ? Ikuti langkah-langkah di bawah ini:

Cara Melihat ID Profile pada Google +
1. Masuklah ke Akun Google + anda kawan.
2. Kliklah Profil Google + anda.
3. Lihat Alamat Link pada Tab (lihat gambar dibawah ini)

4. Lihat panah merah pada gambar, ada angkanya. Itulah ID Profile Google + anda kawan.
5. Copylah angka itu (jumlahnya saat ini sih 21, tidak tahu kedepannya brapa, tanda xxxxx sengaja AB buat hehehehe) dan masukkanlah angka tadi ke kotak yang telah disediakan saat kawan membuat widget Google + di blog.
6. Cuma itu saja. Beres

Demikian tutorial bagiamana Memasang Widget Google Plus di Blog. Mudah bukan? Selamat mencoba. By the way,  jangan lupa Bos Tutorial di tambahkan yah ke lingkaran Google + kawan-kawan yah. Selamat mencoba, semoga bermanfaat. Salam blogger dan salam sukses. [Bos Tutorial]

Referensi : Lapo Kita Blog

Memasang Widget Feed Blog di Blogspot

Memasang Widget Feed Blog di Blogspot - Masih seputar Memasang Widget pada blog. Memasang Widget Feed Blog di Blogspot adalah salah satu cara mempercantik blog dan memberikan informasi link yang lain kepada pengunjung blog. Feed blog ini bisa kita buat berdasarkan Artikel Terbaru pada blog kita sendiri, atau Artikel Terbaru dari blog / website di luar blog kita. Feed blog juga bisa ditampilkan berdasarkan komentar terbaru. Semua tergantung anda yang empunya blog. Oleh karena itu, bos tutorial akan mencoba berbagi tentang Memasang Widget Feed Blog di Blogspot.

Memasang Widget Feed Blog di Blogspot
Adapun langkah-langkah Memasang Widget Feed Blog di Blogspot adalah:
1. Seperti biasa, bukalah akun blog anda kawan.
2. Pada Dasbor blog kawan, pilihlah Tata Letak (klik opsi lain tepatnya sebelah kiri lihat blog)
3. Pilih Tambah Gadget atau Add Widget (tampilannya seperti di bawah ini)

4. Selanjutnya akan muncul tampilan seperti di bawah ini

5. Gunakan Mouse untuk mencari Gadget Feed dengan menarik scroll ke bawah. (lihat gambar di bawah ini).

6. Setelah anda temukan gadget tersebut, klik lah gadget Feed (biasa kalau belum ada gadget di blog anda, maka disebelah kanan pasti ada tanda + )

7. Selanjutnya, isilah alamat/URL  blog anda atau blog lain ke dalam kotak yang disediakan pada Feed di blog anda. (lihat gambar di bawah ini).

misalnya isi URL Feed : http://bos-tutorial.blogspot.com/ atau bisa anda isi langsung : http://bos-tutorial.blogspot.com/feeds/posts/default lalu klik lanjutkan

8. Setelah anda isi URL Feed, dan anda sudah klik Lanjutkan maka akan muncul tampilan seperti di bawah ini.

9. Silahkan anda ganti Judul, misalnya Artikel Terbaru lalu Simpanlah Gadget tersebut.
10. Simpan template anda. Lalu lihat hasilnya. (bila sukses hasilnya seperti gambar di bawah ini)

Catatan:
URL Feed tidak selamanya nama blog kita. Anda bisa ganti dengan website atau blog anda yang lain (lihat tampilan gambar yang terakhir. 

Demikianlah tutorial Memasang Widget Feed Blog di Blogspot. Selamat mencoba. Salam Sukses. Bila belum jelas, silahkan tulis pesan anda di kolom komentar. [Bos Tutorial]