Tutorial Menambah Komentar Facebook Di Blogspot - Tutorial kali ini kita akan mencoba menambah komentar Facebook di dalam Blog kita terutama Blogspot. Lansung saja yah..
1. Copy dan Pastekan kode dibawah ini tepat dibawah <body>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
Contohnya
2. Setelah itu Copy dan Juga Pastekan kode dibawah ini tepat dibawah kode
<div class='comments' id='comments'>
<b:if cond='data:blog.pageType == "item"'>
<div style='margin-top:20px'>
<div class='fb-comments' data-num-posts='5' data-width='600' expr:data-href='data:blog.url'/>
</div>
</b:if>
Contoh nya
3. Lihat Hasilnya di blog anda masing-masing.
Silahkan di coba dan Beri komentar dibawah yah... Jika bermanfaat silahkan share ke teman-teman anda, terima kasih
Menambah Lencana Facebook
Lencana Facebook yaitu profil facebook kita di
tanamkan ke dalam blog kita, agar para pembaca mengetahui akun profile FB kita.
Caranya .
1. 1 Masuk
Ke Akun Facebook anda
2. 2 Klik
Profile FB anda, karena ini Facebook saya akan tampil seperti ini
3. 3. Klik
kotak …
yang
berada disamping Lihat Log Aktivitas, seperti yang dilihat di gambar diatas
4. 4 Setelah
di klik maka akan tampil menu Lihat Sebagai… , Pengaturan Kronologi dan Tambahkan
Lencana ke Situs Anda. Klik Tambahkan Lencana ke Situs Anda.
5. 5. Akan
muncul Lencana Profil Anda
6. 6. Jika
ingin menyunting klik Sunting lencana ini yang berada disamping kanan anda.
Jika sudah cocok, tinggal pilih untuk ditempatkan dimana Lencana ini dipasang.
Apakah di Blogger, TypePad dan Other (Lainnya).
7. 7.Klik
Button/Tombol + yang ada di samping other
.
8. Akan
muncul Script Kode HTML/JavaScriptnya:
9. Salin
kodenya.
10. Masuk
ke akun blogger anda
11. Klik
tata letak
12. Klik
Tambah Gadget
13. Klik
HTML/JavaScript
14. Kemudian
Klik Simpan.
Seperti penampakan dibawah kan? Silahkan mencoba
Tutorial Script Slide Show
Halo Sobat pengunjung sekalian. Kali ini saya ingin membagikan cara membuat gambar slide show di blog anda. Biasanya kita letakkan di atas widget posting anda.
1. Pertama anda Masuk terlebih dahulu ke akun blogger anda
2. Klik Tata letak
3. Klik tambah Gadget
4. Pilih Gadget Tambah HTML/JavaScript
5. Copy kode script di bawah ini
<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
position: relative;
width: 550px;
height: 250px;
overflow: hidden;
margin:0 auto;
}
#content-slider img {
display: block;
width: 550px;
height: 250px;
}
</style>
<div id="content-slider">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcxvKsSqGl2kCPNCfs91ePXrFfNeR1A0g21tnASR1TCplW_pWev8Iy7v99mitJxWMApUK-TDGpumf_IFKkXwcTkKMqrqWwtf8j4BDyvaXN8YWikjctGRVrIFU2llLGn6pVSnExOpM2R-s/s320/waroengeza.png" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPDJ075hpKobBE8j8nkaKo-BuabaFTDCreGuYx4p78as1ECiXGnriYtduZ52GFwAXf2oOFJYBC7qMVFrFElWBCJGM6zb6oYkAahf3zC1C-JO-Vrry2CB2gIO_giEn1rX5LMwlGbtOh1BY/s1600/template-lasantha.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMLew1Bk_OEhWwoqGp6vBlj9atYKn1wht8OHWH2FDpfJhUbv93gHt9R9CdsYRbFnwer4Kfqb_0993JuO1O1a35dmCg3HdEzDzWoYJW3-ysuJ02S8mOB-7BBso3pcgoHV0WZcOEx5BeUkU/s1600/Udah+cek+waroengeza+belum.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj55KR-UW4u3DuLVua4X907beJmB_lhzIZn_QQzbcoJWi2HEX6hkltALBEnHegvKcBjG6zX8N-96GTzOfXlkNAKi_75aN0yLWR9y-y_AgjCdmnaGmwXVKY6BFfj6w774RlH8S0yGByIfW8/s1600/delivery+ppp.jpg" />
</div>
6. Pastekan ke dalam Gadget HTML/JavaScript
7. Jangan diberi Judul, biarkan kosong, kemudian klik Simpan.
8. Sebelum disimpan ganti alamat di img scr yang di cetak tebal. Dengan alamat url media penyimpanan online anda. Bisa juga anda menguload terlebih dahulu ke server blogger ketika anda menulis artikel. Copy alamat link gambarnya, biasanya seperti ini : http://1.bp.blogspot.com/-eayDuZJIsH. Atau anda bisa menyimpan image/gambar anda di Photobucket, disana biasanya ada alamat link url gambar anda yang anda upload ke akun photobucket anda.
Terima kasih dan semoga bermanfaat... Jangan lupa di share yah...
Langkah Mudah Membuat Blog Di Blogger-
Mengapa harus blogger, ada 3 kelebihan yang bisa di dapat:
- Mudah di gunakan bagi pemula seperti saya ini, tanpa harus coding ini dan itu. hehehe
- Bisa di ganti tampilan nya, seperti yang sudah saya bahas di artikel sebelumnya
- Custom domain atau domain mapping, yaitu dengan mengubah alamat blogspot anda dengan alamat domain sendiri. Misalnya ekagoblog.blogspot.com menjadi ekagoblog.com.
Nah gimana caranya membuat blog dengan mudah
karena blogger termasuk salah satu platform layanan google, jadi anda diharuskan memiliki akun email dari gmail. Buat terlebih dahulu di gmail.com. Setelah di buat, silahkan balik kesini lagi yah.
Buat Blog
Setelah membuat akun gmail, Silahkan Login ke blogger.com
Kemudian Klik Button Blog Baru
Kemudian isi form seperti yang tertera di gambar dibawah ini, tapi untuk bagian Alamat, anda diharuskan memiliki alamat blog yang belum dimiliki orang lain, sampai tertulis
Alamat blog ini tersedia. Kemudian pilih template. Dan klik Buat blog!
Blog anda selesai dibuat, mudah bukan? untuk langkah selanjutnya anda ingin memposting untuk pertama kalinya, klik tombol/button pensilnya dan untuk melihat blognya lihat klik Lihat blog
Misalnya anda ingin memposting artikel, Tuliskan Judul Artikelnya yang ada diatas disamping tulisan Entri. Kemudian Isi Artikel anda.
Ada 4 button, yaitu
- Publikasikan, yaitu untuk mempublikasikan artikel postingan anda ke blog anda.
- Simpan, yaitu menyimpan hasil artikel anda dalam bentuk draft, yang tidak akan ditampilkan di blog anda.
- Pratinjau, yaitu untuk melihat hasil sementara sebelum di publikasikan ke blog anda. Ada baiknya sebelum mempublikasikan artikel anda, anda lihat pratinjau dahulu.
- Tutup, yaitu untuk menutup laman Entri artikel.
Untuk Setelan Entri yang ada di sebelah kanan anda bisa isikan, disana juga terdapat 6 bagian, yaitu
- Label, yaitu untuk memberikan kategori artikel anda, seperti artikel bisnis, catatan harian, tutorial, dan lainnya.
- Jadwal, yaitu untuk menyetel jadwal publikasi postingan anda, mau otomatis atau bisa di setel, misalnya anda menyetel tanggal 23 Juni 2016 jam 12.30. Maka pada waktu yang tersebut tadi artikel postingan anda akan terpublikasi sesuai jadwal.
- Link, yaitu untuk menyetel alamat web anda, mau tautan permanen otomatis atau permanen khusus. kalau saya jarang menyetelnya biarkan otomatis saja.
- Lokasi, yaitu untuk melihat lokasi anda memposting artikel, apakah di indonesia, papua, amerika, dan lainnya. Saya juga tidak pernah mengisinya. hehehe
- Deskripsi Penelusuran, yaitu Deskripsi singkat dari isi keseluruhan artikel anda, agar bisa terindeks oleh mesin penelusur, seperti google, yahoo, dan lainnya.
- Pilihan, yaitu untuk pengaturan komentar pembaca, tautan balik, mode tulis dan baris baru.
Selesai sudah pembahasan kali ini tentang tutorial blog, selamat bagi anda yang baru memiliki blog lewat bimbingan artikel sederhana ini. Semoga bermanfaat dan jangan lupa di share. Terima kasih blogger...
Cara Mengganti Template-
Tutorial blog kali ini saya akan membahas tentang
Cara Mengganti Template. Sebenarnya mudah sekali bagaimana mengganti template, bagi yang sudah lama berkecimpung di dunia blogger pasti sudah mengetahuinya. Template itu tampilan blog kita, seperti yang telah anda lihat ini diblog saya ini. Oh iya sebelum anda ingin mengganti templatenya, Anda terlebih dahulu mendownloadnya
Disini, atau bisa anda cari di google, biasanya filenya bertipe .XML. Banyak tersebar di internet templatenya, cari yang menarik menurut anda. Yah langsung saja,
1. Login akun
blogger anda, jika anda sudah buat blog sebelumnya.
2. Kemudian klik Template
3. Klik Cadangkan/Pulihkan
4. Sebelum melanjutkan ada baiknya anda memback up template anda sebelumnya, Button Unduh Template Lengkap untuk mengunduh backup template anda sebelumnya. Button Choose File untuk mengunggah Template baru yang anda akan ganti.
5. Pilih file template yang telah anda download di internet atau di laman download blog saya. Setelah itu eksak terlebih dahulu .zip filenya agar menjadi file .xml. Klik Open.
6. Kemudian klik button Unggah
7. Tunggu sampai proses selesai dan lihatlah hasilnya. Edit hal yang perlu di edit, selamat mencoba dan semoga berhasil
jangan lupa di share yah...
Cara Membuat Scroll Box-
Hallo Sobat blogger, kali ini saya akan membahas cara membuat Scroll Box di blogger. Seperti pada gambar contoh diatas anda pasti akan mengerti apa itu scroll box. Scroll box fungsinya untuk menghemat space halaman jika berisi artikel yang panjang.
Langsung saja yah...
1. Copy kode dibawah ini
<div style="border: 1px solid #000000; height: 100px; overflow: auto; padding: 5px; width: auto;">
Artikel yang ada didalam scroll box
</div>
2. Masuk ke akun blogger anda dan tulis entri baru
3. Klik Box HTML disamping Box Compose dan pastekan disana...
4. Ganti Height nya terserah kebutuhan anda
Selesai sudah Tutorial Blog kali ini tentang scroll box, semoga bermanfaat
Jangan lupa dishare klik button share dibawah ini
Tutorial Membuat Menu Serta Sub Menu-
Halo pembaca sekalian, kali ini saya ingin membahas cara membuat Menu Serta Sub Menu.
Langsung aja yah....
1. Login terlebih dahulu ke akun Blogger anda, kemudian klik Template
2. Klik Button Edit HTML
3. Masuk ke dalam kode script HTML nya
4. Copy kode dibawah ini
[ <div class='main-outer'> ] atau
[ <div id='main-wrapper'> ] atau
[ <div id='main'> ] atau
[<div class='navbar-wrapper'>]
5. Cari Kode dibawah ini dengan menekan
CTRL + F:
Akan muncul kotak search disebelah kanan atas
6. Pastekan saja kode tadi ke kota seacrh dan akan ketemu dengan kode html yang ditandai warna kuning. Dan pasang kode hmtl nya tepat diatasnya.
7. Copy kode script dibawah ini
<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li { height:30px; border-top:1px solid #fff; }
#secnav li ul li a { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu2 a</a></li>
<li><a href='#'>Sub Menu2 b</a></li>
</ul>
</li>
<li><a href='#'>Menu3</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu3a</a></li>
<li><a href='#'>Sub Menu3b </a></li>
</ul>
</li>
<li><a href='#'>Menu4</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu4a</a></li>
<li><a href='#'>Sub Menu4b </a></li>
</ul>
</li>
<li><a href='#'>Menu5</a></li>
</ul>
</div>
PENJELASAN :
- Ganti tanda # (warna merah) dengan link/url yang anda inginkan. Bisa jadi link posting atau label (kategori) yang ada pada blog anda.
- Ganti Tulisan warna biru dengan menu dan sub menu yang anda inginkan.
- Setiap sub menu bisa ditambah atau dikurangkan sesuai keinginan.
8. Setelah itu klik Pratinjau terlebih dahulu untuk memastikan scrift sudah benar . Lalu simpanlah/save. Dan tutup edit HTML tersebut.
Selamat Mencoba. Terima kasih jangan lupa di share cuma 5 detik aja... hehehe