Tampilkan postingan dengan label Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Memasang Whatsapp Sharing Button Di Blog

No Comments
Seiring dengan berkembangnya zaman smartphone, dunia website pun terus berkembang dengan tampilan yang mendukung smartphone yang lebih dikenal dengan Responsive Web Design (RWD). Dengan desain yang responsive, maka kemungkinan mendapatkan pengunjung dengan mobile device semakin besar.

Dan dengan seiring dengan semakin banyaknya pengunjung yang datang menggunakan smartphone atau mobile device, maka salah satu kesempatan bagi pemilik web untuk mendapatkan sharing artikel di antara mobile device pun semakin meningkat.

Dan salah satu applikasi smartphone yang banyak penggunanya adalah Whatsapp, sebuah aplikasi chatting milik Facebook. Dan inilah keempatan besar untuk berbagi artikel di antara jutaan pengguna Whatsapp.

Untuk mendapat kesempatan besar tersebut, maka semestinya pemilik blog menyediakan tombol berbagi untuk Whatsapp untuk memudahkan sharing artikel ke pengguna Whatsapp lainnya.

Untuk itu ada sebuah Whatsapp Sharing Button yang patut dicoba yang dibuat oleh http://whatsapp-sharing.com/

Dengan sedikit memodifikasinya dengan menggunakan javascript, akhirnya saya mencoba membuat kodenya agar bisa digunakan di wordpress ataupun blogspot dan tampak seperti ganbar di bawah ini dengan tampilan mobile.
Whatsapp Sharing Button Di Blog
Nah bagi yang ingin mencoba memasang Whatsapp sharing button ini di blognya baik blogspot maupun wordpress, silahkan copy kode di bawah ini.

<script>
//<![CDATA[
var whatsurl = window.location.href;
document.write('<a href="whatsapp://send" data-text="Take a look at this awesome website:" data-href="' + whatsurl + '" class="wa_btn wa_btn_l" style="display:none" title="Share On Whatsapp">\
Share</a>\
');
if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="http://yourjavascript.com/0015517398/whatsapp-button.js";h.appendChild(s);}
//]]>
</script>

Silahkan simpan di mana Anda ingin menampilkan tombolnya. Dan perlu diketahui, bahwa tombol Whatsapp sharing ini HANYA akan tampil jika dilihat menggunakan smartphone atau mobile device. Jadi TIDAK AKAN TAMPIL jika dilihat menggunakan laptop atau komputer.

Dan karena ini hanya akan tampil di mobile device, maka untuk pengguna blogspot akan lebih baik jika kodenya dihilangkan dari tampilan desktop dan hanya ditampilkan pada mobile device saja dengan menggunakan mobile conditional tag (untuk wordpress, saya belum menemukan mobile conditional tag) sehingga tidak mempengaruhi loading blog pada tampilan desktop.

Nah silahkan gunakan kode di bawah ini agar kode Whatsapp share button ini pun hanya tampil di mobile device dan halaman postingan saja (untuk pengguna blogspot).

<b:if cond='data:blog.isMobileRequest == &quot;true&quot; and data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
var whatsurl = window.location.href;
document.write('<span style="display:block;font-size: 18px;font-weight: 500;margin-bottom:5px">Share On Whatsapp:</span>\
<a href="whatsapp://send" data-text="Take a look at this awesome website:" data-href="' + whatsurl + '" class="wa_btn wa_btn_l" style="display:none" title="Share On Whatsapp">\
Share</a>\
');
if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="http://yourjavascript.com/0015517398/whatsapp-button.js";h.appendChild(s);}
//]]>
</script>
</b:if>

Silahkan cari kode di bawah ini atau yang mirip seperti di bawah ini dan silahkan simpan kode di atas tepat di bawahnya untuk menampilkan tombolnya di bawah postingan.

  <data:post.body/>
</b:if>
      <div class='clear'/> <!-- clear for photos floats -->
    </div>

Untuk membuktikannya silahkan buka halaman postingan di blog ini dengan menggunakan smartphone Anda, maka Anda akan menemukan Whatsapp share button di bawah Social Sharing Buttons di bawah postingan.

UPDATE:
Agar ketika share ke Whatsapp otomatis menggunakan title postingan, silahkan gunakan kode di bawah ini.

<b:if cond='data:blog.isMobileRequest == &quot;true&quot; and data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
var whatsurl = window.location.href;
var whattitle=encodeURIComponent(document.title);
var whattitle_esc=unescape(whattitle);
document.write('<span style="display:block;font-size: 18px;font-weight: 500;margin-bottom:5px">Share On Whatsapp:</span>\
<a href="whatsapp://send" data-text="'+whattitle_esc+'" data-href="' + whatsurl + '" class="wa_btn wa_btn_l" style="display:none" title="Share On Whatsapp">\
Share</a>\
');
if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="http://yourjavascript.com/0015517398/whatsapp-button.js";h.appendChild(s);}
//]]>
</script>

Sumber: http://www.kompiajaib.com/2015/09/memasang-whatsapp-sharing-button-di-blog.html

Cara Memasang Widget Chat Box Keren Auto Hide di Blogger

No Comments
Cara Memasang Chat Box Auto Hide di Blog/Blogspot. Dengan Sobat memasang Buku tamu atau Chat BOX pada website/Blog sangat bagus untuk memudah pengunjung untuk saling mengenal dan berbagi, tujuannya tak lain untuk menjalin komunikasi dan silaturahim baik sesama pengunjung maupun para Blogger.

Screenshot:
Cara Memasang Chat Box Keren Auto Hide di Blog Screenshot

Cara pemasangannyapun cukup simple sobat tinggal copy paste script yang ada di bawah ke blog sobat. Berikut adalah tutorial untuk memasang Chat Box (buku tamu)  keren yang Auto Hide dan Auto Klik.

1. Pastikan Sudah Masuk ke Blog Sobat
2. Pilih ke tata letak / layout lalu klik add gadget,dan pilih tambahkan HTML / javascript
3. Lalu copy-paste HTML dibawah ini:
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEherVTWefg4ifp2JgCEMsx26rbxb5d-GoyXZky1xCDT1cHVq7_nXlUTSw23HW4iR9Xd8Lkbimz3T14chPrGU12PNsT8k61-aDzeukc_16dnbUVkCB1710FYMseJ_-uL9GaVsDk12RiQqXxe/s1600/finger21.blogspot.com+bukutamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>
<div class="gbcontent">

<!-- BEGIN CBOX - www.cbox.ws - v4 -->
<div id="cboxdiv" style="position: relative; margin: 0 auto; width: 200px; font-size: 0;">
<div style="position: relative; height: 305px; overflow: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; border:#ababab 1px solid;"><iframe src="http://www3.cbox.ws/box/?boxid=3437312&boxtag=va1wrq&sec=main" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="auto" allowtransparency="yes" name="cboxmain3-3437312" id="cboxmain3-3437312"></iframe></div>
<div style="position: relative; height: 75px; overflow: hidden; border:#ababab 1px solid; border-top: 0px;"><iframe src="http://www3.cbox.ws/box/?boxid=3437312&boxtag=va1wrq&sec=form" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="no" allowtransparency="yes" name="cboxform3-3437312" id="cboxform3-3437312"></iframe></div>
</div>
<!-- END CBOX -->

<div style="text-align: center;"><span style="font-size: 10px;"><span style="font-family: &quot;Trebuchet MS&quot;,sans-serif;">Supported by <a href="http://kalongganteng.com" target="_blank">KalongGanteng</a></span></span></div><div style="text-align:right"><a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>
Keterangan:
-Kode yang saya blok warna hijau adalah gambar tombol Buku Tamu yang dapat sobat ganti sesuai selera
Tombol Auto Hide ChatBox
-Kode yang saya blok warna Kuning adalah gaya Buka chat box, jika anda menginginkan Auto Hide tanpa diklik gunakan onmouseover seperti punya saya dan jika sobat menginginkan Chat Box dengan klik ganti dengan onclick
-Kode yang saya blok warna Merah adalah kode Chat Box, silahkan ganti dengan kode Chat Box Anda, Untuk mendapatkannya silahkan ikuti langkah-langkah dibawah.

    Cara Mendapatkan Script Warna Merah diatas:

    a. Kunjungi Situs Resmi CBOX
    b. Lalu Klik Sign Up
    Cara Memasang Chat Box Keren Auto Hide di Blog Screenshot

    c. Isi dengan lengkap formulir nya, jika sudah Klik Create my CBox seperti gambar berikut
    Cara Memasang Chat Box Keren Auto Hide di Blog Screenshot

    d. Jika sukses, maka sobat akan diarahkan ke halaman Login. Silahkan Login dengan E-mail dan password tadi
    Cara Memasang Chat Box Keren Auto Hide di Blog Screenshot

    e. Nah sekarang sobat telah menjadi Member dari Cbox.ws, untuk mengganti tampilan Chatt Box-nya silahkan pilih menu Look and Feel => Style Presets. Sobat dapat memilih tampilan chat box sesuai selera. Pilih dan klik Konfirmasi (lihat gambar)
    Cara Memasang Chat Box Keren Auto Hide di Blog Screenshot

    f. Jika Sudah silahkan klik menu Publish dan copy dan paste scriptnya dan ganti scripst warna merah yang saya beri diatas dengan script baru yang sobat dapatkan dari Cbox.ws
    Cara Memasang Chat Box Keren Auto Hide di Blog Screenshot

    4. Kembali ke Blogger (masuk ke form tambahkan widget HTML / javascript tadi ) lalu paste script yang telah sobat rangkum tadi di dalamnya.

    5. Kik simpan dan lihat hasilnya, jika tidak berhasil baca lagi dengan cermat tutorialnya.

    6. Selamat Mencoba !!!


    Sumber: http://www.kalongganteng.com/2014/12/cara-memasang-widget-chat-box-keren-auto-hide-di-blogger.html#ixzz4ZtczoeZI
    Under Creative Commons License: Attribution

    Cara Memasang Widget Yahoo Messenger di Blog

    No Comments


    Memasang widget yahoo messenger di blog atau web toko online punya kita memang berperan penting untuk membantu kita memberikan fast support kepada pengunjung maupun client atau calon pembeli di toko online anda . Widget YM dapat membantu kita berinteraksi/chat dengan sangat cepat dimana secara otomatis membuat situs anda terlihat lebih profesional dalam hal support.

    Cara Memasang Widget Yahoo Messenger di Blog

    Persyaratan sebelum memasang widget Yahoo Messenger :

    • Akun email di yahoo ( username connecting ke YM )
    • Sudah menginstall aplikasi Yahoo messenger di laptop,pc atau Gadget.
    Kalau persyaratan di atas sudah anda penuhi,berikut kita akan lanjut ke panduan membuat widget YM di blog atau bisa juga anda pasang di toko online.

    Memasang widget YM di blogger :

    • Loggin ke akun blogspot seperti biasa.
    • pilih menu Tata Letak ( Layout ).
    Cara Memasang Widget Yahoo Messenger di Blog
    • Setelah itu pilih Tambahkan Gadget ( add gadget ) > Pilih HTML/Java Script.
    • Pastekan kode berikut pada kolom yang tersedia.
    <a href="ymsgr:sendIM?adhim_albantani"> <img src="http://opi.yahoo.com/online?u=adhim_albantani&amp;m=g&amp;t=14&amp;l=us"/> </a>
    Keterangan :
    • Untuk kode berwarna
      Merah
      adalah username Yahoo Messenger anda.
    • yang berwarna
      Biru
      adalah style icon widget YM ( bisa anda atur sesuai selera )
    • Klik SIMPAN ( Save ) .

    Daftar icon status Widget Yahoo Messenger :

    Anda bisa memilih salah satu dari sekian icon status di bawah ini sesuai selera dengan menggantikan kode t=14 di atas dengan kode icon di bawah ini.

    Cara Memasang Widget Yahoo Messenger di Blog


    Itulah tips singkat memasang widget YM dan selamat mencoba.

    Aplikasi untuk mendownload Website atau Blogger

    No Comments

    HTTrack Website Copier adalah sebuah software free, aplikasi ini bisa digunakan untuk mendownload web secara keseluruhan atau sebagian. aplikasi ini bermanfaat sekali bagi yang ingin menghemat koneksi internet atau ingin membuka web favorite dalam versi offline. hasil web yang didownload sama persis dengan web yang online, hasil web yang didownload bisa dibuka tanpa adanya koneksi internet. cara penggunaan aplikasi ini untuk mendownload sebuah website cukup mudah, setelah aplikasinya diinstall, jalankan masukkan link web yang akan didownload, klik next, pilih tempat penyimpanan hasil download, klik ok, tunggu beberapa saat proses downoad berjalan, selesai klik finish. waktu download tergantung besarnya suatu web jika web isinya banyak maka downoadnya juga agak lama dan tergantung koneksi internetnya juga.

    Download aplikasi dari web resminya disini
    Sumber:
    http://nobelkurniadi.blogspot.co.id/2013/04/aplikasi-untuk-mendownload-web-secara.html