Iyunk blog: Tips And Trik

Tampilkan postingan dengan label Tips And Trik. Tampilkan semua postingan

Efek awan dan pesawat terbang di blog

[1]. Pertama, pastinya Login dulu ke Blog Kalian.

[2]. Kemudian dari Dasbor, cari Rancangan --> Edit HTML.

[3]. Lalu cari Code <Body>.

[4]. Setelah ketemu, Copy dan Paste-kan Code di bawah ini, tepat di BAWAH Code tadi.

<style type="text/css">
#cover-cloud {
width:100%;
height:200px;
position:absolute;
z-index:100;
left:0;
}
#cloud {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj22jC1FojtgW3uaUCSSIij2ezw5jvdiGuRQfeWgJzx8g8LQDaDpJ3Czt57yjNHeFhoq8pw9bWXqX6VvKFVMC9WBtGLxrBERc2hi2UffINGO_sMj7HJYrxO9SCN4BB4k3h0QKqkaRvBkPY/s1600/cloud1.png) repeat-x 0 0;
position: absolute;
width:100%;
height:188px;
z-index: 200;
}
#cloud2 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_sQqsYL9wfLgM7JG1JOAeg6sFNTcy55rW7jYsP2-Fk8_wQN3KR883r_3wPBMWdKqMU4gniCT8lpFsaedz_QXoRFULSSsFeHfW7v318Nwz9DXPG6QRqSxDmeKkaJDiCp5EMPwiyJClrJs/s1600/cloud2.png) repeat-x 0 0;
position: absolute;
width:100%;
height:125px;
z-index: 300;
}
#cloud3 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfe4VJRM6j31OhzXWs8qh-m-8CrF4ZQe0vTKv97MsBDl1xdbUU68rEJ9e5cPMk6mwGsxLGN7q-2RHM5RbV-_j429oXJT4PjkjNYIqyC7CWvYiLwAPZse32bK0RVhVjQPijKoIVmYKnNIg/s1600/cloud3.png) repeat-x 0 0;
position: absolute;
width:100%;
height:46px;
z-index: 400;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="http://monozcore-project.googlecode.com/files/jquery_spritely.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {$(document).ready(function() {$('#cloud').pan({fps: 30, speed: 1, dir: 'right'});$('#cloud2').pan({fps: 30, speed: 2, dir: 'right'});$('#cloud3').pan({fps: 30, speed: 0.5, dir: 'right'});});})(jQuery);
</script>
<div id='cover-cloud'><div id='cloud'></div><div id='cloud2'><marquee direction='right'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpwbe7h_csIVUqHrW9zgH2rlQcEfMwG9SKiwhI5ck8bApNiB6A1IvfTqkKWCNRnbqym-UXFdk9k4XyPNiv58NYtzCbTmIu8lFK3fVzUVjwsIljdWrSxyj-i6BYZ4b5yorkwqpL0tO9H9Xs/s800/red_baron.gif'/></marquee></div><div id='cloud3'></div></div>

- Keterangan :

Teks yang berwarna biru merupakan link gambar pesawat, untuk mengganti gambar pesawat silakan ganti link tersebut dengan link gambar yang sobat inginkan. Usahakan menggunakan gambar dengan ukuran 144 pixel baik ukuran tinggi maupun ukuran lebar gambar. Pada postingan artikel ini terdapat beberapa pilihan gambar yang bisa sobat gunakan untuk menyesuaikan gambar pesawat dengan tema template blog sobat.

[5]. Klik "Save" dan lihat hasilnya...

Pilihan Gambar Pesawat :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgycCXgY7QRsLQ6ptex2f8T-XXcoul9GNF7D2pBVOKO2Qg-Mg9orWVzLPkArDjjGDRsM10u5Hz-BG81jKfrfbanQKr0Yvrufx4GHvZrM27G8j9FP0KI1qZ8yiQRLYGl_KB4L5jV6AdvP0DQ/s800/sexy-witch.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpwbe7h_csIVUqHrW9zgH2rlQcEfMwG9SKiwhI5ck8bApNiB6A1IvfTqkKWCNRnbqym-UXFdk9k4XyPNiv58NYtzCbTmIu8lFK3fVzUVjwsIljdWrSxyj-i6BYZ4b5yorkwqpL0tO9H9Xs/s800/red_baron.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjRmakVayR3sr29zv4IEhpMvD2EAYWKRX2fFDB0EbIF4B-0EOqq3uvu8p8L4pGnyy3sDRXnVVnGE1GwwZJO_0cJd0QEdeIO0ATNREa76GQ1mLkprD85xtS0BXm0L75H3tfDyd3S2RwxUM/s800/UFO1.gif

http://lh6.googleusercontent.com/-3pHxmXDrZfM/T-Zn96qUC6I/AAAAAAAACPY/XSWhcA7meMc/s144/Gundam.png

Sumber: http://monozcore.blogspot.com/2012/06/efek-awan-dan-pesawat-terbang.html

Menonaktifkan Klik kanan

Ada banyak cara untuk melindungi konten blog kita salah satunya dengan cara ini. caranya sangatlah muda anda hanya perlu menganti kode <body> dengan kode

<body oncontextmenu='return false;' onmousedown='return false;' onkeydown='return false;'>

mudah bukan sekian posting kali ini. :D

Loading Blog dengan @keyframe 2

Melanjutkan posting yang sebelumnya tentang Loading blog dengan @keyframe. kali ini saya akan share loading blog seperti pada blog ini di bagian sidebar.

Penerapan Pada Blog

Letakkan kode di bawah ini di atas kode ]]></b:skin>

@-webkit-keyframes css3Animasi{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(10)}} @-moz-keyframes css3Animasi{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(10)}} @-ms-keyframes css3Animasi{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(10)}} @-o-keyframes css3Animasi{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(10)}} @keyframes css3Animasi{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(10)}}

Letakkan Kode di bawah ini di bagian code css bagian yang ingin di terapkan trik ini

-webkit-animation:css3Animasi 4s ease-in;-moz-animation:css3Animasi 4s ease-in;-ms-animation:css3Animasi 4s ease-in;-o-animation:css3Animasi 4s ease-in;animation:css3Animasi 4s ease-in}

Unknown di Rabu, Januari 16, 2013 Original , Tips And Trik , Tutorial Blogger

Loading Blog dengan @KeyFrame [dari kiri ke kanan]

Kali ini saya akan share tutorial membuat loading blog dengan @KeyFrame. tehnik ini lah yansaya terapkan di blog ini, contohnya adalah pada menu navigasi dan sidebar blog ini hampir sama seperti itu tutorial yang saya share kali ini.

Dari Kiri Ke Kanan

Penerapan Pada Blog

Letakkan kode di bawah ini di atas kode ]]></b:skin>

@-webkit-keyframes zoomnav{from{-webkit-transform:translate(-1000px,0px);opacity:0}to{-webkit-transform:translate(0px,0px);opacity:1}} @-moz-keyframes zoomnav{from{-moz-transform:translate(-1000px,0px);opacity:0}to{-moz-transform:translate(0px,0px);opacity:1}} @-ms-keyframes zoomnav{from{-ms-transform:translate(-1000px,0px);opacity:0}to{-ms-transform:translate(0px,0px);opacity:1}} @keyframes zoomnav{from{transform:translate(-1000px,0px);opacity:0}to{transform:translate(0px,0px);opacity:1}}

Letakkan kode di bawah ini di bagian code css bagian yang ingin di terapkan trik ini

-webkit-animation:zoomnav 2s;-moz-animation:zoomnav 2s;-ms-animation:zoomnav 2s;animation:zoomnav 2s
hehehe agak ribetya tulisanya gini contohnya: misalnya saya mau terapkan trik ini di bagian navigasi jadi taruh kode tadi di CSS bagian navigasi

CONTOH:
#navigiasi{
-webkit-animation:zoomnav 2s;-moz-animation:zoomnav 2s;-ms-animation:zoomnav 2s;animation:zoomnav 2s
}

kali ini baru satu trik yang saya bagi tentang loading blog trik yang ke dua akan saya share di posting selanjutnya jadi tunggu posting selanjutnya :D

Unknown di Rabu, Januari 16, 2013 Original , Tips And Trik , Tutorial Blogger

TAG CONDITIONAL Blogger

Sebernernya posting ini sudah banyak di temukan di google. dan sekedar untuk yang belum tau kali ini saya akan posting hal ini di blog saya langsung aja

Tag Conditional di gunakan untuk meletakkan sebuah widget atau sejenisnya yang lain di tempat-tempat yang kita inginkan langsung aja ini kodenya:

Menampilkan widget hanya di Homepage

<b:if cond="data:blog.url == data:blog.homepageUrl">
ini tempat kode widget
</b:if>

Menampilkan widget selain di Homepage

<b:if cond="data:blog.url != data:blog.homepageUrl">
ini tempat kode widget
</b:if>

Menampilkan widget hanya di Archivepage

<b:if cond="data:blog.pageType == "archive"">
ini tempat kode widget
</b:if>

Menampilkan Widget selain di Archivepages

<b:if cond="data:blog.pageType != "archive"">
ini tempat kode widget
</b:if>

Menampilkan widget hanya di Staticpages

<b:if cond="data:blog.pageType == "static_page"">
ini tempat kode widget
</b:if>

Menampilkan widget pada URL atau halaman tertentu

<b:if cond="data:blog.url == "alamatpostingan"">
ini tempat kode widget
</b:if>

karena keterbatasan waktu tag-tag di atas belum semua saya tulis mungkin saya akan update postingini di lain waktu.

Unknown di Sabtu, Januari 12, 2013 Original , Tips And Trik , Tutorial Blogger

Auto Readmore pada posting blog

Setelah sebelumnya saya telah menjelaskan cara menganti scrollbar pada blog kali ini saya akan share cara buat auto readmore pada blog. Posting auto readmore di tujukan unutk meringkan sebuah posting blog pada halaman home page ini di tujukan agar pengunjung bisa lebih leluasa melihat posting-posting lain yang ada di sebuah blog

Kitamulai langkah membuat auto Readmore

Pertama masuk halaman Edit HTML Blog anda
kemudian temukan kode </head>

Salin Kode di bawah ini,dan letakkan di atasnya:

<script type="text/javascript" src="http://blog.iyunk21.com/readmore.js"> </script>

Setelah itu cari Kode ini <data:post.body/>

Ganti Kode Tersebut dengan Kode di bawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> <span class='readmore'><a expr:href='data:post.url'>READ MORE>></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>

dengan begini auto readmore sudah terpasang di blog anda, tapi Bila anda masih kurang lega dengan tulisan READ MORE>> anda bisa menambahkan CSS di Tombbol readmore anda

untuk menanbahkan CSS ikuti langkah dibawah ini:

Cari Kode ]]></b:skin>

Kemudian salin kode dibawah ini,dan letakkan di atas kode ]]></b:skin>

.readmore{padding:5px;background:#f60;color:#fff}

SekianPosting kali ini nantikan posting selanjutnya di blog ini :D

Unknown di Minggu, Januari 06, 2013 Original , Tips And Trik , Tutorial Blogger

Merubah tampilan Scroll Bar Blog

Di posting pertama saya di blog ini saya akan share cara merubah tampilan scroll bar blog bagi yang bosen dengan scrool bar yang itu-itu aja, harus di coba nih. langsung aja begini caranya.

cara
ganti
style
scrollbar
warnanya sesuka hati
:D
wew
wow
WEW
tutorial By Iyunk21-Blog

Caranya:
Masuk halaman Editor HTML Blogger milik anda

Temukan Kode ]]></b:skin>

Salin kode di bawah ini dan letakkan di atasnya:

::-webkit-scrollbar {
height:12px;
width:12px;
background:#f60;
}

::-webkit-scrollbar-thumb {
background-color:#333;
-moz-border-radius:10px;
border-radius:10px;

PenjelasaN:

Tuilsan yang berwarna Orange adalah background: scroll bar
Tulisan yang berwarna merah adalah tombolnya

Kemudian Tekan Simpan template

Unknown di Jumat, Januari 04, 2013 Tips And Trik , Tutorial Blogger