English French German Spain Italian Dutch
Loading...
The Best Traffic Exchange
Tampilkan postingan dengan label Widget Blogspot. Tampilkan semua postingan
Tampilkan postingan dengan label Widget Blogspot. Tampilkan semua postingan

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbPy_9TT6sHM1V0Jnmr50pe8Ll8HQbEX8ndKBq28CnfKDlCTp-GW-rUb0Uuc_wS2FVZT6e_1pszm9g8Zt7QR5AVFbB-DnWG8Qc5WHD7RR8ntAt5uWapaLc8XLyR7l31I7wCD5P1j2UAQQ/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 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYKziuHCn0VE4iLQfY1_-sTo22Zj5qKymTunlxIGFLC1wLbrP399ZjE-zll9HJDQXcwq_bqPIj56PKV5Bdym1tIazMJOmFrrxe0Qh57wNzhAF5e1ML3YYp4qako5KZwXxbJQ5-5sVXlg4/s1600/yellow+bird.png
Cara Membuat Widget Burung Twitter Terbang di Blog https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDW_ypLvYFTV38ChKY7F-TEIq-FuIWJshEn9PG-mH8dk5Zei3SHSJ0Hb5Mj-UhAnOhFgS0aIWChtr1C8-d2Xz2uSTrz0V9nZQoknji0f0-QcYhXvTTnWn2fx3yuQEnWdzaW2zClUda07Q/s1600/black+bird.png
Cara Membuat Widget Burung Twitter Terbang di Blog https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAEn9G6c6NjFFWdNBYdGygLl6NZOaYjlUu3qHe7pL4aAdfbTjENQZi_dTBcIMu7KZsOMNFv6aExlurrwFjKsT30ukFIVZ2NTF37buQD7TAT6hlA83lHmu6nyGzVpie8pGUykiYjP1sKrc/s1600/Blue+bird.png
Cara Membuat Widget Burung Twitter Terbang di Blog https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE7oQcDZ2XE81AaXsD4eRaMZdmFMbTTVWalz0AMXtdNGEpYfgMvM6bhLWGthfaYWnMHriEacp1VYDi5S1CNE90KBlqzaEqrA_hn3C0_hmM6XOritEqdk66mSeQv5HxVIBsczzI9NpGhz0/s1600/brown+bird.png
Cara Membuat Widget Burung Twitter Terbang di Blog https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlF95sAPAuIDqzudIK4BmwEyFhWKC1k4B-5VWY9qRM5AIxlrW5AIvH0vkYjxHH6NIc-Wl0Le4WFhYBLAg65Y6p94HtX12mUnW3oNS7kOko036h8W7_Z12WEYY9AlQC-zidD0fSjCVNEt0/s1600/Green+bird.png
Cara Membuat Widget Burung Twitter Terbang di Blog https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvJfLZUBj83zGv3veva1cWk7HvDQhOgRj6FpHYqycyhaTKICXMvgiBpjYvl2BX54wzttWlikCcSJQ948lxyjwJXaoA0_cNN4hevlYrO3cmkzcv4cXTIXNOluVOwlejOAEhtktk2TZLNjs/s1600/purple+bird.png
Cara Membuat Widget Burung Twitter Terbang di Blog https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWJYb2ZCxRuZuq_wJ3o84BETjgz8uqr3HgRO5ZIEe2ezWIee8UFjCm54LlIkOlI1o6Xq6Gh1eaDBN74TySpfL2_MHnsOpzF4y-YLahewz20op9KNTogRxwb1RZ-vNAduLIy6ziMqiy4GQ/s1600/white+bird.png
Cara Membuat Widget Burung Twitter Terbang di Blog
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL8AmEJt1nOPjFY_3yjND0dYAplU30VidQ7CqnQCHga_s0KzOyOFfhIBUlQ2OGozp0G-O_sY_5lZgsD5CAyks6m-4Pq_e-BVhfl1quHGjvGQyPq9XOlQdDIABi8xZnS6Iihik-LWzTFiw/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.
 
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