Monday, May 27, 2013

Cara Mengambil Screenshot Seluruh Halaman Website

Tombol Print Screen System
OK, info baru nih bagi yang belum tau sih. Bagi teman-teman Blogger professional pasti sudah tidak asing lagi deh, saya percaya.
Baru saya sadari ketika saya membutuhkan screenshot dari seluruh halaman web. Mengambil gambar hanya dari tampilan layar monitor saja tidak cukup, sedangkan gambar yang saya butuhkan harus sampai kebawah halaman, baru terpenuhi. Saya kira tidak akan bisa mengatasi masalah tersebut. Setelah saya cari cara dari internet ternyata bisa. Beginilah Cara Mengambil Screenshot Seluruh Halaman Website.
Mungkin sobat semua sudah pernah menggunakan fasilitas Print Screen System menggunkan tombol seperti gambar diatas. Tombol ini berfungsi untuk mengambil screenshot pada gambar yang ditampilkan monitor. Ini akan menghasilkan gambar yang hanya ditampilkan monitor. Bagaimana jika pada halaman web sobat membutuhkan screenshot pada seluruh halaman hingga ke bagian paling bawah? Tidak usah bingung, caranya sederhana sekali. Hanya menggunakan Add On pada browser yang sobat gunakan. Saya hanya akan mencontohkan beberapa Add On dari Firefox dan Chrome, diantaranya:

1. Abduction for Firefox
2. Awesome Screenshot Capture for Firefox
3. Fireshot for Firefox
4. Awesome Screenshot Capture for Chrome
5. Webpage Webcam Screenshot
6. Screen Capture for Chrome
#Silakan klik Add On yang sobat inginkan.

Saya akan menjelaskan cara penggunaan Add on pada point pertama saja, yaitu Abduction for Firefox.
Abduction For Firefox

Setelah sobat menginstalkan Abduction, ketika sobat klik kanan akan ada tambahan opsi "Save Page As Image" klik opsi tersebut.
Cara Mengambil Screenshot Seluruh Halaman Website
Akan muncul pop up di bagian sudut kanan atas. Diantaranya X-Ray untuk seleksi otomatis, Select All untuk seleksi seluruh halaman, Save Selection untuk menyimpan gambar hasil seleksi.
Cara Mengambil Screenshot Seluruh Halaman Website
Seleksi dapat dilakukan secara manual agar screenshot dapat sobat ambil sesuai keinginan. Perhatikan gambar dibawah ini.
Cara Mengambil Screenshot Seluruh Halaman Website
OK sobat gampang kan? Semoga bermanfaat...

Download Revo Uninstaller Pro v3.0.5 + Patch

Revo Uninstaller Pro v3.2.0
Sore tadi saya mengalami kesulitan dalam uninstal software. Lalu masalah tersebut terpecahkan oleh software satu ini yang selanjutnya akan saya share dalam artikel Download Revo Uninstaller Pro v3.0.5 + Patch. Revo Uninstaller ini efektif dalam melakukan uninstal program. Hingga program yang sulit di-uninstal dengan cara biasa pun dapat di-uninstal dengan bersih oleh Revo Uninstaller.
Sore tadi saya menginstal suatu software yang berkapasitas cukup besar. Namun di tengah proses instalasi tiba-tiba berhenti dan akhirnya gagal. Masalahnya ada sebagian dari software yang berhasil terinstal. Tetapi karena hanya sebagian, file tersebut pun menjadi tidak berfungsi sama sekali. Maka saya sadari terdapat junk file (file tidak berfungsi) pada PC saya. Cara biasa tidak bisa menghapus/meng-uninstal program tersebut. Hingga saya temukan Revo Uninstaller dan akhirnya program tersebut dapat di-uninstal dengan bersih.

OK, jika sobat ada yang mengalami masalah seperti saya, silakan coba Software ini.
Setelah sobat menginstal software ini, jalankanlah patchnya. Klik "patch", pilih jenis SO sobat (x64 or x86), masukan file Revo Uninstaller, masukan nama, dan proses patching dimulai.
Patching Revo Uninstaller Pro v3.2.0
OK, setelah patching selesai maka Revo Uninstaller nya sudah aktif full version.

Sekian saja pembahasan kali ini, maaf tidak menyertakan tutorial cara penggunaanya secara detail.
Jika sobat ingin software ini, silakan download pada link di bawah ini.

DOWNLOAD

Saturday, May 25, 2013

Cara Membuat Widget Melayang di Blog

Cara Membuat Widget Melayang di Blog
Selamat siang, apa kabar sobat Blogger? Rasanya sudah lama saya tidak membuat posting baru. Kalian ingat posting beberapa waktu lalu tentang widget like box facebook melayang dan widget follow me twitter melayang? Ternyata Widget melayang tersebut bisa memuat widget lainya, tentunya widget dengan kode HTML. Dan bisa memuat lebih dari satu widget. Oleh karena itu kali ini saya akan membahas tentang Cara Membuat Widget Melayang di Blog.
Apa sih maksudnya widget ini dapat memuat lebih dari satu widget Contohnya saya memasang tiga buah widget pada widget melayang ini, yaitu Tombol Google Plus One, Tombol Follow Me Twitter, dan Like Box Facebook. Contoh hasilnya seperti gambar berikut.
Cara Membuat Widget Melayang di Blog
Widget ini akan muncul secara melayang dari bawah sebelum halaman pada Blog sobat belum seluruhnya dimuat. Widget ini memiliki tombol close di sudut kanan atas untuk pengunjung jika ingin menutup widet.
Bagaimana, sobat tertarik untuk memasang widget ini? Berikut langkah-langkahnya.

1. Login ke akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik Tambahkan Gadget di posisi manapun, karena hasilnya akan tetap melayang.
4. Pilih mode HTML/Javascript.
5. Masukan kode HTML berikut ini dan Editlah.

<!-- WD melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
      position:fixed !important;
      position:absolute; /* IE6 */
      bottom:-1000px;
      right:38%;
      margin:0px 0px 0px -182px;
      width:300px;
      height:auto;
      padding:16px;
       -webkit-box-shadow: 0px 0px 7px #222;
      -moz-box-shadow: 0px 0px 7px #222;
      box-shadow: 0px 0px 7px #222;  background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
      color:#111;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;}
    #kotak-facebook a.close {
      position:absolute;
      top:-10px;
      right:-10px;
      background:#333;
      font:bold 16px Arial,Sans-Serif;
      text-decoration:none;
      line-height:22px;
      width:22px;
      text-align:center;
      color:#fff;
      border:2px solid #fff;
      -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
      -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
      box-shadow:0px 1px 2px rgba(0,0,0,0.4);
      -webkit-border-radius:10px;
      -moz-border-radius:10px;
      border-radius:10px;
      cursor:pointer;
    }
</style>
    <script type='text/javascript'>
    $(window).bind("load", function() {
         // animasikan nilai top saat halaman telah selesai dimuat
         $('#kotak-facebook').animate({bottom:"50px"}, 1000);
        // hilangkan kotak pesan saat tombol (x) di klik
         $('a.close').click(function() {
             $(this).parent().fadeOut();
         return false;
         });
    });
    </script>
    <div id='kotak-facebook'>
<p style=" margin-right:10px;  font-size:15px; color:#000000;">Rekomendasikan, Follow, dan Like yah Sobat.</p>
<!-- Mulai --!>

<center><h2 class=”title”>Judul Widget 1</h2></center>
---- Kode HTML Widget 1 ----

<center><h2 class=”title”>Judul Widget 2</h2></center>
---- Kode HTML Widget 2 ----

<center><h2 class=”title”>Judul Widget 3</h2></center>
---- Kode HTML Widget 3 ----

<!-- Selesai --!><a class='close' href='#'>&times;</a>
<p style=" float:right;  margin-right:35px;  font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://regibrader-free.blogspot.com/search/label/Widget%20Blogspot">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://regibrader-free.blogspot.com/2013/05/cara-membuat-widget-melayang-di-blog.html">Get This Widget</a></p>
    </div>

Masukan Judul Widget pada tulisan warna biru dan kode HTML Widget pada tulisan berwarna merah. Jumlah widget dapat ditambah atau dikurangi.
Untuk tulisan berwarna hijau adalah pesan-pesan pada widget yang dapat sobat ubah.
Ukuran tinggi widget tidak jadi masalah, karena akan menyesuaikan ketika bertambahnya jumlah widget yang dimuat.
Sobat perhatikan posisi widget dan lebar widget pada kode berwarna ungu.
#Pada gambar diatas saya contohkan widget-widget yang dimuat berdampingan secara vertikal. Nah, jika sobat ingin membuatnya berdampingan secara horizontal, sobat hanya perlu menambah lebar widget sekiranya dapat memuat lebih dari satu widget.

6. Setelah sobat selesai mengedit, klik Simpan.

Selesai, semoga sobat tidak pusing dengan penjelasan dari saya dan semoga berhasil.

Wednesday, May 22, 2013

Cara Mambuat Widget Google +1 di Blog

Google +1
Selamat malam sobat Blogger, saya akan beritahu hal yang bisa membuat kualitas dan SEO Blog sobat menjadi semakin baik. Yaitu dengan banyaknya pengguna internet yang merekomendasikan Blog sobat ke Google. Bagaimana pengguna internet merekomendasikan Blog kita? Salah satu medianya adalah Google +1, sehingga kali ini saya akan membahas tentang Cara Mambuat Widget Google +1 di Blog.
Namun tetap saja cara yang paling utama agar Blog sobat memiliki kualitas yang baik, selain memuat konten-konten yang bermanfaat dan bermutu adalah teroptimasi oleh search engine. Silakan baca Cara-cara SEO Website. Rekomendasi dengan Google +1 ini sebagai tambahan saja. Dengan banyaknya pengguna internet yang merekomendasikan Blog sobat, maka Blog sobat akan diperhitungkan oleh search engine.

OK, cara membuatnya gampang kok sob, silakan simak:
Seperti biasa Login dulu ke akun Blogger sobat. Lalu masuk ke bagian Tata Letak. Klik Tambahkan Gadget di posisi yang sobat inginkan.
Ada dua cara nih sob.
  • Cara biasa:
Cara ini gampang, sobat tinggal pilih "Tombol +1", lalu atur tampilanya. Setelah selesai, Klik Simpan.
Cara Mambuat Widget Google +1 di Blog

Cara Mambuat Widget Google +1 di Blog
  • Dengan Mode HTML/Javascript:
Mungkin ada sobat Blogger yang ingin memasang widget Google +1 ini dengan agak berbeda. Misalnya ingin dipasang secara digabungkan dengan widget lain. Jadi pada satu lapak widget memuat beberapa widget yang berbeda. Tentunya cara biasa tidak akan berlaku yah sobat. Nah, sobat bisa memasang widget ini dengan mode HTML.
Ketikan memilih widget, tentunya sobat pilih mode HTML/Javascript.
Widget HTML/Javascript
Lalu sobat masukan kode HTML berikut ini.

<g:plusone size="tall" annotation="inline" width="300" href="http://regibrader-free.blogspot.com"></g:plusone>

Kode berwarna ungu bisa sobat ubah dengan jenis tampilan yang sobat inginkan, diantaranya:

Inline Untuk tampilan Baloon, sobat hapus kode annotation="inline" None

Sobat ubah kode berwarna merah dengan URL Blog/Website sobat, dan kode berwarna merah muda dengan lebar widget yang sobat inginkan. Untuk kode berwarna biru yang akan merubah jenis ukuran widget. Berikut kode-kode dan jenis ukuran yang akan dihasilkan.
Setelah diatur, maka klik Simpan. OK Selesai deh..

Tuesday, May 21, 2013

Free Download Format Factory v2.96

Format Factory
Selamat petang sobat Blogger. Semoga kalian semua selalu dalam keadaan bahagia, hehe. Kali ini saya akan share artikel software tentang Free Download Format Factory v2.96. Ada yang tau apa sih software Format Factory ini?
Format Factory adalah software untuk konfersi/mengubah format file jenis video, audio, picture. Format Factory juga dapat digunakan untuk mengubah DVD/CD ke format ISO.
Contoh sederhana yang saya alami tentang kegunaan software ini. Ketika saya mempunyai video yang berformat avi, saya ingin menyimpan video tersebut di Handphone agar dapat dilihat kapan pun. Namun HP saya ini hanya dapat membaca video yang berformat 3gp. Saya pun kebingungan, tetapi akhirnya dapat terpecahkan dengan software ini yang dapat mengubah format avi ke 3gp.
Penggunaanya pun mudah sobat. Contohnya sobat akan mengubah video ke format 3gp. Setelah sobat masuk pada software Format Factory, langsung saja sobat klik "All to 3gp".
Format Factory v2.96
Lalu sobat klik "Add File" dan pilih file yang akan sobat ubah formatnya. Setelah sobat memilih file yang akan dikonfersi, klik OK.
Format Factory v2.96
Setelah itu, sobat klik "KLIK TO START" untuk memulai konfersi. Maka proses konfersi format file pun telah diproses.
Format Factory v2.96

Format Factory v2.96
Setelah proses selesai, file yang di konfersi tidak akan terhapus, jadi jangan khawatir. File hasil konfersi biasanya tersimpan pada folder Documents>>FFOutput.
Lebih hebatnya lagi ini software free, bebas Licensi.
Bagaimana, sobat tertarik? Silakan link Download nya ada di bawah ini.

DOWNLOAD

Saturday, May 18, 2013

Download Power ISO v5.1 + Registration Key

Power ISO
Berbagi software Power ISO nih sobat. Menurut Wkipedia, PowerISO adalah perangkat lunak yang digunakan untuk memroses berkas gambar (file images) pada CD / DVD, sehingga dengan PowerISO memungkinkan pengguna (user) untuk membuka, mengekstrak, membuat, menyunting (edit), mengompres, mengenkripsi, memecah dan mengkonversi berkas-berkas (file-file) ISO (format berkas), serta me-mount berkas-berkas dengan virtual drive internal. Hal ini dapat memproses hampir semua berkas gambar CD-ROM termasuk ISO dan BIN (format berkas)
Fungsi Power ISO yang saya sukai adalah Me-mount berkas-berkas dengan virtual drive internal. Jadi sederhanya asalkan sobat mempunyai file yang berformat Iso langsung dapat dibaca dengan virtual drive internal. Seperti ketika CD/DVD Drive dibaca oleh CD/DVD ROM.
Mount Power ISO

Power Iso ini perlu diregistrasi untuk aktivasi full version. Saya sudah menyertakan registration key-nya pada file rar yang nantinya sobat download.
Untuk Registrasi/Aktivasinya:
Setelah sobat instal Power ISO, sobat buka Power ISO. Akan terbuka keterangan bahwa Power Iso belum teregristasi. Maka klik "enter registration code"
Registrasi Power ISO

Lalu sobat masukan username dan registration key yang telah saya sediakan.
Registrasi Power ISO

Dan Power Iso telah teregristasi dan aktiv full..
Registrasi Power ISO

Download Power ISO v5.1 + Registration Key

Cara Membuat Widget Recent Comment di Blog

Cara Membuat Widget Recent Comment di Blog
OK sobat blogger, saya akan mulai membuat posting lagi. Setelah beberapa hari kurang sehat menyebabkan semangat Blogging saya menurun, hehe. Kali ini saya akan bagikan saja Cara Membuat Widget Recent Comment di Blog. Mungkin sobat sudah tidak asing lagi dengan widget ini. Widget Recent Comment ini menampilkan komentar terbaru dari konten-konten pada Blog sobat. Widget ini dilengkapi dengan tampilan foto profil pemberi komentar dan tentunya menampilkan kata-kata dalam komentar.
Keuntungan dari widget ini, mungkin jika sobat tidak mengaktifkan moderasi komentar, sobat bisa mengetahui komentar-komentar yang masuk pada konten Blog sobat. Sehingga sobat bisa mengontrol komentar tersebut apakah perlu balasan atau perlu dihapus (karena dianggap spammy).

OK, sobat yang tertarik dengan widget ini, berikut Cara Membuat Widget Recent Comment di Blog:
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik Tambahkan Gadget di posisi yang sobat inginkan.
4. Pilih mode HTML/Javascrpt.
5. Masukan kode berikut.

<div style="overflow:auto;width:auto;height:378px;border:1px solid #ccc; padding:10px; margin:0 auto;background:#fff;"> <style type="text/css"> ul.w2b_recent_comments{list-style:none;margin:0;padding:0;} .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;} .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;} .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;} </style>
<script type="text/javascript">
 //<![CDATA[
 // Recent Comments Settings
var
numComments = 10,
showAvatar     = true,
 avatarSize      = 35,
 roundAvatar   = true,
characters       = 250,
defaultAvatar  = "",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src=" http://rizaldipriantamascript.googlecode.com/files/Recent_Comments_.js "></script> <script type="text/javascript" src="http://regibrader-free.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=100"></script></div>

-Ubah URL berwarna merah dengan URL Blog sobat.
-Ubah kode berwarna biru dengan ukura tinggi widget yang diinginkan.
-Atur jumlah komentar yang ingin ditampilkan pada kode berwarna ungu.
-Atur jumlah maksimal karakter pada komentar sesuai keinginan.
#Kode diatas juga memuat kode-kode ukuran lain, kode-kode warna seperti warna background yang bisa sobat edit kembali.

6. Jika telah selesai, klik Simpan dan silakan lihat hasilnya.

Sunday, May 12, 2013

Cara Membuat Widget Follow Me Box Twitter Melayang di Blog

Cara Membuat Widget Follow Me Box Twitter Melayang di Blog
OK buat para sobat Blogger yang mempunyai Twitter yang berisikan konten-konten pada Blog-nya. Posting ini adalah salah satu solusi untuk menambah Follower pada Twitter tersebut, yaitu Widget Follow Me Box Twitter Melayang di Blog beserta Cara Membuatnya.
Widget ini memungkinkan pengunjung Blog sobat lebih tertarik untuk menjadi follower pada Twitter sobat. Karena sebelum seluruh halaman Blog sobat berhasil dimuat akan muncul Widget ini dengan melayang. Jadi serasa memberi kesan "Follow Dulu Sebelum Membaca Artikel", kurang lebih begitulah. Pengunjung diberi pilihan apakah akan meng-klik follow atau malah meng-klik close pada widget ini. Jadi sebenarnya tetap sebagian pengunjung akan menilai dahulu kualitas Blog sobat, apakah layak untuk di-follow atau tidak. Dengan demikian sobat jangan terpaku pada widget ini untuk menambah follower. Tetaplah senjata paling ampuh agar pengunjung Blog menyukai Blog sobat adalah konten-konten yang bermanfaat dan berkualitas. Jadi, sobat tetap harus meningkatkan kualitas Blog, OK.

Yap, bagi sobat yang tertarik untuk memasang widget ini, Inilah Cara Membuat Widget Follow Me Box Twitter Melayang di Blog:
1. Login pada akun Blogger sobat.
2. Masuklah pada bagian Tata Letak.
3. Klik Tambahkan Gadget di posisi yang sobat inginkan.
4. Pilih mode HTML/Javascript.
5. Masukan kode HTML berikut:

<!-- TW melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
      position:fixed !important;
      position:absolute; /* IE6 */
      bottom:-1000px;
      right:38%;
      margin:0px 0px 0px -182px;
      width:290px;
      height:auto;
      padding:16px;
       -webkit-box-shadow: 0px 0px 7px #222;
      -moz-box-shadow: 0px 0px 7px #222;
      box-shadow: 0px 0px 7px #222;  background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
      color:#111;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;}
    #kotak-facebook a.close {
      position:absolute;
      top:-10px;
      right:-10px;
      background:#333;
      font:bold 16px Arial,Sans-Serif;
      text-decoration:none;
      line-height:22px;
      width:22px;
      text-align:center;
      color:#fff;
      border:2px solid #fff;
      -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
      -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
      box-shadow:0px 1px 2px rgba(0,0,0,0.4);
      -webkit-border-radius:10px;
      -moz-border-radius:10px;
      border-radius:10px;
      cursor:pointer;
    }
</style>
    <script type='text/javascript'>
    $(window).bind("load", function() {
         // animasikan nilai top saat halaman telah selesai dimuat
         $('#kotak-facebook').animate({bottom:"50px"}, 1000);
        // hilangkan kotak pesan saat tombol (x) di klik
         $('a.close').click(function() {
             $(this).parent().fadeOut();
         return false;
         });
    });
    </script>
    <div id='kotak-facebook'>
<p style=" margin-right:10px;  font-size:15px; color:#000000;">Twit dari Bader Blog. Please <blink>Follow Me !!!</blink> </p>
<!-- Mulai --!>

---Masukan Script Widget Follow Me Box Disini---

<!-- Selesai --!><a class='close' href='#'>&times;</a>
<p style=" float:right;  margin-right:35px;  font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://regibrader-free.blogspot.com/search/label/Widget%20Blogspot">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://regibrader-free.blogspot.com/2013/05/cara-membuat-widget-follow-me-box_12.html">Get This Widget</a></p>
    </div>

#Terdapat banyak kode-kode ukuran dan warna yang bisa sobat ubah. Namun walaupun tidak diubah, Widget ini sudah diatur sedemikian rupa.
Ubah tulisan warna biru dengan pesan-pesan yang sobat sukai.
6. Masukan script Widget Follow Me Box pada tulisan berwarna merah. Jika sobat belum mempunyai scriptnya, silakan kunjungi Halaman Ini untuk mendaptkanya.
7. Klik Simpan. Maka Insaaloh hasilnya akan seoerti ini.
Cara Membuat Widget Follow Me Box Twitter Melayang di Blog
Demikanlah pembahasan ini, semoga berhasil dan sobat Blogger menyukainya.

Saturday, May 11, 2013

Cara Membuat Widget Follow Me Box Twitter di Blog

Cara Membuat Widget Follow Me Box Twitter di Blog
Masih tentang widget Twitter di Blog nih sobat. Mumpung waktu luangnya lumayan, saya gunakan untuk buat posting. Kali ini saya akan membahas Cara Membuat Widget Follow Me Box Twitter di Blog.
Berbeda dengan Widget Burung Twitter terbang atau Tombol Follow Me Twitter, Widget Follow Me Box Twitter ini menampilkan tombol follow, beberapa foto follower, jumlah follower, dan foto pada akun Twitter.
Untuk lebih jelasnya lihat gambar disamping. Itulah screenshot Widget yang akan kita buat kali ini. Hampir mirip yah dengan Widget Like Box Facebook yah.
Apakah meurut sobat widget ini menarik? Jika sobat tertarik dengan widget ini, simaklah cara-cara membuatnya:
1. Login pada akun Blogger sobat.
2. Masuk padaa bagian Tata Letak.
3. Klik Tambahkan Gadget di posisi yang sobat inginkan.
4. Pilih mode HTML/Javascript.
5. Masukan kode berikut.

<iframe name="fbfanIFrame_0" allowtransparency="true" src="http://s.moopz.com/connect.html?user=Regy_Brader" class="FB_SERVER_IFRAME" style="width: 290px; height: 250px; border-style: none;" frameborder="0" scrolling="no"></iframe><script type="text/javascript">fanbox_init("Regy_Brader");</script>

#Ubahlah kode warna merah dengan ID Twitter sobat. Tentukan ukuran widget pada kode warna Biru.

6. Klik Simpan, dan Selesai

Cara Membuat Widget Burung Twitter Terbang di Blog

Cara Membuat Widget Burung Twitter Terbang di Blog
Kemarin saya membuat posting tentang Cara Membuat Tombol Follow Me Twitter di Blog. Telah saya jelaskan sebelumnya kegunaan tombol tersebut kan?. Kali ini saya akan membahas mengenai Cara Membuat Widget Burung Twitter Terbang di Blog. Fungsinya sama, yaitu untuk mempermudah pengunjung Blog sobat  melakukan follow pada Twitter sobat yang tentunya memuat konten-konten pada Blog sobat.
Yang membedakan widget ini dengan tombol follow me adalah tampilanya. Widget ini jelas lebih menarik dengan menampilkan burung yang terbang dan selalu mengikuti jika halaman pada layar monitor digulir. Jika pengunjung meng-klik burung ini tentunya ia akan menjadi follower Twittter sobat.

OK, jika sobat ingin memasang widget ini, berikut langkah-langkahnya:
1. Masuk pada akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik Tambahkan Gadget di posisi mana saja,hasilnya akan tetap menjadi burung terbang.
4. Pilih mode HTML/Javasript.
5. Masukan kode berikut ini.

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://tateluproject.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="http://2.bp.blogspot.com/-7doZyLsr9yI/TqNtUCClP4I/AAAAAAAAAF8/ld0bdD3WWj8/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Regy_Brader";
var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";
tripleflapInit();
</script>

#Untuk kode warna biru sobat ubah dengan ID Twitter sobat.
Nah, untuk kode warna merah sobat bisa ubah dengan berbagai URL jenis burung kesukaan sobat.
Saya telah menyediakan beberapa contohnya.

Cara Membuat Widget Burung Twitter Terbang di Blog http://3.bp.blogspot.com/-xL1Dk6Bhi4g/TqN5gbyvSCI/AAAAAAAAAGM/jxsjBiRWMLw/s1600/yellow+bird.png
Cara Membuat Widget Burung Twitter Terbang di Blog http://1.bp.blogspot.com/-N3RvHfV3MUk/TqN5iPPqAEI/AAAAAAAAAGU/oYKSvsOj108/s1600/black+bird.png
Cara Membuat Widget Burung Twitter Terbang di Blog http://3.bp.blogspot.com/-FNowQ1mqsLg/TqN5kxq86EI/AAAAAAAAAGc/VzatkjsUAEc/s1600/Blue+bird.png
Cara Membuat Widget Burung Twitter Terbang di Blog http://3.bp.blogspot.com/-b-9ncuDJxm0/TqN5nrOnTCI/AAAAAAAAAGk/LREurKp_tLc/s1600/brown+bird.png
Cara Membuat Widget Burung Twitter Terbang di Blog http://3.bp.blogspot.com/-SJP4OZmyeCU/TqN5qcyXgGI/AAAAAAAAAGs/jKQaqHF9EkA/s1600/Green+bird.png
Cara Membuat Widget Burung Twitter Terbang di Blog http://3.bp.blogspot.com/-Ec4JlrN6yc4/TqN5tIAXDpI/AAAAAAAAAG0/ywnjHeG4ASM/s1600/purple+bird.png
Cara Membuat Widget Burung Twitter Terbang di Blog http://1.bp.blogspot.com/-qsxd6A0vUFU/TqN5vZVI2-I/AAAAAAAAAG8/lb0Ol5Nbrvw/s1600/white+bird.png
Cara Membuat Widget Burung Twitter Terbang di Blog
http://1.bp.blogspot.com/-knGCnCFCahI/TqN59awa61I/AAAAAAAAAHE/mniE1h9IW14/s1600/red+bird.png

Kalau sobat tidak merubah URL-nya, maka hasilnya akan seperti berikut.

Cara Membuat Widget Burung Twitter Terbang di Blog Cara Membuat Widget Burung Twitter Terbang di Blog

6. OK, jika sobat telah selesai mengaturnya, klik Simpan. Selesai, lihat hasilnya.

Friday, May 10, 2013

Cara Membuat Tombol Follow Me Twitter di Blog

Cara Membuat Tombol Follow Me Twitter di Blog
Selamat sore sobat Blogger. Pada kesempatan kali ini saya akan berbagi tentang  Cara Membuat Tombol Follow Me Twitter di Blog. Apa sih kegunaan tombol ini untuk kita para Blogger. Sederhana sob, berguna sekali jika sobat suka share artikel-artikel pada Blog sobat ke Twitter. Lalu pengunjung Blog sobat meng-klik tombol ini dan otomatis menjadi follower Twitter sobat. Dengan demikian, pengunjung tadi akan mendapatkan informasi-informasi terupdate dari Blog sobat.
Banyak cara bagi para Blogger untuk membuat Blog-nya populer. Contohnya dengan sering share konten Blog-nya ke sosial media, seperti Google plus, Facebook dan Twitter. Berbeda dengan share di Facebook yang pada umunya membuat sebuah halaman khusus dahulu untuk media share. Silakan baca juga Cara Membuat Halaman Blog di Facebook. Twitter tidak menyediakan halaman khusus, jadi pastikan sobat mempunyai Twitter yang akan dijadikan media sharing konten pada Blog sobat.


OK, kita mulai saja membahas  Cara Membuat Tombol Follow Me Twitter di Blog:
1. Pastikan sobat telah masuk ke akun Twitter Sobat.
2. Kunjungi halaman ini.
3. Karena kita akan membuat tombol Follow Me, jadi pilihlah follow/ikuti.
Cara Membuat Tombol Follow Me Twitter di Blog
4. Isilah pilihan tombol sesuai dengan yang sobat inginkan. Hal ini tidak perlu dipandu yah, saya yakin kalian akan mengerti. Lalu salin semua kode script yang diberikan Twitter.
Cara Membuat Tombol Follow Me Twitter di Blog
Kode script di atas contoh hasilnya akan seperti ini:


Tombol diatas hanya menampilkan tombol follow me.

Untuk kode yang ini, selain menampilkan tombol follow me, juga menampilkan jumlah follower. Dan sobat hanya perlu mengkopi-paste kode berikut ini.
<a class="twitter-follow-button" data-lang="id" data-show-count="true" href="https://twitter.com/Regy_Brader">Ikuti @Regy_Brader</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

#Ubah kode berwarna merah dengan ID Twitter sobat. Hasilnya akan seperti berikut.


5. Sobat telah mendapatkan kode scriptnya. Pastekan kode tersebut pada elemen mana pun, seperti pada widget atau postingan.
Selesai sob, gampang kan? OK, semoga bermanfaat...

Thursday, May 9, 2013

Cara Membuat Widget Random Posts Keren di Blog

Cara Membuat Widget Random Posts Keren di Blog
Telah dijelaskan pada posting sebelumnya, Widget Random Posts ini adalah widget untuk menampilkan posting-posting pada Blog sobat secara acak dan berbeda pada setiap penayangannya. Namun kali ini saya akan berbagi tentang Cara Membuat Widget Random Posts Keren di Blog yang tentunya berbeda dalam hal tampilan dengan widget random posts yang sebelumnya.
Untuk tampilan pada widget random posts sebelumnya sangat minimalis, hanya menampilkan Title Posting saja. Namun untuk Widget yang akan kita bahas kali ini terlihat lebih menarik. Widget Random Posts ini selain menampilkan Title Posting, juga menampilkan Tumbnail (Gambar ukuran kecil), dan sedikit deskripsi posting.
OK, tidak perlu berlama-lama lagi. Sobat yang tertarik untuk memasang widget ini, beginilah Cara Membuat Widget Random Posts Keren di Blog:

1. Login ke akun Blogger sobat.
2. Masuk ke bagian Tata Letak pada Blog yang sobat inginkan.
3. Klik Tambahkan Gadget pada posisi yang sobat inginkan.
4. Pilih mode HTML/Javascript.
5. Masukan kode berikut.

<style>
.rp-post-link {
font-weight: bold !important;
font-size: 12px !important;
}
.rp-summary {
margin-bottom: 5px !important;
border-bottom: 1px dotted #686868;
font-size: 12px !important;
line-height: 20px !important;
word-wrap: break-word !important;
}
.rp-thumbnail {
margin: 5px 5px 2px 0px !important;
float: left !important;
width:60px;height:60px;
}
.rp-pubdate {
font-style: italic !important;
margin-bottom: 3px !important;
}
</style>
<script type="text/javascript">
var randarray = new Array();
var l=0;
var flag;
var lengthsummary = 120;
var numofpost=10;
function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0; i < numofpost;){
flag=0;
randarray.length=numofpost;
l=Math.floor(Math.random()*total);
for(j in randarray){
if(l==randarray[j]){
flag=1;
}
}
if(flag==0&&l!=0){
randarray[i++]=l;
}
}
document.write('<div>');
for(n in randarray){
var p=randarray[n];
var entry=json.feed.entry[p-1];
var item ="";
var posttitle = entry.title.$t || "[Untitled]";
"[Untitled]"
for(k=entry.link.length -1; k >= 0 ; k--){
if(entry.link[k].rel=='alternate'){
item +="<a class='rp-post-link' href='" + entry.link[k].href + "'>" + posttitle + "</a>";
break;
}
}
item += "<br"
item += "/>"

if('media$thumbnail' in entry)item += "<img class='rp-thumbnail' src='" + entry.media$thumbnail.url + "'>"
var summary = "";
if ("content" in entry) {
summary = entry.content.$t;
}
else if ("summary" in entry) {
summary = entry.summary.$t;
}
var re = /<\S[^>]*>/g;
summary = summary.replace(re, "");
item += "<p class='rp-summary'>" + summary.substring(0,lengthsummary) + " ...</p>";
document.write(item);
}
document.write('</div>');
}
</script>
<script src="http://regibrader-free.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript">
</script>

<small><a href="http://regibrader-free.blogspot.com/search/label/Widget%20Blog" target="_blank">Blogger Widget</a></small>
<small><a href="http://regibrader-free.blogspot.com/2013/05/cara-membuat-widget-random-posts-keren.html" target="_blank">Get This Widget</a></small>

#Ubahlah kode warna merah dengan URL Blog sobat. Tentukan jumlah posting yang akan ditampilkan pada kode warna biru. Dan kode berwarna ungu adalah jumlah huruf yang akan ditampilkan pada deskripsi posting pada widget.
Untuk tinggi widget bergantung kepada jumlah posting yang ditampilkan.

6. Setelah sobat selesai mengaturnya, klik Simpan dan Widget pun telah berhasil dipasang. Lihat hasilnya..

Tuesday, May 7, 2013

Cara Memasang Widget Random Posts di Blog

Cara Memasang Widget Random Posts di Blog
Sudah malam begini seharusnya saya sudah tidur. Namun karena susah tidur, lebih baik membuat posting saja  deh.
Kali ini saya akan membahas tentang Cara Memasang Widget Random Posts di Blog. Widget Random Posts ini tidak kalah penting dengan popular posts ataupun recent posts. Dimana Widget Random Posts ini menampilkan posting-posting pada Blog sobat secara acak dan berbeda pada setiap penayanganya. Sehingga posting-posting lama pada Blog sobat bisa ditampilkan kembali dengan Widget ini.
Dengan bisa ditampilkanya posting lama tersebut, tentunya membuat posting itu tidak terlalu diabaikan. Namun widget ini tidak disertai Gambar dan Penjelasan Konten, hanya memuat link Judulnya saja. Sehingga bagi sebagian sobat Blogger mungkin menilainya kurang menarik. Tapi cocok sekali untuk para Blogger yang menyukai kesederhanaan widget. Jika sobat ingin Widget Random Posts yang lebih menarik, silakan kunjungi Cara Membuat Widget Random Posts Keren di Blog.

OK, sobat Blogger yang tertarik dengan widget ini silakan simak Cara Membuatnya:
1. Login ke akun Blogger sobat tentunya.
2. Masuk pada bagian Tata Letak.
3. Klik Tambah Gadget di posisi yang sobat inginkan.
4. Pilih mode HTML/Javascript.
5. Masukan kode berikut.

<div style="overflow:auto; width:auto; height:250px; padding:5px;border:px solid #000000; font-family:julee; font-size:15px; font-color:#0000FF;">
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ol>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ol>');}
</script>
<script src="http://regibrader-free.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
</div>

<small><a href="http://regibrader-free.blogspot.com/search/label/Widget%20Blog" target="_blank">Blogger Widget</a></small>
<small><a href="http://regibrader-free.blogspot.com/2013/05/cara-membuat-widget-recent-posts.html" target="_blank">Get This Widget</a></small>

#Ubahlah kode berwarna merah dengan URL Blog sobat. Pada kode diatas terdapat kode-kode ukuran dan warna yang bisa sobat ubah. Contohnya kode yang berwarna hijau adalah tinggi widget. Dan kode berwarna biru adalah jumlah posting yang akan ditampilkan pada widget.

6. Klik Simpan dan selesai. Lihat hasilnya.

Sunday, May 5, 2013

Cara Membuat Widget Recent Posts Bergerak di Blog

Cara Membuat Widget Recent Posts Bergerak di Blog
Oke para sobat Blogger. Tengah hari bolong begini enaknya minum es jeruk tambah bikin posting lagi kali ya, haha. Kali ini saya akan berbagi tentang Cara Membuat Widget Recent Posts Bergerak di Blog. Mungkin memang widget recent posts ini telah disediakan Blogspot yang dapat sobat pasang dengan mudah. Namun ada kelebihan dengan widget Recent Posts yang satu ini yang membuat para Blogger lebih memilih widget ini daripada dengan yang telah disediakan Blogspot.
Widget ini akan menampilkan posting-posting terbaru dari Blog sobat dengan jumlah tampilan yang telah disesuaikan. Kelihatan tambah bagus lagi karena widget ini bergerak dropdown ke bawah. Dan posting yang ditampilkan paling bawah akan kembali lagi ke paling atas. Begitu juga seterusnya.

OK, langsung saja berikut cara-caranya:

1. Login ke akun Blogger sobat.
2. Masuk pada bagian Tata letak.
3. Klik Tambahkan Gadget di posisi yang sobat inginkan.
4. Pilih mode HTML/Javascript.
5. Masukan kode berikut ini.

<style type="text/css">
    #rp_plus_img{height:377px;}
    #rp_plus_img li {height:60px;padding:5px;list-style:none;
    background-color:#ffffff;
    border:solid 1px #000000;}
    #rp_plus_img a{color:#00000;}
    #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
    text-align:justify;
    -moz-border-radius: 5px;}
    #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
 
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript">
</script>
<script type="text/javascript">
    var speed = 1500;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });
 
</script>
<ul id="rp_plus_img"><script>
    var numposts = 5;
    var numchars = 0;
 
</script>     <script src="http://regibrader-free.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script>     </ul>
<small><a href="http://regibrader-free.blogspot.com/search/label/Widget%20Blog" target="_blank">Blogger Widget</a></small>
<small><a href="http://regibrader-free.blogspot.com/2013/05/cara-membuat-widget-recent-posts.html" target="_blank">Get This Widget</a></small>

# Jumlah posting yang ditampilkan adalah 5 posts.
Ubah URL warna merah dengan URL Website/Blog sobat.
 Terdapat banyak kode ukuran dan kode warna yang dapat sobat ubah. Namun widget ini sudah saya sesuaikan dengan ukuran dan warna yang ideal. Jadi lebih baik jangan diubah, karena takut nantinya jadi berantakan.

6. Klik Simpan, selesai.

Saturday, May 4, 2013

Cara Memasang Widget Like Box Facebook Melayang di Blog

Cara Memasang Widget Like Box Facebook Melayang di Blog
Selamat sore sobat Blogger, bagaimana kabar kalian semua? Semoga dalam keadaan baik-baik saja. Dan semangat Blogging kita sebagai Blogger semakin meningkat OK.
Kali ini saya akan membahas Cara Memasang Widget Like Box Facebook Melayang di Blog. Widget ini dilengkapi dengan tombol close. Semoga dengan widget ini pengunjung pada Blog sobat akan tertarik untuk memberikan jempolnya pada halaman Blog sobat di Facebook dan Fan Page Blog sobat di Facebook pun semakin banyak.
Sebenarnya kita sebagai Blogger kurang baik untuk memasang widget ini. Karena widget-widget seperti ini akan mengganggu pengunjung. Ketika pengunjung sedang asyik membaca artikel, eh tiba-tiba muncul si widget ini, sungguh mengganggu kan?

Namun jika sobat tetap ingin memasang widget ini, silakan simak panduanya OK.

1. Pertama sobat wajib mempunyai Halaman Blog sobat di Facebook dan script Widget Like Box Facebok-nya. Silakan baca artikel tentang Cara Membuat Halaman Blog di Facebook dan Cara Membuat Widget Like Box Facebook di Blog untuk mendapatkan scriptnya.
2. Kalau sobat sudah mempunyai Halaman Blog sobat di Facebook dan telah mendapatkan script-nya, sobat bisa mulai memasang widget ini. Login ke akun Blogger sobat.
3.  Masuk pada bagian Tata Letak.
4. Klik Tambahkan Gadget di posisi mana saja tidak jadi masalah. Karena hasilnya tetap akan melayang di halaman Blog.
5. Pilih mode HTML/Javascript.
6. Masukan kode berikut.

<!-- FB melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
      position:fixed !important;
      position:absolute; /* IE6 */
      bottom:-1000px;
      right:40%;
      margin:0px 0px 0px -182px;
      width:310px;
      height:auto;
      padding:16px;
       -webkit-box-shadow: 0px 0px 7px #222;
      -moz-box-shadow: 0px 0px 7px #222;
      box-shadow: 0px 0px 7px #222;  background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
      color:#111;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;}
    #kotak-facebook a.close {
      position:absolute;
      top:-10px;
      right:-10px;
      background:#333;
      font:bold 16px Arial,Sans-Serif;
      text-decoration:none;
      line-height:22px;
      width:22px;
      text-align:center;
      color:#fff;
      border:2px solid #fff;
      -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
      -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
      box-shadow:0px 1px 2px rgba(0,0,0,0.4);
      -webkit-border-radius:10px;
      -moz-border-radius:10px;
      border-radius:10px;
      cursor:pointer;
    }
</style>
    <script type='text/javascript'>
    $(window).bind("load", function() {
         // animasikan nilai top saat halaman telah selesai dimuat
         $('#kotak-facebook').animate({bottom:"50px"}, 1000);
        // hilangkan kotak pesan saat tombol (x) di klik
         $('a.close').click(function() {
             $(this).parent().fadeOut();
         return false;
         });
    });
    </script>
    <div id='kotak-facebook'>
<p style=" margin-right:10px;  font-size:15px; color:#000000;">Please Bantu Saya,<blink> Like This !!!</blink> </p>
<!-- Mulai --!>

-----Letakan Script Widget Like Box Facebook disini-----

<!-- Selesai --!><a class='close' href='#'>&times;</a>
<p style=" float:right;  margin-right:35px;  font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://regibrader-free.blogspot.com/search/label/Widget%20Blogspot">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://regibrader-free.blogspot.com/2013/05/cara-memasang-widget-like-box-facebook.html">Get This Widget</a></p>
    </div>

#Masukan script Widget Like Box Facebook yang telah sobat dapatkan pada tulisan berwarna merah (hapus tulisan berwarna merah). Ubah tulisan berwarna biru dengan pesan-pesan pada widget yang sobat inginkan. Script di atas memuat kode-kode warna, ukuran dan posisi yang bisa sobat ubah sesuai keinginan. Namun tidak diubah pun sudah bagus, posisinya berada tepat ditengah halaman. Hasilnya akan terlihat seperti ini.

Cara Memasang Widget Like Box Facebook Melayang di Blog

7. Klik Simpan dan Selesai.