Cara Membuat widget Recent Post / Postingan Terbaru0

Seperti pada judulnya kali ini Boku akan share mengenai Cara Membuat widget Recent Post / Postingan Terbaru. Widget Recent Post adalah sebuah widget untuk menampilkan postingan-postingan terbaru.

Untuk membuat widget ini cukup mudah kok, karena hanya membutuhkan sedikit kode HTML saja. Dan widget ini juga tidak terlalu berat kok.

Ini dia caranya :
1. Login ke blog dulu
2. Klik rancangan >> elemen halaman >> tambah gadget (HTML/JavaScript)
3. Lalu masukkan kode dibawah ini

Kode:

<script style="text/javascript" src="https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/recentposts.js"></script>
<script style="text/javascript">
var numposts = 10;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://alfa-genesis.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script>

Atau bisa juga yang ini :

<script src="http://sites.google.com/site/anasku2000/post-terakhir.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://alfa-genesis.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>

NB :
text yang berwarna biru adalah jumlah banyak posting yang akan tampil pada widget tersebut
text yang berwarna merah adalah alamat blog, jadi jangan lupa ganti dengan alamat blog sobat.

4. simpan

Read More...

Cara Membuat Spoiler di Blogger0

Moshi-moshi Sobat blogger, kali ini Boku mau share tutorial membuat Spoiler.
Fungsi utama spoiler adalah mengurangi beban loading page, biasanya yang dimasukin ke dalam spoiler adalah image dengan resolusi besar, jadi dengan spoiler image tidak akan diload secara langsung yang dapat mempercepat waktu loading. Fungsi lainnya tentu dengan spoiler kita dapat menghemat space dan posting terlihat lebih rapi.

Caranya sangat mudah sekali, tinggal masukin saja kode html berikut ini :

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Judul Spoiler</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

Masukkan isi spoiler disini, dapat diisi gambar, kode html, paragraf dan lain2

</div>
</div>
</div>

Jika sudah maka akan jadi seperti ini

Hasilnya:

Masukkan isi spoiler disini, dapat diisi gambar, kode html, paragraf dan lain2

Read More...

Chat Box Dari Atas0

Kali ini Boku akan membagi tips dan trik "Cara Membuat Chat Box Muncul Dari Atas".

Ini SSnya...:

Langsung aja...

1. Login blogger
2. Klik Rancangan, Tambah Gadget, Html/java script
3. Dan Simpan kode berikut :

Kode...:

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #999;
background: #000;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
-moz-box-shadow: 0px 2px 5px 0px #f8f9b9;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()">
</div>
<div class="atcontent">
<div align="center">
<div style="background: #000;">

</div>
</div>

<div align="right">
<a href="javascript:void(0);" onclick="showHideAT()"><img alt="close" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4AhTaI_PAWDtnRO3JjywivZaZj8eF2reBWQBFs6e2hIG5HfNMSiynCuQ16W9ZA-5EwrJ6ic9aftY70HvAYr9m72BiwBZxseG4QIT8xdvZVDt18moZSQUQ2CZYAUxgZZgF-Nvr9Rs79Yu1/s1600/close.png" title="Click here to Close Cbox" /></a></div>

</div>
</div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>

<center><a href="javascript:void(0);" onclick="showHideAT()"><img alt="cbox" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEietriCUFPcacB9PaunSd6tDKGadG_bg2d5mfAVNctqk6CwR4vkdYQAB7_2P_Oa98s50FmGEyfamhEr2BYXC-8fW6FiIA_jk6xy4TthpQs2g_y68SzbqJh5rzKAUBYOgL6s-g7lImstEDW7/s1600/Chatbox.png" title="Click here to open Guest Book" /></a></center>

Catatan:
Jika ingin menampilkan posisi Tombol di samping seperti Blog saya ini, Tinggal ganti Kode di bawah ini
<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEietriCUFPcacB9PaunSd6tDKGadG_bg2d5mfAVNctqk6CwR4vkdYQAB7_2P_Oa98s50FmGEyfamhEr2BYXC-8fW6FiIA_jk6xy4TthpQs2g_y68SzbqJh5rzKAUBYOgL6s-g7lImstEDW7/s1600/Chatbox.png" alt="cbox" title="Click here to open Guest Book" /></a></center>

Dengan Kode di bawah ini
<div style='display:scroll; position:fixed; top:20px; right:0px;'>
<a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEietriCUFPcacB9PaunSd6tDKGadG_bg2d5mfAVNctqk6CwR4vkdYQAB7_2P_Oa98s50FmGEyfamhEr2BYXC-8fW6FiIA_jk6xy4TthpQs2g_y68SzbqJh5rzKAUBYOgL6s-g7lImstEDW7/s1600/Chatbox.png" /></a>
</div>

Read More...