SELAMAT DATANG DI BLOG KAMI

Minggu, 30 September 2012

Cara Membuat Kotak Iklan di Blog

blogger plus
Cara membuat kotak iklan di blog sebenarnya sudah lama ingin saya posting, namun ada saja kendala yang menghambat saya untuk mempostingya sehingga postingan cara membuat kotak iklan ini menjadi tertunda. Pada kesempatan yang berbahagia ini, mumpung ada waktu luang, saya akan mempostingnya dan membagikan panduan dan cara membuat blog khususnya pada cara membuat kotak iklan ini kepada Anda yang ingin memasang kotak iklan pada blog yang Anda miliki.

Membuat space kotak iklan pada blog akan memberi peluang bagi Anda untuk mendapatkan rupiah yang Anda inginkan. Karena ketika Anda membuat space kotak iklan diblog yang Anda miliki, secara tidak langsung Anda memberi kesempatan bagi orang lain yang ingin memasang iklan pada blog Anda. Apalagi jika blog yang Anda sudah popular dan memiliki trafic serta page rank dari google yang tinggi, maka pemasang iklan akan terus berdatangan untuk memasang iklan pada blog Anda. Namun tidak ada salahnya jika blog Anda belum memiliki trafic yang tinggi juga ingin menyediakan space kota iklan, yang jelas peluang untuk mendapatkan rupiah dari iklan itu tetap ada. Mungkin saja sipemasang iklan juga ingin memasang iklannya pada blog Anda, kan lumayan uangnya bisa dikumpul buat beli peyek, hehe..

Bagi anda yang tertarik untuk membuat kotak iklan di blog, yuk sama-sama kita simak tutorial berikut ini :

1. Siapkan gambar atau image yang ingin kita pasang pada space iklan yang berukuran 125 x 125 px, agar gambar kelihatan menarik dan memiliki efek silahkan Anda baca membuat banner animasi dan flash. Kemudian simpan gambar tersebut pada hosting penyipanan gambar seperti photobucket untuk mendapatkan url gambar yang nantinya kita butuhkan.

contohnya:
kotak iklan

2. Jika sudah, kita akan membuat space kotak iklannya, login ke account blogger Anda
3. Klik rancangan atau tataletak bagi yang menggunakan dasbor blogger baru
4. Kemudian klik Edit HTML dan cari kode ]]></b:skin> (gunakan ctrl + f ) untuk mempermudah pencarian
5. Sisipkan kode berikut ini diatas kode ]]></b:skin>

#super-beeads {margin:0px;padding:0px;text-align:center}
#super-beeads  img {margin:1px 1px;text-align:center;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: 1px 2px 1px #ccc;-moz-box-shadow: 1px 2px 1px #ccc;box-shadow: 1px 2px 1px #ccc;}
#super-beeads img:hover {-moz-opacity: 0.7;opacity: 0.7;filter:alpha(opacity=70);}

Perhatikan kode yang saya beri warna, untuk warna merah merupakan jarak antara kotak iklan atas dan bawah. Sedangkan warna biru merupakan jarak kotak iklan antara kiri dan kanan. Sesuaikan dengan kebutuhan Anda.

6. Kemudian save template Anda
7. Langkah selanjutnya kembali ke Elemen laman dan klik tambah gadget > pilih HTML/Javascript
8. Copy dan paste kode berikut ini (edit terlebih dahulu untuk memasukkan link dan url gambar gambar yg ingin digunakan):

<div id="super-beeads">
<a href="Masukkan-Url" target="_blank" title="Title-Iklan"><img alt="Alt/Text Gambar" border="0" src="Url Gambar" /></a>
<a href="Masukkan-Url" target="_blank" title=" Title-Iklan"><img alt="Alt/text Gambar" border="0" src="Url Gambar" /></a>
<a href="Masukkan-Url" target="_blank" title="Title-Iklan"><img alt="Alt/Text Gambar" border="0" src="Url Gambar" /></a>
<a href="Masukkan-Url" target="_blank" title="Title-Iklan"><img alt="Alt/Text Gambar" border="0" src="Url Gambar" /></a>
</div>

space kotak iklan diatas merupakan space kotak iklan yang terdiri dari 4 bagian yaitu atas kiri, atas kanan dan bawah kiri serta bawah kanan. Jika Anda ngin mengurangi space kotak iklan, anda dapat menghapus kode  <a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a> diatas.

9. Save kerjaan Anda dan lihat hasilnya

Demikianlah cara membuat kotak iklan di blog yang dapat saya sampaikan, sampai jumpa pada tutorial berikutnya dan saya ucapkan selamat mencoba.


12
Share, like and give G+1 this article :
Ingin Artikel dan Free Eboo
k dari Super-Bee langsung dikirim ke Email kamu? Buruan berlangganan... GRATIS...!!!
Caranya :
1. Masukkan Email kamu di kotak form berlangganan
2. Kemudian klik langganan
3. Lalau buka email kamu untuk konfirmasi berlangganan
Jumlah Pelanggan Artikel :

Mengganti "Older Posts" Dengan Angka

Mengganti "Older Posts" Dengan Angka

Kendhin
Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". Beda dengan wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.
Nha trik kali ini akan menjelaskan bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" menjadi angka seperti gambar di bawah ini


1. Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML"
2. setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}


3. setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.
<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->


Kalau sudah silahkan dilihat hasilnya.

Sabtu, 29 September 2012

Free Domain


Investasi 10000
Copyright 2008 http://trik-tips.blogspot.com

Cara Membuat Template di Blogger

Cara Membuat Template di Blogger

Kendhin
Yak akhirnya jadi juga, seperti yang aku janjikan kemarin yaitu "Cara Membuat Template Blogger". Mulai dari mana ya? nnnngg.. :t ohya, tak jelasin dulu deh tentang artikel ini. Gini, dalam trik berikut, kita akan mencoba membuat template yang paling sederhana dan paling mudah. Sebenarnya dalam mebuat template di blogger harus mengerti tentang CSS dan HTML, tapi untuk kali ini kita hanya memerlukan sedikit kemampuan tersebut karena kita akan membuat template yang paling sederhana, tapi jangan salah walaupun caranya sederhana tapi hasilnya bisa sangat luar biasa, tergantung dari desainernya. Ok deh mulai aja deh ya, kayaknya udah pada nggak sabar nih.

Gini, cara termudah dalam membuat template blogger yaitu dengan mendownload sebuah template kemudian kita otak-atik sendiri, jadi kita tidak perlu membuat dari awal. Untuk bahan praktek kali ini kita coba memakai template yang aku dah pernah aku buat, downlad disini bahannya. Sebelum kita mulai gue saranin lo buat blog baru aja biar gak ngerusak blog asli kamu.

Tahap Desain

Template yang akan kita buat disini memiliki empat komponen utama yaitu Background, Header, Main dan Footer. seperti yang ada dalam gambar berikut:



Jadi kamu harus membuat keempat komponen tersebut. Cara buatnya gimana? kamu harus bisa menggunakan software image editor seperti Photoshop, Corel, Paint dll. Cara pembuatan desainya lebih jelasnya seperti ini:
1. Buat desain seperti gambar diatas
2. Pada bagian background usahakan bersifat "Tile / Pattern" (kecil dan berulang-ulang).
3. Untuk Main dibagi lagi menjadi beberapa kolom, boleh 2 kolom, 3 kolom atau terserah deh. Dan biasanya terdiri dari bagian utama (posting) dan sidebar.
4. Kemudian potong-potong perbagian.
5. Untuk bagian Header motongnya harus full.
6. Bagian background, main dan footer motongnya sedikit aja karena bersifat "tile"
7. Desain diatas kalo dipotong-potong akan menjadi seperti ini :

background header
main
footer

8. Upload potongan-potongan tersebut pada sebuah webhosting atau layanan penyimpanan file lainya. Contohnya di geocities atau Photobucket dll.

Nha modeng po ra?

Sekarang kita memasuki ke tahap penyusunan di blogger. gini langkah-langkahnya. Ohya udah di download belum tadi bahanya, kalo belum download dulu diatas itu. Ok kita mulai:
1. Kembali ke blogger dan ke menu "Edit HTML".
2. Trus klik tombol "Brows" untuk mengupload template yg udah kamu donwload tadi.
3. Kemudian Cari kode seperti ini:

body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('http://kendhin.890m.com/template/bg.jpg') repeat-x top left; }

4. Ganti text yang dicetak tebal dengan lokasi gambar background yang kamu buat.
5. Cari kode seperti ini :

#center {background: #ffffff url('http://kendhin.890m.com/template/main.jpg') repeat-y top center;}

6. Ganti text yang dicetak tebal dengan lokasi gambar main kamu.
7. Cari kode seperti ini:

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }

8. Ganti text yang dicetak tebal dengan gambar header.
9. Cari kode seperti ini:

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') repeat-y top center; }

10. Ganti text yang dicetak tebal dengan gambara foter.
11. Masih ada beberapa hal yang harus kamu perhatikan. coba cari kode-kode berikut:

#outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; }

kode width: 898px menunjukkan lebar dari blog kamu, kamu bisa mengubahnya sesuai keinginanmu, tapi harus disesuaikan dengan lebar desain gambar yang kamu buat.

#main { float: left; width: 445px; margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; }

kode width: 445px; adalah lebar daerah main yang berisi posting, kamu bisa merubahnya.

#sidebar { float: right; width: 153px; padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }
#ads-wrapper {float: left; width: 195px; padding-left: 10px; word-wrap: break-word; overflow: hidden; }


kode width: 153px; adalah lebar sidebar bagian kanan. Dan kode width: 195px; adalah lebar sidebar bagian kiri. Terus kode padding-right: 50px; jarak antara tulisan atau isi sidebar sebelah kanan dengan garis batas kanan. Dan kode padding-left: 10px; adalah jarak antara isi sidebar kiri dengan garis batas kiri.

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }

kode height:196px; width:898; adalah ukuran tinggi dan lebar bagian header, kamu bisa menyesuaikannya dengan ukuran header kamu.

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') no-repeat top center; }

kode width: 898px; height:80px; adalah ukuran lebar dan tinggi bagian footer.

12. Nah kalo udah selesai coba di preview template kamu, sudah sesuai kah? atau hancur?
13. Kalo sudah di Save.

:f akhirnya selesai juga aku buat artikel tentang pembuatan template, capek ya? tapi ingat sekali lagi ini adalah metode membuat template yang mudah dan sederhana, jadi sebenrnya isi dari template lebih rumit lagi, munkin kapan-kapan akan kita bahas detail dari bagian-bagina template tersebut.
OK SELAMAT BERJUANG......




Artikel yang Berhubungan :

Jumat, 28 September 2012

Cara membuat spoiler atau tombol sembunyi
 Halo sobat evanzip...wah udah lama bgt ya evanzip nga update postingan maklum sob, evanzip ahir ahir ini sedikit sibuk hehehe,sebelum nya evanzip sudah jelaskan cara membuat pojok kanan atas Blog melipat dan untuk Tutorial kali ini evanzip akan jelaskan cara membuat tombol spoiler atau tombol sembunyi pada postingan blog. Tombol spoiler atau tombol sembunyi pada blog mudah saja kita buat, hanya perlu menambahkan perintah tertentu agar menyembunyikan kontennya lalu menampilkannya jika tombol tersebut diklik. Dari pada sobat bingung Berikut evanzipkasih contoh nya:
Contoh Spoiler :
Klik Disini
nah itu lah contoh nya sob,kalau sobat ingin spoiler seperti itu silahkan sobat ikuti langka2 berikut ini
1. Login ke dashboar blog sobat => Buat postingan, pilih pada mode Edit HTML
2. Copy code berikut, paste dipostingan sobat. 




<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Klik Disini</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Isi Spoiler sobat disini, boleh gambar, code dll

</div></div></div></div>

  • Ganti tulisan warna Merah, dengan tulisan yang sobat inginkan, bisa berisi penjelasan atau hanya sekedar "klik untuk melihat", tapi jangan dihapus nanti gak berfungsi spoilernya.
  • Kemudian sobat ganti tulisan biru dengan isi spoiler sobat, misalnya gambar sobat.
 3. Publikasikan dan lihat hasil nya


Selamat Mencoba Semoga Berhasil

Cara Membuat Cbox atau Buku Tamu

Cara Membuat Cbox atau Buku Tamu 

Banyak orang bilang Cbox tapi nama kerennya di Pedalaman dan yang paling dalam adalah Buku Tamu...^_^
oke...sobat sebelumnya evanzip telah membuat Tutorial Burung Twitter Link Ke Facebook kali ini evanzip akan membahas cara pasang Cbox /Buku Tamu. Contoh Buku Tamu Evanzip Sobat Bisa liat 
Di Sini tau kan pungsinya..????
yang pasti tempat pengunjung tinggal kan pesan2 deh singkatnya...
kalau sobat tertarik mau pasang cbox silahkan ikuti Tutorial Berikut ini
1. Pertama-tama , Sobat harus Register dulu disini (bagi yang belum punya account Cbox)
2. pilih Sign Up
3. dan isi kolom 
contoh : 



kalau sudah jangan lupa itu kotak kecil diCentang sebelum sobat klik Create My Cbox
Nah... setelah registrasinya selesai, sekarang tinggal Login dengan ID yang sudah sobat buat
kalau sobat suka warna silahkan edit dengan klik look & Feel  pilih Colours & Fonts
kalau sudah jangan lupa Copy kode cbox sobat dan pasang di blog sobat
Caranya :
1. masuk ke blog sobat
2 Tambah gadget ---> HTML/Java Script ----> Paste .
dan lihat hasilnya
selamat mencoba semoga berhasil
Baca juga cara mengganti smile cbox di sini




Kritik Dan Saran Anda Sangat Membantu DODYDalam Menulis Artikel pada Tutorial berikutnya.

Membuat Text Shadow Animation With Hover

 Membuat Text Shadow Animation With Hover

Halo Sobat evanzip...pada tutorial sebelumnya evanzip telah menjelaskan bagaimana cara membuat pesan pembuka dan penutup pada Blog.nahhh tutorial berikut ini Evanzip akan Membahas Tentang Cara Membuat Text Shadow Animation With Hover
bagi sobat yang ingin berkreasi dengan text-shadow bukan hanya dengan gambar tetapi dengan tulisan. Sekarang mari kita mulai pembahasan CSS3 Text-shadow animation with hover: Baik sobat.. Evanzip tidak akan menjelaskan panjang lebar tentang cara membuat Text Shadow Animation With Hover Karena Evanzip percaya pasti sobat sudah pada tau apa itu Text Shadow Animation With Hover.untuk animasi yang pertama adalah menghilangkan tulisan dan merubahnya menjadi kalimat yang baru. Prinsipnya adalah kita harus mengetahui warna background dari post article seperti blog ini backgroundnya post hentry adalah #fff yang berarti putih, ini berfungsi untuk menutup saat menghover, silahkan arahkan kursor ke kalimat di bawah: tergantung sobat ingin merubah warna apa,sesuai selera.



SELAMAT DATANG DI BLOGDODY

SAYA SENANG, ANDA TELAH BERKUNJUNG KE SINI
 <style type="text/css"> .stevevai{margin:0 auto;text-align:left;font-size:large;color:#0011FC;text-shadow:1px 2px 1px red;overflow:hidden}.rumpun{background:#FF0000; color:#FCE514;font-size: 1em; font-family:'arial';text-shadow:1px 2px 4px #FF1605;font-size:1em;}#vanhalen{position:relative;}#vanhalen img{-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}#vanhalen .rumpun{position:absolute;top:0;left:0;opacity: 0;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}#vanhalen .rumpun:hover{autowidth:0px; autoheight:0px;margin:0 auto;width:900px;height:200px;opacity: 4.9;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}</style><div class="stevevai" id="vanhalen">SELAMAT DATANG DI BLOG EVANZIP<div class="rumpun">SAYA SENANG ANDA TELAH  BERKUNJUNG KE SINI</div></div>

Nah..sekarang kita akan mencoba menggeser text-shadownya di hover seperti ini gambarannya:


APA KOMENTAR ANDA TENTANG BLOGDODY GEBROT
Coba di perhatikan tulisan di atas segera bergeser dan berubah warna text-shadownya, di sini saya membuat font agak besar sedikit, apabila sobat tertarik dengan tulisan di berpindah itu, silahkan kopi kode dibawah dan masukan ke dalam postingan sobat..Mudah kan??

SAMPAI TITIK DARAH PENGHABISAN MERDEKA!!!!!

<style type="text/css"> .kodokloncat{margin:0 auto;text-align:left;font-size:2em;color:#E8D3E5;text-shadow:1px 2px 1px red;overflow:hidden} .details{background:#fff; color:red;font-family:'Arial';text-shadow:4px 2px 6px red;} #kodok-3{position:relative;} #kodok-3 img{-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;} #kodok-3 .details{position:absolute;opacity: 0;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;} #kodok-3 .details:hover{width:900px;height:200px;opacity:4.9;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;-moz-transform:scale(1);-webkit-transform:scale(1);} </style><br /> <div class="kodokloncat" id="kodok-3">APA KOMENTAR ANDA<br /> <div class="details">TENTANG BLOG EVANZIP</div></div>







DODY
Nama saya DODY Saya Bukan Seorang Blogger, Desainer atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar dan Ingin Tahu Sesuatu Yang Baru.... 
Gimana sobat mau pasang seperti yang di atas nga usah bingun bingung tinggal copy paste aja kode di bawah ini..dan silahkan ganti tulisan seperti di atas dengan tulisan sesuai dengan keinginan sobat

 <style type="text/css"> #qthink{margin:0 auto;padding:5px;text-align:center;}.polo_box {width:280px;height:200px;background:none;}#ease.polo_box { -webkit-transition: all 4s ease-in;-moz-transition: all 4s ease-in;-o-transition: all 4s ease-in;-webkit-transition: all 4s ease-in;transition: all 4s ease-in;}#qthink:hover .polo_box, #qthink.hover_effect .polo_box {text-shadow: 0 0 10px rgb(251, 51, 51);color:red;-moz-transform:scale(2.2);-webkit-transform:scale(2.2);-webkit-transition-duration: 3s;} </style><br /> <div id="qthink"><div class="polo_box" id="qthink"><div class="center">EVANZIP<br /> Nama saya Evan Saputra, Saya Bukan Seorang Blogger, Desainer atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar dan Ingin Tahu Sesuatu Yang Baru.... </div></div></div>

                                      oke sobat DODY selamat mencoba semoga berhasil 
            Bila artikel ini menarik dan bermanfaat silahkan tinggalkan komentar di bawah ini

cara ganti kursor panah diikuti teks

Cara Membuat kursor mouse Diikuti Teks

Halo Sobat evanzip Masih setiakan nongkrong di sini....:D,kali ini evanzip mau berbagi trik cara membuat kursor mouse di ikuti teks kemana saja mouse itu di gerakkan.kalau sobat gerakkan ke warung maka teksnya akan ikut ke warung juga hmmm...Just Kidding biar nga terlalu BT sob

Baik Sobat berikut Scripnya :


<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #FF0000;



/* End Optional */

/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">

/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

;(function(){

// Your message here (QUOTED STRING)
var msg = "Nama  sobat";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();

</script>

Silahkan Sobat Ikuti Langkah Langkah Berikut:
1.Masuk ke akun blog Sobat
2.Pilih Tata Letak/Rancangan =>Kemudian Pilih HTML/Java Script
3.Masukan kode/Script Diatas
4.Ubah kode yg berwarna KUNING sesuai keinginan sobat
5.Simpan
Dan Lihat Hasilnya
 



Selamat Mencoba Semoga Berhasil

CARA GANTY SEARCH ENGINE

Untuk membuat sebuah Search Engine pada sebuah blog, sebenarnya mudah karena sobat hanya membuatkan sedikit kode HTML, scriptnya seperti ini :


<form id="searchform" action="http://AlamatBlogAnda.blogspot.com/search" name="searchform" method="get">
<input id="s" value="" name="q" type="text"> <input id="searchsubmit" value="Search" type="submit"> </form>



Yang perlu sobat perhatikan adalah tulisan yang saya cetak merah yaitu http://AlamatBlogAnda.blogspot.com/search, tulisan AlamatBlogAnda harus sobat ganti tentunya dengan alamat blog sobat yang ingin di pasangi seacrh engine, misalkan apabila di pasang untuk blog ini maka tulisan tersebut di ganti dengan http://kolom-tutorial.blogspot.com/search. Selain itu, ada juga yang bisa sobat ubah yaitu di bagian kode --> value="Search". Tulisan Search ini adalah tulisan yang akan muncul pada tombol search engine, apabila sobat ingin mengubahnya, silahkan ubah dengan keinginan, contoh : tulisan tersebut ingin di ubah menjadi Cari atau Go.

Sebagai contoh hasil dari search engine dari script diatas adalah seperti ini :




Atau seperti ini :



Atau juga seperti ini :




Silahkan coba fungsinya, apakah berfungsi dengan baik atau tidak?

Untuk cara pemasangan sama seperti kode HTML lainya, untuk template klasik silahkan sobat cari sendiri karena masing-masing template mempunyai kode yang berbeda-beda. Untuk yang template baru, sobat bisa memasukannya melalui Elemen Halaman kemudian pilih yang HTML/Javascript.

Saya rasa pembahsanya sudah cukup.

Bagi yang ingin melihat-lihat template, template yang satu ini boleh juga untuk di pertimbangkan, silahkan klik di sini !

Selamat mmencoba !

cara ganti icon blog

Cara Mengganti Icon Blog - Cara Ganti Icon Blog sesuai dengan judulnya di sini Zams Site akan berbagi / Share tentang tutorial Cara Mengganti FavIcon Blog, apa itu Favicon? Favicon adalah Ico untuk suatu web yang terletak di samping adressbar, secara default Icon Favicon Blog kita adalah icon dari Blogger asli, yaitu yang jelas berwarna Oren dan di tengah ada tulisan " B ", mungkin cara yang saya berikan nanti adalah suatu yang biasa oleh para blogger-blogger senior, karena caranya sangat simple, dan di sini saya akan memberi 1 Cara Mengganti Icon Blog, icon blogger berguna untuk menandai Image blog kita, jadi kalau faviconya Default pasti menganggap blognya adalah blog baru/biasa, dan saatnya anda mengganti icon blogger anda, caranya sangat mudah, anda tinggal mengikuti Cara Mengganti Icon Blog di bawah ini, terimakasih,Sumber Zams Site

Cara Mengganti Icon Blog
1. Pertama-tama siapkan Gambar yang ingin di jadikan sebegai ICON Blogger
2. Silahkan Upload file image/gambar terlebih dahulu ke web hosting, di mana? kalau saya biasanya pakai http://Tinypic.com, di situ Klik Browser File, Open, Lalu klik Upload File, masukan kode chapta yang tertera, tunggu proses Upload selesai, dan kalau selesai Copy URLnya saja, Ingat URLnya saja Contoh : http://i50.tinypic.com/54hvm0.jpg

3. Pada Dashboard Blog, silahkan Klik " Rancangan / Desain "



4. Setelah itu masuk di Tab " Edit HTML "
5. Saat masuk di Edit HTML, silahkan cari Code

  • Cari dengan CTR: + F / F3
6. Copy dan Pastekan Code di bawah ini tepat di atas Code </head>
<link href='Alamat URL Gambar' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

7. Lalu Ganti " Alamat URL Gambar " dengan alamat URL Gambar yang sudah di Upload di Tinypic.com, 

8. Nanti akan seperti gambar di bawah ini.

9. Dan taruh Kode tersebut di atas Kode
, tutorial by Zams Site (Dont Remove Name!)
Terimakasih Telah Membaca ArtikelCara Mengganti ICON Blog - Cara Mengganti Favicon Blog dan anda bisa menemukan artikel Cara Mengganti ICON Blog - Cara Mengganti Favicon Blog ini dengan url http://zamrudblog.blogspot.com/2012/08/cara-mengganti-icon-blog-cara-mengganti.html Judul Cara Mengganti ICON Blog - Cara Mengganti Favicon Blog Semoga Bermanfaat, Cara Mengganti ICON Blog - Cara Mengganti Favicon Blog.