Cara Mudah Memasang Widget Twitter Button Follow dan share

Cara Mudah Memasang Widget Twitter Button Follow dan Share - Satu minggu yang lalu saya pernah membahas mengenai bagaimana cara memasang tombol like fanspage facebook di blog, Untuk meningkatkan optimalisasi blog anda di media sosial sekarang saya akan kembali membahasnya tetapi kali ini mengenai tombol follow "ikuti" dan tombol share "bagikan" pada twitter.

   Media Sosial seperti twitter bisa menjadi pilihan anda sebagai media penarikan followers sebanyak mungkin. Tidak semua hal harus menggunakan uang, metode ini bisa dipakai sebagai cara mengiklankan blog anda sama halnya widget share pada Facebook. Sebelum anda memikirkan bagaimana cara memasang tombol ini ada baiknya untuk lebih memfokuskan isi artikel anda terlebih dahulu karena walau bagaimana pun pembaca akan meng"klik" tombol tersebut jika mereka merasa puas. Tidaklah sulit untuk memasang widget ini hanya saja pemilihan letaknya  yang harus diperhatikan. Letakkanlah widget tersebut di ruang yang strategis namun tidak menganggu isi konten anda.

• Cara mendapatkan kode button twitter

1. Dapatkan kodenya di Twitter Buttons

2. Login ke akun twitter anda.

3. Setelah login anda akan menemukan tampilan seperti dibawah ini:

4. Lalu pilih tombol sesuai kebutuhan anda.

5. Selanjutnya akan muncul tampilan seperti berikut:

6. Copy kode anda pada kolom sebelah kanan.

7. Login ke Dasbor Blogger anda.

8. Letakkan kode tersebut sesuai selera anda.

Note:

• Anda bisa meletakkannya di Tata letak dan HTML pada halaman Entri.
• Jika terjadi kendala bisa anda sampaikan di kolom komentar mudah-mudahan saya bisa membantu.
• Selamat berkarya ya.!

                                                       "SEMOGA BERMANFAAT"

---

read more “Cara Mudah Memasang Widget Twitter Button Follow dan share”

Cara Memasang Recent Post Bergerak Otomoatis Pada Blog

Cara Memasang Recent Post Bergerak Otomoatis Pada Blog - Postingan saya kali ini merupakan postingan kedua dengan tema pembahasan Recent Post. Tentu saya tidak akan membahas apa itu recent post atau semacamnya karena sudah pernah saya beberkan jauh sebelum postingan ini dibuat.

  

  Disini kita akan mencoba memberi sedikit sentuhan atraktif dalam blog anda dengan memasang recent post bergerak secara otomatis. Banyak alasan mengapa anda harus memilih widget ini salah satunya karena kebosanan anda melihat tampilan blog diam tanpa pergerakan terlepas dari itu widget ini juga mampu menampung lebih banyak daftar postingan tanpa harus banyak memakan tempat.

Sebelum dan sesudah disorot cursor

• Recent Post Bergerak Otomatis

---

1. Login ke akun Dasbor Blogger anda.

2. Jika sudah masuklah ke halaman Tata Letak.

3. Pilih Tambahkan widget "Add Gadget".

4. Klik HTML/Javascript

5. Letakkan kode dibawah ini didalamnya.

<style> #BDRSimage-slide { height:112px; overflow:hidden; padding:0; background-color:#fff; width:auto; border:solid #ddd 1px; box-shadow:0 0 5px #eee; } #BDRSimage-slide:hover { height:325px; overflow:hidden; padding:0;width:auto; border:solid #ccc 1px; box-shadow:none; } #BDRSimage-slide ul { list-style-type:none; margin:0; padding:0; } #BDRSimage-slide li { list-style:none; height:80px; padding:10px; border:dashed #ddd 1px; margin:5px; background-color:#FFFFFF; } #BDRSimage-slide li:hover { border:solid #ddd 1px; } #BDRSimage-slide a { color:#222; font-family:Verdana; font-size:12px; font-weight:bold; text-decoration:none; } #BDRSimage-slide .news-title { margin-bottom:5px; font-size:12px; color:#990000; } #BDRSimage-slide .news-text { font-size:10px; color:#333; text-align:left; font-family:Verdana; font-style:italic; font-weight:normal; padding-bottom:10px; } #BDRSimage-slide img { float:left; margin-right:10px; margin-top:10px; width:60px; height:60px; border-radius:50%; border:1px solid #e06666; box-shadow:0 0 2px #e06666; } </style> <script type="text/javascript" src="https://googledrive.com/host/0B2syg3utB8PxZjlockw0eEhJNU0/"></script> <script type="text/javascript" src="https://googledrive.com/host/0B2syg3utB8PxMXMycWhEWUhFMzA/"></script> <!-- script start --> <script type="text/javascript"> var speed = 400; var pause = 3500; $(document).ready(function(){ rivaiscript(); interval = setInterval(rivaiscript, pause); }); </script> <div > <ul id="BDRSimage-slide"> <script style="text/javascript"> var numposts = 50; var numchars = 0; </script> <script src="http://www.margopblog.blogspot.co.id</feeds/posts/default/?orderby=published&alt=json-in-script&callback=randompost"> </script src="http:></ul> </div> <!-- script end -->


6. Langkah terakhir simpan setelan tata letak anda dan lihat hasilnya.



Note:

• Ganti http://www.margopblog.blogspot.co.id</feeds/posts/default/?orderby=published&alt=json-in-script&callback=randompost dengan URL atau alamat blog anda sendiri.
• Agar tidak membingungkan berikan judul ketika anda menambahkan widget pada halaman tata letak.

Sekian Tutorial singkat kali ini, jika ada yang ingin ditanyakan silahkan poskan di komentar Mudah-mudahan saya siap membantu. Tinggalkan jejak kalau anda berhasil ya sob..

Semoga Bermanfaat
Thank's

read more “Cara Memasang Recent Post Bergerak Otomoatis Pada Blog”

Cara Memasang Animasi Lengkap Keren

  Beberapa orang punya alasan tertentu kenapa ingin memasang sentuhan animasi dalam tampilan blognya. Kita tahu tujuan paling utamanya ialah agar blog yang kita buat terlihat lebih menarik dan atraktif. Dalam hal ini Penempatan letaknya harus diperhatikan agar tidak menggangu pengunjung atau pembaca blog anda. Pemilihan animasi sesuai dengan tema blog anda pun tidak kalah penting untuk menambahkan kesan kepada pembaca.

  Mungkin anda sering dibingungkan dengan pilihan animasi itu-itu saja sedangkan jika untuk membuat animasi sendiri dibutuhkan waktu relatif lebih lama. Nah untuk menjawab kebingungan sobat sekalian, saya akan sedikit berbagi mengenai situs penyedia animasi terlengkap dan tidak lupa cara pemasangannya.

Penasaran langsung saja kita EKSEKUSI!!!

1. Login ke Dasbor Blogger anda
2. Masuk ke Tata Letak
3. Pilih Tambahkan Gadget
4. Dan pilih Html/javascript
5. Lalu Copas sintaks dibawah ini:

<div style="position: fixed; top: 0px; padding: 5; left: 10px;width:130px;height:160px;"><a href="http:/http://menunavigasimargop.blogspot.co.id/" target="_blank"><img border="0" src="http://www.gambaranimasi.org/data/media/346/animasi-bergerak-senapan-dan-pistol-0020.gif" /></a></div>

6. Sintaks berwarna merah ganti dengan alamat animasi yang sobat pilih di situs KUMPULAN RIBUAN ANIMASI LENGKAP berikut.
7. Aturlah posisi animasi sobat dengan mengubah sintaks biru dan orange
8. Langkah terakhir Klik simpan setelan & lihat hasilnya

Bagi sobat penasaran dengan animasinya  bisa dilihat dibawah ini

Hamster

http://www.gambaranimasi.org/data/media/517/animasi-bergerak-hamster-0009.gif

Naruto Animation

http://www.gambaranimasi.org/data/media/582/animasi-bergerak-naruto-0273.gif

Terjun Payung


http://www.gambaranimasi.org/data/media/487/animasi-bergerak-parasut-0002.gif

Police

http://www.gambaranimasi.org/data/media/114/animasi-bergerak-polisi-0019.gif

Soccer

http://www.gambaranimasi.org/data/media/165/animasi-bergerak-sepak-bola-0004.gif

Semoga Bermanfaat Sob Salam Blogger Indonesia hehe!

read more “Cara Memasang Animasi Lengkap Keren”

Cara Membuat Tombol Hide Show Pada Blog

Cara Membuat Tombol Hide Show Pada Blog - Mungkin masih ada diantara kita yang belum tahu apa itu tombol hide show. Jika dilihat dari makna katanya kita bisa menerka apa sebenarnya kegunaan tombol ini. Seperti yang kita ketahui Hide merupakan bahasa inggris yang memiliki makna menyembunyikan dan Show bermakna menampilkan.

   Bisa disimpulkan tombol ini berfungsi untuk menyembunyikan sesuatu sebelum kita berniat untuk menampilkannya, yaa begitulah kira-kira. Jangan gunakan istilah tombol hide show apabila anda bergaul dengan teman-teman blogger yang lain sebab tombol ini lebih dikenal dengan sebutan Spoiler.

    Saya menggunakan istilah ini agar mudah dipahami oleh sobat-sobat sekalian saja. Lanjut ke topik, Apa untungnya memasang tombol ini? keuntungannya adalah anda bisa menghemat ruang pada blog anda dan bisa mengoptimalkan ruang tersebut dengan hal yang lebih berguna dan lebih penting menurut anda. Untuk lebih jelasnya anda bisa melihatnya dibawah paragraf ini.

Coba di Klik

Isi hal apapun disini sesuai kebutuhan anda

• Button Hide Show

1. Login ke akun Dasbor Blogger anda.

2. Masuk ke Laman Entri.

3. Letakkan kode berikut didalamnya.

<div> <div style="margin-bottom: 2px;"> <i><b><small>Coba di Klik</small></b></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px;font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'show'; }" type="button"></div> <div style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> ISI HAL APAPAUN DISINI SESUAI KEBUTUHAN ANDA </div> </div> </div>

4. Klik Simpan dan lihat hasilnya.

Note:

• Tidak ada ketentuan khusus mengenai pemasangannya karena Script di atas bersifat fleksibel, anda bisa meletakkannya dimanapun anda inginkan.

                                                       "SEMOGA BERMANFAAT"

---

read more “Cara Membuat Tombol Hide Show Pada Blog”

Cara Membuat Tombol Back To Top

Cara Membuat Tombol Back To Top - Sebelum anda mengunjungi blog ini saya yakin anda sudah tahu apa itu tombol back to top beserta fungsinya. Untuk sekedar mengingatkan saja, saya akan tetap menjelaskannya dari awal. Siapa tahu hal tersebut bisa menjadi informasi baru bagi anda yang belum mengetahuinya sama sekali. Baiklah, tombol Back To Top merupakan tombol yang berguna untuk mempercepat scroll blog anda dari bawah menuju ke atas.

   Tombol ini sangat memudahkan pengunjung blog anda yang ingin kembali ke bagian atas blog tanpa harus menggunakan scroll. Anda mencari tombol semacam ini mungkin karena laman blog anda yang terlalu panjang dan hal ini akan menyulitkan petualangan pengunjung anda. Posisi tombol ini terdapat pada samping pojok kanan bawah postingan. Oke saya rasa cukup informasi dan basa-basinya langsung saja kita aplikasikan ke blog anda.

• Back To Top Button

1. Login ke akun Dasbor Blogger anda.

2. Masuk ke Laman Edit Template.

3. Cari kode </body> lalu letakkan kode dibawah ini tepat diatasnya.

<script type='text/javascript'/> <!-- Back to top designed by MargopBlog - Margopblog.blogspot.com --> <a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwrRgpPC-mGufu52Bd6GR7Pjw0FpdsRijHAy8FbP9r2PjSpyGrDc3_STMuW5WJF6RTyQUVjfCPcmiSYY3hmIcrcvGMTu9XlB5rLTZGR4_dDTm6s3sulxyuqvX8q4RZOlSCZ_4T17LH9mQ/s1600/backtotop.png'/></a>

4. Simpan setelan dan lihat hasilnya.

Note:

•  Pasang kode dibawah ini tepat diatas kode sebelumnya jika di template anda belum menyediakan kode seperti berikut. 

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

Jika anda mengalami "syndrome" ketika mengotak-atik template anda hehe, anda bisa mencoba alternatif yang kedua. Berikut langkah-langkahnya:

1. Saya anggap anda telah masuk ke Dasbor anda.
2. Pilih laman Tata Letak.
3. Tambahkan widget "Add Gadget".
4. Klik HTML/Javascript.
5. Letakkan kode berikut.

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Scroll/Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwrRgpPC-mGufu52Bd6GR7Pjw0FpdsRijHAy8FbP9r2PjSpyGrDc3_STMuW5WJF6RTyQUVjfCPcmiSYY3hmIcrcvGMTu9XlB5rLTZGR4_dDTm6s3sulxyuqvX8q4RZOlSCZ_4T17LH9mQ/s1600/backtotop.png" /></a>

Jika terjadi kendala bisa anda sampaikan di kolom komentar mudah-mudahan saya bisa membantu.

Selamat berkarya ya.!

                                                       "SEMOGA BERMANFAAT"

---

read more “Cara Membuat Tombol Back To Top”

Cara Membuat Widget share Sosmed Bentuk Telur Pada Blog

Cara Membuat Widget Sosmed Bentuk Telur Pada Blog - Pada kesempatan ini, MargopBlog kembali memposting mengenai widget share sosial media pada blog. Widget ini tidak kalah menariknya dengan widget share sosial media yang lain sebab bentuknya yang terbilang unik dan eksklusif yakni berbentuk telur. Dengan bentuknya yang unik akan membuat pengunjung anda tertarik untuk mengklik tombol ini.

    Berbeda dengan telur kebanyakan, telur yang satu ini mudah pecah hanya dengan satu sentuhan kecil melalui cursor anda. Ketika pecah, telur tersebut mengeluarkan seluruh isi didalamnya, Apa saja isi didalamnya? Isinya berupa beberapa icon share lengkap seperti: Twitter, Facebook, Google +, Linkedln, dan Stumble Upon. Anda tertarik? jika iya langsung saja kita pasang sekarang.

• Egg Bookmarking Gadget

1. Login ke Akun Dasbor Blogger anda.

2. Masuk ke Laman Edit Template.

3. Cari kode </head>

4. Letakkan kode berikut tepat diatas kode tersebut.

<!-- Start egg share code/ --><script src='https://sites.google.com/site/jquerymargop/jquery-js/nauval.js?attredirects=0&d=1' type='text/javascript'/><script src='https://sites.google.com/site/jquerymargop/jquery-js/margopjs.js?attredirects=0&d=1' type='text/javascript'/><script type='text/javascript'>;</script><link href='https://sites.google.com/site/jquerymargop/jquery-js/bloging.css?attredirects=0&d=1' media='screen' rel='stylesheet' type='text/css'/><!-- End egg share code/ -->

5. Langkah selanjutnya cari kode </body>
6. Letakkan kode dibawah ini tepat diatasnya.

<!-- Start egg share code/ --><div style='position: fixed; bottom: 2%;left: 2% ;'> <div class='shareEgg' id='shareThisShareEgg'/> </div> <script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareEgg',{title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareegg'});</script><a href='http://www.margopblog.com/'>Blogger Wordpress Gadgets</a><!-- End egg Share code/ -->

7. Simpan dan lihat hasilnya.

Note:

•  Script diatas direkomendasikan untuk wordpress.

                                                       "SEMOGA BERMANFAAT"

---

read more “Cara Membuat Widget share Sosmed Bentuk Telur Pada Blog”

Cara Memasang Widget Translator Pada Blog

Cara Memasang Widget Translator - Apakah anda yakin pengunjung blog anda hanya berasal dari Indonesia? Kita sadar pengguna internet tidak hanya dari negara sendiri melainkan seluruh dunia. Untuk itu diperlukan widget translator ini terlebih lagi blog yang anda tulis dibawakan dalam bahasa inggris. Mungkin anda tidak pernah memasang target agar blog anda dibaca juga oleh orang asing tapi dengan dipasangnya widget ini, itu artinya kita telah membuka peluang mereka orang diluar negeri untuk melihat karya kita di Indonesia. Nah, agar peluang tersebut tercapai saya akan membantu anda bagaimana cara memasang widget translator pada blog anda, widget ini memuat banyak bahasa di seluruh dunia. Baiklah langsung saja kita pasang sekarang.

• Widget Translator

1. Login ke akun Dasbor Blogger anda.

2. Masuk ke Laman Tata Letak.

3. Pilih Tambahkan Widget "Add Gadget".

4. Klik HTML/Javascript.

5. Letakkan kode berikut didalamnya.

<!-- Begin TranslateThis Button --> <br /> <div id="translate-this"> <a class="translate-this-button" href="http://www.translatecompany.com/translate-this/" style="display: block; height: 18px; width: 180px;">Translate</a></div> <script src="//x.translateth.is/translate-this.js" type="text/javascript"></script><script type="text/javascript">TranslateThis();</script> <!-- End TranslateThis Button -->

6. Simpan setelan Tata Letak anda dan lihat hasilnya.

Itulah beberapa langkah singkat mengenai Cara Memasang Widget Translate pada blog, terima kasih atas kunjungan anda. Jika ada kendala silahkan sampaikan pada kolom komentar mudah-mudahan saya bisa membantu.

                                                       "SEMOGA BERMANFAAT"

---

read more “Cara Memasang Widget Translator Pada Blog”

Tutorial Widget MargopBlog

read more “Tutorial Widget MargopBlog”