Canda Blogs: Widget

Tampilkan postingan dengan label Widget. Tampilkan semua postingan

Sabtu, 20 April 2013

Cara Membuat Facebook Recommendations Bar di Blog

Cara Membuat Facebook Recommendations Bar di Blog - Kali ini Blog Tutorial Blogz akan share tentang "Cara Membuat Facebook Recommendations Bar di Blog". Widget ini sama seperti widget Recommendations Posts, bedanya adalah ini merupakan widget dari Facebook. Widget ini sejenis dengan widget Related Posts atau 'Artikel Terkait' yang menampilkan Artikel/postingan terkait dengan artikel yang sedang dibaca. Widget ini tampil melayang (Float) di sisi kanan blog. Untuk lebih jelasnya, silahkan liat gambar berikut ini.

Berikut Cara Membuat Facebook Recommendations Bar di Blog :

1. Login ke Akun Blogger Anda.
2. Silahkan masuk ke Halaman Template.
3. Lalu pilih 'Edit HTML'.
4. Selanjutnya, silahkan cari kode : <html
5. Letakkan kode berikut tepat setelah kode tadi.

xmlns:fb='http://ogp.me/ns/fb#'

Contoh : <html xmlns:fb='http://ogp.me/ns/fb#'

6. Kemudian, cari kode <body>.
7. Letakkan kode berikut tepat dibawah kode tadi.

<div id='fb-root'/>
<script>
//Facebook Recommendation bar
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=226266264125353";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.pageType != "static_page"'><div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://tutorial-blogz.blogspot.com' trigger='50%'/></div>
</b:if></b:if>

Keterangan :
- (226266264125353) = Silahkan Ganti dengan App ID Anda.
- (3) = Jumlah tampilan Artikel/Post, silahkan ganti sesuai keinginan.
- (right) = Posisi Widget. Jika ingin widget berada di sisi kiri blog, ganti dengan 'left'.
- (http://tutorial-blogz.blogspot.com) - Silahkan ganti dengan Link blog Anda.

Bila belum mempunyai App ID Facebook, Anda bisa daftarkan disini : https://developers.facebook.com/apps/

Setelah selesai daftar, untuk mengetahui App ID silahkan lihat pada menu Pengaturan (Setting).

8. Jika sudah selesai, Klik Save Template.

Sabtu, 16 Maret 2013

Cara Membuat Forum Tanya-Jawab di Blog

Cara Membuat Forum Tanya-Jawab di Blog - Kali ini saya akan membagikan Cara Membuat Forum Tanya-Jawab di Blog. Forum Tanya-Jawab ini sangat berguna untuk blog kita, karena apabila pengunjung belum mengerti tentang yang dibaca mereka bisa menanyakannya kepada Anda melalui Forum Tanya-Jawab ini, Dan Anda sebagai Admin blog pun dapat menjawab pertanyaan yang diberikan oleh pengunjung blog Anda. Forum Tanya-Jawab ini dibuat oleh Situs FormSpring.Me, jadi bila ingin melakukan Tanya-Jawab harus memiliki akun FormSpring terlebih dahulu. Silahkan lihat contoh gambar dibawah ini.

Cara Membuat Forum Tanya-Jawab di Blog :

1. Silahkan kunjungi situs www.formspring.me

2. Kemudian isi data pada kotak pendaftaran (sign up), bisa juga melalui facebook.

3. Klik Get started

4. Pada Step 1, Klik Skip > Step 2, Klik Skip > dan seterusnya.

5. Silahkan Upload foto untuk profile Anda melalui Komputer Anda, bisa melalui facebook atau webcam.

6. Selanjutnya, klik Account settings

7. Klik Widgets

8. Silahkan copy kodenya.

9. Untuk langkah terakhir silahkan masukkan kode yang telah Anda copy ke Blog Anda.

Login Blogger.
Dashboard Blog.
Layout >> Add a Gadget.
HTML/JavaScript.
Paste-kan kode tadi didalamnya.
Save.

10. Selesai.

Sebagai contohnya Anda bisa lihat pada blog ini >> demo-previews.blogspot.com

Jumat, 21 Desember 2012

Cara Membuat Komentar Admin Berbeda dengan Komentar Pengunjung

Cara Membuat Komentar Admin Berbeda dengan Komentar Pengunjung - Salah satu cara untuk mempercantik tampilan Kotak Komentar pada Blog kita yaitu dengan Membuat Komentar Admin Berbeda dengan Komentar Pengunjung. Maksud dari Komentar Admin Berbeda dengan Komentar Pengunjung adalah membuat warna pada komentar admin berbeda, hal ini untuk mempermudah pengunjung untuk mengetahui Admin di suatu blog.

Berikut Cara Membuat Komentar Admin Berbeda dengan Komentar Pengunjung :

1. Silahkan Anda masuk ke Akun Blogger Anda.
2. Masuk ke Dashboard Blog.
3. Pergi ke Template > Edit HTML.
4. Centang "Expand Template Widget"
5. Cari kode </body>
6. Lalu copy kode dibawah ini diatas kode </body>

<script src='http://code.jquery.com/jquery-latest.js'/>

<script>
$(function() {
function highlight(){
$('.user.blog-author,.ssyby').closest('.comment-block')
.css('border', '1px solid #e1e1e1')
.css('background','#f1f1f1 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBKDw34f1SrO5UagImmG6YfoacL19XW1gytkpQhoVYQQ4lNAtI8EPr5pahmiRAs8VNnGAyTB4VIpWkUt5xQhPErMUyhWhJTaQoTdV5nS3cD5gOmE2H0NEx48YcCleDme3h8SOHt1gDKWQ/s1600/admin2.png") no-repeat bottom right')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>

7. Terakhir klik Save Template.

Selamat Mencoba !

Kamis, 13 Desember 2012

Cara Membuat Recent Post Berdasarkan Kategori

Cara Membuat Recent Post Berdasarkan Kategori - Pada Tutorial Blogger kali ini, saya akan membahas tentang Cara Membuat Recent Post Berdasarkan Kategori. Widget ini berfungsi untuk menampilkan Artikel Terbaru (Recent Post) Sesuai/Berdasarkan Kategori (Label). Untuk itu, silahkan simak tutorial Cara Membuat Recent Post Berdasarkan Kategori.

Cara Membuat Recent Post Berdasarkan Kategori :

1. Login ke Akun Blogger terlebih dahulu.
2. Lalu pergi ke Layout.
3. Klik Add a Gadget.
4. Lalu pilih yang Feed.

5. Lalu masukkan URL di bawah ini di dalamnya

http://tutorial-blogz.blogspot.com/feeds/posts/default/-/Template

Keterangan :
- Ganti URL yang berwarna merah dengan URL blog kamu.
- Dan yang berwarna biru ganti dengan Nama Kategori (Label) blog kamu.
- Untuk Label yang memiliki dua kata, seperti Tutorial Blogger. Anda harus memberikan %20 di antara kata tersebut, misalnya menjadi : Tutorial%20Blogger.

6. Klik Continue.

7. Tentukan Judul dan Tampilannya, kemudian klik Save.

8. Selesai.

Demikian Cara Membuat Recent Post Berdasarkan Kategori,

Semoga bermanfaat bagi semua!

Selasa, 13 November 2012

Cara Menerapkan Snap Shots Pada Blogger

Cara Menerapkan Snap Shots Pada Blogger - Kali ini Tutorial Blogz akan membahas Cara Menerapkan Snap Shots Pada Blogger. Snap Shots dapat digunakan untuk menampilkan isi link sebelum kita meng-klik link tersebut. Jadi, bila kita arahkan kursor ke link, maka akan muncul animasi berupa jendela yang didalamnya berisi tampilan link yang akan dituju.

Cara Menerapkan Snap Shots Pada Blogger :

1. Kunjungi Situs www.Snap.com
2. Klik Get Starterd >>

3. Klik Continue >>

4. Silahkan masukkan informasi data yang diminta seperti email, alamat blog, password dan centang "I agree to Terms & Conditions Above". Selanjutnya klik Continue >>

5. Kemudian, klik Install Now.

6. Jika muncul kotak dialog peringatan, klik Continue.

7. Selanjutnya, akan muncul halaman baru pada browser anda, klik Add Widget.

8. Selesai.

Sebagai contohnya, jika anda arahkan kursor ke link di blog anda, maka akan tampil jendela berupa animasi yang berisikan tampilan link yang akan dituju, seperti gambar dibawah ini.

Atau anda juga bisa melihatnya disini >> http://demo-previews.blogspot.com

Semoga bermanfaat..

Sabtu, 03 November 2012

Cara Membuat Anti Klik Kanan Pada Blog

Cara Membuat Anti Klik Kanan Pada Blog - Sekarang saya akan share Cara Membuat Anti Klik Kanan Pada Blog. Pasti kalau artikel anda di copy paste (copas) oleh orang lain anda akan merasa kesal, betul kan? saya juga merasa begitu.. kita sudah capek - capek nulis, ehh mereka malah sembarangan copas aja, yaahhh mau di apain lagi.. biarkan saja lah. Nah, maka dari itu sekarang saya akan berbagi ke teman - teman Cara Membuat Anti Klik Kanan Pada Blog.

DEMO

Berikut Cara Membuat Anti Klik Kanan Pada Blog :

1. Login ke Akun Blogger
2. Pilih Layout => Add a Gadget => HTML/JavaScript
3. Copy kode dibawah ini tepat didalamnya.

<script>

var message="Hayooo!! mau ngapain?? mau COPAS ya??? eitth.. ora isoooo!!!";
///////////////////////////////////
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>

4. Save.

Selesai!!

Semoga bermanfaat!!

Cara Memasang Lagu Langsung Nyala Otomatis (AutoPlay)

Cara Memasang Lagu Langsung Nyala Otomatis (AutoPlay) - Kali ini saya akan membagikan kepada teman - teman bagaimana Cara Memasang Lagu Langsung Nyala Otomatis (AutoPlay). Banyak orang ingin membuat blognya tampil lebih menarik dan keren mulai dari membuat buku tamu melayang, membuat header yang unik dan bahkan ada yang menambahkan lagu pada blognya. Nah, kalau kita memasang lagu pada blog kita nanti pengunjung juga akan merasa lebih nyaman.. tapi kalau lagunya gak enak di dengar, ya.. kasian juga nanti pengunjungnya.. hehe :)

Berikut Cara Memasang Lagu Langsung Nyala Otomatis (AutoPlay) :

1. Kunjungi Situs SoundCloud, disini >> http://soundcloud.com

2. Pilih menu Sign Up.

3. Lalu akan muncul pop up yang melayang ditengah - tengah web tersebut, silahkan isi datanya seperti email, password dll. Lalu Klik Sign Up.

4. Lalu akan muncul halaman baru. Silahkan tuliskan nama yang akan ditampilkan, gambar, nama anda, tempat tinggal anda dll. Klik Done.

5. Silahkan buka dan cek email anda yang tadi didaftarkan, buka pesan yang dikirim oleh Situs SoundCloud, lalu Klik Confrim your email address.

6. Bila sudah, lalu klik Upload untuk mengupload lagu yang ingin anda tampilkan pada blog anda.

7. Klik Choose files untuk memasukkan lagu dari komputer anda.

8. Bila sudah diupload, silahkan anda menunggu hingga proses uploadnya selesai.

9. Lalu anda atur sendiri tampilan lagunya, lalu klik Save dibagian bawah.

10. Klik Share.

11. Klik Edit your Widget.

12. Centang pada "Play automatically"

13. Copy kodenya.

14. Masuk ke Akun Blogger anda

15. Pilih Layout => Add a Gadget => HTML/JavaScript => Paste kode yang telah dicopy tadi

16. Klik Save.

17. Selesai.

Contohnya bisa anda lihat disini >> http://demo-previews.blogspot.com

Demikian postingan saya Cara Memasang Lagu Langsung Nyala Otomatis (AutoPlay),

Semoga bermanfaat..!!

Kamis, 01 November 2012

Cara Membuat Tombol Follow Blogger Melayang di Blog

Cara Membuat Tombol Follow Blogger Melayang di Blog - Selamat sore, Sekarang saya akan membahas Cara Membuat Tombol Follow Blogger Melayang di Blog. Salah satu cara untuk mempermudah untuk memfollow blog seseorang dengan membuat widgetnya melayang, selain itu tentunya juga dapat memperbanyak follower blog kita. Pengen bikin Tombol Follow Blogger melayang di blog kamu? silahkan ikuti tutorial berikut ini.

Berikut Cara Membuat Tombol Follow Blogger Melayang di Blog :

1. Login ke Akun Blogger Anda
2. Klik Pada Dashboard, Lalu pilih Layout
3. Pilih Add a Gadget
4. Pilih HTML/JavaScript
5. Copy kode dibawah ini kedalam HTML/JavaScript

<div style="position: fixed; top: 5px; right: 0px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=6059172308012063550" target="_blank" rel="nofollow" title="Join This Site..!" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://i1193.photobucket.com/albums/aa345/bakulatz/fl.png" border="0" /></a></div>

Keterangan : ganti yang berwarna merah dengan ID Blog anda..
Untuk mengetahui ID Blog, sebagai contohnya, silahkan pergi ke Layout, lihat dibagian address bar lalu copy nomor ID Blog punya blog kalian, seperti yang telah saya tandai pada gambar dibawah ini.

6. Save.

Selamat mencoba..

Rabu, 31 Oktober 2012

Cara Membuat Search Engine di Blog dengan Mudah

Cara Membuat Search Engine di Blog dengan Mudah - Pada tutorial kali ini saya akan berbagi ke kawan - kawan bagaimana caranya untuk membuat Search engine di blog kita dengan mudah dan simpel. Search Engine merupakan pengertian dari Mesin Pencari, yaitu supaya kita lebih mudah mencari judul artikel ataupun kata - kata yang tercantum dalam blog kita. Dengan Search Engine, dapat mempermudah orang dalam mencari informasi dan berita dengan keyword yang mereka ketik, misal kita ingin mencari info di google, kita tinggal ketik saja yang ingin kita cari.. mudah kan?? sama seperti pada blog kita, juga pasti sangat memerlukan mesin pencari supaya para pengunjung lebih mudah untuk mencari artikel - artikel pada blog kita.

DEMO

Berikut Cara Membuat Search Engine di Blog dengan Mudah :

===========
Cara Pertama
===========

1. Login ke Akun Blogger anda.
2. Klik Tanda panah pada Dashboard, lalu Pilih Layout

3. Pilih Add a Gadget.

4. Pilih Search Box.

5. Silahkan anda mengatur sendiri tampilan searchnya, Bila sudah klik Save.

6. Selesai.

==========
Cara Kedua
==========

1. Masih di Layout, Klik Add a Gadget.

2. Klik HTML/JavaScript.

3. Copy kode dibawah ini, lalu Paste Kan kedalam HTML/JavaScript.

<form action="http://tutorial-blogz.blogspot.com/search" method="get"><input class="textinput" name="q" size="30" type="text"/><input value="Search" class="buttonsubmit" name="submit" type="submit"/></form>

Keterangan : ganti yang berwarna merah dengan URL BLOG kamu..

4. Save.

5. Selesai..!!

Gimana?? mau pilih yang mana? cara pertama apa cara yang kedua?
Kalau itu sih terserah anda saja, yang penting dua - duanya mudah dan simpel kan..?

Selamat mencoba!!

Senin, 29 Oktober 2012

Cara Memasang Widget Alexa dengan Mudah

Cara Memasang Widget Alexa dengan Mudah - Dalam artikel ini, saya akan menuliskan tentang Cara Memasang Widget Alexa dengan Mudah. Memasang Widget Alexa Pada Blog kita sangatlah penting, selain untuk memperlihatkan pada pengunjung berapa rank alexa blog kita, juga dapat meningkatkan ranking alexa pada blog kita. Saya memberikan tutorial ini hanya untuk yang belum tahu.., kalau yang udah tahu caranya gak usah liat ya... hehe :D.