Tampilkan postingan dengan label Blog Trick. Tampilkan semua postingan
Tampilkan postingan dengan label Blog Trick. Tampilkan semua postingan

Sabtu, 30 Juni 2012

mengganti cursor di blog

step by step :



1.buka link http://www.cursors-4u.com
2.pilih cursor yang kamu inginkan
3.setelah ketemu kamu copy paste !! ( seperti yg dibawah ini )



4.klik universal lalu copy yang ditandai warna merah
5.masuk ke blog anda , klik rancangan , tata letak
6.lalu add HTML
7.paste kode yang tadi
8.klik save
9.selesai ..

selamat mencoba ,,,
Share:

Sabtu, 23 Juni 2012

Anti Copy Paste


Sesetengah orang mungkin agak tidak senang bagi sesiapa mengambil hasil entri dalam blog mereka. Antara cara yang digunakan untuk mengelakkan entri atau kandungan dalam blog di'ambil' adalah dengan disable right click atau disable highlight.



Tutorial :

1. Dari dashboard > design > add a gadget > HTML/javascript

2. Masukkan kod di bawah dalam ruangan HTML/javascript

<script type="text/javascript">
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"
</script>
<script type="text/javascript">
disableSelection(document.body) //disable text selection on entire body of page
</script>


3. Save dan lihat hasilnya..:)


TIPS:
Untuk kesan yang lebih baik, letakkan/drag HTML atas ruangan blog post. Ini akan membuatkan kod disable highlight ini 'dibaca' dahulu sebelum entri.:)
Share:

Jumat, 22 Juni 2012

Cara membuat tombol twitter, dan facebook tersembunyi


Untuk cara pembuatannya sangat mudah oke langsung saja di praktekkan.


1. Login blogger
2. Masuk rancangan, elemen widget
3. Add widgets
4. Pilih HTML/Javascript
5. Masukkan kode di bawah ini

_____________________________________________________________________________


<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrs5kCXx4HJlgMFxHtDw9R8SZbhkvHXXvJHgFrEXT8B9F7edGnuOm4YFNu56oUlZRDCrMspW2fBw8H79oL15Ho65x6GLRAkryYX6PZX4C_EWhU7VQzRWJFHQvzF-99VdirveN0z65oZfUt/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDu8csbq-Vz1NYoj8RtdlUEBlwyFDwqGU-VX1OSsL7yPsxqdKTqE4s2cQVtKyiqItJfEnVKKCsVlWMpM0EIooOCUcY7ty4ypl2w4AKN1OPHK4IKdO2XqcXDCrQ7b5Ie9tgqvNQrhmeXXhH/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}
.barconteblogger{margin:5px 0 0 47px}
.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMCrdo9ylxLrqFxCZ3uTzoQi_BeV35dkBLNief4ILrkBdd8iec9nD1aVBRtThjhoA8aciQB2uSL2mDAoPKcPbcY0tD6fjgwFToiG5P_78J0N_QHSvJc2qU2UiO5Ikylye-FMA0l9v4DbE_/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijIMj5wZjxClt-cLkYxj7kfclRnHH6CDyx6gxYuZ6xTVE0iZixXgwmy5I4IKojrFsOBweU-Xx3Y0CWbwaYkxYm1VTS_ydx5qrzwjLg2lJmY-Jy89rnXgBBTaYL0gMbWIMBGsW0RwZm0YMK/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}
.barcontefacebook{margin:5px 0 0 47px}

.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheEPSN2LkFze6jaOtMIMRkliK0PYgWEIjK-Ni9zX1y8B0U31Ks-OKVkKa48NZbjo458jEf-EYoRFI_2V2ROZklHVwvxvDtfGrEmRz92hBFq3hkIsTNCnm_a3zgXJx37yia11hxG85OVEXq/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm84Rc3OMxoxfvwnw4y3ct3GlRo8ZE7NwnHsySWKXivou2ipAhJJULIeq_BA5P20jpa3jC9p9lik_u-Y7ocazc3k3XSbDn4TF1BqHYgK5oKq0IHp2XFp0ORjlWPBn5cxnYr5zOqY4kjUQH/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
.barcontetwitter{margin:5px 0 0 47px}
</style>


<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">
Copy kode google friend connect Atau Copy kode Cbox anda di sini
</div>
</div>


<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
Copy kode Iframe fan page Facebook anda disini
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
Copy profile kode twitter anda disini
</div>
</div>


_______________________________________________________________________


NB : untuk yang saya warnai merah, silahkan masukkan kode anda yang sudah di jelaskan seperti di atas.

6. Simpan Widgets


Share:

Rabu, 06 Juni 2012

Cara Membuat Recent Post Slide


Tapi sebelumnya saya akan menjelaskan secara singkat apa itu Recent Post..?
Recent Posts adalah widget yang menampilkan beberapa judul posting terbaru, yang bisa anda tampilkan pada sidebar sehingga pengunjung lebih mudah mengetahui posting-posting yang terbaru.


Biasanya recent post hanya menampilkan link judul atau dengan Thumbnail Image. Namun sekarang ada yang sedikit berbeda yaitu recent post dengan Thumbnail Image dengan model Slide Show (bergerak turun).

Jika sobat berminat dan ingin membuatnya, ikuti langkahnya sebagai berikut :

1. Login ke akun Blogger sobat
2. Klik Perancangan >> Elemen Laman
2. Klik Tambah Gadget
3. Pilih HTML/Javascript
4. Masukan kode berikut :


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:530px;
}
#spylist ul{
width:310px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:298px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/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 = "komentar";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 8;
home_page = "http://carbelius.cyber4rt.com/";
limitspy=7
intervalspy=4000
</script>
<div id="spylist">
<script src="http://infonetmu.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript">
</script></div>

 5. Klik Simpan
6. Lihat hasilnya.

Keterangan dan Catatan :
1.Untuk membuat halaman menjadi lebih tinggi, gantilah nilai height:282px sesuai keinginan;
2.Rubahlah nilai var numposts = 25; untuk menampilkan jumlah postingan;
3.Rubahlah home_page = "http://carbelius.cyber4rt.com/";
menjadi home_page = " Url Blog anda ";

Selamat mencoba, sobat juga bisa meng-otak-atik script sesuai kehendak sobat asalkan sobat mengerti. Semoga berhasil dan bermanfaat.


Share:

Cara Membuat Buku Tamu Tersembunyi di Sebelah Kanan


Seperti yang tertera dijudul, kali ini saya akan menjelaskan bagaimana cara membuat buku tamu yang berada disamping blog yang dapat dibuka tutup, seperti apa sich buku tamu itu, lebih jelasnya lihatlah disamping kanan blog saya coba anda klik maka akan keluar buku tamu nya? Sudah jelas sekarang..



Ya udah, kayaknya udah jelas nieh…
Oke langsung aja ke proses pembuatannya..!!!


Langkah 1
Copy Paste Script Kode Dibawah Ini :



<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(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kiQBV7jMs9KCXZVeV-6uTSJHHp7VcDR_IWmBgu5D-sYlyguKfjIglcqm66rd4_SpoLTuardhPDklJRfE6klAqBj6VEtXaWoRdiLUovfXSCfR9VD7oO3MVm0Qvz6PPNvHP-5Py5Sl0BeG/’) 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 onclick=”showHideGB()”> </div>
<div>


[ MASUKAN SCRIPT KODE BUKU TAMU ANDA DISINI ]



<div style=”text-align:right”>
<a href=”javascript:showHideGB()”>
[tutup]
</a>
</div>
</div>
</div>
<script type=”text/javascript”>
var gb = document.getElementById(“gb”);
gb.style.right = (30-gb.offsetWidth).toString() + “px”;
</script>



Lalu cari tulisan [Masukan Script Kode Buku Tamu Anda Disini] di script kode tadi.

Hapus tulisan itu Lalu Ganti dengan Script kode Buku Tamu anda

Langkah 2

1.Login di blogger
2.Klik menu tata Letak
3.Klik Elemen Halaman
4.Klik Tambah Gadget
5.Klik HTML/JavaScript
6.Lalu Copy paste kodenya
7.Setelah itu klik Simpan
8.Dan Lihat Hasilnya

Untuk mendapatkan script kode tamu bisa daftar disini



Share:

Membuat efek zoom pada photo


Membuat Efek Zoom Pada Foto di Blog. Cobtohnya bisa sahabat lihat di blog saya ini, Arahkan Pointer mouse ke salah satu photo di blog ini, maka akan otomatis ter-zoom.



Berikut adalah cara untuk Membuat Efek Zoom Pada Foto di Blog :

1. Log in dulu ke www.blogger.com
2. Masuk ke Tancangan -> Template -> Edit HTML
3. Beri tanda centang pada Expand Temlate Widwet
4. Cari kode ]]></b:skin> ( Untuk memudahkan Pencarian Bisa menggunakan Ctrl + F )
5. Copy Code Berikut, kemudian letakkan tepat di atas Kode ]]></b:skin>

.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3); }

6. Setelah selesai meletakkannya diatas kode tadi, Selanjutnya simpan template.

Share: