Mempercantik background fungsi scrolling

<script data-ad-client="ca-pub-4622501360513175" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

. sebelumnya saya ucapkan terimakasi. karna sudah berkunjung di web ini. Untuk membuat bacground ini saya sarankan anda membuat Related post fungsi scrolling terlebihdahulu.caranya bisa anda lihat disini. bagi yang sudah memakai fungsi ini ikuti saja langkah-langkah di bawah ini.

• Log in dulu ke blogger
• Tata letak
• Edit HTML
• Cari kode

/* Related post J_Putra
----------------------------------- */
.rbbox{border: 1px solid #D8D8D8;
padding: 5px;
background-color: #E0F8E0;
-moz-border-radius:5px;
margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}

• Kemudian ganti background dengan kode background:#E0F8E0 url(http://i33.sionalic.com/o91t2b.jpg) no-repeat right bottom;
• Maka akan jadi begini

/* Related post J_Putra
----------------------------------- */
.rbbox{border: 1px solid #D8D8D8;
padding: 5px;
background:#E0F8E0 url(http://i33.sionalic.com/o91t2b.jpg) no-repeat right bottom;
-moz-border-radius:5px;
margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}

• Kemudian simpan tamplate anda dan lihat hasilnya
• Ganti gambarnya dengan url gambar kamu. gambar di atas sudah rusak
  

Selamat mencoba.......

MEMBUAT WIDGET POSTINGAN TERAKHIR DI BLOGGER

MEMBUAT WIDGET POSTINGAN TERAKHIR DI BLOGGER
  Cara menambah gadget Recent Post di blogspot - Ketemu lagi hari ini dengan artikel terbaru Panduan sukses blogger. Artikel kali ini adalah dengan Tutorial BLogspot yaitu Cara Membuat widget postingan terakhir di blogger atau sering di sebut dengan Recent post. dimana widget recent post atau postingan terakhir ini akan bergerak dari atas ke bawah, tentunya ini akan menjadi daya tarik sendiri untuk blog kita. sebenarnya ini adalah menjawab salah satu pertanyaan teman kita di kotak komentar blog ini.

cara membuat model Archives & Postingan Terakhir seperti di blog saranghenamja.blogspot.com, gimana ya??? Ksi tau donk cara nya... Krim ke email aku ya... chelmi blablabla.com
Pliz,,, atau posting kan cara nya di blog anda...

Semoga adanya artikel ini menjawab pertanyaan teman tersebut. untuk membuatnya sangat lah mudah. berikut ini caranya.

• Login terlebih dahulu ke blogger
• Kemudian klik tambah gadget
• Pilih HTML/JavaScript
• Copy dan Pastekan kode di bawah ini ke dalam nya

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" 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(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.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:#EFEFEF;
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] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
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 = 10;
home_page = "http://jayaputrasbloq.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

• Kemudian simpan
• Jangan lupa ganti alamat http://jayaputrasbloq.blogspot.com yang bertulisan hitam tebal di atas dengan alamat blog anda.
• Selesai...
• Sedangkan Untuk membuat archives nya itu memang sudah bawaan dari blogger. itu bisa anda tambahkan melalui Rancangan > Tambah gadget > Arsip Blog > Seting kemudian Simpan.

Membuat tamplate Transparent Background

Kemarin salah seorang dari sahabat blogger sajiwo bertanya sama saya. pertanyaan nya begini

Mas jay kalau bikin background transparent caranya gimana? kayak blog nya gubuk blekenyek wilyo alsyah. aku nyari tutornya nggak ketemu.

Nah ini article untuk menjawab pertanyaan sobat kita sajiwo dan tentu nya juga buat sahabat blogger semua. nggak usah panjang lebar ya. soalnya saya nggak suka ngobrol terlalu bertele-tele. kita langsung aja ke inti nya

• Log in dulu ke blogger
• Tata Letak
• Edit HTML
• Download dulu tamplate anda untuk menhindari hal yang tak diinginkan
• Kemudian beri tanda centang di "Expand Template Widget"
• Cari kode di bawah ini

body { background-color: #aba;
margin:0;
font: x-small Verdana, Sans-serif;
text-align:center;
color:#000;
font-size/* */:/**/small;
font-size: /**/small;
}

• Kemudian ganti warna merah dengan kode

background-image:url(http://dl7.glitter-graphics.net/pub/33/33197livrwu7szz.gif);

• kode di atas untuk image background anda. jika udah ada nggak perlu di ganti.
• Setelah itu cari kode

#content-wrapper {border : 1px solid #000;
width: 898x;
margin: 0px auto;
padding: 10px 5px 0px 5px; background: #5f9ea0;
}

atau cari yang mirip dengan kode diatas

• Setelah ketemu ganti background nya sehingga menjadi

#content-wrapper {border : 1px solid #000;
width: 898x;
margin: 0px auto;
padding: 10px 5px 0px 5px; background:transparent none repeat scroll 0% 50%;
}

• Kemudian cari kode

.post {

• Ganti bacground nya dengan kode

background:transparent none repeat scroll 0% 50%;

• setelah itu simpan tamplate anda. liat hasilnya

Catatan:

• Silah anda utak atik sendiri tamplate blog anda. karna setiap blog pasti berbeda.
• Dan perlu anda ketahui untuk membuat tamplate blog menjadi transparant anda cukup mengganti setiap kode background
• Sebelum anda melakukan simpan tamplate lebih baik anda Tinjau dulu untuk melihat hasil edit tamplate tadi, setelah cocok baru anda simpan

Selamat mencoba....