Membuat post terbaru bergerak

Berhubung ada yang minta bagi ilmu membuat post terbaru bergerak, aku akan bagi tau caranya

1. Masuk Blogger
2. Klik Rancangan > Tambah Gadget > HTML/JavaScript
3. Masukan kode berikut :

<center>
<script src="https://sites.google.com/site/teknikbuatblog/tbb/jquerry.js?attredirects=0&d=1" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}

#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwAxTDb4j9iPwfrBLKEUynwDgrmxwJs5czjDWDBeV2CEsAR_xF13w1tcU27cO9qyRHO4cYHBjNNs2au_Zdwhh6Oh9FhwbhfzmIvCfDYvQoNN6sGYPPdzqmwV4PHrS_5gfzDDQjXH9vDu8/s1600/teknikbuatblogblogspot-com.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#A9A9F5;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvTDUn8SFkDdPWGgd27DiciUGQ6h5NRGk9uhNjskh2z6oZQluD3-2S-bOUOW4bE75voFYscbNlsX1ZziqGIR2j2sM9jDW9iZniPSxeOVM1H0TYer0OT_4Yt532v5ej6YvnNoi7Q88s4cs/s1600/no_image+.gif";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvTDUn8SFkDdPWGgd27DiciUGQ6h5NRGk9uhNjskh2z6oZQluD3-2S-bOUOW4bE75voFYscbNlsX1ZziqGIR2j2sM9jDW9iZniPSxeOVM1H0TYer0OT_4Yt532v5ej6YvnNoi7Q88s4cs/s1600/no_image+.gif";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvTDUn8SFkDdPWGgd27DiciUGQ6h5NRGk9uhNjskh2z6oZQluD3-2S-bOUOW4bE75voFYscbNlsX1ZziqGIR2j2sM9jDW9iZniPSxeOVM1H0TYer0OT_4Yt532v5ej6YvnNoi7Q88s4cs/s1600/no_image+.gif";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvTDUn8SFkDdPWGgd27DiciUGQ6h5NRGk9uhNjskh2z6oZQluD3-2S-bOUOW4bE75voFYscbNlsX1ZziqGIR2j2sM9jDW9iZniPSxeOVM1H0TYer0OT_4Yt532v5ej6YvnNoi7Q88s4cs/s1600/no_image+.gif";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvTDUn8SFkDdPWGgd27DiciUGQ6h5NRGk9uhNjskh2z6oZQluD3-2S-bOUOW4bE75voFYscbNlsX1ZziqGIR2j2sM9jDW9iZniPSxeOVM1H0TYer0OT_4Yt532v5ej6YvnNoi7Q88s4cs/s1600/no_image+.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 15;
home_page = "http://namablogmudisini.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='https://sites.google.com/site/teknikbuatblog/tbb/tbb.js?attredirects=0&d=1' type='text/javascript'></script>
</div></center><br/><center><a target=_"blank" href="http://gs-info.blogspot.com/2011/07/membuat-post-terbaru-bergerak.html">Get Widget</a></center>



catatan :

namablogmudisini ganti dengan alamat web/blog kamu


anka 15 itu bisa diganti dengan berapa post terbaru yang akan ditampilkan

Jika ingin tampilan yang terbaik ganti yang berwarna merah saja.

Read more

Cara mengubah Newer Post/Older Post menjadi halaman angka

Caranya :
1. Login ke Bloggermu
2. Klik Rancangan > Edit HTML
3. Cari kode ]]></b:skin> Kemudian Copy dan paste kode CSS berikut tepat diatas kode ]]></b:skin>

/* -- NUMBER PAGE NAVIGATION -- */
.showpageNum a{font:15px Arial,Verdana;padding:4px 8px;margin:0 4px;text-decoration:none;border:0 solid #333;background:#dfdfdf;color:#686868;border:1px solid #989898}
.showpageOf{margin:0 8px 0 0;color:#222;font:15px Arial,Verdana}
.showpageNum a:hover{color:#494949;background:#dfdfdf;border:1px solid #626262}
.showpageArea{margin:10px 0;font:15px Arial,Verdana;color:#111}
.showpagePoint{color:#434343;font:bold 15px Arial,Verdana;padding:4px 8px;margin:2px;border:1px solid #b6b5b5;background:#fff;text-decoration:none}

4. Cari kode </body> kemudian Copy dan paste kode dibawah ini tepat diatas kode </body>

<!-- PAGE NAVIGATION START-->
<script type='text/javascript'>

var pageCount=4;

var displayPageNum=4;

var upPageWord =&#39;&#171; &#39;;
var downPageWord =&#39; &#187;&#39;;
</script>
<script src='http://u-sup.googlecode.com/files/page_num.js' type='text/javascript'/>
<!-- PAGE NAVIGATION END-->

Catatan :

Perhatikan bahwa pada kode yang ditulis warna merah itu dapat anda sesuaikan dengan keingin anda. Kode tersebut yang menentukan berapa jumlah posting yang akan ditampilkan pada setiap halamannya, contoh saya akan menampilkan 10 Posting dan 5 tombol angka navigasi berarti kode saya sebagai berikut :

var pageCount=10;

var displayPageNum=5;

Dan untuk merubah Tampilan silahkan rubah kode CSSnya sesuai dengan selera anda, jika merasa tampilannya kurang cantik menurut anda!

 

 

 
  

Read more

Membuat Daftar Isi Otomatis

Daftar isi mungkin adalah salah satu yang penting di dalam blog. Jika kamu berpikiran seperti itu, silahkan disedot :

1. Login ke account Blogger
2. Pilih Layout atau Tata Letak --> Edit HTML
3. Setelah itu beri centang pada tulisan Expand Widget Templates
4. Sebaiknya back up dulu template sobat dengan meng-klik Download Template Lengkap
5. Cari kode dibawah ini

<b:include data="'post'" name="'post'/">

Kalau sudah ketemu ganti kode itu dengan script dibawah ini:


<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#000000;'>
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

6. Simpan Template (save).

Keterangan:EAE9E9 adalah warna latar belakang (background) dan 000000 adalah warna tulisan (teks). sobat bisa menggantinya jika ingin menyesuaikan dengan template blog kamu.

Sebenarnya sampai disini sudah selesai, coba sobat klik salah satu label/kategoti maka yg muncul hanya judulnya.
Jika sobat ingin menampilkan daftar isi keseluruhan lanjut ke langkah ke dua

Langkah Kedua:
Pada langkah ini kita membuat pemanggil daftar isi.
1. Pilih Layout atau Tata Letak --> Page Element atau Element Halaman.
2. Pilih Add a Gadgets atau Tambahkan Sebuah Halaman
3. Pilih HTML/JavaScript
4. Masukkan kode berikut ke dalam kontennya

<a href="http://BlogKamu.blogspot.com/search?max-results=200">Daftar isi&raquo;</a>

5. Simpan Widgets
Keterangan:
hanya saja saya ambil urlnya saja pada blog saya jd saya hanya memasukkan url ini http://gs-info.blogspot.com/search?max-results=200
Ganti yang hijau tua dengan alamat Blog Kamu, dan nilai 200 adalah jumlah maksimal judul artikel yang akan dita

Read more

Membuat Salam Pembuka di Blog

Sebenarnya salam pembuka ini membuat repot pengunjung (trus napa gue posting ini ya?). Ya, seperti saya yang rasa ingin belajar tinggi apalagi tentang blog gini, mungkin gak apa" dicobain.
Ber-ikut :

Masuk ke Blogger

Klik rancangan

Klik tambah gadget

Klik html/javascript

Lalu isikan code berikut ke blog anda

<script type='text/javascript'>
var name = prompt("Welcome!! Nama anda siapa", "Nama Anda ");
alert("Salam Kenal Ya "+name)
alert("Selamat Browsing ")
</script>

Ganti tulisan berwarna biru dengan kata yang anda inginkan.

Read more

Cara Buat Buku Tamu Melayang di Blog

Kalau sebelumnya kita sudah membuat buku tamu (kalau belum punya buku tamu silahkan lihat di sini), Sekarang kita buat buku tamu itu melayang.
Check it out :

Masuk ke akun Blogger kalian

Klik rancangan

Klik tambah gadget

Klik html/javascript

Trus copy - paste code berikut ke kotak konten/content


<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i37.tinypic.com/345o85i.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<!-- Kode buku tamu disini -->

<br />

Ingin buat buku tamu melayang seperti ini klik di <a href="http://gs-info.blogspot.com/2010/12/buat-buku-tamu-melayang.html"><b>Sini</b></a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[sembunyikan/hide]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>


Ganti seluruh tulisan <!-- Kode buku tamu disini --> dengan kode buku tamu yang sudah ada.
Simpan lalu lihat apa yang kelap kelip di sebelah kanan blog kamu. hehehe

Read more

Cara Buat Buku Tamu di Blog

Di blog gak ada buku tamu rasanya gimana gitu. Kadang pengunjung malas menulis sesuatu di komentar postingan, dan lebih suka menulis sesuatu di buku tamu. Buku tamu juga bisa menjadi tempat blogwalking antar blogger. Nah, sebagai pemilik blog yang baik, sepatutnya kita menaruh buku tamu di blog kita. hehehe.
Ah, banyak bacot gue, langsung aja simak :

Pertama dan utama buat akun di sini

Lalu isi formulirnya dan jangan lupa CENTANG tulisan "I have read and do agree to the Cbox terms and conditions of service".

Lalu klik create my Cbox.

Setelah itu klik "Publish"

Lalu ada code yang diberikan, copy code itu

Lalu masuk ke blogmu dan klik rancangan

Klik tambah gadget

Lalu pilih html/javascript

Masukan code tadi ke kotak content

Lalu simpan

Selamat, blog kamu sudah ada buku tamunya. Selanjutnya, jika ingin membuatnya lebih menarik dengan membuatnya melayang, silahkan lihat di sini.

Read more

Cara Membuat Search Engine di Blog

Rasanya blog kurang lengkap tanpa search engine. "Search engine" atau bahasa indonesianya "Mesin Pencari" sangat berguna untuk pengunjung ataupun admin sendiri untuk mencari artikel di blognya.
Berikut langkah mudah membuat search engine :

1. Login ke blogger
2. Klik blog yang mau dibuat
3. Pilih tab "tata letak"
4. Klik "tambahkan gadget"
5. Pilih HTML/Javascript
6. Di kotak konten copy dan paste kode berikut :


<form action="http://nama-blogmu.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>



Yang berwarnya merah artinya bisa diedit, sesuatu dengan ketentuan dan keinginan.

Keterangan :
- nama-blogmu  ganti sehingga jadi alamat blogmu
- 30 adalah panjang tempat mengetikan sesuatu yang dicari

Read more