Widget

Cara Membuat Widget Translate Berbentuk Bendera

Label:

Date: 4 Maret 2024

Moch Adnan Blog - Untuk merubah tulisan artikel dalam blog ke dalam bahasa lain, kita bisa menggunakan widget Translate. Yang mana dengan menggunakan widget tersebut, maka maka tulisan artikel yang ada dalam blog bisa menyesuaikan dengan bahasa Negara yang dituju. Sebelumnya saya pernah memposting cara memasang Google translate ini kedalam sidebar blog, baca lengkapnya. Namun untuk kali ini tampilannya agak berbeda, dimana widget translate ini nantinya akan dilambangkan dengan masing-masing bendera Negara, dan nantinya bahasa penulisan artikel tersebut pun akan mengikuti sesuai bahasa dari masing-masing bendera tersebut. Para pengguna cukup mengklik logo bendera tersebut untuk mentranslate tulisan artikel tersebut.

Baca juga :

cara membuat Recent Posts menggunakan URL feed blog

Perhatikan gambar berikut ini, karena nantinya tampilan widget translate yang akan kita bahas ini akan sama persis seperti yang ditunjukkan dalam gambar tersebut.

Nah, untuk membuatnya dan memasangnya kedalam sidebar blog, silahkan ikuti langkah-langkah seperti berikut ini:

Cara Membuat Widget Translate Berbentuk Bendera

Pertama masuk (Login) kedalam dasbor blog.

Ke dua, dan tentu saja setelah anda berada dalam dasbor blog, silahkan pilih ‘Tata letak’ kemudian pilih lagi ‘Add a gadget/Tambahkan gadget baru’ Lalu pilih “HTML/JavaScript”.

Ke tiga, copy dan pastekanlah kode berikut ini kedalam widget HTML tersebut.


<a onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cen&amp;hl=en&apos;); return false;' rel='nofollow' style='cursor: pointer;' target='_blank' title='English'>

<img align='absbottom' alt='English' border='1' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFudmnGamgnKzA9_25cC4al8c90HvCm5hnzDuwMyI0pNYb80fWl4WFMdLXoCYa75x3MPZRpC7D5g48zVOyJijOu73bnEFtjc_jsiWU_duZPjUa3fZji2QXofqV8pqubgiWtE6ttsERd3w/' style='cursor: pointer;' title='English'/>

</a>

<a onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cfr&amp;hl=en&apos;); return false;' rel='nofollow' style='cursor: pointer;' target='_blank' title='French'>

<img align='absbottom' alt='French' border='1' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBoxPwd5A8GJDQJFEDYd3fvWdmfVCVD7v_JFZzgow1WR7n-itEReUR4ZmCNbwJsJ5pxVHSBll6vmi2RMutLA8CoeIidW8ABZhHqcmWg-21LdZhDLceED83O1l6FJhqlHv9ZHcsKu3C-Z0/' style='cursor: pointer;' title='French'/>

</a>

<a onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cde&amp;hl=en&apos;); return false;' rel='nofollow' style='cursor: pointer;' target='_blank' title='German'>

<img align='absbottom' alt='German' border='1' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcpXvPDggme0s494cNce5hNU6pOfg-jEMHhZfDi9BwyrN9mXZ3FbJphIddsT1VE4r4blC_ZDWrd7fe7glWSgXq_vIjkjkc-ICanXY7C-Xj6Bhn8M2fp6fPfpp8TFgXGyMY7TxSZcM0QXj2/' style='cursor: pointer;' title='German'/>

</a>

<a onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Ces&amp;hl=en&apos;); return false;' rel='nofollow' style='cursor: pointer;' target='_blank' title='Spain'>

<img align='absbottom' alt='Spain' border='1' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH9MURgpT1txZWeu4DnOxvMeTKCpMElQMMrStUS2r8uqJRY7tYvahOjgmGMCEXRy1sIfuldOlaxsJQG8HAM-4YlnIaOQwSKRBJ5bhJ7fHLYSRPAhaQAPmqqMCg5Taa9F65_1MOcxjxDQ0H/' style='cursor: pointer;' title='Spain'/>

</a>

<a onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cit&amp;hl=en&apos;); return false;' rel='nofollow' style='cursor: pointer;' target='_blank' title='Italian'>

<img align='absbottom' alt='Italian' border='1' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg6KmI9L9FGkyIKnzrhJPvnMdNpWesayRYjuelnOLIqYGXRaQjELXeTp4KP7Mc4M0tgKOf3Kx32V1utWrwyadCV7Ev6esjo5TQds7RtQV9RzDW-W3JDAiUK7E_MxR2kWLHvGjL9Voewr8/' style='cursor: pointer;' title='Italian'/>

</a>





<a onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cpt&amp;hl=en&apos;); return false;' rel='nofollow' style='cursor: pointer;' target='_blank' title='Portuguese'>

<img align='absbottom' alt='Portuguese' border='1' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz2Uh6qnOlbV6VSVpzREOKC5XF9PuHNJzItpnlZ1i3Fpn842NwliJY_mhP6w_WQRTRz38KwEJP4Eh1pPGc_ERmcTyBnedMWh891g2yU8hM_A5QaTMyYa5N_VkVy0Uyci7hesAgDs8eZHs/' style='cursor: pointer;' title='Portuguese'/>

</a>

<a onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cja&amp;hl=en&apos;); return false;' rel='nofollow' style='cursor: pointer;' target='_blank' title='Japanese'>

<img align='absbottom' alt='Japanese' border='1' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX4mP68MqAk8B_CUXgKkcB_z6vck4v0dM34fX-PsRZ4KDk8zuieeedluxmdvfMambSsOoehEJnXRNhXbbS5pGkWzpUYylJ8Vgk7gGnILOVVFwwJXLxliqS5MX1darXyRDuKI4IcDPG5OFY/' style='cursor: pointer;' title='Japanese'/>

</a>

<a onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cko&amp;hl=en&apos;); return false;' rel='nofollow' style='cursor: pointer;' target='_blank' title='Korean'>

<img align='absbottom' alt='Korean' border='1' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYE3_UF2nUCqv4EN_sY7tqcqwFdetxpAwgyz7kB-OtepJIvU7HOTNwLkBVSKEmK81DBrX_KxO_GpkMnNKEws4pUGtu_U0JWWO3Dgus5RUWFL3dXWy4w3EAbRjf_vdGyELqffYv6vmUCv0/' style='cursor: pointer;' title='Korean'/>

</a></center>

Catatan: Untuk bagian judul widget, anda bisa membiarkannya kosong atau jika mau bisa memberinya judul, dengan judul Translate This Blog.

Ke empat dan untuk terakhir kalinya, silahkan anda klik tomcol ‘Save’ guna menyimpan hasil kerja anda ini.

Demikianlah, dengan mengikuti langkah-langkah yang tadi saya tuliskan tersebut, maka anda akan menghasilkan sebuah widget Translate berupa bendera keren. Selamat mencoba. :D

Cara Memasang Jam Ke Dalam Halaman Blog

Label:

Widget

Date: 4 Maret 2024

Cara Memasang Jam Ke Dalam Halalman Blog

Moch Adnan Blog - Untuk memepercantik tampilan blog,sobat pastinya harus memasang beberapa widget toh ke dalam halaman blog. Jangan sampai blog terlihat kosong melompong terutama di bagian-bagian pentinghalaman blog, seperti pada bagian sidebar. Manfaatkan keberadaan sidebar blog ini dengan

widget yang bermanfaat bagi kelangsungan hidup blog. Dan ketika berbicara mengenai mempercantik penampilan blog akan banyak sekali bentuk serta variasi widget yang bertebaran dan bisa sobat pasang ke dalam halaman blog seperti salah satunya widget Jam.

Saat ini waktu menunjukan tepat pukul :

Banyak situs yang menawarkan widget jam, baik jam analog maupun berupa jam digital dengan aneka bentuk yang cantik serta berpenampilan unik. Dan pada kesempatan ini saya akan memeberikan cara termudah memasang widget jam ke dalam halaman blog, mengapa saya katakan mudah? Karena dalam pelaksanaannya, sobat tidak perlu keluar lagi dan membuka beberapa situs penyedia widget jam. Anda hanya akan perlu mengcopy kode script yang telah saya sediakan berikut ini dan menyimpannya dalam halaman blog sobat.

Cara Memasang Jam Ke Dalam Halaman Blog.

Masuk Ke dalam dasbor blog.

Pilih 'Tata letak'

Pilih 'Add a gadget/ Tambahkan gadget baru'

Pilih 'HTML'

Copy kode berikut :


<span id="Variasiblogger"></span>

<script type="text/javascript">

//<![CDATA[

function showclock(){

var digital = new Date();

var hours=digital.getHours();

var minutes=digital.getMinutes();

var seconds=digital.getSeconds();

var dn='AM';

if (hours>12) {

dn='PM';

hours=hours-12;

}

if (hours==0) hours=12;

if (minutes<=9) minutes='0'+minutes;

if (seconds<=9) seconds='0'+seconds;



miReloj='<b><span style="color:#000;font-size:12px;">'

+ hours + '</span> : <span style="color:#000;font-size:12px;">'

+ minutes + '</span> : <span style="color:#000;font-size:12px;">'

+ seconds + '</span></b><span style="color:#000;font-size:12px;margin-left:5px;">'

+ dn + '</span>';

document.getElementById('Variasiblogger').innerHTML=miReloj;

//

setTimeout('showclock()',1000);

}

window.onload=showclock

//]]>

</script><!--DO NOT REMOVE--><a href="https://www.mochadnan.com/2014/08/cara-membuat-tombol-follow-this-blog-di.html" style="font-size: 8px; margin: -10px 0px 0px -3px; text-align: right;" title="get this widget from www.mochadnan.com">Get This Widget</a><!--DO NOT REMOVE-->

Lalu simpan ke dalam gadget HTML tsb.

Pilih 'Simpan' dan selesai

Secara otomatis widget jam ini akan menyesuaikan dengan waktu yang berlaku dalam komputer/laptop ketika blog sobat di akses melalui perangkat tersebut. Tampilannya minimalis dan tentu tidak akan memakan banyak tempat (ruang) dalam halaman blog sobat, last....selamat mencoba cara memasang jam kedalam halaman blog. Sekian.

Sumber kode: http://variasiblogger.blogspot.com

Cara Membuat Widget Facebook Likebox Show And Hide (Slider)

Label:

Widget

Date: 11 Juni 2023

Cara Membuat Widget Facebook Likebox Show And Hide (Slider)

Moch Adnan Blog - Kembali ke rutinitas ngeblog, kali ini saya ingin membagikan cara membuat widget Facebook Likebox Show and Hide. Widget FB likebox ini sesuai dengan namanya yakni show and hide, yaitu akan tampil atau terlihat ketika tersorot oleh kursor, dan akan menghilang atau tersembunyi tatkala tidak tersentuh oleh kursor (kebalikannya). Yang mana widget ini tersimpan melayang dibilah kanan blog, sangat pas untuk anda yang ingin mempersempit tampilan widget, jadi anda bisa meminimalisir tempat penyimpanan widget-widget tersebut, dalam sidebar blog anda.

Demo

Sebelumnya bagi anda yang belum mengetahui tentang cara membuat facebook likebox, saya persilahkan untuk membaca tulisan saya sebelumnya, yakni tentang cara memasang facebook like box di blogger

karena disana saya juga menguraikan tentang tata cara registrasi ketika pertama kali anda membuat fans page.

Cara Membuat Widget Facebook Likebox Show And Hide (Slider)

Baik, tanpa berpanjang lebar lagi berikut ini adalah tahapan - tahapan membuat widget Facebook Like Box Show and Hide (Slider) untuk Blog

Langkah #1 Tambahkan widget baru, Login ke blogger >> Tata letak >> Add a gadget >> HTML/JavaScript. Lalu copy dan pastekan kode berikut ini kedalamnya.


<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlf4jon_dOMmFZFCxEPfSMjOawAHnjlmPJ5m9n50YDWJTtgCLChDycM1hikVa0zWa_zBc_yR4rNs0k_3-4MNO7G_EbNYUQxqxggXhV72vetAJmmETPzJJ7l3UxJnTFMsYZ-k_0_ZSXsta1/s1600/%255Bwww.gj37765.blogspot.com%255Dfacebook_right.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/MochAdnanBlog&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe></div></div>
<span><a href=http://www.mochadnan.com/2014/08/cara-membuat-widget-facebook-likebox.html">Get this widget</a></span>

Ganti Tulisan yang berwarna merah dalam kode tersebut, dengan menggunakan ID fans page anda.

Klik Simpan

Langkah #2, Pilih Template >> Edit Html. Kemudian cari kode seperti berikut dalam template entri blog anda,</head> jika sudah menemukannya, silahkan copy dan simpan kode berikut ini kedalam template tepat diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Demikianlah cara membuat Facebook Like box Show and Hide, akhir kata saya ucapkan selamat mencoba dan selamat menikmati hari anda

Cara Memasang Widget Parse HTML Tersimpan Dalam Halaman Blog

Label:

Widget

Date: 5 Mei 2022

Cara Memasang Widget Parse HTML Tersimpan Dalam Halaman Blog

penting tidak sih untuk memasang gadged PARSE HTML kedalam halaman blog? Wah.... pasti akan terdapat beraneka jawaban nih dari para sobat blogger. Mungkin sebagian ada yang menjawab tidak perlu, dan yang lain beranggapan perlu. Ok, apapun jawaban sobat mengenai perlu atau tidaknya gadged parse html ini dipasang dalam beranda blog,

saya kembalikan kepada kepentingan gadged ini sendiri untuk sobat. Jika memang dirasa perlu silahkan untuk memasangnya, karena di bawah ini saya akan menjelaskan tentang cara membuat widget parse html tersimpan dalam halaman blog. disini Sebagai tambahan saja, bahwa parse html sangat berguna untuk memparse sebuah kode html. Parsing atau Encode HTML merupakan cara yang cukup penting bagi para publisher yang akan membuat artikel mengenai code script html yang akan ditampilkan dalam postinganya pada saat dipublish.Misalnya ingin membuat postingan yang akan dipublish berisi code script html agar code script htmlnya tampil dihalaman postingan pada saat dipublish , seperti contoh ingin membuat artikel mengenai tutorial cara membuat widget recent post, cara mengedit template blog, cara parsing/encode HTML pada code iklan PPC/Adsense agar iklan dapat diselipkan diantara halaman posting.

Parse code HTML

Kesimpulannya kode HTML tidak akan keluar di artikel postingan blog kita tanpa kode tambahan. Jadi bila kita tidak hafal kode tambahan tersebut, gunakan saja widged Parse HTML dan berikut ini saya akan mencoba menjelaskan kepada sobat netter cara mudah dan cepat memasang Widget Parse HTML


<style scoped="" type="text/css">
#parser2{position:relative;overflow:hidden}
#parser2 .btn,#parser2 .btn:active{background-image:none}
#parser2 .btn{font-weight:400;padding:6px 12px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0;border-radius:4px;cursor:pointer;transition:all .3s}
#parser2 .btn:active:focus,#parser2 .btn:focus{outline:0}
#parser2 .btn:focus,#parser2 .btn:hover{color:#333;text-decoration:none;outline:0}
#parser2 .btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
#parser2 .btn-primary{color:#fff;background:#3e51b5}
#parser2 .btn-primary:focus,.button-group button:disabled{color:#fff;background:#286090}
#parser2 .btn-primary:active,#parser2 .btn-primary:hover{color:#fff;opacity:.9}
#parser2 .btn-danger{color:#fff;background:#f39c12}
#parser2 .btn-danger:focus{color:#fff;opacity:.9}
#parser2 .btn-danger:active,#parser2 .btn-danger:hover{color:#fff;opacity:.9}
#parser2 .btn-info{color:#fff;background:#5bc0de}
#parser2 .btn-info:focus{color:#fff;background:#31b0d5}
#parser2 .btn-info:active,#parser2 .btn-info:hover{color:#fff;background:#31b0d5}
#parser2 .btn-xs{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px}
#parser2 textarea#somewhere{background:#fef1c8;border:0;height:300px;width:100%;margin:0 0 10px;box-sizing:border-box;font-family:Consolas,Monaco,'Andale Mono',monospace;color:#111;border-radius:10px;box-shadow:inset 0 -5px 5px rgba(0,0,0,0.05);padding:20px}
#parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{outline:0}
#parser2 .btn-sm{display:inline-block;font-size:13px;line-height:1.5;border-radius:5px;padding:12px;margin:0 auto 10px auto;width:30%;box-shadow:0 3px 1.2rem -0.8rem rgba(0,0,0,0.8)}
#parser2 .btn-xs{font-size:13px;line-height:1.5;border-radius:5px;padding:12px;margin:auto;width:30%;box-shadow:0 3px 1.2rem -0.8rem rgba(0,0,0,0.8)}
.collapse{display:none}
.alert-success{color:#222;background:#fff}
.alert{border:0;padding:5px 15px;border-radius:10px;position:absolute;top:20px;right:20px;min-width:210px;color:#0984e3;font-size:13px;box-shadow:0 2px 4px 0 rgba(0,0,0,0.16)}
button.close{padding:0;cursor:pointer;background:none;border:0;-webkit-appearance:none}
.close{float:right;font-size:1.3rem;color:#0984e3;margin:1px 0 0 0}
button.close:focus{outline:0}
.close:hover{opacity:1!important}
#btnInfo h4{margin:0;font-size:13px;line-height:2}
#button-link{display:none}
.clear{clear:both;display:block;margin-bottom:2px}
.alert br{display:none}
</style>
<div id="parser2">
   <textarea id="somewhere" placeholder="Write/paste the code here then click the Parse Code button"></textarea>
   <div class="alert alert-success margin-bottom-20 collapse" id="btnInfo" role="alert">
      <button class="close close-copy" onclick="document.getElementById(&quot;btnInfo&quot;).style.display = &quot;none&quot;;cdClear();" type="button"><span aria-hidden="true">×</span></button> 
      <h4>Code copied to clipboard</h4>
   </div>
   <br /> <button class="btn btn-primary btn-sm btn-parse" onclick="convert();" type="button">Parse Code</button> 
   <div class="clear"></div>
   <button class="btn button-link btn-xs btn-info" data-clipboard-action="copy" data-clipboard-target="#somewhere" id="button-link" type="submit">Copy code to clipboard</button> <button class="btn btn-danger btn-xs" id="btn_clear" onclick="cdClear();">Clean</button> 
</div>
<script type="text/javascript">//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/htmlparse.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]></script>

Login kedalam dasbor blog, lalu pilih Halaman

Buat halaman baru, ubah mode penulisan dari Compose ke mode HTML dengan mengklik tombol yang berada di kanan atas layar penulisan.

Copy dan Pastekan kode Script di atas kedalam layar penulisan, klik publish dan selesai. Demikian saja cara memasang widget Parse HTML ke dalam halaman blog

semoga bermanfaat.

Tombol Order Via WhatsApp Untuk Blogger

Label:

Widget

Date: 13 Juli 2020

Tombol Order Via WhatsApp Untuk Blogger

sobat blogger yang berbahagia, sepertinya penggunaan WhatsApp di era sekarang ini sudah tidak asing lagi bagi semua pengguna smartphone. Hampir semua orang sudah menggunakannya, mulai dari pelajar, mahasiswa, pebisnis, hingga ibu rumah tangga. Semua sudah menggunakan WhatsApp baik chat langsung maupun dalam beberapa grup. Dengan demikian WhatsApp atau sering disingkat WA adalah salah satu sosial media paling populer dan banyak digunakan.

Peluang ini memberi kesempatan besar buat kamu yang tengah menjual produk secara online agar pemesan bisa langsung order dan chat ke akun WhatsApp kamu.

Keranjang belanja, checkout, form pembelian barang, adalah istilah-istilah yang kerap kita temui dalam sebuah toko online. Kata-kata tersebut sudah seperti jembatan yang menghubungkan kita dengan calon pembeli. Namun, seiring semakin populernya WhatsApp kini kita bisa mencoba menjadikan WhatsApp sebagai penghubung antara saya, kamu dan para pembeli produk toko online. Dengan menggunakan WhatsApp kita berarti melakukan cara mendekatkan Toko online dengan calon pembeli dengan menjadikan WhatsApp yang bisa digunakan untuk transaksi langsung.

Kabar baiknya adalah pengguna blogger seperti saya dan kamu, kini bisa membuat sekaligus menerapkan tombol Order via WhatsApp di dalam halaman toko online tersebut. Ini semua berkat kebaikan hati seorang founder dan sekaligus pemilik Dunia Blanter yang sudah membagikan sebuah kode script order via WhatsApp yang dapat kita pasang kedalam halaman blog toko online kita. Penasaran seperti apa penampakannya? Silakan klik tombol demo dibawah ini:

Demo : Form Order Via WhatsApp

Cara memasang Formulir Order Via WhatsApp di blogger.

Copy kode CSS dibawah ini.

<style type="text/css">
/* Default Whatsapp Form CSS by www.idblanter.com */ form.whatsapp-form {     box-shadow: 0 1px 6px rgba(32,33,36,.28);     border-radius: .5rem;     padding: 20px;     box-sizing: border-box;     color: #444;     font-size: 14px;     line-height: 1.5; }  .whatsapp-form a.send_form {     color: #fff;     background: #21a51f;     text-decoration: none;     display: inline-block;     padding: 10px 25px;     border-radius: .3rem;     font-weight: 700;     letter-spacing: .5px;     font-size: 15px; } #text-info span {     display: block;     padding: 10px 15px;     text-align: center;     font-weight: 700;     margin: 15px 0;     border-radius: .5rem; } #text-info span.yes {     background: #c6ffc5;     color: #0ea904; } #text-info span.no {     background: #ffc5c5;     color: #ce0404; } /* Input Field CSS */ .datainput{position:relative;margin:5px 0 20px}.datainput p{font-size:12px;background:#eee;display:inline-block;padding:5px 15px;border-radius:.5rem}.whatsapp-form textarea{min-height:120px}.datainput select{padding:12px 0;color:#555;font-size:14px;width:100%;border:0;border-bottom:1px solid #ddd;outline:none;background:#fff}.datainput input,.datainput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.datainput input:focus,.datainput textarea:focus{outline:none}.datainput label{color:#999;font-size:14px;font-weight:400;position:absolute;pointer-events:none;left:0;top:18px;transition:.2s ease all}.datainput input:focus~label,.datainput input:valid~label,.datainput textarea:focus~label,.datainput textarea:valid~label{top:-10px;font-size:14px;color:#21a51f}#notif-license span{font-size:40px}#notif-license{display:none;position:fixed}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#21a51f;transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}.datainput input:focus~.bar:before,.datainput input:focus~.bar:after,.datainput textarea:focus~.bar:before,.datainput textarea:focus~.bar:after{width:50%}.indigox{background:#3f51b5}.orangex{background:#ff9800}.pinkx{background:#e91e63}.bluex{background:#2196F3}.purplex{background:#9c27b0}.redx{background:#F44336}.greenx{background:#4CAF50}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.datainput input:focus~.highlight,.datainput textarea:focus~.highlight{animation:inputHighlighter .3s ease}.datainput input:focus~label,.datainput input:valid~label,.datainput textarea:focus~label,.datainput textarea:valid~label{top:-10px;font-size:13px;color:#21a51f} </style>
<form class="whatsapp-form"> 
<div class="datainput"> <input class="validate" id="wa_name" name="name" required="" type="text" value=''/> <span class="highlight"></span><span class="bar"></span> <label>Your Name</label> </div>
<div class="datainput"> <input class="validate" id="wa_email" name="email" required="" type="email" value=''/> <span class="highlight"></span><span class="bar"></span> <label>Email Address</label> </div>
<div class="datainput"> <select id="wa_select">   <option hidden='hidden' selected='selected' value='default'>Select Option</option>   <option value="1">List Option 1</option>   <option value="2">List Option 2</option>   <option value="3">List Option 3</option> </select> </div>
<div class="datainput"> <input class="validate" id="wa_number" name="count" required="" type="number" value=''/> <span class="highlight"></span><span class="bar"></span> <label>Input Number</label> </div>
<div class="datainput"> <input class="validate" id="wa_url" name="url" required="" type="url" value=''/> <span class="highlight"></span><span class="bar"></span> <label>URL/Link</label> <p>Link blog Anda, gunakan http:// atau https://</p> </div>
<div class="datainput"> <textarea id='wa_textarea' placeholder='' maxlength='5000' row='1' required=""></textarea> <span class="highlight"></span><span class="bar"></span> <label>Description</label> </div>
 <a class="send_form" href="javascript:void" type="submit" title="Send to Whatsapp">Send to Whatsapp</a> <div id="text-info"></div> </form>

Tips : Merubah dan meyesuaikan pada masing-masing kolom dengan cara melakukan pengeditan pada bagian kode yang sengaja saya warnai merah

Gabungkan code Javascript dibawah ini, kedalam kode CSS diatas.

<script type="text/javascript"> //<![CDATA[ $(document).on('click','.send_form', function(){ var input_blanter = document.getElementById('wa_email'); /* Whatsapp Settings */ var walink = 'https://web.whatsapp.com/send',     phone = '+6281977094280',     walink2 = 'Halo saya ingin ',     text_yes = 'Terkirim.',     text_no = 'Isi semua Formulir lalu klik Send.'; /* Smartphone Support */ if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { var walink = 'whatsapp://send'; } if("" != input_blanter.value){  /* Call Input Form */ var input_select1 = $("#wa_select :selected").text(),     input_name1 = $("#wa_name").val(),     input_email1 = $("#wa_email").val(),     input_number1 = $("#wa_number").val(),     input_url1 = $("#wa_url").val(),     input_textarea1 = $("#wa_textarea").val(); /* Final Whatsapp URL */ var blanter_whatsapp = walink + '?phone=' + phone + '&text=' + walink2 + '%0A%0A' +     '*Name* : ' + input_name1 + '%0A' +     '*Email Address* : ' + input_email1 + '%0A' +     '*Select Option* : ' + input_select1 + '%0A' +     '*Input Number* : ' + input_number1 + '%0A' +     '*URL/Link* : ' + input_url1 + '%0A' +     '*Description* : ' + input_textarea1 + '%0A'; /* Whatsapp Window Open */ window.open(blanter_whatsapp,'_blank'); document.getElementById("text-info").innerHTML = '<span class="yes">'+text_yes+'</span>'; } else { document.getElementById("text-info").innerHTML = '<span class="no">'+text_no+'</span>'; } }); //]]> </script>

Tips : Ubah nomor whatApp seperti ini +6281977094280dengan nomor WA sobat

Seperti biasa setelah berada dalam dasbor blogger, buat "Halaman baru" kemudian paste kan kode CSS dan script diatas gabung kedalam satu halaman, klik 'pratinjau halaman' jika sudah dirasa cukup kemudian pilih "publikasikan" dan selesai.

Formulir Order Via WhatsApp Untuk Blogger

Usahakan nomor WhatsApp kita jangan sampai salah penulisannya harus dimulai dengan +628xxxxx supaya begitu seseorang mengklik "Order Sekarang" tidak sampai keluar kata "WhatsApp tidak diketahui" sehingga kita pun terhindar dari resiko kehilangan pembeli. Selain itu, kita hanya tinggal membuat halaman 'Komfirmasi pembayaran' halaman 'cek ongkos kirim' dan menambahkan halaman 'syarat dan ketentuan' jika di rasa perlu, kemudian menggabungkannya dalam toko online kita.

Baca juga :

Cara membuat form pemesanan barang

Insyaallah next artikel kita bisa berjumpa lagi dengan artikel yang membahas tentang ketiga soal diatas, agar supaya secepatnya website toko online kita langsung online dan mampu menggaet banyak pembeli. Demikian saja artikel kali ini, jangan lupa share, like, dan komennya ya sob...

Cara Membuat Sosial Button Melayang Di Kanan Blog

Label:

Widget

Date: 2 Juni 2020

Tutorial ngeblog buat kali ini saya akan membagikan cara mudah tentang membuat widget sosial button melayang yang posisinya akan melekat terus di kanan layar, sehingga memberikan peluang besar untuk pengunjung blog sobat untuk bisa memfollow akun-akun media sosial sobat, seperti akun facebook, Instagram, twitter, dan lainnya.

Dalam pembuatannya ini saya hanya memasukkan empat buah akun sosial media, di luar dari itu sobat bisa menambahkannya secara manual. Yang mana nantinya akan tak coba terangkan pula cara memasukkannya secara manual. Baiklah tanpa berpanjang lebar lagi saya mulai saja pada tata cara pembuatannya.

DEMO

Cara membuat Sosial Button melayang di kanan Blog

1. Masuk kedalam dasbor blog, lalu pilih 'Template' dan lanjutkan dengan memilih 'Edit html'. Dan ini jelas berarti sobat akan saya ajak untuk menambahkan beberapa kode css serta script, untuk itu ada baiknya anda melakukan back-up pada template, guna mengantisipasi kerusakan pada template blog.

2. Cari kode ]]></b:skin>
dalam template blog. Gunakan pencarian cepat dengan menekan 'ctrl+F' jika sudah menemukannya, silahkan copy dan pastekan kode berikut ini diatasnya.


.social-buttons{position:fixed;top:166px;width:45px;z-index:9999}

.button-left{left:0}

.button-right{right:0}

.social-buttons #twitter-btn .social-icon,.social-buttons #facebook-btn .social-icon,.social-buttons #google-btn .social-icon,.social-buttons #rss-btn .social-icon,.social-buttons #pinterest-btn .social-icon,.social-buttons #youtube-btn .social-icon{background-color:#33353B;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg16dxa_GURrZ2y6tK-anVQwhUhixdT_7EdREq0vJFGKQ5NP_yA4XGcMIRvqrqC2pitx-fssqnxGoRa4XlVsSr5BYmS9njTzhTNqiqf2YchwUTcBlUuZhs2J_sh-wE4XAfI-0PZOoFqPNs/s1600/mas-icons.png)}

.button-left #facebook-btn span{background-position:right 10px}

.button-left #twitter-btn span{background-position:right -35px}

.button-left #google-btn span{background-position:right -127px}

.button-left #rss-btn span{background-position:right -80px}

.button-right #facebook-btn span{background-position:12px 10px}

.button-right #twitter-btn span{background-position:11px -35px}

.button-right #google-btn span{background-position:10px -127px}

.button-right #rss-btn span{background-position:11px -80px}

.social-buttons #facebook-btn .social-icon{background-color:#3B5998}

.social-buttons #twitter-btn .social-icon{background-color:#62BDB2}

.social-buttons #google-btn .social-icon{background-color:#DB4A39}

.social-buttons #rss-btn .social-icon{background-color:#FF8B0F}

.social-buttons #pinterest-btn .social-icon{background-color:#D43638}

.social-buttons #youtube-btn .social-icon{background-color:#C4302B}

.social-buttons:hover .social-text{display:block}

.button-left .social-icon{-moz-transition:background-color .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;background-repeat:no-repeat;display:block;float:left;height:43px;margin-bottom:2px;width:43px}

.button-left .social-text{display:none;float:right;font-size:1em;font-weight:700;white-space:nowrap;margin:15px 40px 11px 0}

.button-right .social-icon{-moz-transition:background-color .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;background-repeat:no-repeat;display:block;float:right;height:43px;margin-bottom:2px;width:43px}

.button-right .social-text{display:none;float:left;font-size:80%;font-weight:700;white-space:nowrap;margin:15px 0 11px 40px}

.social-buttons .social-text{color:#FFF}

.button-left #pinterest-btn span,.button-right #pinterest-btn span{background-position:11px -177px}

.button-left #youtube-btn span,.button-right #youtube-btn span{background-position:11px -223px}

Silahkan pilih 'Simpan' template.

3. Masih dalam halaman Edit html, selanjutnya cari kembali kode seperti berikut </body> gunakan cara diatas untuk melakukan pencarian cepat. Dan jika sudah menemukannya selanjutnya copy dan pastekan kode berikut ini tepat di atas kode </body>


<div class='social-buttons button-right hidden-phone hidden-tablet'>

<a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>

<a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>

<a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>

<a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>

</div>

Keterangan: silahkan ganti masing-masing URl yang tercetak warna merah dengan URL sobat.

Pilih 'Simpan' dan selesai.

Selamat mencoba.

Cara Membuat Menu Dropdown Judul Atau Kategori

Label:

Widget

Date: 19 Mei 2018

Bagaimana sob setelah melihat gambar diatas? Saya yakin sobat sudah mengerti betul kemana tujuan widget ini nantinya akan sobat sematkan dalam halaman blog atau web. Yup! tepat sekali widget ini akan terlihat sangat cocok sekali ketika disematkan pada halaman posting artikel sobat atau juga disematkan pada bilah sisi halaman blog.

Dan berikut ini adalah contoh hasil pembuatan widget menu dropdown pilihan berdasarkan judul atau kategori.

Menu dropdown pilihan kategori:
Menu dropdown pilihan judul:

Cara Membuat Menu Dropdown Judul Atau Kategori

Baik, sekarang kita lanjutkan ketahap cara pembuatannya. Langkah pertama silahkan masuk kedalam dasbor blog sobat, kemudian copy kode html dibawah ini :


<form>
<select name="URL" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value"><option value="#">NAMA PILIHAN JUDUL</option><br />
<option value="LINK 1">JUDUL</option>
<option value="LINK 2">JUDUL</option>
<option value="LINK 3">JUDUL</option>
<option value="LINK 4">JUDUL</option>
<option value="LINK 5">JUDUL</option>
<option value="LINK 6">JUDUL</option>
<option value="LINK 7">JUDUL</option>
</select></form>

Catatan:
- NAMA PILIHAN JUDUL bisa digantikan sesuai keinginan sobat. Misal: "PILIH JUDUL" atau "PILIH KATEGORI".
- LINK 1, 2 dan seterusnya, silahkan di ganti menggunakan alamat URL postingan misal: http://www.mochadnan.com/2013/08/cara-membuat-kenalpot-agar-bersuara.html sementara pada tiap bagian "JUDUL" silahkan digantikan dengan menuliskan judul dari URL yang dimaksudkan.

Baca juga :

Cara membuat tombol sosial media dan tombol berbagi di blog

Untuk menerapkannya terdapat dua opsi, pertama menyimpannya kedalam halaman postingan dan kedua menyimpannya kebilah sisi halaman blog.
Nah, untuk opsi pertama silahkan ubah mode penulisan dari mode "Compose" ke mode "HTML"
Kemudian pastekan kode yang tadi sudah sobat copy kemudian klik "publikasikan".

Opsi keduanya, silahkan pilih "Tata letak" kemudian pilih "Script/HTML" dan pastekan kode yang sudah di dapat. Klik "Simpan" dan selesai.

Sampai disini saya anggap sobat sudah berhasil semua memasang widget menu dropdown pilihan judul atau kategori. Jika masih menemukan kendala jangan sungkan untuk meninggalkan komentarnya pada kotak komentar dibawah ini.

Cara Membuat Menu Sederhana Untuk Blog

Label:

Widget

Date: 2 Maret 2015

Moch Adnan Blog - Pada posting terdahulu saya pernah berbagi trik tentang cara membuat Menu drop down untuk blog ini, sementara untuk kali ini cara pembuatan halaman menu ini, sengaja saya share tanpa Drop down (dengan kata lain, bukan menu drop down), sehingga tampilan menu tersebut akan menyerupai static page yang biasa kita temui pada halaman menu bawaan blogspot . walau begitu dari segi tampilan menu yang akan saya coba bagikan ini tidak perlu diragukan lagi tampilannya, karena halaman menu tersebut nantinya akan tetap terlihat serasi dengan tampilan web atau blog anda. Tertarik untuk coba membuatnya? Silahkan lanjutkan membaca artikel ini.

Agar tidak penasaran dan bertanya-tanya tentang bagaimana tampilan menu tersebut, sekiranya tidaklah ada salahnya jika saya memberikan link Demo yang bisa anda lihat. Untuk itu silahkan di kik link “demo” berikut ini

Cara Membuat Menu Sederhana Untuk Blog

Masuk kedalam dasbor blog. Pilih ‘Tata letak’. Pilih ‘Menambahkan widget/ Add a widget’ lalu pilih kembali 'HTML/JavaScript' kemudian simpan kode HTML berikut ini kedalam widget HTML tersebut.


<div id="navigationcontainer">

<ul id="navlist">

<li><a href="#">Home</a></li>

<li><a href="#">About me</a></li>

<li><a href="#">Sitemap</a></li>

<li><a href="#">Privacy policy</a></li>

<li><a href="#">Disclaimer</a></li>

</ul>

</div>

Catatan: Silahkan ganti kode seperti berikut # dengan Url halaman, misal http://www.namabloganda.com/p/About/html dan kata-kata seperti Home, About, dan seterusnya tersebut dapat anda ganti dengan judul menu sesuai selera anda.

Klik simpan dan selesai. Selamat mencoba :D

Cara Membuat Kotak Pencarian Untuk Blog

Label:

Widget

Date: 7 Februari 2015

Fungsi dari kotak pencarian adalah untuk memudahkan para pengunjung dalam mencari artikel tertentu dengan cara mengetikkan kata atau judul postingan kedalam kotak tersebut, lalu secara otomatis blog akan memunculkan kata atau judul tersebut kepada para pengunjung. Berbeda dengan hasil pencarian google search yang pernah saya posting sebelumnya, dimana hasil pencarian kata atau judul tersebut akan menampilkan iklan terkait juga, baca postingan saya cara membuat kotak pencarian google custom.

Cara Membuat Kotak Pencarian Untuk Blog

Kotak pencarian ini nantinya akan sangat dengan mudah anda pasang kedalam halaman blog, anda hanya cukup melakukan copy paste sambil mengikuti instruksi yang saya berikan secara seksama, maka hasil kotak pencarian pun langsung bisa dipergunakan dalam blog anda. Langsung saja, masuk kedalam 'dasbor blog' kemudian pilih 'Template' lanjutkan dengan memilih 'Edit HTML' kemudian cari kode seperti berikut ]]></b:skin> dan simpan (sisipkan) kode ccs berikut ini tepat diatas kode tadi.


#search-box{position:relative;width:206px;margin:10px auto}

#cse-search-box{height:30px;border-radius:2px;background-color:#fff;overflow:hidden;border:1px solid #bbb}

#search-text{font-size:12px;color:#ddd;border-width:0;background:transparent}

#search-box input[type="text"]{width:85%;padding:5px 20px 12px 0;color:#666;outline:none}

#search-button{position:absolute;top:0;right:0;height:32px;width:20px;margin-top:10px;font-size:14px;color:#fff;text-align:center;line-height:0;border-width:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5I0rbL34YyyM2dur1QP7uTS_W4QmA5hjFyZCUFTb4Xl4cqr1mtXQO7mZBnuTKaE2ErpnD1wEwaL6V1hPuX2iEgtwVfUfDnq6l6jR5aMd5JPm3EUJqkkSQHbCrOk98jW695aIx0h3Hl4o/s200/search-c.png) no-repeat;cursor:pointer}

Selanjutnya simpan (sisipkan) kembali kode html berikut di tempat yang anda inginkan.


<div id='search-box'>

<form action='/search' id='cse-search-box' method='get'>

<input id='search-text' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Cari di sini ...'/>

<button id='search-button' type='submit'/>

</form>

</div>

Untuk cara mudahnya anda bisa menyimpannya dengan menambahkan sebuah gadget baru. Pergi ke 'Tata letak' lalu pilih 'Tambah gadget' dan pilih 'HTML'

Atau jika blog anda tidak memiliki sidebar, anda bisa menyimpannya tepat di bawah nama judul blog anda, dengan mencari kode seperti berikut dalam template blog. <b:section class='main' id='main' showaddelement='no'>

Demikian saja Cara Membuat Kotak Pencarian Untuk Blog selamat mencoba and happy blogging.

Cara Membuat Tombol Berbagi Untuk Postingan Blog

Label:

Widget

Date: 26 Januari 2015

Dalam hal mensiasati tampilan artikel pada posting template yang tidak dilengkapi dengan fitur tombol share atau tombol untuk berbagi kita bisa memasang sendiri tombol share this atau tombol untuk berbagi ini, kedalam setiap halaman artikel blog kita. Dan untuk mendapatkan tombol berbagi yang bisa kita pasang langsung kedalam posting template tersebut, Anda hanya cukup menyimpan beberapa kode yang akan coba saya bagikan berikut ini kedalam Template blog anda. Untuk itu silahkan lanjutkan untuk membaca artikel ini, semoga bermanfaat bagi sahabat yang tengah mengalami kendala dalam memasang (membuat) tombol berbagi kedalam postingan blognya.

Cara Membuat Tombol Berbagi Untuk Postingan Blog

Baik tanpa berpanjang lebar lagi mari kita langsung saja menuju ke medan pengeditan html template blog sahabat, dengan cara: Masuk kedalam dasbor blog, lalu pilih Template, kemudian pilih edit html. Selanjutnya simpan kode berikut tepat diatas kode ]]></b:skin>


.share-buttons-box {height: 67px;background: url() no-repeat 330px 10px;margin:20px 0 15px;overflow:hidden;}

.share-buttons{margin:0 0;height:67px;float:left}

.share-buttons .share{float:left;margin-right:10px;display:inline-block}

Sudah !. Ok, selanjutnya simpan kembali kode dibawah ini tepat diatas kode <data:post.body/> jika Anda ingin menampilkan tombol berbagi ini tepat dibawah judul artikel, dan lakukan kebalikannya jika anda ingin menampilkan tombol berbagi ini terlihat dibawah artikel (postingan)


<div class='share-buttons-box'>

<div class='share-buttons'>

<div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>

<div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>

<div class='share fbshare'><div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/></div>

<div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>

<div class='share linkedin'><script src='//platform.linkedin.com/in.js' type='text/javascript'>

lang: en_US </script><script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/></div>

</div>

</div>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script><br/>

Sudah, baik. Selanjutnya jangan lupa untuk menekan tombol 'Save' agar hasil pengeditan tadi tersimpan, lakukan pratinjau apakah keseluruhan tombol sudah muncul semua atau belum dalam halaman artikel anda. jika sudah, maka selesailah sudah cara membuat tombol berbagi untuk postingan blog anda. Namun jika ada yang tidak muncul, semisal tombol facebook like atau facebook share, maka simpan kembali kode terakhir ini tepat diatas kode </head>


<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.async=true;

js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;

fjs.parentNode.insertBefore(js, fjs);

}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Untuk mempermudah pencarian kode silahkan tekan ctrl + F.

Note : Lakukan backup pada template agar supaya ketika terjadi error' saat pengeditan dan sobat masih memiliki template yang aslinya.

Cara Membuat Widget 3 Tabber Di Blogspot

Label:

Widget

Date: 13 Desember 2014

Membuat 3 tab pastinya akan sekaligus menggabungkan 3 widget dalam 1 wadah, ini akan dapat atau bahkan menjadi sebuah solusi untuk meminimalis tampilan widget yang ada dalam sidebar blog anda. Bagaimana tidak, yang seharusnya ke 3 widget tersebut tersebar secara masing-masing, tapi berkat adanya cara ini ke 3 widget tersebut tergabung menjadi satu dalam sebuah widget. Sebut saja misalnya ke 3 widget tersebut masing-masing adalah: Popular post, about me, dan widget Label postingan.

Ke 3 nama widget tadi secara otomatis akan kita masukkan kedalam sebuah widget dalam 3 tab, dan bolehlah kita namai tutorial ini dengan nama: cara membuat widget 3 tabber di blogspot. Yang mana tujuan serta maksud dari tutorial pembuatan 3 tabber ini tidak lain dan tidak bukan bertujuan seperti yang sudah saya tuliskan diatas.Dan sebelum berlanjut mungkin anda tertarik juga untuk membuat widget kotak iklan untuk blog anda

Baiklah, selanjutnya saya anjurkan agar anda masuk kedalam dasbor blog dengan tetap menggunakan alamat e-mail serta sandi valid anda masing-masing. Dan jika sudah berada dalam dasbor blog selanjutnya pilih 'Template' kemudian pilih 'Edit html'.

Langkah selanjutnya simpan kode berikut ini kedalam template web anda tepat diatas kode </head>

<style>
.tabviewsection .section {
padding: 15px;
margin: 0px;
}
.tabviewsection {
margin-bottom: 40px;
}
.PopularPosts .widget-content ul li {
border-bottom: 1px solid #e7e7e7;
padding: 0.7em 0;
background: none;
}
.widget-container {
list-style-type: none;
list-style: none;
margin: 0 0 15px 0;
padding: 0;
color: #374142;
font-size: 13px;
}
.widget-container2 {
list-style-type: none;
list-style: none;
margin: 5px 15px 10px 0px;
padding: 0;
color: #374142;
font-size: 13px;
}
h3.widgettitle {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf_NMuSpWtSVON-ooUzhn0IQ230QjaBnuLZLvkjuBhvxnt0aQayNeZ1tvqPPZWOXkLU-iLKIl1qmh1DZ1Upp7_CE2Ut132rCOvf56Mc8E50cDlpA2PXyNgQSdN8lTO0TQs8Q8cQkF9v_bC/s0/widgettitle-bg.png) left top repeat-x;
margin: 0 0 10px 0;
padding: 9px 0 9px 10px;
color: #FFF;
font-size: 16px;
line-height: 16px;
font-weight: normal;
text-decoration: none;
text-transform: uppercase;
}

</style>

Jika sudah, sekarang simpan kembali kode berikut ini dan simpan dibawah kode <div class='sidebar-wrapper'>

<div class='tabviewsection'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();
$(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");
$(this).addClass("tabs-widget-current");
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li class='about_tab'>
<a href='#widget-themater_tabs-1432447472-id1'>
About
</a>
</li>
<li class='tags_tab'>
<a href='#widget-themater_tabs-1432447472-id2'>
Tags
</a>
</li>
<li class='laster'>
<a href='#widget-themater_tabs-1432447472-id3'>
Popular
</a>
</li>
</ul>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2>
<data:title/>
</h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:team == "true"'>

<ul>
<b:loop values='data:authors' var='i'>
<li>
<a class='profile-name-link g-profile' expr:href='data:i.userUrl' expr:style='"background-image: url(" + data:i.profileLogo + ");"'>
<data:i.display-name/>
</a>
</li>
</b:loop>
</ul>
<b:else/>

<b:if cond='data:photo.url != ""'>
<a expr:href='data:userUrl'>
<img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/>
</a>
</b:if>
<dl class='profile-datablock'>
<dt class='profile-data'>
<a class='profile-name-link g-profile' expr:href='data:userUrl' expr:style='"background-image: url(" + data:profileLogo + ");"' rel='author'>
<data:displayname/>
</a>
<b:if cond='data:hasgoogleprofile'>
<br/>
<div class='g-follow' data-annotation='bubble' data-height='20' expr:data-href='data:userUrl'/>
</b:if>
</dt>
<b:if cond='data:showlocation == "true"'>
<dd class='profile-data'>
<data:location/>
</dd>
</b:if>
<b:if cond='data:aboutme != ""'>
<dd class='profile-textblock'>
<data:aboutme/>
</dd>
</b:if>
</dl>
<a class='profile-link' expr:href='data:userUrl' rel='author'>
<data:viewProfileMsg/>
</a>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
<b:widget id='Label11' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2>
<data:title/>
</h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?&max-results=9"'>
<data:label.name/>
</a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>
(
<data:label.count/>
)
</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?&max-results=9"'>
<data:label.name/>
</a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>
(
<data:label.count/>
)
</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>

<b:section class='sidebar' id='sidebartab3' preferred='yes'>
<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2>
<data:title/>
</h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>

<a expr:href='data:post.href'>
<data:post.title/>
</a>
<b:else/>

<div class='item-title'>
<a expr:href='data:post.href'>
<data:post.title/>
</a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>

<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'>
<a expr:href='data:post.href'>
<data:post.title/>
</a>
</div>
</div>
<div style='clear: both;'/>
<b:else/>

<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'>
<a expr:href='data:post.href'>
<data:post.title/>
</a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</div>

Simpan perubahan Template.!

Nha.! Untuk memanggil kedua kode yang telah tersimpan dalam template anda tersebut, maka anda harus menyimpan kembali sebuah kode kedalam template web anda tersebut agar berjalan dan menghasilkan widget 3 Tab. Silahkan simpan kembali kode berikut ini, dan simpan tepat dibawah kode ]]></b:skin>

<link href='http://host1.base.pk/style.css' rel='stylesheet' type='text/css'/>

Simpan Template dan selesai.!
Demikian cara membuat widget 3 Tabber di blogger semoga bermanfaat

Cara Membuat Tombol/Button Follow On Twitter Di Blog

Label:

Widget

Date: 6 Desember 2014

Cara Membuat Tombol/Button Follow On Twitter Di Blog

Untuk sobat blogger yang ingin memprompsikan tulisan-tulisannya ke media sosial seperti Twitter, anda diharuskan menghubungkan web/blog anda dengan akun sosial media anda terlebih dahulu. Hal ini diperlukan agar segala sesuatu yang telah anda tuliskan dalam blog/web dapat muncul dan bisa di klik oleh para follower anda. Lalu bagaimana untuk share tulisan blog anda ke Facebook? Silahkan klik tautan link berikut: Cara memasang Facebook Like Box di Blog

Baik, singkatnya saya anggap anda sudah melakukan hal tersebut. Dan agar para pembaca atau siapapun itu yang berkunjung kedalam situs dan anda bisa (mempersilahkan) untuk memfollow anda, maka pasanglah Tombol/Badge Follow on Twitter ini kedalam situs anda.

Dengan demikian anda bisa sekaligus memperbanyak follower yang saya rasa imbasnya akan berpengaruh baik pada trafik situs anda sendiri, sehingga dengan menggunakan widget 'Follow me' dari twitter ini, kesempatan untuk menjaring kedua keuntungan tersebut bisa anda manfaatkan secara bersamaan.

Sekarang masuk kedalam dasbor blog anda, untuk memulai pemasangan widget follow me on twitter ini. Setelah itu pilih 'Tata letak' dan lanjutkan dengan memilih 'add a gadget/tambahkan gadget' lalu pilih 'HTML/Javascript' dan copy paste kode berikut ini kedalam gadget HTML/Javascript tersebut tadi.



<!-- twitter follow badge by go2web20 -->

<script src='http://www.go2web20.net/twitterfollowbadge/1.0/badge.js' type='text/javascript'></script><script type='text/javascript' charset='utf-8'><!--

tfb.account = 'ID TWITTER ANDA DISINI';

tfb.label = 'follow-me';

tfb.color = '#004a80';

tfb.side = 'l';

tfb.top = 175;

tfb.showbadge();

--></script>

<!-- end of twitter follow badge -->

Catatan: silahkan ganti kalimat atau tulisan 'Id twitter anda disini' dengan menggunakan id twitter anda.

Klik 'Simpan' setelah itu. Lalu jangan lupa untuk meninjau halaman blog anda. Apakah 'Button' follow me ini sudah muncul atau belum ditiap halaman situs.

Kode script tombol 'Follow me on Twitter' diatas saya dapat dari sebuah situs bernama GO2WEB2O, jadi kembali lagi saya persilahkan sobat untuk mengunjungi situs tersebut bila anda ingin melakukan kostumisasi dengan mengikuti link berikut http://www.go2web20.net/twitterFollowBadge/

Demikian saja cara membuat tombol follow me on twitter di blog, semoga bermanfaat dan selamat mencoba.

Cara Membuat 4 Kotak Iklan Berukuran 125x125

Label:

Adsense Widget

Date: 2 Desember 2014

Cara Membuat 4 Kotak Iklan Berukuran 125x125

Titorial kali ini saya akan berbagi tentang cara membuat widget kotak iklan yang berukuran 125x125, yang biasanya tampil dalam sidebar blog, dan sekaligus menampilkan 4 buah kotak iklan berukuran yang sama.

Dengan widget ini anda sebagai seorang admin web bisa memajang space iklan kosong dan menawarkan kotak iklan anda tersebut kepada para advertiser, mudah-mudahan dilain kesempatan saya bisa juga memposting tentang cara membuat halaman khusus untuk beriklan, sementara untuk kali ini biarlah widgetnya saja dahulu yang saya coba bagikan kepada sobat semua mengenai tentang cara pembuatannya iya.

Cara Membuat 4 Kotak Iklan Berukuran 125x125

Sebagai catatan saja, sebelum anda menyimpan widget kotak iklan ini, ada baiknya anda memastikan bahwa ukuran lebar sidebar blog anda adalah 250px, hal ini perlu diperhatikan karena jika lebar sidebar blog anda lebih kecil dari 250px, maka tampilan widget kotak iklan ini tidak akan tersusun rapi seperti dalam contoh kotak iklan berikut ini.

Cara Membuat 4 Kotak Iklan Berukuran 125x125

Baik, sekarang saya langsungkan saja pada tata cara pembuatannya iya, adapun jika sobat mengalami kendala dalam pembuatannya, silahkan tinggalkan komentarnya saja.

'Masuk kedalam dasbor blog' dengan memasukkan alamat email dan password valid anda, kemudian jika sudah berada dalam dasbor blog, silahkan pilih 'Tata letak' kemudian pilih 'Tambah widget' atau 'Add a widget' lalu pilih 'HTML/Javascript'. Selanjutnya copy dan pastekanlah kode yang ada dibawah ini kedalam widget HTML/JavaScript tadi.


<a href="url iklan" title="Nama iklan"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0TIx4Zs5kSwxEdHKEbYKIH-WKnGB0tBGblVMkad8JuwPUOONLRgRud_sXBd2SwObeCj2DnI1PlxleVMhd86pryUBKP3HdmKGroD4BitPtA-d3Bi6mKqsHLGOx66Pq6AF11bJK1yE5nlU/h120/Ad1.png" alt="alt/text gambar" width="125" height="125" /></a>

<a href="url iklan" title="Nama iklan"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0TIx4Zs5kSwxEdHKEbYKIH-WKnGB0tBGblVMkad8JuwPUOONLRgRud_sXBd2SwObeCj2DnI1PlxleVMhd86pryUBKP3HdmKGroD4BitPtA-d3Bi6mKqsHLGOx66Pq6AF11bJK1yE5nlU/h120/Ad1.png" alt="alt/text gambar" width="125" height="125" /></a>

<a href="url iklan" title="Nama iklan"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0TIx4Zs5kSwxEdHKEbYKIH-WKnGB0tBGblVMkad8JuwPUOONLRgRud_sXBd2SwObeCj2DnI1PlxleVMhd86pryUBKP3HdmKGroD4BitPtA-d3Bi6mKqsHLGOx66Pq6AF11bJK1yE5nlU/h120/Ad1.png" alt="alt/text gambar" width="125" height="125" /></a>

<a href="url iklan" title="Nama iklan"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0TIx4Zs5kSwxEdHKEbYKIH-WKnGB0tBGblVMkad8JuwPUOONLRgRud_sXBd2SwObeCj2DnI1PlxleVMhd86pryUBKP3HdmKGroD4BitPtA-d3Bi6mKqsHLGOx66Pq6AF11bJK1yE5nlU/h120/Ad1.png" alt="alt/text gambar" width="125" height="125" /></a>

Langkah selanjutnya anda hanya perlu mengganti masing-masing tulisan yang sengaja saya warnai merah dalam kode diatas dengan Url gambar, Link iklan, dan deskripsi iklan dari advertiser anda.

Baca juga :

Cara Membuat Formulir Berlangsung Artikel Gratis

Cukup mudah bukan? Iya, semoga saja anda tidak mengalami kesukaran dalam pembuatannya.

Ok, kalau begitu, sampai disini dulu tutorial tentang cara membuat empat kotak iklan berukuran 125x125. Selamat mencoba. ☺

Cara Mudah Memasang Kotak Author Blog Di Blogger

Label:

Widget

Date: 1 November 2014

Ngeblog di blogspot untuk sekarang ini emang makin asyik aja, karena apa? Kecanggihan serta fitur-fitur yang keren dan yang ada dalam dasbor admin kian hari kian dioptimalkan oleh pihak google. Sehingga mempermudah admin blog/web itu sendiri untuk mempergunakan fitur yang ada dan bahkan merancang tampilan web-nya, dan salah satunya adalah dengan adanya fitur Author yang bisa anda pasang di akhir artikel. Waktu pertama kali ngeblog, saya ingat betul fitur seperti Author blog memang ada, namun tidak seoptimal sekarang. Ya, saya kira mungkin dijaman pertama kali saya ngeblog belum ada yang namanya Google+, namun sekarang dengan adanya Google+ dan dengan semboyan satu akun untuk seluruh Google, maka bisa jadilah kotak author ini bisa langsung terkait kedalam Author blog. Hingga pemasangannya pun tidak memerlukan lagi beberapa kode.

Nah, jadi sebelum niatan memasang kotak author diakhir artikel blog, saya sarankan anda sudah memiliki akun Google plus. Karena yang nantinya tampil dalam kotak author ini adalah tampilan Google plus anda sendiri, sementara cara pemasangan kotak author ini sendiri caranya sangatlah gampang. Anda hanya perlu 'Masuk Kedalam Dasbor blog' Kemudian pilih 'Tata letak' lalu pada bagian 'Blog post' silahkan klik 'Edit'

Gambar 01

Maka akan terbuka sebuah jendela munculan, beri tanda ceklist/centang pada bagian kotak ' Tampilkan profil pengaranng dibawah post' lalu klik 'Simpan' dann selesai. Atau untuk lebih jelasnya perhatikan gambar 01

Pada beberapa kasus memang terkadang cara diatas tidak bekerja dengan semestinya, yang artinya Author box tersebut tidak juga muncul ketika selesai melakukan cara pemasangan seperti diatas. hal itu mungkin dikarenakan oleh pengaturan 'Post Footer Blog' yang secara tidak disengaja tersetting 'Disable'

Namun Anda tidak perlu khawatir, silahkan mencoba cara kedua dengan cara 'Masuk kedalam dasbor blog' lalu pilih 'Template' dan klik 'Edit HTML'. Simpan kode berikut ini dibawah kode ]]></b:skin>

/* author-bio
----------------------------------------------- */
.author-bio img {float:left;margin-left:-50px;border:1px solid #ddd;background:#E8E8E8;padding:3px;border-bottom-width:2px;}
.author-bio {background:url();color:#666;clear:both;border-bottom:1px solid #eee;background-color:#F1F0E9;padding:12px 40px 0 40px;margin:0 -40px;font-size:13px;line-height:18px;}
.author-bio h3 {margin:0 0 5px 0;font-size:14px}
.author-bio img {margin:0 10px 10px 0;}
.author-bio p {margin-bottom:10px;}
.tips {
background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyX1ZZZUSmIy5RvBKDwWqL4o9JeVjG9O6MFg99lWxp_7wUlFedknuJukBPTLLzoNmw6U2C80NcIsvdDcNLVuFrCVU0Sxff4jfbCBXEMX8Pq4aru5vag9viaHNdiA5XExKFHusR5JseZjs_/s1600/Tips.gif') no-repeat 12px 2px;
color: #000;
}

Jika sudah, kemudian simpan kembali kode berikut ini tepat dibawah kode <div class='post-footer-line post-footer-line-3'>

<div class='profile'>
<img class='avatar avatar-56 photo' height='56' src='URL gambar anda' width='56'/>
<h3>→ About the author</h3>
<p>Kata atau kalimat tentang diri anda ada disini</p>
</div>

Dengan demikian kini kotak author blog sudah tersimpan tepat dibawah artikel :D selamat mencoba.