Sekarang kita akan belajar membuat random post yang bisa berjalan kawan di blog kalian, random post berjalan berguna untuk blog kita karena postingan kita yang telah berlalu atau udah lama banget bisa muncul di blog kita dengan tulisan yang bisa berjalan kawan. Nah, caranya cukup mudah kok kawan langsung saja kita belajar membuatnya kawan ngak usah terlalu lama di sini. 

Cara membuat random post berjalan

1. Login ke blogger 

2. Pilih Rancangan   

3. Klik Tambah Gadget

4. Pilih HTML/JavaScript

5. Masukan kode HTML berikut ini

<!-- Alphabetical/chronological Post Title Listing with comment count Start -->

<script type="text/javascript">

function getYpipeTL(feed) {

document.write('<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="1">');

var i;

for (i = 1; i < feed.count ; i++)

{

var href = "'" + feed.value.items[i].link + "'";

var pTitle = feed.value.items[i].title + "</a> | ";

var pComment = " \(" + feed.value.items[i].commentcount + " comments\)";

var pList = "</a>" + "<a href="+ href + '">' + pTitle;

document.write(pList);

document.write(pComment);

document.write('</a></li>');

}

document.write('</marquee>');

}

</script>

<script src="http://pipes.yahoo.com/pipes/pipe.run?

YourBlogUrl=http://www.redonewest.co.cc

&Order=alphabet

&_id=401e43055731c1a29f1e1d3eb5e8e13f

&_callback=getYpipeTL

&_render=json"

type="text/javascript"></script>

<!-- Alphabetical Post Title Listing End -->

6. Simpan jika sudah selesai

Catatan :

Ganti http://www.redonewest.co.cc dengan URL blog kamu sendiri dan 1 adalah kecepatan berjalannya tulisan

Read more…

Trik merubah warna background widget dengan CSS3

Trik merubah warna background widget dengan CSS3

huft..udah lama ga posting lagi,dikarenakan bentar lagi mau Ujian akhir sekolah+ tes masuk perguruan tinggi di binus.pada kesempatan kali ini,saya mau kasih tau cara ganti warna widget blog pada elemen hanya dengan css dan ditambah dengan sentuhan CSS3.trik ini juga tidak akan memberatkan blog sobat,karena penggunaan'a pun minim.trik ini bisa membedakan warna background antar widget,misal'a widget followers kamu warna biru,trus widget label/kategori,warna hijau..itu contoh sederhananya.

langsung aja saya kasih tau cara'a,


pertama ke rancangan=> elemen halaman pilih widget yg akan diberi background warna,lalu klik edit pada salah satu widget'a


lalu copy nama widget'a seperti gambar dibawah ini.

kalau sudah dicopy,langsung ke edit HTML


kamu paste nama widget yang tadi.misal:


Followers1


kamu tambahkan kode #


jadi seperti ini " #Followers1 " karena menggunakan syntax ID


selanjutnya,masukan CSS'a


seperti dibawah ini

#Followers1 {background:#ffffff;}

selesai deh,ada background pa salah satu widget..tapi design'a masih biasa aja...


langkah selanjut'a,kita tambahkan hiasan CSS3

Border Radius CSS3
-webkit-border-radius: 8px;
-moz-border-radius: 8px;

untuk style lain'a,sobat bisa ambil css'a disini




jadi'a seperti ini

#Followers1 {
background:#ffffff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;}

cara diatas,sama untuk widget lain'a,misal nama widget: HTML1,HTML2,BlogArchive1,Profile1,Label1.

Note:besar/kecil text sangat memperngaruhi keberhasilan trik ini.

lalu,jika sobat ingin edit judul widget/title pada widget,css'a beda lagi.css'a ditambahkan h2

menjadi: #Followers1 h2 {isi CSS}

mau tambahkan hover efek??silakan...


tinggal tambahkan lagi css'a
menjadi seperti ini

#Followers1:hover {isi CSS}

Selamat mencoba sob,kalau ada yang ingin ditanyakan,jangan lupa kasih komen'a ya!jangan sungkan sob ^^

Read more…

Posting kali ini saya akan memberitahu cara membuat widget space iklan banner atau bisa juga disebut kotak iklan, kalian bisa melihat contohnya pada gambar disamping, maanfaat blog yang memiliki space iklan banner adalah bisa mendapatkan pemasukan berupa uang yang didapat dari para advertiser pemasang iklan, setidaknya blog kalian memiliki Page Rank dan visitor yang lumayan banyak agar para advertiser pemasang iklan tertarik untuk memasang iklan di blog kalian, di blog saya ini memang belum memasang space iklan karena template yang saya gunakan tidak mendukung untuk memasang space iklan, saya rasa kalian mungkin bisa memakai fasilitas ini untuk menaruh foto,banner sendiri dan lain sebagainya. masing-masing setiap banner ukurannya hanya 125x125.

Langsung saja kalian lakukan tahap-tahap dibawah ini untuk membuat widget space iklan banner :

Masuk pada halaman Edit HTML di blogger kalian, lalu cari kode ]]></b:skin> dan letakkan kode CSS berikut tepat di atas kode ]]></b:skin>

#Box-Banner-ads {

margin: 0px;

padding: 5px;

text-align: center;

}

#Box-Banner-ads img {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #c0c0c0;

}

#Box-Banner-ads img:hover {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #333;

}

Kalau sudah, jangan lupa untuk di save, selanjutnya pilih Elemen Halaman dan Tambah Gadget lalu pilih HTML/Javascript dan masukkan kode berikut :

<div id="Box-Banner-ads">

<a target="_blank" href="http://www.aziz-rhamadhan.co.cc"><img
border="0" alt="ads" src="http://sites.google.com/site/bloggerbartiqy/Banner2.gif"/></a>
<a target="_blank" href="http://www.aziz-rhamadhan.co.cc"><img
border="0" alt="ads" src="http://sites.google.com/site/bloggerbartiqy/Banner2.gif"/></a>
<a target="_blank" href="http://www.aziz-rhamadhan.co.cc"><img
border="0" alt="ads" src="http://sites.google.com/site/bloggerbartiqy/Banner2.gif"/></a>
<a target="_blank" href="http://www.aziz-rhamadhan.co.cc"><img
border="0" alt="ads" src="http://sites.google.com/site/bloggerbartiqy/Banner2.gif"/></a>

</div>

Untuk kode yang berwarna pink kalian ganti sesuai dengan alamat url iklan banner yang ingin kalian pasang dan untuk yang berwarna biru adalah url gambar iklan,

Selamat mencoba, dan semoga berhasil 

silahkan klik tulisan "Poskan komentar" untuk berkomentar. saya menggunakan menu komentar dengan form pop-up agar tidak mengganggu aktifitas membaca kalian. terima kasih

Read more…

Elemen biasa-nya digunakan untuk menaruh widget blog dan menambah tata letak template, biasanya template default dari Blogger hanya mempunyai sedikit elemen saja jadi tata letak template tidak begitu luas , sementara kalau template yang di dapatkan dari luar mempunyai beragam jumlah elemen dari yang satu, dua, tiga dan seterusnya jadi tata letak template tersebut luas. Bagaimana pengaruh elemen terhadap size template ? pengaruhnya tidak terlalu banyak namun apabila elemen tersebut di beri widget yang banyak maka pengaruh terhadap size blog sangat besar.

Disini saya  akan menjelaskan tentang bagaimana Cara membuat 4 (empat) kolom Footer. pada postingan sebelumnya saya sudah membahas tentang cara Menambahkan Elemen Barupada template clasic. Apa itu Footer ? Footer adalah elemen yang berada paling bawah pada suatu template yang berfungsi untuk menaruh berbagai widget. Sekarang langsung saja ke cara pembuatannya.

1. Login Ke Blogger
2. setelah itu masuk ke Tata letak
   
3. lalu masuk ke Edit HTML
   
4. lalu cari kode ]]></b:skin> dan taruh kode di bawah ini tepat di atasnya
   #footer-column-container {
   clear:both;
   }
   
   
   .footer-column {
   padding: 10px;
   }
   
   
   
   
   
5. setelah itu cari kode <b:section class='footer' id='footer'/> apa bila tidak ada cari kode<b:section class='footer-wrapper' id='footer'/> lalu ganti dengan kode di bawah ini
   <div id='footer-column-container'>
   <div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
   <b:section class='footer' id='col-bottom' preferred='yes'>
   <b:widget id='Text2' locked='false' title='==&amp;gt;&amp;gt; Uye-uye &amp;lt;&amp;lt;==' type='Text'/>
   </b:section>
   </div>
   <p>
   <hr align='center' color='#5d5d54' width='90%'/></p>
   <div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer3' style='width: 25%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
   </div>
   <div id='footer5' style='width: 25%; float: right; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col7' preferred='yes' style='float:right;'/>
   </div>
   <div style='clear:both;'/>
   </div>
   
   
   
   
   
   
6. Setelah melakukan langkah-langkah di atas dengan benar dan teliti sobat bisa menyimpannya dan melihat hasilnya
   

Bagaimana cara pemasangannya? tidak terlalu sulit bukan. Nah dengan menggunakan banyak elemen sobat bisa menambahkan widget yang berguna untuk blog sobat sediri . Apabila sobat mengalami kesulitan terhadap pemasangannya, sobat bisa bertanya atau tinggalkan pesan kesulitannya di kotak komentar yang berada di bawah ini . sekarang saya akhiri dahulu y. Terima kasih 

Read more…

Kalau bukan karena sebuah pertanyaan pada komentar "Membuat Scroll Pada Bloglist" mungkin saya tidak akan menulis masalah ini karena pada dasarnya cara membuatnya hampir sama. Bahkan jika dibandingkan dengan "membuat scroll pada linklist", caranya sangat mirip sekali. Namun demi sobat (dan karena kemalasan saya mencari topik baru) maka saya tulis juga tutorial ini, hehehe...

Bagi kamu yang menggunakan Label (Kategori) dari gadget blogger dengan cara diurut (bukan dengan cara Tag Cloud) pasti akan mengalami masalah "kepanjangan" jika label posting-annya terlalu banyak. Dan tentu saja untuk mengatasinya perlu dibuatkan scroll agar tidak terlalu memanjang ke bawah.

Cara membuat scroll pada Label ini tidak jauh berbeda dengan ketika membuat scroll pada Linklist (Daftar Link), sebagai berikut:

• Dari halaman dasbor, klik Tata Letak - Edit HTML.
• Beri tanda centrang pada Expand Template Widget.
• Kemudian cari kode type='Label' (gunakan Control F atau F3).
• Perhatikan kode yang ada di bawahnya, seperti ini: 

  <b:includable id='main'>

  <b:if cond='data:title'>

  <h2><data:title/></h2>

  </b:if>

  <div class='widget-content'>

  
  
• Tambahkan perintah style='overflow:auto; height:200px' pada kode yangberwarna biru, sehingga menjadi seperti ini:

  <b:includable id='main'>

  <b:if cond='data:title'>

  <h2><data:title/></h2>

  </b:if>

  <div class='widget-content' style='overflow:auto; height:200px'>

  
  
• Atur ukuran tinggi (height)-nya sesuai kebutuhan.
• Simpan hasil editing ini dan ucapkan Alhamdulillah.....

Read more…

Berikut adalah kode script untuk turunnya salju di halaman blog kita...!


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src='http://blogergadgets.googlecode.com/files/snowfall.min.jquery.js' type='text/javascript'></script> <script type="text/javascript"> $(document).snowfall({flakeCount:50}); </script>

Read more…

Kali ini kita aka mencoba untuk membuat menu Horizontal dengan menggunakan widget.

Kelebihannnya kalau kita mengunakan widget adalah kita dapat memindah letak menu tersebut dengan cepat sesuai dengan keinginan kita.

Adapun untuk membuat menu horizontal pada blogger menggunakan widget langkah-langkahnya adalah sebagai berikut:

* pertama2 sign in seperti biasa

* klik tata letak untuk bahasa indonesia atau layout untuk bahasa inggris

* klik edit html

* trus klik expand widget template

Sebelum membuat menu horizontal jangan lupa download template agar misalnya ada kesalahan bisa menggunakan template sebelumnya

kalau sudah cari kode berikut:

b:section class='header' id='header' maxwidgets='1' showaddelement='no'

kemudian ganti angka 1 dengan 2 dan no dengan yes

terus dibawahnya ada kode

b:widget id='Header1' locked='true'

Ganti true dengan false Terus save template

Untuk menu horizontal dalam template atau menggunakan html dan css kopi kode dibawah ini paste diatas Code: ]]></b:skin> : 

#nav ul{

display:block;

margin: 0px;

padding: 0px;

}

#nav li{

float:left;

list-style-type:none;

padding:3px 5px 3px 5px;

margin:1px;

border:#CCCCCC 1px solid;

}

#nav li a{

text-decoration:none;

}

#nav li:hover{

background:#00FFFF;

}

Untuk warna menu horizontal ini bisa diganti sendiri jika ingin menggunakan warna yang lain.

lalu save template.

Setelah itu untuk menambah menu horizontal tinggal kopi kode berikut pada widget dan tempatkan sesuai keinginan kita:

<div id="nav"> 

<ul> 

<li><a href="#">Home</a></li> 

<li><a href="#">About</a></li> 

<li><a href="#">Contact</a></li> 

<li><a href="#">FAQ</a></li> 

<li><a href="#">Product</a></li> 

</ul> 

</div> 

Jangan lupa mengganti kode # dan nama yang berwarna merah.

Terus buka elemen halaman atau page element pada header klik add page element html terus paste kode itu terus save.

Read more…