Tips N Trik Blogger

Tampilkan postingan dengan label Tips N Trik Blogger. Tampilkan semua postingan

Kamis, 20 Juni 2013

Hello Sobat Sex-Zone Komunitas, Kali ini Saya Berbagi Tips " Cara Claim Site Di Alexa" Langsung Aja..

1.Buka Alexa site, Kemudian Masukan URL / Alamat Website Kalian Kemudian Klik Search,Contoh Lihat Gambar Berikut.

2.Kemudian Di Pojok Kanan Ada Tulisan "Claim Your Site", Contoh Lihat Gambar Berikut

3.Masukan URL/ Alamat Website Sobat Kemudian Klik "Claim Your Site"

4.Klik Sign Up Yang Free

5.selanjut nya sobat akan mendapatkan meta tag alexa sobat,copy dan paste kode meta tag tersebut di bawah <head>

6. Check Verify my ID, Kalo ada tulisan " Your Site Is Successfully Claimed" Berarti sobat sudah tepat memasang meta tag tersebut.

7.Kemudian Klik Continue, Selesai

Sekian Postingan Dari Saya ..
Semoga postingan Saya Bisa Membuat Kalian Sukses ..

Cara Claim Site Di Alexa

Posted by Unknown

0 Comment

Minggu, 09 Juni 2013

Pernah menonton film ‘Transformers’ ?, pasti pernahkan. Bagaimana ? seru kan filmnya?…

Nah, membahas tentang Transformers, kali kita akan membahas membuat sebuah efek teks yang dipakai pada judl Transformers. Kalau masih bingung, yuk lihat contohnya akhir projectnya di bawah ini.

Contoh Hasil Akhir Project

Wah.. menarik bukan? kalau begitu mari kita simak tutorial cara pembuatannya …

Langkah 1

Download Font Transformers (235) terlebih dahulu. Setelah itu ekstrak dan install fontnya sampai selesai.

Langkah 2

Buka aplikasi Adobe Photoshop, kemudian langsung buat kanvas baru. Untuk ukuran yang saya pakai 700 x 350.

Kemudian buat layer baru dan untuk warna foregroundnya #000000.

Lamgkah 3

Buat layer baru lagi, kemudian pilih ‘horizontal type tool’ (T).

Beri warna teksnya terlebih dahulu, untuk kode warnanya #ffffff , setelah itu klik OK.

Langkah 4

Ketik teks yang kita inginkan, dan untuk jenis fontnya pilih ‘Transformers’ sesuai font yang sudah kita download tadi. Kemudian untuk ukuran fontnya adalah 36 pt.

Langkah 5

Aktifkan ‘layer style’ pada teks terbut.

Centang ‘inner glow’ lalu klik ‘set color of glow’.

Untuk kode warnanya adalah #ffffff setelah itu klik OK.

Turunkan opacitynya menjadi 75 %.

Langkah 6

Centang ‘Bevel and Emboss’ untuk bagian structure pada pilihan stylenya klik ‘inner bevel’, tentukan juga Depth : 650 %. Pada bagian shadingsetting angle: 120, altitude : 30. Setelah itu ikuti settingan lainnya seperti gambar dibawah ini.

Langkah 7

Centang ‘Color Overlay’, tentukan Blend Mode dan colornya. Atau ikuti seperti gambar di bawah ini.

Langkah 8

Centang ‘Gradient Overlay’

Tentukan gradientnya seperti gambar dibawah ini.

Langkah 9

Lihat tampilan sementara pada teks yang telah kita buat tadi. Hmm.. tapi ini belum sepenuhnya selesai, kita masih perlu sedikit pengeditan pada teks tersebut. Baiklah lanjut langkah berikutnya..

Langkah 10

Centang ‘pattern overlay’

Untuk jenis patternnya, pilih ‘texture fill 2′.

Pilih ‘stucco 2′, lihat gambar dibawah ini.

Langkah 11

Setelah kita atur semuanya, kemudian klik OK.

Lihat hasil jadinya seperti dibawah ini.

Untuk memperindah efek yang telah kita buat, maka ada sedikit Polesan yang perlu kita lakukan. Mari ikuti langkah selanjutnya.

Langkah 12

Duplikat layer teks yang telah kita buat tadi.

Beri nama pada ‘duplicate layer’. Dalam hal ini, saya memberi nama ‘bayangan’ setalah itu kli OK.

Non aktifkan effect layer style pada layer ‘bayangan’.

Letakkan layer ‘bayangan’ di bawah layer aslinya.

Geser layer bayangan menggunakan ‘move tool (V)’ atau anda bisa menggunakan tombol arah pada keyboard anda. Geser layer tersebut hingga menyerupai gambar dibawah ini.

Hasil akhir

Lihat hasil akhirnya…

Bagaimana? mudah bukan?, baiklah selamat mencoba!. Sampai jumpa di tutorial selanjutnya…

Cara Membuat Efek Teks Transformers Menggunakan Adobe Photoshop

Posted by Unknown

0 Comment

Sabtu, 18 Mei 2013

Membuat tanda tangan online di blog ?

Bagaimanakah membuatnya? GAMPANG,, pake aja fasilitas gratis YANG berserakan di internet. Untuk membuat tanda tangan online tersebut, gunakan aja tools dari website yang satu ini Berikut panduan Cara Membuat Tanda Tangan Online Di Blog:

1. browsinglah ke situs berikut www.mylivesignature.com , lalu klik "Click Here To Start"

2.Lalu klik "Create Signature"

3. Lalu pilih "Using the signature creation wizard"

4.Tulis 1 kata atau 2 kata yang ingin sobat modif jadikan sebagai tanda tangan, lalu klik "next step"

5.Pilih jenis huruf , klik "next step"

6.Pilih ukuran huruf, klik "next step"

7. Pilih warna tanda tangan, klik "next step"

8. Pilih slope (kemiringan / bentuk kemiringan tanda tangan) yang diinginkan klik "next step"

9. Sekarang sudah jadi tuh....

Lalu bagaimana mengambil tanda tangan tersebut? Sangat mudah,,ikuti langkah-langkahnya di bawah ini:

1. arahkan kursor ke tanda tangan

2. klik kanan

3. klik “simpan gambar dengan nama” atau “save image as”

4. maka akan terdownload gambar tanda tangan tersebut

5. Lalu up load gambar tersebut ke postingan

Bisa juga dengan menggunakan cara berikut:

1. arahkan kursor ke tanda tangan (tentunya sobat modif masih berada di situs tool tanda tangan ini)

2. klik lihat gambar / view image

3. maka akan tampil halaman yang isinya tanda tangan tersebut saja

4. copy paste url-nya

Jadi dech…....Semoga membantu.

Buat Tanda Tangan Untuk Blog Anda!

Posted by Unknown

0 Comment

Jumat, 03 Mei 2013

-Login blog
-Tata Letak
-Tambahkan Gadget
-Pilih menu pada gambar berikut di blog anda

-Copy Code berikut :

<div id="translate-this"><a style="width:180px;height:18px;display:block;" class="translate-this-button" href="http://translateth.is/">Translate Keren</a></div>

<script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>
<script type="text/javascript">
TranslateThis();
</script>

-Klik Save dan lihat hasilnya

Sekian dan Terimakasih

Cara membuat terjemahan atau translate di blog

Posted by Unknown

0 Comment

- Login Blog
- Tata Letak
- Tambahkan Gadget
- Pilih menu pada gambar berikut di blog anda

- Copy paste kode berikut :

</form>

<style>

#s {

margin: 0 auto;

-webkit-appearance: none;

-moz-appearance: none;

padding: 12px 48px 12px 12px;

-webkit-border-radius: 200px;

-moz-border-radius: 200px;

border-radius: 200px;

width: 230px;

height: 35px;

color: #3a4449;

border: none;

outline: none;

-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);

-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);

box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);

position: relative;

z-index: 2;

background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbAGdQgg_eikD7uBWPeFFOMLeDyJQwSMJm93A1omW085ArfjQ-DFtPNczlslPMej2DhfbBaZ_kWitTrEg3BeUt7GnY3uAEzAkS6PZ0xlpkN8t68nvVkuzkDqToH5rOvb3S4BzEd08ymik/s1600/Search.png) center right no-repeat;

}

#s::-webkit-input-placeholder, #s:-moz-placeholder {

color: #607078;

}

</style>

- Klik Save dan lihat hasilnya

Sekian dan Terima Kasih

Cara membuat kotak mencari atau search box di blog

Posted by Unknown

0 Comment

- Login Blog

- Template

- Edit Html

- Carilah kode </head>

- Copy kode Berikut dan paste di atas kode </head>

- Simpan Template
- Tata Letak
- Tambah Gadget
- Copy dan paste kode di bawah ini

- Kalimat yg berwarna Merah ganti dengan URL fanspage anda
- Simpan dan lihat hasilnya

Sekian dan Terimakasih

Cara membuat fanspage auto hide di blog

Posted by Unknown

0 Comment

Sabtu, 27 April 2013

Demonya Liat di blog ane!
langsung aja caranya !

Masuk ke blog
Trus Cari Template => edit HTML
Tekan CTRL+F
Trus Cari Kode ]]></b:skin>
Kalo Dah Ketemu Pastekan Code Di bawah ini DIATAS kode ]]></b:skin>

</style></head>

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

/* toggle() checks to see if the images has already been faded

or not and sends the appropriate variables to opacity(); */

function toggle(el,milli) {

// Get the opacity style parameter from the image

var currOpacity = document.getElementById(el).style.opacity;

if(currOpacity != 0) { // if not faded

fade(el, milli, 100, 0);

} else { // else the images is already faded

fade(el, milli, 0, 100);

}

}

/* changeOpacity() uses three different opacity settings to

achieve a cross-browser opacity changing function. This

function can also be used to directly change the opacity

of an element. */

function changeOpacity(el,opacity) {

var image = document.getElementById(el);

// For Mozilla

image.style.MozOpacity = (opacity / 100);

// For IE

image.style.filter = "alpha(opacity=" + opacity + ")";

// For others

image.style.opacity = (opacity / 100);

}

/* fade() will fade the image in or out based on the starting

and ending opacity settings. The speed of the fade is

determined by the variable milli (total time of the fade

in milliseconds)*/

function fade(el,milli,start,end) {

var fadeTime = Math.round(milli/100);

var i = 0; // Fade Timer

// Fade in

if(start < end) {

for(j = start; j <= end; j++) {

// define the expression to be called in setTimeout()

var expr = "changeOpacity('" + el + "'," + j + ")";

var timeout = i * fadeTime;

// setTimeout will call 'expr' after 'timeout' milliseconds

setTimeout(expr,timeout);

i++;

}

}

// Fade out

else if(start > end) {

for(j = start; j >= end; j--) {

var expr = "changeOpacity('" + el + "'," + j + ")";

var timeout = i * fadeTime;

setTimeout(expr,timeout);

i++;

}

}

}

</script>

<div class="input" onClick="javascript:toggle('wise', 3000); this.style.display='none';

document.getElementById('june').style.display=''">

<center><img src=" http://i1241.photobucket.com/albums/gg503/satria114/87105761copy_zpsbeadb3fc.jpg "

style="opacity:0.4;filter:alpha(opacity=40)"

onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"

onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/></center>

</div>

<div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">

<div id="june" style="display : none;">

<body>

Ganti Kode Berwarna Merah Dengan URL Gambar Kalian!

Kemudian SAVE!!!!!

Cara Membuat Gambar Welcome Saat Orang Membuka Blog Kita.

Posted by Unknown

2 Comments

Hmm,, Dah Lama Nggak Ngepost, nie Post Udah lama Saya Pikirkan..
sekarang waktunya..

Oke Langsung aja :

1.Login blog kalian masing-masing
2.Masuk ke Template=>Edit HTML
3.Cari Kode <body>
4.Copy Kode Di bawah ,pastekan Kode Tersebut di bawah kode <body>

<div style='position: fixed; bottom: 50px; right: 10px;width:240px;height:280px;'>

<div style='text-align: center;'>

<div>

<div class='rbbox' style='text-align: center;'>

<div style='-moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; border-left:5px solid #fff; border-top:3px solid #fff; border-bottom:3px solid #fff; border-right:5px solid #fff'>

<div id='albri'>Friend's Banner

<div style='background:#0000cc; box-shadow: 0 0 20px #fff; -moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; outset black; padding: 10px;'>

<a href='http://satria-cyber.blogspot.com/' target='_blank'><img alt='Sat-cyber' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHuaukuYT9wLY7ZWk6P2z52xZBh_y43iPwudMetVtd7Abd8erAp9GOq08P9OQ_gB-kgK8wZ2p33TZbTRi6hz-lDy65arh9GJParkj-rsjOI7LGMp2kn1c6_fucR7YrklVpkIk-3lYdqYAy/s1600/sakit.gif'/></a>

=masukkan Scrip Banner Teman Mu Di sini=

</div>

<a href='http://satria-cyber.blogspot.com/' target='_blank'>Credit by Satria</a>

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

</div>

5.Kalo Udah Ganti Tulisan Berwarna Hijau itu Dengan Kode Banner Teman Mu, Tapi Harus Banner Yg Ukuran 88x31 ya, Dan Yang Berwarna UNGU Untuk Posisi Letak Banner Nya "Left Untuk Kiri..right Untuk Kanan, Dan Yang Berwarna Kuning Untuk Boxnya..

demo:

JIKA INGIN MENGCOPAS ARTIKEL "SERTAKANLAH SUMBERNYA" hargai Jari Paya Pembuat.

Cara Membuat Kotak Banner teman Melayang Ala Gue.

Posted by Unknown

0 Comment

Ni Menu udah saya coba di semua Template ternyata BISA!!

Mungkin ada yang di templatenya juga nggak bisa ..

oke langsung aja caranya:

1.Login Blogger=>langsung ke Template=> edit HTML

2.Beri Centang Pada Expand Template Widget

3.Cari Kode ]]></b:skin>

4.Pastekan Kode di Bawah ini Di ATAS kode ]]></b:skin>

.navisatria {

font-size:15px;

border:5px solid #0000cc;

margin:auto;

text-align: center;

width:100%;

z-index:9999999;

position:fixed;

top:0;

}

.navisatria ul {

background: #ddd;

background: -webkit-linear-gradient(top, white, #EEE);

background: -moz-linear-gradient(top, white, #EEE);

-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);

-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);

padding: 0 20px;

list-style: none;

position: relative;

margin:auto;

-webkit-transition: all 0.6s ease-in-out;

-moz-transition: all 0.6s ease-in-out;

z-index:9999999999999999999999999;

}

.navisatria ul:after {

content: ""; clear: both; display: block;

}

.navisatria ul li {

float: left;

-webkit-transition: all 0.6s ease-in-out;

-moz-transition: all 0.6s ease-in-out;

}

.navisatria ul li:hover {

border-radius:10px;

background: #0000cc;

}

.navisatria ul li:hover a {

color: #fff;

}

.navisatria ul li a {

display: block;

padding: 15px 15px;

color: #666;

text-decoration: none;

font-size: 15px;

-webkit-transition: all 0.6s ease-in-out;

-moz-transition: all 0.6s ease-in-out;

}

5.Kemudian Cari Kode <body> Pastekan kode Di bawah ini DI BAWAH kode <body> (Kalau Kode <body> ada 2 pilih yang Ke 2 kalau ada 1 Pilih yang 1)

<ul>

<li><a href='#'>About me</a></li>

<li><a href='#'>Tutorials</a></li>

<li><a href='#'>Articles</a></li>

<li><a href='#'>Download</a></li>

<li><a href='#'>Inspiration</a></li>

</ul>

</div>

ket:

Ganti Simbol # Dengan Link Tujuan kalian,, Ganti (Home,About me,Tutorial, articles,download,inspiration "Bisa Di UBAH!!" ) dengan Judul dari Link Tersebut!

6.Klik "Pratinjau" Dulu (melihat jadi apa nggak yang kalian buat tadi), kalau jadi klik "SaVe TeMpLatE"

Credit By :Satria Hidayat

BILA ANDA INGIN MENGCOPAS ARTICLE INI , SERTAKAN LAH SUMBER DARI PEMBUAT, HARGAI JARI PAYA PEMBUAT!!

Cara Membuat Menu Melayang Di Blog.

Posted by Unknown

0 Comment

Banyak Orang Nanya2 sama gue cara buat buku tamu macam yang di atas, dan terpikir untuk di share aja...

Tanpa Bacod Lagi, caranya :

1.Buat dulu C-box mu KLIK SINI , tapi kalo uda ada gak usah.

2.Masuk ke blogger kalian.

3.Buat Post Baru, Kemudian Buat judulnya "GUEST BOOK" seterah apa yang mau kalian buat.

4.kemudian klik HTML yang ada di pojok kiri itu, kalo gak tau lihat gambar di bawah.

KLIK UNTUK MEMPERJELAS.

5.kemudian Pastekan Kode Di bawah ini, di bagian HTML itu.

<div style="-moz-border-radius:10px; border-radius:10px; padding:10px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQc0WLBMOL6-7YAOxDBu5SE9I5NrnqaToIjnkjEzV0KD-G79LbMZdboNagY1NjiI7f1QRa0pe_cgNi178ZFpH5DjNm7XmyQb8t9EwKUITk7NQw-a6zVXyaLdDTxeT370sNklQ2LgeNo8Av/s1600/biru70.png);"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); });</script><style>/* ---------------Simple Slide panel with jQuery---------------------------------- */#panel { height: auto; background: #f90; width: auto; display: none; padding: 7px; border: #0C0; -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px; -moz-border-radius-bottomright:10px; -webkit-border-bottom-right-radius:10px; -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px; -moz-border-radius-bottomleft:10px; -webkit-border-bottom-left-radius:10px;}.slide { margin: 0; padding: 0; border-top: solid 4px #f90; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG3IEbJF1JAWQ0oeuoLate-HQ8MYGmPXKGe8ezDuBw9xUrvmcsGvCauTGgAp2vin9I9pVRhMgS1SFR40vFDRZCutTeMQVd_Gm3VWoIpmsnc2jq8qXIFnanm4hk0REQboeP27H_xueDWvY/s1600/btn-slide.png) no-repeat center top; }.btn-slide { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhptO9HkuKGwCBlUdaoISteQbilMxH0iAzlgqTpRT9feiepFI0-H5RQlCxNgb-GHauxuKfYw6v_5UzF37XiwGv6mIiJYILPk2RUkesXgczZtYtJf5t4BIAtK39voESPHaOuRvsmQy_xFok/s1600/white-arrow.gif) no-repeat right -50px; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none;}.active { background-position: right 12px;}</style><div id="panel">

</div><p class="slide"><a href="#" class="btn-slide">Gues Book</a></p></div>

6.Kode yang berwarna hijau itu adalah Scrip Buku Tamu Kalian.

7.Kalo rasanya uda selesai, simpan dan lihat hasilnya.

Sekian Post Hari ini.

Buku Tamu Slide Effect With Jquery.

Posted by Unknown

0 Comment

Banyak Orang Tanya2 Sama Gue, Cara Buat gambar Di Header bergerak saat hover, capek we jawabnya ..

lebih baik gue share aja ...

Cekibrot:

Login blogger Kalian.
Trus Masuk Ke Template.
jangan Lupa beri centang pada Expand Template Widget
Cari kode ]]></b:skin>, Pastekan Kode Di Bawah Ini Tepat Di atas Kode Tadi.

div.SCheader {
-moz-transition: all 0.75s ease-in-out 0s;
background: url("http://www.deviantart.com/download/209975142/luffy_render_by_namibekkklein-d3h0huu.png") no-repeat;
margin: 0px;
position: absolute;
}
div.SCheader {
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 900ms ease-out;-moz-transition: all 900ms ease-out;-ms-transition: all 900ms ease-out;-o-transition: all 900ms ease-out;transition: all 900ms ease-out;
background: url("http://www.deviantart.com/download/209975142/luffy_render_by_namibekkklein-d3h0huu.png") no-repeat;
margin-left: 100px;
margin-top: 0px;
position: absolute;
height: 520px;
width: 540px;
}
div.SCheader :hover {
-webkit-transition: all 900ms ease-out;-moz-transition: all 900ms ease-out;-ms-transition: all 900ms ease-out;-o-transition: all 900ms ease-out;transition: all 900ms ease-out;
background: url("http://www.deviantart.com/download/209975142/luffy_render_by_namibekkklein-d3h0huu.png") no-repeat;
}
#header-wrapper:hover .SCheader {
margin-left: 400px;
}

Ket :

orange => URL gambar Anime Kamu.

Hijau => Nama Kepala Headermu.

"SELANJUTNYA ATUR SENDIRI :P"

4.oke sekarang kita aktifkan cssnya,Sekarang Cari kode

<div id='header-wrapper'>

5. Pastekan Kode Di bawah ini Di Bawah kode Di atas

<div class='SCheader'/>

5. Klik PRATINJAU, untuk melihat jadi apa nggak, Kalau jadi Klik Save.

"BILA ADA YG SALAH TANYAKAN LANGSUNG DI KOMENTAR"

Cara Membuat Gambar Di Header Bergerak Saat Hover dengan css.

Posted by Unknown

0 Comment

Kamis, 25 April 2013

Halo Sobat Sex-Zone X ini saya akan share Cara Membuat Sepinning Image / Gambar Berputar Dengan CSS Ya ok langsung aja ya sobat Sex-Zone XD

Langkah" Nya
1. Login ke Blogger
2. Pergi ke Dashbor,
3. Pergi ke Template -> Edit HTML
4. Masukan Code Dibawah ini tepat diatas code

/* Sex-ZoneSharingan Berputar */

.sex-zoneSharingan1 { -moz-animation:spin2Pulse 1s infinite linear; -webkit-animation:spin2Pulse 1s infinite linear;margin-top:-20px; margin-left:400px;position:absolute;z-index:999;height: 200px;line-height: 46px;border-radius:500px;border-left:10px solid black;border-right:10px solid black;width: 200px;; -moz-animation:sex-zonespin 1s infinite linear; -webkit-animation:sex-zonespin 1s infinite linear;animation:sex-zonespin 1s infinite linear}

.sex-zone`Sharingan {margin-top:-20px; margin-left:400px;position:absolute;z-index:999;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIPHvgW7bpTb9dWxKpH3zuKcqpPfgIMzmSOH1jcpTRZaGkjQoldT0UZ9rnLhJi5ltYBJlNxNC7RxTm9liLLs9HmVBHecsnBZ2FdRfMg0JRA6gyEJXvD2Nl7nEblNHtAWrsloVtJqjZjxWe/s185/supers.png) no-repeat;height: 185px; line-height: 46px;border-left:20px solid black;border-radius:500px;border-right:20px solid black;width: 185px; -moz-animation:sex-zonespin 1s infinite linear; -webkit-animation:sex-zonespin 1s infinite linear;animation:sex-zonespin 1s infinite linear}

@-moz-keyframes sex-zonespin {0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} }

@-webkit-keyframes XCspin {0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(-360deg);} }
@keyframes DRobanispin {0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} }

Pengertian Code Diatas :
Code margin-top:-20px; margin-left:400px; itu sesuaikan dengan yang kamu mau Marginnya...
Code height: 200px; yaitu Tinggi gambarnya (sesuaikan dengan keinginan tingginya )
Code width: 185px; yaitu Lebar gambarnya (sesuaikan dengan keinginan lebarnya )
Code https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIPHvgW7bpTb9dWxKpH3zuKcqpPfgIMzmSOH1jcpTRZaGkjQoldT0UZ9rnLhJi5ltYBJlNxNC7RxTm9liLLs9HmVBHecsnBZ2FdRfMg0JRA6gyEJXvD2Nl7nEblNHtAWrsloVtJqjZjxWe/s185/supers.png yaitu code gambar sharingannya..
bisa diganti dengan code gambar sharingan yang lain :)

Kalau code diatas sudah dimasukin, selanjutnya cari code

Kalau sudah semuanya silahkan di "Save Template" Atau di Partinjau terlebih dahulu, :D
kalau tidak bisa, coba ulang lagi cara"nya diatas ,sampai bisa :D...
nah ada tambahan nih, untuk code gambar sharingan nya...

1. Sharingan Biasa :