Home » All posts

Buat Kolom Dibawah Header Pada Magazine Template 2

in - on Thursday, May 24, 2012 - No comments
Jika sebelumnya kang Eko telah membuat tutorial tentang , maka pada kesempatan kali ini mencoba alternatif lain yaitu membuat kolom dibawah kolom header. Ini tentunya berguna bagi anda yang suka menyimpan iklan langsung di bawah header.
Jika menilik pada desain asli magazine template 2, maka anda tentu saja tidak dapat menyimpan iklan atau apa saja langsung di bawah header. Berikut desain asli dari magazine template 2 :
kolom-bawah-header_03

Dan kita akan membuatkan kolom baru yang langsung berada di bawah kolom header, berikut contoh ilustrasi dari penempatan iklan langsung di bawah kolom header :
kolom-dibawah-header_03

Tertarik ingin membuat kolom langsung di bawah header? berikut adalah cara lengkapnya :
  1. Silahkan login ke Blogger dengan ID anda.
  2. Klik Tata Letak
  3. Klik tab Edit HTML.
  4. Klik tulisan Download Template Selengkapnya.
  5. Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.
  6. Cari kode ]]></b:skin>.
  7. Copy paste kode berikut persis di atas kode  ]]></b:skin>.
.adscolumn{
width:933px;
padding:10px 3px;
background:#fff;
margin:5px 10px 0px 10px;
text-align:center;
border:1px solid #C0C0C0;
}
.adscolumn .widget{
}
  1. Lihat ke bagian bawah, lalu cari kode berikut :
    <div id='main-wrapper'>
  2. Copy paste kode berikut persis di atas kode <div id='main-wrapper'> :

    <b:section class='adscolumn' id='adscolumn' preferred='yes'/>

  3. Klik tombol SIMPAN TEMPLATE.
  4. Selesai.

Langkah selanjutnya, silahkan klik tab Elemen Halaman, maka anda akan melihat tata letak template menjadi seperti contoh gambar berikut :
layout

Sekarang anda sudah bisa memasukan apa saja langsung di bawah kolom header.  Selamat mencoba!

Read more
Labels:

Membuat Refresh

in - on Thursday, May 24, 2012 - No comments
Fungsi refresh di gunakan untuk membuat “penyegaran” kembali halaman blog ataupun website. Fungsi refresh ini sama dengan fungsi refresh yang ada pada browser internet, perbedaannya yaitu fungsi ini di buat bekerja secara otomatis, yakni pengguna tidak perlu menekan tombol refresh yang ada pada tool bar.

Untuk membuatnya cukup dengan hanya membubuhkan kode di bawah ini :


<meta http-equiv="refresh" content="10"/>


Simpan kode di atas antara <head> .... </head>

sedikit uraian kode diatas, content="10" --> angka sepuluh menunjukan bahwa proses refresh akan di lakukan dalam rentang waktu 10 detik. Jadi sebaiknya angka ini di set jangan terlalu cepat karena bisa menimbulkan kejengkelan kepada para pembaca apabila terlalu cepat di refresh.

Fungsi refresh selain untuk menyegarkan kembali halaman-halaman blog, ada fungsi lain yang juga cukup menarik, yakni berfungsi sebagai Redirect dari satu URL addres ke URL addres yang lain. Ini berfungsi jika anda ingin membawa pengunjung blog atau situs anda ke alamat situs yang anda inginkan. Agar lebih jelas, saya ambil salah satu contoh. Ada teman saya sudah lama nge blog, dan setelah sekian lama kemudian dia membuat situs baru. Jadi blog yang lama tidak ingin di aktifkan lagi (di non aktifkan). Nah selain memakai cara meninggalkan pesan bahwa alamat situs atau blog sudah pindah alamat, alangkah baiknya kita memakai fungsi Refresh yang di setting secepat mungkin yakni waktu refresh di set 0 (nol) detik. Jadi apabila ada pengunjung yang mengunjungi alamat blog tersebut akan secara otomatis di bawa langsung ke alamat baru yang di inginkan.

Fungsi Redirect ini bisa di buat dengan kode :


<meta http-equiv="refresh" content="0;URL=tulis alamat URL tujuan di sini"/>


Selamat mencoba.
Read more
Labels:

Membuat Recent Post Berjalan

in - on Wednesday, May 23, 2012 - 4 comments
Hello sobat blogger yang berbahagia, sekitar beberapa waktu yang lalu eko pernah berbagi tentang cara membuat scroll pada recent post, namun sekarang  scroll pada recent post tidak lagi menarik dibandingkan dengan postingan pada kali ini, yaitu membuat recent post berjalan, yaps contohnya bisa sobat lihat disebelah kanan blog ini.

Yuks langsung saja kita buat.
1. Pertama login blog sobat, ingat lho blog sobat bukan blog orang lain, gkgkgkgk......
2. Pilih Tata letak, kemudian Tambah gadget, lalu pilih HTML/JavaScript.
3. Kemudian masukan kode berikut ke gadget yang akan sobat buat sebagai popular post.
<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://BLOGSOBAT.BLOGSPOT.COM/";


limitspy=4
intervalspy=4000


</script>


<div id="spylist">
<script src='http://eko-yulianto.googlecode.com/files/recentpostsbergerak.js' type='text/javascript'></script>
</div>
Note: Ganti tulisan yang berwarna merah dengan URL blog sobat.
4. Yang terakhir, simpan gadget. dan lihat hasilnya...

Ouke cukup sekian tips pada kesempatan kali ini semoga bermanfaat dan terimakasih. Oiya sob saya dapet scriptnya dari http://www.ideini.com. 

Sumber : http://www.rieztoshare.com/
Read more
Labels:

Pasang Iklan Baris Gratis Tanpa Daftar / Registrasi

in - on Wednesday, May 23, 2012 - 29 comments
Pasang Iklan Baris Gratis Tanpa Daftar atau Registrasi. Anda mencari web iklan baris gratis tanpa daftar atau registrasi? Tapi sebelumnya saya akan menjelaskan keuntungan beriklan gratis ini.

Banyak penyedia iklan baris gratis tanpa daftar atau registrasi, diantara keuntungannya anda tidak perlu mengeluarkan biaya untuk iklan ini. Dan apabila situs iklan sudah mempunyai rating tinggi, maka iklan anda akan cepat terindex oleh berbagai mesin pencari, dan otomatis iklan anda akan mendapat banyak kunjungan.

Untuk menaikan penjualan bisnis anda, atau mendapatkan refferal yang banyak, silahkan pasang iklan gratis tanpa daftar, kunjungi


www.iklan-baris-gratis.com

Iklan-baris-gratis.com merupakan web iklan baris gratis tanpa daftar / registrasi. Anda cukup mengisi iklan anda, dan saat itu pula iklan langsung tampil.

Apabila ingin iklan anda selalu di atas, iklan-baris-gratis.com juga menyediakan iklan banner, iklan premium dan iklan link dengan harga yang sangat murah.

Anda bisa memasarkan berbagai produk, dan anda juga bisa menemukan beberapa kategori, diantaranya : iklan rumah dijual, iklan motor murah dijual, iklan mobil dijual, iklan mobil bekas bandung, iklan mobil bekas jakarta, iklan mobil bekas semarang, iklan mobil bekas kota-kota lainnya, iklan laptop termurah, iklan poskota, iklan republika, iklan kompas, iklan lowongan kerja terbaru, iklan blackberry, iklan ponsel terbaru, iklan ponsel bekas, iklan laptop murah, iklan komputer murah, dan berbagai iklan lainnya.

Pasang Iklan Baris Gratis Tanpa Daftar atau Registrasi kunjungi www.iklan-baris-gratis.com
Read more
Labels:

Cara Membuat Menu Navigasi Horisontal CSS3

in - on Wednesday, May 23, 2012 - No comments
Cara Membuat Menu Navigasi Horisontal Animasi CSS3 - Tutorial kali ini saya pastikan akan membuat tampilan blog sobat lebih bergairah,  kali ini kembali saya akan memposting artikel serupa namun berbeda. Bedanya dimana?? nanti sobat blogger yang nilai sendiri. Silahkn ikuti tutorial singkat berikut untuk membuat menu animasi mendatar dengan CSS3.

DEMO

1. Login ke akun blogger sobat
2. Klik Rancangan --> Edit HTML
3. Letakkan kode berikut di atas kode ]]></b:skin>
.Hansuperanima{
        position:relative;
        margin:15px 0 0 10px;
        overflow:hidden;
        margin:0;
        float:left;
        padding:0;
        background:#1d1d1d url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif);
}
ul#superAnima{
        width:599px;
        margin:10px 0 20px;
        padding:0;
        margin:3px 4px 3px 4px;
        clear:both;
        float:left;
}
ul#superAnima li{
        margin:0;
        padding:0;
        overflow:hidden;
        float:left;
        height:40px;
}
ul#superAnima li a.anima{
        padding:10px 10px;
        font:10px Arial;
        float:left;
        color:white;
        text-decoration:none;
        text-transform:uppercase;
        text-shadow:1px 1px 1px #000;
        clear:both;
        height:18px;
        line-height:20px;
        background:white url(https://lh4.googleusercontent.com/-a0zdLvnsQE8/T2XFNjkIrWI/AAAAAAAAAcQ/rrmwCSZMx3k/h120/gradBlueH2V53.gif) top left repeat-x;
        text-align:center;
        transition:all 1.2s ease-in-out;
        -o-transition:all 1.2s ease-in-out;
        -moz-transition:all 1.2s ease-in-out;
        -webkit-transition:all 1.2s ease-in-out;
        -ms-transition:all 1.2s ease-in-out;
        font-weight:bold;
        border:1px solid #999;
}
ul#superAnima li a.anima:hover{
        transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -o-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -moz-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -webkit-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -ms-transform:scale(1.0) rotate(0deg) translate(0, -40px);
}
ul#superAnima li a.anima span{
        padding:10px 9px;
        color:transparent;
        opacity:0.2;
        filter:alpha(opacity=20);
        border:2px solid transparent;
        transition:all 1.6s ease-out;
        -o-transition:all 1.6s ease-out;
        -moz-transition:all 1.6s ease-out;
        -webkit-transition:all 1.6s ease-out;
        -ms-transition:all 1.6s ease-out;
        transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -o-transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -moz-transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -webkit-transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -ms-transform:scale(8.0) rotate(0deg) translate(0,-10px);
}
ul#superAnima li a.anima span:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
        padding:4px 9px;
        height:18px;
        transform:scale(1.0) rotate(0deg) translate(0,0);
        -o-transform:scale(1.0) rotate(0deg) translate(0,0);
        -moz-transform:scale(1.0) rotate(0deg) translate(0,0);
        -webkit-transform:scale(1.0) rotate(0deg) translate(0,0);
        -ms-transform:scale(1.0) rotate(0deg) translate(0,0);
        color:#FF0;
        border:2px solid #000;
        background:#555;
        text-shadow:1px 1px 1px #000;
        box-shadow:1px 2px 15px #fff, 0px -1px 3px red, -2px -2px 2px orange, -3px 3px 3px yellow;
        border-radius:4px;
}
ul#superAnima li{
        border:1px solid transparent;
        background:#CC9933 url(https://lh4.googleusercontent.com/-Tk55wbQOL_s/T2XGvQfF2WI/AAAAAAAAAcY/1_THN4F2g7A/h120/gradOrangeBlackV45H2.gif);
}
ul#superAnima li:hover{
        background:#000 url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif);
        border:1px solid #777;
}
Catatan:
Sesuaikan kode angka yang berwarna biru dengan ukuran template.

4. Klik save dan lanjut ke tahap ke 2.
5. Klik Rancangan --> Elemen laman
6. Klik Tambah Gadget tepat di bawah header dan kemudian pilih HTML/Javascript..

7. Masukkan kode berikut kedalam kotak HTML/Javascript.
<div class="Hansuperanima">
<ul id="superAnima">
<li><a class="anima" href="http://eko-tipsntrick.blogspot.com/">Home<br /><br /><span>Home</span></a></li>
<li><a class="anima" href="http://eko-tipsntrick.blogspot.com/feeds/comments/default">Comment<br /><br /><span>Comment</span></a></li>
<li><a class="anima" href="http://eko-tipsntrick.blogspot.com/">Eko Yulianto<br /><br /><span>Eko Yulianto</span></a></li>
<li><a class="anima" href="http://facebook.com/ggkjy">My Facebook<br /><br /><span>My Facebook</span></a></li>
<li><a class="anima" href="http://twitter.com/eko_boement25">My Twitter<br /><br /><span>My Twitter</span></a></li>
<li><a class="anima" href="http://eko-tipsntrick.blogspot.com/feeds/posts/default">Feed Blog<br /><br /><span>Feed Blog</span></a></li>
</ul>
</div>
Silahkan ubahsuaikan semua kode yang bercetak tebal ( bold ) sesuai keinginan. Sekian tutorialnya dan semoga membantu..
Read more
Labels: