Sabtu, 15 Desember 2012

Cara Membuat Recent Post Bergerak Di Blogger

Diposting oleh dw kompyang di 06.34

Cara Membuat Recent Post Bergerak Di Blogger

Cara Membuat Recent Post / Artikel Terbaru Bergerak Pada Blogspot:

1. Login ke Dasbor blogspot.

2. Pilih Rancangan

3. Klik Tambah Gadget pada bagian blog yang ingin di tambah Recent Post.

4. Kemudian Pilih HTML/JavaScript

5 Isi Judul Sesuka anda, Copy dan letakkan kode dibawah ini kedalamnya

<center><style type="text/css">
#rp_plus_img{height:300px;overflow:hidden;border:solid 0px #fff;padding:6px 10px 24px 5px;background-color:transparent;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:1px; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#F68629;}
#rp_plus_img .news-title{display:block;font-size:14px;font-weight:bold !important;color:#F68629;text-align:justify;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#000000;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #F68629;width:95px;height:55px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://theplick.googlecode.com/files/newsticker-plick.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1000;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 20;
var numchars = 0;
</script> <script src="http://nineblack.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt">
</script> </ul>
</center>

6. Ganti tulisan yang berwarna merah dengan nama blog yang sobat gunakan.

7. Simpan dan Lihat hasilnya.

0 komentar:

Membuat Daftar Isi Dengan Jquery

Diposting oleh dw kompyang di 06.13

Membuat Daftar Isi Dengan Jquery

Membuat Daftar Isi Dengan Jquery Diblogspot - Seperti yang anda ketahui, Daftar Isi sangat berperan penting dalam blog. Daftar isi bisa memudahkan pengunjung untuk menemukan artikel yang dicarinya pada suatu blog. langsung aja ke tkp :

Login ke Blogger
Kemudian Cari Rancangan - Edit Html - expand widget template.
Kemudian letakkan kode berikut diatas kode ]]></b:skin>

#dafis-acc{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1J8H-dpIerN7yqQcS-drTQ04GDtCpCkX33RqQAq9uF_B7fxdr-OKm0Gt0ZavEx6fNyW8A_2CFn3sk3XJ3ioIPK1DjTYJ4yncet4s0CHtLOs1fLF9OxVsTJ2rfETg1pmXYjDcU7UH1MuA/s320/bg5.gif) repeat-y scroll left center #E7F7FB;
padding:2px 0;
border:1px solid #339DC6;
}
.dafis-label{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVZaUEpDGZgNr2JuQNA4KrugmOs3RJRklHtfo8wrDBIFbJhZ7E57sc2yD_2l6lMDW0frXrD2QiV1m1e_FBODtbottFW6KkdgxMaF8TT711hI8RtUaHUz-ID5rN2_HdjrEwAHYtLCaryQQ/s1600/bg4.gif) repeat-x scroll 0 0 #E1F4FB;
font-weight:bold;
line-height:1.4em;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 1px 3px;
outline: none;
cursor: pointer;
text-decoration: none;
padding: 2px 10px;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
border:1px solid #2F94BA;
}
.dafis-label:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFiVkWk4n8p0oH-NiTn5n3F3TXlb3ZRYf2Psn0HQRC6j3YzEmkCVcEpuKUM3VHZ9O6xybW24iUtoNmgFZZOokyLjy7qeWMtZlmlLbjAdnKOSZpXkHAbOFEch8kzEtlGIMvXMT9P2V24ZM/s320/bg2.gif) repeat-x scroll 0 0 #E1F4FB;
color:#003366;
}
.dafis-daf ol{
margin:0 0 0 30px !important;
padding:0 !important;
}
.dafis-daf ol li{
background-color:#C9E9F4;
line-height:1.5em;
margin:1px 3px !important;
white-space:nowrap;
text-align:left;
border:1px solid #339DC6;
}
.dafis-daf ol li a{
text-decoration: none !important;
color:#333 !important;
display:block;
padding-left:10px;
}
.dafis-daf ol li a:hover{
background: #7BC4DF;
border-left: 5px #333 solid;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

Jika sudah , letakkan kode berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Kemudian Save Template.
Selanjutnya meletakkan Widgetnya di Sidebar :
Langsung klik Tata Letak - Add Widget - Html/Javascript
Kemudian Copy paste kode berikut :

<script type="text/javascript" src="http://cayun-code.googlecode.com/files/Acc1.js"></script>
<script src="http://ngocop16.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>

catatan :
Ganti tulisan http://ngocop16.blogspot.com dengan alamat blog sobat.
Kemudian Save.

0 komentar:

Cara membuat gambar transparan pada photoshop

Diposting oleh dw kompyang di 00.18

Cara membuat gambar transparan pada photoshop

Buatlah layer baru dengan memilih menu File dan memilih New atau dengan menekan kombinasi CTRL + N pada keyboard.

Pada Background Contents pilihlah Transparent lalu mengelik OK

Setelah itu akan terbentuk sebuah layer yang tidak memiliki background atau transparan.Buatlah gambar yang anda inginkan. Misalnya seperti gambar berikut :

Setelah selesai anda tinggal menyimpan file tersebut dengan mengubah formatnya menjadi PNG lalu pilih Save.

Selamat mencoba

1 komentar:

Membuat Menu Drop Down Dibawah dan Diatas Header

Diposting oleh dw kompyang di 00.15

Cara Mudah Membuat Menu Drop Down Dibawah dan Diatas Header

Kali ini saya akan berbagi ilmu pelajaran lagi kepada teman-teman sekalian
Dibawah ini contoh menu drop down nya

Sekarang ayo teman-teman ikuti langkah demi langkah yang haru dilakukan dibawah ini:

Pertama teman login ke blogger
Selanjutnya pilih Rancangan/Template dan klik cadangkan/pulihkan kemudian unduh template, hal ini dimaksutkan untuk mengamankan template teman apabila nanti terjadi kesalahan pada saat meng-edit template.
Nah..setelah selesai unduh, barulah sekarang teman bisa pilih rancangan/template kembali kemudian klik edit html.
Untuk selanjutnya, centang Expand Template Widget, didalam edit html, coba teman cari code ]]></b:skin> (untuk dropdown dibawah header) atau <b:skin><![CDATA[ (untuk dropdown diatas header), agar lebih cepat mencarinya, coba teman tekan ctrl+f kemudian paste-kan code diatas.
Jika sudah ketemu, sekarang saatnya teman copas code dibawah ini dan letakkan tepat diatas code ]]></b:skin> (untuk dropdown dibawah header) atau <b:skin><![CDATA[ (untuk dropdown diatas header)

Klik untuk melihat

#catmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9MUIMnzb-J8lTymkgY9ZYwlbnpQrOQVHfXFRzcPXdBeyhKJ_Kw3jhDhAndfGNE8tZm-qaZ7YxpcHmHI7oXnOHoEIthN1ar_ndkq-HyGz998DXZIQgdnwd3bPb8xz0llu6JtMdS7Uvv8kg/s1600/2.gif) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}
#catmenu{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0LX5uI_zl9hfL9-JGQA_qfI5B7XAE9U59gb4L0siJbW446QCcdJRBJ3auDMEu5-hpNAfmH2ZKVZ0gDhxm-PCN922btaC6My_tI2jAaNa8oSlM0-OCbEmZytjNWPCV7HjxjkTekWTKhgrF/) repeat-x;
height:33px;
}

#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}

#catmenu li a:hover, #catmenu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBnrS_bMVOUP79djZ95CsFqo8O3IhL7an5jHrhO3wb2woVHad-Ui4eadY4gUVLtKvpjmMRkI-n8NEuebcdsOoIxtPdCNjyaiiJsPCAvadLACR_-bHxv-zLrFud4D3JghqqU7LQqpMim3wd/) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}

#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;

}

#catmenu li li a:hover, #catmenu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBnrS_bMVOUP79djZ95CsFqo8O3IhL7an5jHrhO3wb2woVHad-Ui4eadY4gUVLtKvpjmMRkI-n8NEuebcdsOoIxtPdCNjyaiiJsPCAvadLACR_-bHxv-zLrFud4D3JghqqU7LQqpMim3wd/) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}

#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#catmenu li li {
}

#catmenu li ul a {
width: 140px;
}

#catmenu li ul a:hover, #catmenu li ul a:active {
}

#catmenu li ul ul {
margin: -34px 0 0 170px;
}

#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}

#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}

#catmenu li:hover, #catmenu li.sfhover {
position: static;
}

Setelah selesai copas code diatas, sekarang masih di edit html, sekarang teman cari code <div id='content-wrapper'> (untuk dropdown dibawah header) atau <body> untuk dropdown diatas header) dengan cara tekan ctrl+f dan copas code tadi.
Jika sudah ketemu copas code yang ada dibawah ini tepat dibawah code <div id='content-wrapper'> (untuk dropdown dibawah header) atau <body> untuk dropdown diatas header). "ingat!!! setiap template berbeda-beda, jadi bila tidak ketemu, cari code yang mirip dengan code diatas"

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

Selanjutnya simpan templatenya dan lihat hasilnya.

Sabtu, 15 Desember 2012