Sky-Hacking

Jumat, 01 Februari 2013

Cara Membuat Efek Loading Page Di Blogger

1. Login ke blog sobat
2. Buka menu rancangan ->> edit HTML
3. Cari kode </head>
4. Letakkan kode dibawah ini tepat diatas kode </head>

5. Kemudian cari kode <body>
6. Letakkan kode dibawah ini dibawah kode diatas

<div id="page">

7. Cari kode </body>
8. Taruh kode </div> diatas kode </body>
9. Simpan dan Lihat hasilnya...!...
Info (+) :
- Link http://2.bp.blogspot.com/-g4keqsn8d18/T9giD8IVPoI/AAAAAAAACP0/zAEgSVV46MM/s1600/loading3.gif bisa di ganti sesuka hati sobat

Sekian dulu artikel dari saya....
Semoga Artikel ini Berguna....

Cara Ubah Font Blog

Assalamualaikum wr wb
Sebelumnya saya minta maaf karena jarang posting karena kesibukan saya! hari ini saya akan memberi tips dan trik untuk merubah font pada blogger,
ada beberapa cara untuk merubah font di blog
1. Login Ke blok masuk ke rancangan dan pilih font yang kita inginkan, dari font judul,isi dan lain-lain
hanya saja fontnya terbatas, tidak sesuai yang kita inginkan, kelebihannya adalah kita dapat mengatur font judul berbeda dengan font isi postingan, next
2. dengan memanfaatkan google font caranya cukup mudah dan gampang, sobat blogger bisa lihat disini
pada googlefont tersedia banyak jenis font yang menarik dan banyak, sobat bisa pilih sesuka hati, tetapi untuk merubahnya melalui beberapa cara sebagai berikut:
STEP 1:
pilih font yang ingin kamu gunakan untuk blog kamu, setelah dapat fontnya klik ADD TO COLLETION
setelah itu klik choose untuk mendapatkan LINK CODEnya lihat Gambar 1

Gambar 1

STEP 2

setelah mendapatkan LINK CODEnya kita masuk ke Rancangan Edit HTML, letakkan LINK CODE tai tepat dibawah code <head>

setelah itu mulai merubah CSSnya, pada CSS sobat bisa cari font-family Tekan CTRL+F untuk memudahkan pencarian, nah rubah nama fontnya sesuai font yang sobat pilih tadi seperti dibawah ini, saya memilih font Seaweed Script maka hasilnya seperti dibawah ini

font-family: 'Seaweed Script', cursive;

nah setelah berhasil dirubah Simpan dan lihat hasilnya~! lihat gambar 2

Gambar 2

SELESAI SEMOGA BERMANFAAT

Confert MP3 Jadi Swf {Music}

Kebanyakan file lagu yang kita download dari web
hosting yang menyediakan pen-downloadan lagu
seperti 4shared.com dan lain sebagainya, pada
umumnya berektensi .mp3. Software ini dipersilahkan
anda untuk mendownloadnya sebagai bahan kelanjutan
tutorial " Cara Membuat Background Music Pada Blog ".

Tidak rugi anda mendownload Software ini karena
Software ini merupakan Software Total Video Converter
yang dapat digunakan untuk mengconvert video selain
lagu tentunya. Dan Software ini dapat digunakan untuk
mengconvert hampir semua file yang berhubungan
dengan audio maupun video.

Bila anda ingin mendownload software ini sebelum anda
beranjak kepada tutorial yang dimaksud, silahlah anda
klik ikon download yang ada di bawah ini :

Setelah selesai anda mendownload Software tersebut,
ikuti langkah Cara Mengconvert Mp.3 Menjadi Swf
seperti berikut ini :

1.   Install dahulu software tersebut seperti
      biasa anda menginstall software lainnya.

2.   Setelah software tersebut terinstall di komputer anda.
      Klik 2 (dua) kali Shortcut key-nya untuk membuka
      dan memulai Mengconvert lagu .mp3 yang kita miliki.
      (lihat gambar di bawah ini)

3. Seketika akan muncul tabel seperti ini :

4.   Klik " Add File " lalu uploadlah lagu Mp3
    yang anda inginkan.

5.   Atur Profile-nya ke All Profiles dan anda akan
    melihat begitu banyak file yang bisa diconvert.

6.   Karena pembahasan kita mengenai swf, maka
    ubahlah ke SWF - SWF Format (*.swf).
    Perhatikan yang dilingkari warna hijau.
    (lihat gambar di bawah ini)

7.   Tentukan Destination-nya, dimana anda
      akan simpan hasil convert-nya.

8.   Setelah itu, klik tombol " Start "
    dan tunggu sejenak masa prosesnya.

9.   Setelah proses pengconvertannya selesai,
    anda kliklah " OK " pada Convert Done,
    (lihat gambar di bawah ini)

10. maka jadilah lagu kita, yang semula
berektensikan .mp3 menjadi .swf

Cara Memasang Flash (.swf) di Blog

Indonesian Information - Postingan kali ini saya tidak akan membahas cheat / hack / deface seperti biasanya, tapi saya akan mencoba Memasang Flash (.swf) di Blogger sobat, penasaaran ??

Untuk tutorial mengambil SWF anda bisa lihat DISINI, caranya persis hanya tinggal mengambil SWF nya saja

Langsung kita ke tutorial pemasangan SWF di blogger sobat :
1. Buka Blogger anda
2. Klik tambah Gadget, lalu pilih HTML / Java Script atau bisa juga Sobat memasukkan SWF ke dalam postingan anda
Caranya : New Post > Ganti dari Compose ke HTML

Screenshot

3. Masukkan kode berikut di Gadget atau Postingan blog terbaru anda :

<iframe src="http://cr00t404.com/swfposting/1.swf" style="height: 125px; width: 550px;"></iframe>

4. Klik Simpan

NB : Ganti yang warna merah dengan SWF anda

Disini saya ambil 2 contoh, yaitu SWF Adventure Quest Worlds dan Angry Birds Rio

1. Adventure Quest Worlds
SWF nya : http://cdn.aqworlds.com/game/gamefiles/Loader.swf
2. Angry Birds Rio
SWF nya : http://content.free-games.net/games/7QrcX_angry-birds-online.swf

Silahkan sobat masukkan SWF tersebut ke dalam Gadget / Postingan di blogger sobat

Selamat mencoba
Dan semoga berhasil

Pure CSS3 Content Slider

Hallo :D
Setelah Beberapa Hari Penyolongan kagak Nge Post kali Ini Mulai Ngepost lagi :D.
Siang ini ane share cara membuat Pure Css3 Content Slider.
Ane Visit CssDeck eh nemu nih slide Cakep XD..
noh caranye!!

1. Masuk Ke Blog, Rancangan, Edit HTML.
2.Cari Kode ]]></b:skin> letakan kode berikut di atas ]]></b:skin>

DEMO

#slider {
    width:600px;
    height:200px;
    margin:40px auto 0;
    overflow:visible;
    background-color:#362c30;
    border:10px solid #362c30;
    -moz-transition:all 150ms ease-in;
    -webkit-transition:all 150ms ease-in;
    -o-transition:all 150ms ease-in;
    position:relative;
    transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
}
#mask {
    overflow:hidden;
}
#slider:hover {
    background-color:#fff;
    border:10px solid #fff;
    -webkit-animation:rotatey 400ms ease-out;
    -moz-animation:rotatey 400ms ease-out;
}
#slider:hover #pause {
    opacity:1;
}
#slider:hover #progress {
    background-color:rgba(255,255,255,0.0);
}
#slider:hover ul, #slider:hover #progress, #slider:hover #overlay {
    -moz-animation-play-state:paused;
    -webkit-animation-play-state:paused;
}
#pause {
    width:600px;
    height:200px;
    position:absolute;
    top:0;
    opacity:0;
    background-image:url(http://iamceege.com/pure-css3-content-slider/images/paused.png);
    background-position:566px 10px;
    background-repeat:no-repeat;
    pointer-events:none;
    -moz-transition:all 150ms ease-in;
    -webkit-transition:all 150ms ease-in;
    -o-transition:all 150ms ease-in;
}
#progress {
    width:1px;
    height:1px;
    background-color:#ffd000;
    -moz-animation:progress 18s infinite;
    -webkit-animation:progress 18s infinite;
    position:relative;
    top:-1px;
    -moz-transition:all 150ms ease-in;
    -webkit-transition:all 150ms ease-in;
    -o-transition:all 150ms ease-in;
}
#overlay {
    width:600px;
    height:200px;
    position:absolute;
    top:0;
    background-image:url(http://iamceege.com/pure-css3-content-slider/images/overlay.png);
    background-position:center;
    background-repeat:no-repeat;
    pointer-events:none;
    -moz-transition:all 150ms ease-in;
    -webkit-transition:all 150ms ease-in;
    -o-transition:all 150ms ease-in;
    opacity:0.5;
    -moz-animation:overlay-fade 18s infinite;
    -webkit-animation:overlay-fade 18s infinite;
}
#slider ul {
    width:2400px;
    list-style:none;
    padding:0;
    margin:0;
    -moz-animation:slide-animation 18s infinite;
    -webkit-animation:slide-animation 18s infinite;
    position:relative;
    left:0px;
}
#slider li {
    display:inline;
    width:600px;
    height:200px;
    margin:0;
    padding:0;
    float:left;
    position:relative;
    background-image:url(http://iamceege.com/pure-css3-content-slider/images/loader.gif);
    background-position:50% 50%;
    background-repeat:no-repeat;
}
#slider li:last-of-type {
    background-color:#362c30;
}
#slider li a {
    display:block;
    text-decoration:none;
}
#slider li span {
    display:block;
    width:560px;
    padding:15px 20px;
    position:absolute;
    bottom:0;
    left:0;
    background-color:rgba(54,44,48,0.6);
    border-top:1px solid #362c30;
    text-shadow:1px 1px 1px #362c30;
    pointer-events:none;
    text-align:left;
}
#slider-shadow {
    width:100%;
    height:260px;
    background-image:url(http://iamceege.com/pure-css3-content-slider/images/slider-shadow.png);
    background-position:center bottom;
    background-repeat:no-repeat;
    margin:10px auto 0;
}
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes rotatey {
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);}
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);}
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
}
@-moz-keyframes rotatey {
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);}
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);}
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
#slider ul li span h2 {
    font-size:24px;
    line-height:24px;
    color:#fff;
    font-weight:normal;
    font-family:'Communist-Regular';
    text-shadow:1px 1px 1px #362c30;
}

3. Letakkan kode berikut ditempat yang anda ingin kan

<div id='slider-shadow'>
<div id='slider'>
<div id='mask'>
<ul>
<li>
<a href='http://www.penyolongan-cheater.blogspot.com' title='We Are Penyolongan'><img src='http://i1144.photobucket.com/albums/o496/Muhammad_Rendy/slide1penyolongan.png'/></a>
</li>
<li>
<a href='http://www.penyolongan-cheater.blogspot.com' title='Visit And Follow Penyolongan'><img src='http://i1144.photobucket.com/albums/o496/Muhammad_Rendy/slide2penyolongan.png'/></a>
</li>
<li>
<a href='http://www.facebook.com/ariq.nsx' title='New Style'><img src='http://iamceege.com/pure-css3-content-slider/images/3.png'/></a>
</li>
<li>
<a href='https://www.facebook.com/groups/penyolongan.cheater/' title='The Best information Site'><img src='http://i1144.photobucket.com/albums/o496/Muhammad_Rendy/slide3penyolongan.png'/></a>
</li>
</ul>
</div>
<div id='progress'></div>
<div id='overlay'></div>
<div id='pause'></div>
</div></div>

Bungkus Sepenuhnya Script CSS

Terkejut saya saat open source di sebuah blog dengan platfrom dari blogger. Script CSS nya menghilang? Awala pertama memang sedikit bingung, mungkin kalau di teliti lagi sebenarnya tidak menghilang melainkan diringkas menjadi sebuah link yang ber file (dotCSS) yang akan di pangill dalam sebuah HTML. Seperti di blog saya ini script CSSnya tidak keluar, melainkan saya buat pemangilan link file CSS dalam sebuah HTML. Jika anda ingin membuat pemangilan file CSS ini dalam template anda, Saya sarankan agar anda memback uptemplate anda terlebih dahulu.

Login ke Blogger.com Pergi ke Rancangan/Template > Edit HTML
Potong (Cut) script CSS diantara tengah-tengah kode berikut
<b:skin><![CDATA[ script css (cut) ]]></b:skin>
Paste script tersebut dalam sebuah notpad dan simpan dengan nama style.css(selain nama style juga tidak apa-apa asalkan ada .css)
Upload file style.css tersebut dalam sebuah hosting. Jika anda tidak mempunyai sebuah hosting anda bisa mengunakan Google Sites sebagai hosting anda. klik berikut untuk cara Membuat Hosting Dari Google Site
Setelah anda upload tahap selanjutnya membuat script pemanggil, masi pada halaman Edit HTML
anda ganti kode <b:skin><![CDATA[ ]]></b:skin> dengan kode dibawah ini
<link href='URL-FILE-CSS' rel='stylesheet' type='text/css'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:skin><![CDATA[ ]]></b:skin>
</b:if>
Teks yang berwana biru anda ganti dengan URL file CSS yang anda copy dari file hosting anda.
Terakir klik Save Template dan lihat pada blog anda apakah script CSSnya sudah menghilang pada open source.

Bagi anda yang mempunyai 2 atau lebih script CSS yang berbeda dan hanya berfungsi pada saat di halaman tertentu MISALNYA seperti kode di bawah ini yang berfungsi hanya di halaman post

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
SCRIPT CSS (cut)
</style>
</b:if>

Cara membungkusnya cukup sederhana ikuti langkah 1-4 dan setelah selesai proses 1-4 sampai proses upload anda ganti kode

<style type='text/css'>
</style>

Dengan kode

<link href='URL-FILE-CSS' rel='stylesheet' type='text/css'/>

Sehinga menjadi seperti ini

<b:if cond='data:blog.pageType == "item"'>
<link href='URL-FILE-CSS' rel='stylesheet' type='text/css'/>
</b:if>

Teks yang berwana biru anda ganti dengan URL file CSS yang anda copy dari file hosting anda.

Source : http://www.donorilmu.com/2012/01/bungkus-sepenuhnya-script-css.html

Sumber : http://www.hgc-syndicate.com/2012/07/terkejut-saya-saat-open-source-di.html#ixzz20sFMmMic

Belajar Mastering Code HTML

HTML atau sudah mengetahui HTML secara garis besar dan ingin menambahkan kemampuan.

Sebelum mengetahui lebih dalam tentang HTML,mungkin banyak yang bertanya apa sih HTML itu..???
HTML (Hyper Text Markup Language) adalah sekumpulan simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang di maksud untuk menampilkan halaman pada web browser. Tag-tag tadi memberitahu browser bagaimana menampilkan halaman web dengan lengkap kepada pengguna.
Tag-tag HTML selalu di awali dengan <x> dan diakhiri dangan </x> dimana x tag HTML seperti b,i,u dan sebaginya.

hmmmm.. kayanya kalo semua artikel di tulis atau di baca di sini mungkin memerlukan waktu 2 hari baru selesai,yaudah bagi yang tertarik dengan Mastering kode HTML dan ingin mencoba membuat website sendiri lebih lengkapnya download aja E-booknya di bawah ini

Yang belum mempunyai tools untuk membuka file berekstensi RAR/ZIP bisa di download Disini

Sky-Hacking

Pages - Menu

Jumat, 01 Februari 2013

Cara Membuat Efek Loading Page Di Blogger

Cara Ubah Font Blog

Confert MP3 Jadi Swf {Music}

Cara Memasang Flash (.swf) di Blog

Pure CSS3 Content Slider

Bungkus Sepenuhnya Script CSS

Belajar Mastering Code HTML

Telusuri

Label

Pengunjung

Follower

Teman

About Me

Entri Populer