Tampilkan postingan dengan label Widget Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Widget Blog. Tampilkan semua postingan

Sabtu, 22 November 2014

Cara Memasang Widget Facebook Like Box Melayang di Blog

Memasang Widget Facebook Like Box atau Kotak Like Facebook di Blog dan membuatnya melayang-layang bukanlah pekerjaan yang susah, selama kita mempunyai source code dari Widget Facebook Like Box, maka kita tinggal memasangnya di bagian sidebar blog dan untuk membuatnya melayaang kita tinggal menambahkan position: fixed; ke dalam css.

Cara Memasang Widget Facebook Like Box


Untuk yang benar-benar baru dalam dunia blogging, dan ingin sekali Memasang Widget Facebook Like Box, silahkan ikuti caranya dibawah ini :

  1. Kunjungi https://developers.facebook.com/docs/plugins/like-box-for-pages

    Cara Memasang Widget Facebook Like Box

    Jika sudah terbuka, silahkan Anda isikan Facebook Page URL, Width, Height dan Color Scheme.

  2. Klik 'get code'

    Cara Memasang Widget Facebook Like Box 2

    Untuk mengambil kode Widget Facebook Like Box silahkan Anda klik tombol 'get code' lalu copy semua kodenya.

  3. Kembali ke https://www.blogger.com

    Cara Memasang Widget Facebook Like Box 3

    Masuk ke menu Tata Letak, tambahkan gadget, pilih HTML/JavaScript lalu masukkan kodenya.

    <div id="fb-root"></div>
    <script>(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/id_ID/sdk.js#xfbml=1&appId=1535339353373852&version=v2.0";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    Diatas adalah contoh kode widget Facebook like box yang saya dapatkan tadi. Jika sudah klik Simpan.

Sudah selesai silahkan cek blog Anda, jika sukses maka Widget Facebook Like Box akan muncul pada bagian sidebar Blog. Sedikit informasi bahwa kita sebenarnya bisa mengatur ukuran / warna dari widget Facebook like melalui fitur yang disediakan saat Anda mengunjungi situs Developer Facebook tadi.

Cara Membuat Widget Facebook Like Box Melayang


Diatas kita sudah berhasil memasang widget Facebook like box di Blog, selanjutnya kita akan membuat Widget Facebook Like tersebut melayang-layang dengan memanfaatkan CSS Posisiton.

  1. Masuk ke Template

    Cara Membuat Widget Facebook Like Box Melayang

    Pada dashboard, silahkan Anda klik Template jika sudah klik Edit HTML.

  2. Cari ]]></b:skin>

    Cara Membuat Widget Facebook Like Box Melayang 2

    Gunakn fitur Find (CTRL + F) untuk memudahkan Anda dalam melakukan pencarian.

  3. Masukkan kode dibawah ini

    Cara Membuat Widget Facebook Like Box Melayang 3

    Kode yang saya maksud ada dibawah ini.

    #fb-root {position: fixed}

    Letakkan kode diatas, dibagian atas kode ]]></b:skin>

Simpan template, lalu silahkan Anda cek dengan cara menscroll kebawah, jika Widget Facebook Like Box melayang, maka Anda sudah berhasil memasang widget Facebook like box melayang di Blog. Itulah Cara Memasang Widget Facebook Like Box Melayang di Blog, selanjutnya silahkan Anda kembangkan lagi.

Senin, 14 Juli 2014

Cara Membuat Artikel Terkait dengan Gambar

Artikel terkait / related post Dengan Gambar
Artikel terkait dapat memudahkan pengunjung untuk membaca artikel kita yang lain, Alangkah baiknya related post di letakkan di posisi yang tepat seperti di bawah konten atau artikel agar terlihat pengunjung. Memasang artikel terkait juga sangat efektif untuk mengurangi Bounce rate juga loh. Langsung saja Berikut adalah cara memasangnya.

  • Login dan masuk ke dasbor blogger
  • Klik template => edit HTML.
  • Cari kode ]]></b:skin> untuk memudahkan pencarian tekan CRTL + F lalu cari kode tadi
  • Jika sudah ketemu kode tadi masukan kode di bawah tepat di atas kode tadi
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts{float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px}
#related-posts h2{font-size:1.6em; font-weight:bold; color:black; font-family:Georgia,Times New Roman,Times,serif; margin-bottom:0.75em; margin-top:0em; padding-top:0em}
#related-posts a{color:black}
#related-posts a:hover{color:black}
#related-posts a:hover{background-color:#d4eaf2}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBwVo0YwUhjKeeTxf7G_gXec7mVPmkuk6XOSHGPB1C72ZP5sPiI0oq3HBEzW5o4IHgvf5S0VUuii7HmIDeaiGOkAsNYJyWy41MJRZpZmQ4JhW4sletvaZM2uLi1m81SxEU4TN9jLxD-wc/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://giovanialuha.googlecode.com/files/artikel-terkait-bergambar.js' type='text/javascript'/>
</b:if>

  • Lalu simpan template sobat
Sekarang kode CSS sudah selesai di pasang selanjutnya kita masuk ke tahap Cara memasang artikel terkaitnya.


  • Masih di dalam edit template cari kode ini <data:post.body/> " Biasanya ada lebih dari 1 cobalah pilih yang sesuai dengan template sobat atau coba satu persatu "
  • Selanjutnya masukan kode di bawah ini tepat di bawah kode tadi
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>
<div style='clear:both'/>
</b:if>
  • Setelah menurut sobat pas tinggal simpan template sobat
Selamat Artikel terkait atau related post berhasil terpasang jika gagal silahkan tinggalkan pertanyaan di kolom komentar.


Sabtu, 10 Mei 2014

Cara Membuat Daftar Isi Di Blog Secara Otomatis

Cara Membuat Daftar Isi Di Blog Secara Otomatis - Halo sobat blogger kali ini saya membuat artikel tentang Cara memasang daftar isi otomatis.  Daftar isi blog haruslah dimiliki setiap blogger karena dapat memudahkan pengunjung mencari artikel atau halaman blog sobat, selain itu sobat juga dapat traffic atau kunjungan lebih loh !, bagaimana tidak bayangkan saja pengunjung sobat ada 10 orang sehari dan pengunjung melihat daftar ini maka anda sudah mendapatkan kunjungan 2 kali lipat bayangkan saja jika anda memiliki banyak artikel pasti akan sangat bagus untuk traffiknya.
Cara Membuat Daftar Isi Di Blog Secara Otomatis
Sangat bagus kan jika blog kita memiliki daftar isi, sobat pasti sudah tidak sabar kan langsung saja.
1. Membuat daftar isi blog berdasarkan label tertentu secara otomatis

  • Pergi ke blogger
  • Buatlah sebuah halaman blog
  • Copy kode dibawah dan paste kan di halaman tadi dengan bentuk HTML bukan ( Compose )
<script src="http://gagaje-blogspot.googlecode.com/files/sitemap%281%29.js"></script><script src="http://gagaje.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

  • Lalu publikasikan, maka daftar isi sudah memasang daftar isi

2. Membuat daftar isi blog berdasarkan label dengan tambahan Scroll


  • Pergi ke blogger
  • Buatlah sebuah halaman blog
  • Copy kode dibawah ini dan paste kan di halaman tadi dengan bentuk HTML bukan ( Compose )
<div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height: 500px; background-color: none; text-align: left;"> <script src="http://gagaje-blogspot.googlecode.com/files/sitemap%281%29.js"></script><script src="http://gagaje.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

  •  Lalu publikasikan, maka daftar isi sudah memasang daftar isi
Sekian dulu artikel dari saya semoga bermanfaat dan jangan lupa klik +1 jika artikel ini bermanfaat dan tinggalkan juga komentar sobat yang relevan.

Kamis, 01 Mei 2014

cara mendeteksi dan menghapus link aktif pada komentar

cara mendeteksi dan menghapus link aktif pada komentar
Cara mendeteksi dan menghapus link aktif pada komentar - Halo sobat blogger tak henti-hentinya saya berbagi cara-cara blog. Pada kesempatan kali ini saya akan membagikan Cara memasang pendeteksi link dan otomatis link tersebut akan terhapus dengan sendirinya, jadi sobat blog tidak perlu susah payah mencek semua komentar. komentar blog adalah saran empuk bagi para spammer untuk mencari backlink yang berkualitas, apalagi jika blog sobat dofollow, apakah sobat sudah tau apa perbedaan blog dofollow dan nofollow.

Berkomentar dengan link aktif akan sangat merugikan blog yang dihinggapi dengan link aktif, dan sangat tidak disukai google, karena memaksa google bot untuk mengindeks blog lain. Akibatnya google sering mengabaikan blog sobat, baca artikel ini cara agar blog cepat terindex di google.

Cara menonaktifkan dan menghapus link aktif pada komentar

  • Login ke ke akun blog sobat
  • Masuk kebagian template
  • Kemudian klik edit html
  • Copy kode di bawah ini tepat di atas kode ]]></b:skin>
/*----Pendeteksi Komentar Spam Start----*/#comments p a {display: none !important; }/*----Pendeteksi Komentar Spam Start----*/

  •  Simpan template sobat
  • Selanjutnya masukan kode di bawah tepat di atas kode ]]></b:skin>
1.  Kode untuk menghapus link aktif

<! -- Mengapus link aktif Secara otomatis pada komentar start --><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function() {$('#comments p').find('a').remove(); }); </script><! -- Mengapus link aktif Secara otomatis pada komentar end -->
2. Kode untuk mengubah link aktif menjadi kata peringatan
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> jQuery(document).ready(function(){ jQuery("#comments p").find("a").replaceWith("<span> Dilarang Spam di sini jika ingin. silahkan Komentar lagi</span>"); }); </script>

  • Keterangan : Kode yang warna biru anda bisa ganti kata-katanya dengan kata-kata sobat.
3. Kode untuk menonaktifkan link aktif ( Text akan tetap muncul tapi link mati )
<! -- Menghilangkan link aktif start --><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js' type='text/javascript'/> <script type='text/javascript'>//<![CDATA[$(function() {$('#comments p').find('a').contents().unwrap();});//]]></script><! -- Menghilangkan link aktif  End -->
4. Kode untuk mengalihkan Link aktif ke url tertentu
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> jQuery(document).ready(function(){ jQuery("#comments p a").attr("href", "http://carabelajarseo.blogspot.com/p/tukar-link-link-exchange-blog-gratis.html"); }); </script> 

  • Keterangan : Kode yang berwarna biru ganti dengan Url yang mau dialihkan.
Penting ! : jika kode di atas tidak berfungsi lagi sobat bisa menggunakan cara berikut.

- Cari kode berikut </body> lalu masukan kode di bawah ini tepat di atas kode </body> :
<script type='text/javascript'>//<![CDATA[function blockLinks(parentID, children) {    var parent = document.getElementById(parentID),        content = parent.getElementsByTagName(children);    for (var i = 0; i < content.length; i++) {        if (content[i].innerHTML.indexOf('</a>') !== -1) {            content[i].innerHTML = "<b><mark>LINK AKTIF</mark></b> akan <b>DIHAPUS</b> otomatis karena Komentar anda spam, silahkan berkomentar ulang Terima Kasih!";            content[i].className = "spammer-detected";        }    }}blockLinks('comment-holder', 'p');//]]></script>

  • Keterangan : Anda bisa ganti kode warna biru dengan kata-kata anda
Terimakasih sudah membaca artikel Cara mendeteksi dan menghapus link aktif pada komentar ini selamat mencoba dan sampai jumpa.

Selasa, 15 April 2014

Cara Memasang Widget Alexa Baru Gratis 2014

Cara Memasang Widget Alexa Baru Gratis 2014
Cara Memasang Widget Alexa Baru Gratis 2014 - Baru baru ini alexa memutuskan untuk menjadikan alexa berbayar, walau pun daftar gratis tetapi widget alexanya harus bayar, nah pada kesempatan kali ini saya akan berbagi cara memasang widget alexa yang baru ini. widget alexa rank sangat penting untuk mengetahui rank blog kita atau pun melihat pesaing-pesaing dalam SEO. setelah saya cari di website alexa kemana mana saya mencari tetapi tidak ada script widget alexa rank, dan akhirnya saya pun coba coba dengan mengedit-edit script terdahulu akhirnya berhasil.Sebelum memasang widget ini sobat harus mengclaim website sobat agar bisa diperbaharui setiap hari.

  • Cara Mengclaim wibsite

  1. Pergi ke halaman utama alexa
  2. Lalu klik dasbor
  3. Di bagian my site anda harus mendaftarkan url blog sobat jika belum
  4. Jika sudah klik site Site Management
  5. Klik claim your site pilih metode ke-2 agar lebih mudah
  6. Coppy kode tersebut ke meta tag anda
  7. lalu Verify My ID

  • Cara memasang widget alexa

  1. Masuk ke dasbor sobat
  2. Tata letak
  3. Tambah gadget
  4. Klik HTML/JavaScript
  5. Coppykan kode dibawah ini
    <a href="http://www.alexa.com/siteinfo/mulanovich.blogspot.com"><script src="http://xslt.alexa.com/site_stats/js/s/a?url=carabelajarseo.blogspot.com" type="text/javascript"></script></a>
  6. Kemudian save.
  • Keterangan : ganti kode yang berwarna biru atau carabelajarseo.blogspot.com ganti dengan domain anda
    Terimakasih sobat telah berkunjung semoga bermanfaat jangan lupa tinggalkan komentar " Jangan menjadi pembaca gelap ya " Sampai jumpa di artikel baru saya selanjutnya.