English French German Spain Italian Dutch
Loading...
Tampilkan postingan dengan label Widget Blogspot. Tampilkan semua postingan
Tampilkan postingan dengan label Widget Blogspot. Tampilkan semua postingan

Tekhnik Membuat Newsticker Berita Berjalan Untuk Blogger

Kamis, 17 Oktober 2013

Pernahkah anda mengunjungi sebuah blog dengan newsticker berjalan di bawah blogger? mungkin contohnya dapat dilihat pada gambar dibawah ini :


newsticker ini berisi tentang cuplikan berita pendek yang mewakili berita secara keseluruhan sehingga bisa memberikan informasi terbaru kepada pengunjung blog arbakid tentang peristiwa yang sedang terjadi saat ini dan pada akhirnya pengunjung dari blog arbakid tidak akan ketinggalan informasi terbaru.

Cara membuat berita berjalan pun sangat mudah, untuk membuat berita berjalan atau newsticker diblogspot tinggal ikuti saja langkah-langkah dibawah ini :

  1. login ke blogger
  2. masuk ke edit HTML dan cari kode berikut ini : ]]></b:skin>
  3. Copast script dibawah ini dan letakkan di atas kode tersebut
  4. #berita {
    position:fixed;_position:absolute;bottom:0px; center:0px;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
  5. langkah berikutnya, pada Edit HTML cari kode berikut ini : </body>
  6. Copast script dibawah ini dan letakkan di atas kode tersebut
  7. <div id=' berita '>
    <iframe allowtransparency='true' frameborder='0' height='17' id='NewsWindow' marginheight='0' marginwidth='0' scrolling='no' src='http://www.elshinta.com/v2003a/scrolling.htm' style='background-color: transparent;' width='1200'/>
    </div>
  8. secara otomatis berita ini akan tampil di posisi bawah blog
  9. untuk merubahnya tinggal diganti saja script pada langkah ke 4 dengan script berikut ini
  10. #berita {
    position:fixed;_position:absolute;top:0px; center:0px;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
  11. Selesai
Semoga bermanfaat. Salam..
source : here

Berkomentarlah dengan Sopan, Sara, SPAM akan dihapus...

Tools Parse Kode Iklan Adsense

Sabtu, 20 Juli 2013

Adsense sangatlah teliti dalam penilaian aditing kode iklannya, dengan itu berhati-hatilah dalam memparse kode iklan tersebut. Blog ini dulu saya pasangkan adsense, namun hanya gara-gara sepele dengan mengganti kode iklan mereka dengan parse yang tidak sesuai maka dikatakan adsense sebagai pelanggaran TOS mereka. Solusinya adalah dibawah ini, HTML Parse Tools yang telah teruji aman untuk google adsense.



Masukkan kode adsense anda, dan tekan Encode !


Berkomentarlah dengan Sopan, Sara, SPAM akan dihapus...

Tampilan Popular Post Bulat Berubah dengan Animasi Kotak

Salam blogger, kali saya mencoba sharing artikel dari mas Zel Afriad, tentang cara membuat Tampilan Popular Post menjadi keren. Saya telah menerapkannya untuk blog saungjiwa ini, mungkin para sahabat blogger tertarik juga untuk menerapkannya di blog sobat. Langsung saja cara membuatnya :



  1. Login akun blogger sobat.
  2. Menuju Ke menu Tata Letak
  3. Sebelumnya Tambahkan Widget Popular Post Terlebih Dahulu pada blog sobat dengan cara Klik Menu Tata letak, Tambah Gadget, Popular post / Entri Popular, Pilih 7 Hari Terakhir, Centang Thumbnail gambar Dan Jangan Centang Cuplikan ! Jika sudah, simpan
  4. Kemudian, Tambah gadget kembali, Pilih Html Javascript.
  5. Masukan Semua kode dibawah ini.     

     6. Dan kemudian simpan, dan lihat hasilnya.
Semoga Membuat tampilan blog sobat menjadi lebih keren dapat bermanfaat, Salam Saung Jiwa Pangkalpinang  :) 
Berkomentarlah dengan Sopan, Sara, SPAM akan dihapus...

Mudahnya memasang Like Facebook untuk Blogger

Like Facebook blogger hampir disemua blog tercantum widget ini. Mungkin banyak yang binggung cara memasukkan widget ini untuk blog sobat. Ternyata tidaklah susah untuk menerapkannya. Langsung saja cara pembuatannya :

 

1. Login ke blogger
2. Masuk ke Tab Kode HTML
3. Paste kode dibawah ini :
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F415864008437023&amp;width=300&amp;height=290&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:290px;" allowTransparency="true"></iframe>
Keterangan :
  • Ganti nomor 415864008437023 dengan Nomor ID Facebook sobat
  • Ganti width:300px; height:290px, merupakan ukuran lebar dan tinggi widget
  • Frameborder="0" bisa ditambahkan 1, apabila sobat menginginkan widget ada bordernya.
  • Selesai
Semoga bermanfaat. Salam Saung Jiwa...

Berkomentarlah dengan Sopan, Sara, SPAM akan dihapus...

Cara Mudah Membuat tombol 'Share' melayang Shareaholic Sassy

Mungkin sobat blogger banyak menemukan widget sahreholic sassy ini, namun yang saya akan terapkan ini tidak melalui edit tamplate HTML, namun cukup memasukan kode HTML ke Tab HTML/JavaScript, jadi tanpa harus mengedit isi tamplate blog.
Langsung saja caranya :
1. Log-in akun blogger
2. Masuk tab 'Tata Letak', dan klik link 'Tambahkan Gadget'.
3. Lalu pilih HTML/JavaScript
4. Lalu, masukkan kode CSS berikut:
<!-- Start Shareaholic Sassy Bookmarks HTML widget by :<a href="http://www.pangkal.biz/">T11U</a>-->
    <div class='shr_ss shr_publisher'>
    </div>
    <!-- End Shareaholic Sassy Bookmarks HTML -->
    <!-- Start Shareaholic Sassy Bookmarks settings -->
    <script type='text/javascript'>
    var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey"
:"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"
bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black",
"tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
    </script>
    <!-- End Shareaholic Sassy Bookmarks settings -->
    <!-- Start Shareaholic Sassy Bookmarks script -->
    <script type='text/javascript'>
    (function() {
    var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
    sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
    var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
    })();
    </script>
    <!-- End Shareaholic Sassy Bookmarks widget by : <a href="http://www.pangkal.biz/">T11U</a> -->
5. Lalu klik Simpan atau Save.
Berkomentarlah dengan Sopan, Sara, SPAM akan dihapus...

Pasang Share Lengkap di Bawah Judul Postingan Blogger

Share icon berlangganan sangat penting untuk sebuah blog dalam mencapai SEO blog yang natural. Saya telah menerapkan nya untuk blog saungjiwa ini. Seperti dibawah ini contohnya :


Tertarik untuk menerapkannya di Blog sobat, silahkan lihat dibawah ini cara membuatnya :
  1. Masuk ke akun blogger sobat
  2. Pilih kode Tamplate dan buka edit HTML
  3. Centang expand widget untuk memasang widget share
  4. Cari kode ini, <h2 class='date-header'>, atau <div class='post-header-line-1'/>
  5. Lalu copy script css dibawah ini tepat dibawah kode no. 4 tadi

  • Save Tamplete, dan selesai.
Semoga artikel ini bermanfaat. Salam Saung Jiwa




Cara Membuat Widget Melayang di Blog

Minggu, 26 Mei 2013

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.

Cara Mambuat Widget Google +1 di Blog

Rabu, 22 Mei 2013

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..

Cara Membuat Widget Recent Comment di Blog

Sabtu, 18 Mei 2013

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.

Cara Membuat Widget Follow Me Box Twitter Melayang di Blog

Minggu, 12 Mei 2013

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.

Cara Membuat Widget Follow Me Box Twitter di Blog

Sabtu, 11 Mei 2013

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.

Cara Membuat Tombol Follow Me Twitter di Blog

Jumat, 10 Mei 2013

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...

Cara Membuat Widget Random Posts Keren di Blog

Kamis, 09 Mei 2013

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..

Cara Memasang Widget Random Posts di Blog

Selasa, 07 Mei 2013

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.

Cara Membuat Widget Recent Posts Bergerak di Blog

Senin, 06 Mei 2013

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.

Cara Memasang Widget Like Box Facebook Melayang di Blog

Sabtu, 04 Mei 2013

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.

Cara Memasang Widget Sitemeter di Blog

Kamis, 25 April 2013

Sitemeter
Sitemeter adalah situs yang menginformasikan traffic pengunjung pada Blog/Website. Data Traffic Pengunjung yang lebih mendetail dari Blog sobat dapat diketahui melaui Sitemeter. Mulai dari Visit dan Pageview hari ini, rata-rata visit dan pageview perharinya, total visit dan pageview dan lain-lain.
Sebenarnya masih banyak Situs yang menginformasikan data traffic Blog sobat. Namun apabila sobat menginginkan Sitemeter, ikutilah cara daftar dan pembuatan widgetnya seperti berikut:

1. Masuk ke situs Sitemeter.
2. Klik sign up pada menu bagian kiri Sitemeter.
Cara Mendaftarkan Blog di Sitemeter dan pembuatan widget

3. Jika sobat ingin membuat akun yang gratis, klik sign Up pada Site Meter Basic Free.
Cara Mendaftarkan Blog di Sitemeter dan pembuatan widget
4. Isi Form Profil sobat diantaranya: Your site's URL (alamat website sobat), Your site's name (Nama Website sobat), Codename (berfungsi seperti username), dan Your current time (zona waktu yang sesuai dengan tempat sobat berada). Codename jangan kurang dari 5 huruf. Setelah itu centang kotak ketentuan dari Sitemeter dan klik Next.

Cara Mendaftarkan Blog di Sitemeter dan pembuatan widget

5. Isi form berikutnya yang memuat Email Address (Alamat E-mail), Title (Profesi/Bisnis), Postal Code (Kode Pos), Country (Negara), Gender (Jenis Kelamin), dan pilihan Yes atau No pada "Can you receive HTML email?" (mungkin artinya "Dapatkah anda menerima e-Mail HTML?"). Setelah pengisian selesai, klik next.
Cara Mendaftarkan Blog di Sitemeter dan pembuatan widget
6. Setelah itu akan ditampilkan kembali form yang telah diisi untuk mengingatkan sobat apakah telah mengisi form dengan benar. Jika sobat rasa sudah benar, klik next.
Cara Mendaftarkan Blog di Sitemeter dan pembuatan widget
7. Jika sobat melakukanya dengan benar, maka pembuatan akun sobat telah berhasil dan akan muncul pemberitahuan seperti berikut. Pilih dan klik manager untuk mendapatkan kode html.
Cara Mendaftarkan Blog di Sitemeter dan pembuatan widget
8. Bagian penting adalah sobat membuat password, buatlah pada menu di bagian kanan Sitemeter. Masih pada menu bagian kanan, sobat pilih HTML Code. Coppy kode yang diberikan Sitemeter.
 Cara Mendaftarkan Blog di Sitemeter dan pembuatan widget
9. Login ke Akun Blogger sobat.
10. Masuk pada bagian Tata Letak pada Blog sobat.
11. Klik Tambahh Gadget di posisi yang sobat inginkan.
12. Pilih mode HTML/Javascript.
13. Paste kode dari Sitemeter dan klik Simpan.
Selesai.

Cara Membuat Iklan Melayang di Bawah Blog

Selasa, 23 April 2013

Cara Membuat Iklan Melayang di Bawah Blog
Beberapa waktu lalu pada posting Cara Membuat Kolom Widget di Bawah Header Blog ada salah satu pengunjung Brader Blog yang memberikan komentar dan memberikan permintaan untuk saya agar menuliskan Cara Membuat Iklan Melayang di Bawah Blog. Namun saya baru bisa menuliskan posting tersebut saat ini. Semoga Iklan Melayang di Bawah Blog ini sesuai dengan permintaan pengunjung.
Tidak usah panjang lebar lagi, Iklan Melayang di Bawah Blog ini disertai dengan tombol close untuk mempermudah pengunjung ketika ingin menutup iklan tersebut. Beginilah cara membuatnya:
1. Login ke Akun Blogger sobat masing-masing.
2. Masuk pada bagian Tata Letak.
3. Klik tambah gadget dimana saja, karena dimana pun sobat menambahkan gadget, tetap hasilnya akan berada di bawah Blog dan melayang.
4. Pilih mode HTML/Javascript.
5. Masukan kode berikut

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'>
</script><br />
<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<style type='text/css'>
div#btm_banner {
bottom: 0;
position: fixed;
width: 100%;
opacity: 0.9;
left: 0;
}
div#btm_banner img{
border:0;
cursor:pointer;
}
</style>
<div style='height: 0px;'></div>
<div align='center' id='btm_banner' style='height: 105px; z-index: 9999;'>
<div style='text-align: right; width: 728px; height: 15px;'>
<img id='closed' src='http://4.bp.blogspot.com/-9MWyoN5VsJM/TivTpPyUuhI/AAAAAAAABL0/ldO739MTRBg/s1600/close3.png'/></div>
<div style='clear: both;'></div>
<p>
<p><center>

<a href="http://regibrader-free.blogspot.com/p/blog-page_1328.html" target="_blank" title="Pasang Iklan Disini"><img alt="Pasang Iklan Disini" border="0" src="http://4.bp.blogspot.com/-EUdB2Gv49bY/UVUPf-7qbMI/AAAAAAAABgM/TYW5e35exmM/s1600/pasang+iklan+728x90.gif" /></a>

</center></p>
</p>
</div>
#Untuk mendapatkan script iklanya, silakan sobat baca pada paling bawah posting Cara Membuat Banner Iklan di Blog

6. Ubah script berwarna merah dengan script iklan sobat.
7. Ubah ukuran pada script berwarna biru. Karena kolomnya berdampingan dengan tombol close, maka tinggi kolomnya harus lebih besar dari ukuran tinggi pada banner/gambar iklan sobat. Tombol close memerlukan space kolom 15px. Maka sobat buat kolom dengan ukuran: tinggi banner + 15px.
8. Klik simpan, dan selesai

# Jika tombol close tidak berfungsi, itu berarti area untuk tombol close kurang tinggi. Silakan tambah lagi tingginya.
Sebenarnya tombol close ini bisa disimpan diatas kanan atau disamping kanan iklan, untuk disamping kanan, tinggal tambah ukuran lebarnya. Untuk selebihnya, silakan ulik sendiri OK.

Cara Membuat Widget Bergerak di Blog

Jumat, 05 April 2013

Cara Membuat Widget pada Blog Bergerak
Sobat memiliki widget bagus dan pengunjung harus mengetahui keberadaan widget tersebut? Dengan Membuat Widget yang bergerak dapat menarik perhatian para pengunjung Blog untuk melihat widget tersebut. Atau sobat memiliki widget yang memakan banyak tempat namun hanya ingin memberikan tempat yang minim pada widget tersebut? Dengan membuat widget yang bergerak widget tersebut dapat menggunakan tempat yang minim namun isi pada widget itu bergerak secara otomatis sehingga seluruh isi widget dapat dilihat pengunjung.
Untuk membuatnya sangat mudah, hanya dengan menyisipkan kode widget dari Marquee pada HTML widget yang akan sobat berikan efek bergerak. Jadi, cara ini tidak dapat diterapkan pada widget tanpa kode HTML.
Dengan cara ini ada beberapa pilihan efek bergerak. Dan ketika widget bergerak, widget akan berhenti bergerak saat disentuh cursor. Jadi tidak menyulitkan pengunjung jika ingin meng-klik salah satu isi pada widget.

OK, langsung saja. Cara Membuat Widget pada Blog Bergerak:
1. Login ke Akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik tambah gadget pada posisi yang sobat inginkan.
4. Pilih HTML/Javascript.
5. Masukan kode widget sobat dengan menyisipkan kode efek bergerak. Berikut beberapa pilihan kode efek bergerak:

  • Gerak Bolak-Balik.
a. Gerak Horizontal.

<marquee behavior='alternate' align='center' direction='right' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukan Teks atau Script widget Disini</marquee>

Hasil:
Masukan Teks atau Script widget Disini

b. Gerak Vertikal.

<marquee behavior='alternate' align='center' direction='up' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukan Teks atau Script widget Disini</marquee>

Hasil:
Masukan Teks atau Script widget Disini

  • Gerak Berulang-ulang.
a. Dari kanan ke kiri atau sebaliknya.

<marquee behavior='scroll' align='center' direction='left' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukan Teks atau Script widget Disini</marquee>

Hasil:
Masukan Teks atau Script widget Disini
b. Dari bawah ke atas atau sebaliknya.

<marquee behavior='scroll' align='center' direction='up' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukan Teks atau Script widget Disini</marquee>

Hasil:
Masukan Teks atau Script widget Disini

Keterangan:
Ubah tulisan berwarna biru dengan teks atau kode Widget yang sobat inginkan.
Dan sobat dapat mengubah kode berwarna merah sesuai dengan yang diinginkan.

6. Klik Simpan, dan Selesai.
 
Support : Jasa Buat Web Pangkalpinang | Tips Blogger | Special Thanks
Copyright © 2013. Saungjiwa Blog - All Rights Reserved
Inspired by Sportapolis Shape5.com
Proudly powered by Blogger