Membuat Sumber Otomatis Bila Ada Yang Copas

Welcome To GENETIK [ Generasi Teknik Informatika ] :

Hallo Semua Sobat Inside Lovers, kali ini Blog's GENETIK [ Generasi Teknik Informatika ] akan memposting Membuat Sumber Otomatis Bila Ada Yang Copas,
oke tanpa basa basi lagi liat tutorialnya di bawah :

Membuat Sumber Otomatis bila ada yang kopas - Cara Membuat Sumber Otomatis bila ada yang kopas - Kali ini saya akan coba share sebuah ngeblog tip nih. Kita sering dibuat kesal oleh beberapa oknum yang mencoba copas alias kopi susu, eh salah maksudnya copy paste ya kan? Mungkin mereka emang sengaja atau mungkin juga sedang malas menaruh link kita di blog dia yang kopas itu (fayescool.blogspot.com).

Apabila memang mereka malas membuat sumbernya, mungkin solusinga adalah kita buat otomatis muncul ketika mereka mengkopi artikel blog kita. Mungkin ini dapat membantu mereka menaruh sumbernya, kecuali memang mereka berniat untuk tidak menaruh sumber...

Untuk membuat blog kita dapat mengeluarkan sumber otomatis ketika di kopas caranya cukup mudah kok, sebagai berikut langkah-langkahnya:

1. Login dulu dong di blogger.com.

2. Kemudian cari kode < body > [ tanpa spasi ]

3. Jangan lupa tips ini dari fayescool.blogspot.com lho...

4. Kembali ke topik, kalau sudah ketemu kode nya kopi kode berikut:

if(document.location.protocol=='http:'){  var  Tynt=Tynt||[];Tynt.push('cXIEhKYVSr4lJ5adbi-bpO');Tynt.i={"ap":"Sumber  :"};  (function(){var  s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://tcr.tynt.com/ti.js';var   h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})(); } >

5. Taruh kode tersebut tepat diatas kde yang tadi dicari itu...

6. Simpan template.

Demikian lah sedikit coretanku tentang Membuat Sumber Otomatis bila ada yang kopas bila ada salah kata ataupun salah tingkah saya mohon maaf yang sedalam-dalamnya terimakasih (fayescool.blogspot.com).....

Sumber: http://fayescool.blogspot.com/2012/01/membuat-sumber-otomatis-bila-ada-yang.html#ixzz1igaylWwF

Membuat Teks Area Untuk Banner Blog

Welcome To GENETIK [ Generasi Teknik Informatika ] :

Hallo Semua Sobat Inside Lovers, kali ini Blog's GENETIK [ Generasi Teknik Informatika ] akan memposting Membuat Teks Area Untuk Banner Blog,
oke tanpa basa basi lagi liat tutorialnya di bawah :

Teks Area, fasilitas ini dapat kita gunakan untuk menyisipkan sebuah kode atau script dengan tujuan dapat di copy oleh pengunjung blog kita misalnya kode bertukar banner, kode link, teks dan lainnya.
Mengapa harus menggunakan Teks Area dan apa harus menggunakan Teks Area ini? Ya Teks Area ini akan dapat menampilkan kode atau teks yang kita pasang, karena jika tidak menggunakan teks area ini yang nampak bukan Kode Script melainkan Efek dari script tersebut.
Adakah cara lain selain Teks Area? Ya ada yaitu menggunakan Parse HTML namun menggunakan fasilitas ini tidak begitu efektif jika dterapkan pada sebuah Sidebar dan kode yang akan kita tampilkan panjang karena akan memakan tempat yang lumayan hasilnya kurang Rapih.


Contohnya :

Teks Area tanpa tombol Higlight

<a href="http://rafliinside.blogspot.com/2011/12/tukeran-banner-yuk.html" target="_blank"><br /> <img alt="-=[./Genetik]=-" border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC9pCyqpDAoHnA3I-XIfdB-RE6t0KwzwMBf1_gYTwZlIG-sVJlwLBBgow6dIWe6R4T8ioNaYCStFLAEzVHg4ILmUseZ5hx1UrBkqOrOo9BmCysF2QKt-sy0ntRFzceCL6uvcCGrqj1h3Q/s1600/Banner.jpg" width="200" /></a>

Teks Area dengan fungsi tombol Higlight

<a href="http://rafliinside.blogspot.com/2011/12/tukeran-banner-yuk.html" target="_blank"><br /> <img alt="-=[./Genetik]=-" border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC9pCyqpDAoHnA3I-XIfdB-RE6t0KwzwMBf1_gYTwZlIG-sVJlwLBBgow6dIWe6R4T8ioNaYCStFLAEzVHg4ILmUseZ5hx1UrBkqOrOo9BmCysF2QKt-sy0ntRFzceCL6uvcCGrqj1h3Q/s1600/Banner.jpg" width="200" /></a><br />

Nah berikut cara membuat Teks Area tersebut :

1. Login ke Blogger >> Design >> Tata Letak / Page Element
2. Klik Add Gadget >>
3. Cari dan widget tambahkan HTML/Javascript
4. Kemudian Salin dan tempel kode dibawah ini pada form yang tersedia


Teks Area tanpa tombol Higlight

<p align="center"><textarea name="code" rows="6" cols="20"> Tuliskan teks atau kode script anda disini, Anda juga dapat menerapkan teks area ini pada postingan saja</textarea></p>

Teks Area dengan fungsi tombol Higlight

<div>

<form name="copy">

<div align="center">

<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div>

<div align="center">

</div>

<div align="center">

<textarea cols="55" name="txt" rows="100" style="height: 144px; width: 300px;" wrap="VIRTUAL">Letakkan sebuah tulisan atau kode script anda disini</textarea></div>

</form>

</div>

3. Jangan lupa simpan

Keterangan Tambahan:
- Anda dapat merubah lebar dan tinggi dengan merubah nilai teks berwarna merah height: 144px dan width: 300px

- Ganti teks berwarna hijau dengan kode script atau teks yang ingin anda tampilkan
- Teks Area ini juga dapat ditampilkan pada postingan anda, jadi Teks area tidak hanya berfungsi pada seidebar anda.
- Semoga berhasil

Cara Pasang Tag Permalink Artikel Di Bawah Postingan

Welcome To GENETIK [ Generasi Teknik Informatika ] :

Hallo Semua Sobat Inside Lovers, kali ini Blog's GENETIK [ Generasi Teknik Informatika ] akan memposting Cara Pasang Tag Permalink Artikel Di Bawah Postingan,
oke tanpa basa basi lagi liat tutorialnya di bawah :

Berikut tutorialnya :

1. Login ke akun blogger rekan

2. Pilih rancangan dan klik edit template, expand widget template

3. Pasang css berikut ini dan letakkan diatas ]]></b:skin>

.permalinktag
{border: 1px solid #EFF0F1;
padding: 5px;
background: #ffffff;-moz-border-radius:5px;}
.permalinktag a
{background:none;}
img.float-right {margin: 5px 0px 0 10px;}
img.float-left {margin: 5px 10px 0 0px;}

4. Cari kode <data:post.body/> atau <p><data:post.body/></p>

5. Jika sudah ditemukan, ganti kode tersebut dengan kode dibawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p><data:post.body/></p>
<div class='permalinktag'>
<center><small>Anda sedang membaca artikel <strong><u><data:blog.pageName/></u></strong> dan artikel ini url permalinknya adalah <strong><data:post.url/></strong></small></center><center><small>Semoga artikel <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> ini bisa bermanfaat.</small></center></div>
<b:else/>
<p><data:post.body/></p>
</b:if>

6. Save template

7. Selamat Mencoba dan Semoga Berhasil

Menu Rocking Rolling Rounded Dengan jQuery

Welcome To GENETIK [ Generasi Teknik Informatika ] :

Hallo Semua Sobat Inside Lovers, kali ini Blog's GENETIK [ Generasi Teknik Informatika ] akan memposting Menu Rocking Rolling Rounded Dengan jQuery,
oke tanpa basa basi lagi liat tutorialnya di bawah :

Live Demo

Sebenarnya versi asli dari menu navigasi  ini menggunakan framework jQuery 1.5.2 sebagai mesinnya. Namun setelah Saya coba dengan JQuery versi 1.3.2 ternyata masih bisa berjalan. Bahkan lebih baik.

Nah sekarang untuk membuay menu navigasi ini pastikan dulu template kamu sudah dilengkapi dengan JQuery versi 1.3.2 sepeti ini :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>  

Jika template mu sudah dilengkapi dengan di atas, kamu bisa langsung melanjutkan ke langkah berikutnya. Tapi jika belum, salin dulu kode di atas kemudian letakkan tepat di atas kode <heead>

Letakan kode dibawah ini sesudah JQuery tadi:

<script src='https://sites.google.com/site/blogcunayzblogspotcom/jquery/jquery-animate-css-rotate-scale.js' type='text/javascript'/>
<script src='https://sites.google.com/site/blogcunayzblogspotcom/jquery/jquery-css-transform.js' type='text/javascript'/>

Kemudian salin kode CSS di bawah ini dan letakan di atas kode ]]></b:skin> atau </style>:

 #rocking-rolling{
width:auto;
height:52px;
text-align:left;
font-family:"Trebuchet MS",sans-serif;
font-size:16px;
font-style:normal;
font-weight:bold;
text-transform:uppercase;
}

#rocking-rolling h2,#rocking-rolling p, #rocking-rolling form{
/* netralisasi tampilan elemen heading, paragraf dan formulir */
margin:0 0 0 0;
pading:0 0 0 0;
border:none;
background:transparent;
}

#rocking-rolling .item{
position:relative;
background-color:#f0f0f0;
float:right;
width:52px;
margin:0px 5px; height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;
}

#rocking-rolling .link{
left:2px; top:2px;
position:absolute;
width:48px;
height:48px;
}

#rocking-rolling .icon_home{
background:transparent url(http://3.bp.blogspot.com/-fuX8vT6cIzs/TlXFJXROx2I/AAAAAAAAAxE/D1kiRmSFBy4/s1600/home.png) no-repeat top left;
}

#rocking-rolling .icon_mail{
background:transparent url(http://2.bp.blogspot.com/-FaTjV0LsMXQ/TlXFJ_5vpxI/AAAAAAAAAxc/JRPFgDCZ6lg/s1600/mail.png) no-repeat top left;
}
#rocking-rolling .icon_help{
background:transparent url(http://4.bp.blogspot.com/-l7M2zGOJAQo/TlXFJ0YZR6I/AAAAAAAAAxM/32acLuLn_r8/s320/help.png) no-repeat top left;
}

#rocking-rolling .icon_find{
background:transparent url(http://4.bp.blogspot.com/-ZIEGzN0LZCg/TlXFJ8WVzEI/AAAAAAAAAxU/2-oDKLYjsKw/s1600/find.png) no-repeat top left;
}

#rocking-rolling .icon_photos{
background:transparent url(http://4.bp.blogspot.com/-IwFEevO-np8/TlXFKFu47FI/AAAAAAAAAxk/aejG1YmQumc/s1600/photos.png) no-repeat top left;
}

#rocking-rolling .item_content{
position:absolute;
height:52px;
width:220px;
overflow:hidden;
left:56px;
top:7px; background:transparent; display:none;
}

#rocking-rolling .item_content h2{
color:#aaa;
text-shadow:1px 1px 1px #fff;
background-color:transparent;
font-size:14px;
}

#rocking-rolling .item_content a{
background-color:transparent;
float:left;
margin-right:7px;
margin-top:3px;
color:#bbb;
text-shadow:1px 1px 1px #fff;
text-decoration:none;
font-size:12px;
}

#rocking-rolling .item_content a:hover{
color:#0b965b;
}

#rocking-rolling .item_content p{
background-color:transparent;
text-transform:none;
font-weight:normal !important;
display:none;
}

#rocking-rolling .item_content p input{
border:1px solid #ccc;
padding:1px;
width:155px; float:left;
margin-right:5px;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}

Terakhir tinggal meletakan kerangka objek saya,
Salin kode ini,kemudian letakan di tempat dimana kamu inginkan menu navigasi ini tampil,misalnya di bawah header.

<div id='rocking-rolling'>
<div class='item'>
<a class='link icon_mail'></a>
<div class='item_content'>
<h2>KONTAK SAYA</h2>
<p>
<a href='#'>eMail</a>
<a href='#'>Twitter</a>
<a href='#'>Facebook</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_help'></a>
<div class='item_content'>
<h2>BANTUAN</h2>
<p>
<a href='#'>Buku Tamu</a>
<a href='#'>Lapor</a>
<a href='#'>Kritik dan Saran</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_find'></a>
<div class='item_content'>
<h2>TELUSURI</h2>
<p>
<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' method='get'><input name='q' type='text'/></form> 
</p>
</div>
</div>

<div class='item'>
<a class='link icon_photos'></a>
<div class='item_content'>
<h2>GALERI FOTO</h2>
<p>
<a href='#'>Kategori</a>
<a href='#'>Arsip</a>
<a href='#'>Daftar Isi</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_home'></a>
<div class='item_content'>
<h2>MULAI DARI SINI</h2>
<p>
<a href='#'>Pelayanan</a>
<a href='#'>Portfolio</a>
<a href='#'>Pembayaran</a>
</p>
</div>
</div>

<div style='clear:both;'></div>

</div>

<script type='text/javascript'>  function collapse(a){var b=1440;var c=setInterval(function(){if(b==0){clearInterval(c);return}b-=40;$('.link',a).stop().animate({rotate:'+=40deg'},0)},10);a.stop().animate({width:'52px'},1e3).find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut()}function expand(a){var b=0;var c=setInterval(function(){if(b==1440){clearInterval(c);return}b+=40;$('.link',a).stop().animate({rotate:'+=-40deg'},0)},10);a.stop().animate({width:'268px'},1e3).find('.item_content').fadeIn(400,function(){$(this).find('p').stop(true,true).fadeIn(600)})}$('.item').hover(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)})  </script>

Catatan :

1. Setiap unit menu navigasi R3MJ (Rocking Rolling Rounded Menu dengan JQuery) dapat didefinisikan sebagai berikut:
<div class='item'>
<a class='nama_class'></a>
<div class='item_content'>
<h2>JUDUL MENU</h2>
<p>
<a href='#'>Nama Menu</a>
<a href='#'>Nama Menu</a>
<a href='#'>Nama Menu</a>
</p>
</div>
</div>

• Ganti JUDUL MENU dengan judul menu yang kamu kehendaki, 
• Kode # dengan sebuah alamat URL. 
• Sesuaikan Nama Menu dengan nama menu yang kamu inginkan.

2. Khusus untuk kotak penelusuran pada menu ini sudah Saya set agar dapat berfungsi pada situs-situs blogspot. Jika kamu bukan termasuk pengguna layanan blogspot, kamu harus mengganti kode yang Saya beri warna biru dengan elemen formulir kotak penelusuran posting di templatemu agar elemen tersebut bisa bekerja.

3. Script yang Saya letakkan di bawah kerangka menu lebih baik jangan dipindahkan ke area <head> ... </head>. Sebagian besar script memang idealnya diletakkan di dalam wilayah kekuasaan <head> namun beberapa dari mereka juga ada yang harus diletakkan setelah objek seperti pada menu ini.

Selamat berkreasi,jika ada masalah jangan sungkan untuk bertanya "di kotak komentar",... ^_^

Load Page Blog Lebih Keren Dengan Keyframes

Welcome To GENETIK [ Generasi Teknik Informatika ] :

Hallo Semua Sobat Inside Lovers, kali ini Blog's GENETIK [ Generasi Teknik Informatika ] akan memposting Load Page Blog Lebih Keren Dengan Keyframes,
oke tanpa basa basi lagi liat tutorialnya di bawah :

Cara membuatnya sangat simple tinggal meletakan kode CSS berikut di atas kode ]]></b:skin>

@keyframes myfirst
{
from{opacity:0;}
to{opacity:10;}
}
@-moz-keyframes myfirst
{
from{opacity:0;}
to{opacity:10;}
}
@-webkit-keyframes myfirst
{
from{opacity:0;}
to{opacity:10;}
}
@keyframes
{
from{transform:translate(0px, 9000px)}
to{transform:translate(0px, 0px)}
}
@-moz-keyframes
{
from{-moz-transform:translate(0px, 9000px)}
to{-moz-transform:translate(0px, 0px)}
}
@-webkit-keyframes
{
from{-webkit-transform:translate(0px, 9000px)}
to{-webkit-transform:translate(0px, 0px)}
}
#header-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#main-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#nav {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#sidebar-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
h1,h2,h3,#id css {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
h1,h2,h3,.post img {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 8s;}

Catatan : Jika sobat ingin membuat efek pada instrumen lain misanya menu sobat tinggal menambah kode css berikut :

•  #nama instrumen {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;} 
• Misalnya #nav {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}

Mohon maaf jika penjelasannya agak membingungkan karena saya agak susah untuk menjelaskannya,jika ada pertanyaan silahkan tinggalkan jejak di kotak komentar,...


sumber ilmu : Musa Khairul Umam dan Zona Download Gratis

Dua Style Menu Navigasi Dropdown

Welcome To GENETIK [ Generasi Teknik Informatika ] :

Hallo Semua Sobat Inside Lovers, kali ini Blog's GENETIK [ Generasi Teknik Informatika ] akan memposting Dua Style Menu Navigasi Dropdown,
oke tanpa basa basi lagi liat tutorialnya di bawah :

Inilah Screenshotnya :

Kali ini saya akan share cara membuat style menu navigasi dropdown ala cunayz.mungkin ada dua style yang sering menu navigation yang populer digunakan oleh para Blogger, yaitu efek Fading dan Sliding (Lihat Demonya Disini) Di postingan ini saya akan share dua efek yang sederhana namun tetap satu jenis silahkan sobat tinggal pilih saja efek yang mana yang paling bagus menurut sobat.

Langkah pertama : harus sobat lakukan adalah menentukan penempatan menu navigasi ini (misalnya di atas atau di bawah header), Salin kode berikut dan letakan ditempat sobat ingin meletakan menu navigasi ini :

<div class='cunayzmenu'>

<ul>

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

<li><a href='#'>GUEST BOOK</a>
<ul>
<li><a href='#'>Satu</a></li>
<li><a href='#'>Dua</a></li>
<li><a href='#'>Tiga</a></li>
<li><a href='#'>Empat</a></li>
<li><a href='#'>Lima</a></li>
</ul>
</li>

<li><a href='#'>TOOLS BLOG</a>
<ul>
<li><a href='#'>Satu</a></li>
<li><a href='#'>Dua</a></li>
<li><a href='#'>Tiga</a></li>
<li><a href='#'>Empat</a></li>
<li><a href='#'>Lima</a></li>
</ul>
</li>

<li><a href='#'>KONTAK</a>
<ul>
<li><a href='#'>Satu</a></li>
<li><a href='#'>Dua</a></li>
<li><a href='#'>Tiga</a></li>
<li><a href='#'>Empat</a></li>
<li><a href='#'>Lima</a></li>
</ul>
</li>

</ul>

</div>

Langkah Kedua : Letakan CSS dibawah ini,kemudian letakan di atas kode ]]</b:skin> atau </style>:

.cunayzmenu{font:normal 12px "Times New Roman", Times, serif;line-height:normal;text-transform:uppercase;margin:5px 0;padding:0 0;color:#fff;text-decoration:none;}
.cunayzmenu ul{float:left;height:34px;line-height:34px;background-color:#333;margin:0 0 10px;padding:0 0;border:2px solid #e6e6e6;box-shadow:0 1px 5px #000;-moz-box-shadow:0 1px 5px #000;-webkit-box-shadow:0 1px 5px #000;}
.cunayzmenu li{list-style-type:none;margin:0 0;padding:0 0;color:#fff;float:left;display:inline;}
.cunayzmenu li a{line-height:14px;background-color:#333;border-left:1px solid #444;border-right:1px solid #222;margin:0 0;padding:10px 15px;color:#fff;text-decoration:none;font-weight:bold;vertical-align:top;text-shadow:1px 1px 2px #000;outline:none;display:block;}
.cunayzmenu li ul{position:absolute;z-index:10;left:auto;height:auto;margin:0 0;padding:0 0;width:200px;box-shadow:0 1px 5px #000;-moz-box-shadow:0 1px 5px #000;-webkit-box-shadow:0 1px 5px #000;display:none;}
.cunayzmenu li ul li a{border-left-width:0;border-right-width:0;border-top:1px solid #444;border-bottom:1px solid #222;width:170px;display:block;}
.cunayzmenu li a:focus{background-color:#666;border-left-color:#777;border-right-color:#555;}
.cunayzmenu ul li a:focus{background-color:#666;border-top-color:#777;border-bottom-color:#555;}
.cunayzmenu li a:hover, .cunayzmenu ul li a:hover{color:#ccc;}

Langkah Terakhir : Nah sekarang sobat tinggal memilih efek mana yang paling cocok untuk sobat (pilih salah satu) :


Untuk efek SlideDown - SlideUp salin kode berikut dan letakan diatas kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function () {
$('.cunayzmenu ul li').hover(
function () {
$('ul', this).stop(true, true).slideDown(500);},
function () {
$('ul', this).stop(true, true).slideUp(250);});
});
</script>

Untuk efek Fadeln - FadeOut salin kode berikut dan letakan diatas kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function () {
$('.cunayzmenu ul li').hover(
function () {
$('ul', this).stop(true, true).fadeIn(600);},
function () {
$('ul', this).stop(true, true).fadeOut(200);});
});
</script>

Khusus untuk kode yang Saya beri warna merah, jika sudah ada tidak perlu ditambahkan.Sekarang klik Pratinjau. Jika sudah puas dengan hasilnya, simpan templatemu.

Cara Membuat Font/Text Resize dengan jQuery

Welcome To GENETIK [ Generasi Teknik Informatika ] :

Hallo Semua Sobat Inside Lovers, kali ini Blog's GENETIK [ Generasi Teknik Informatika ] akan memposting Cara Membuat Font/Text Resize dengan jQuery,
oke tanpa basa basi lagi liat tutorialnya di bawah :

Anda dapat menambah fasilitas di template blog atau web untuk memperbesar atau memperkecil ukuran text/font (A +, A -, A),
Disini, saya mencoba menerapkan "jQuery Tip: Font Resizing With Animation Effects" di "blogger template". Hasilnya effect perubahan ukuran text/font tersebut cukup memuaskan, sangat halus. Jika anda tertarik untuk menerapkan di blogger template.

Penerapan Resize Font/Text dengan Jquery di Blogger Template

1. Masukan script jQuery berikut diatas </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

:: Catatan:
Jika anda telah memiliki script jQuery di template anda, maka script ini tidak diperlukan lagi.

2. Masukan kode Javascript berikut dibawah script jQuery tadi:

<!-- begin ResizeFont -->
<script type='text/javascript'>
$(function(){
$(&#39;input&#39;).click(function(){
var ourText = $(&#39;#content-wrapper&#39;);
var currFontSize = ourText.css(&#39;fontSize&#39;);
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == &#39;large&#39;) {
finalNum *= 1.1;
}
else if (this.id == &#39;small&#39;){
finalNum /=1.1;
}
else if (this.id == &#39;reset&#39;){
finalNum =13;
}
ourText.animate({fontSize: finalNum + stringEnding},500);
});
});
</script>

:: Catatan:
- "#content-wrapper" diatas dapat ganti, sesuai bagian yang akan anda berikan effect resize font.
- "finalNum *= 1.1;", "finalNum /=1.1;", "finalNum =13;", "stringEnding},500", angka-angka tersebut dapat anda rubah, sesuai selera anda.

3. Masukan kode HTML berikut, masalah penempatan sesuaikan dengan karakter template anda.

<div id='resizeFont'>
<input id='large' type='button' value='A+'/>
<input id='reset' type='button' value='A'/>
<input id='small' type='button' value='A-'/>
</div>

4. Masukan kode CSS berikut diatas ]]></b:skin>
template blog).

#resizeFont{text-align:right; margin-right:10px}

:: kode CSS ini dapat anda rubah, untuk menyesuaikan posisi button.

5. Save template, selesai.

jangan lupa mampir ke kotak comment ya...

Cara Membuat Efek Rotate Miring Dengan CSS3

Welcome To GENETIK [ Generasi Teknik Informatika ] :

Hallo Semua Sobat Inside Lovers, kali ini Blog's GENETIK [ Generasi Teknik Informatika ] akan memposting Cara Membuat Efek Rotate Miring Dengan CSS3,
oke tanpa basa basi lagi liat tutorialnya di bawah :

 Pada kesempatan kali ini saya ingin membahas 'Cara Membuat Efek Animasi Miring' maksudnya disini Ketika mouse disorot ke header maka header tersebut bergerak ke posisi normal yang sebelumnya miring. Efek Miring tersebut tidak hanya pada header saja, namun pada semua widget di blog anda seperti Gambar dan Tulisan.

Caranya cukuplah mudah dan kode yang perlu di rehab juga cuman kode CSS-nya saja, yaitu dengan menggunakan kode CSS3, Tetapi ada kekurangannya juga, karena hanya browser terbaru yang support CSS3.

Sebelum kita melihat kode CSS nya, disini saya akan memberikan 2 (dua) efek miring yang pertama :

1. Efek miring ke kanan :

transform:rotate(2deg); -moz-transform:rotate(2deg); -webkit-transform:rotate(2deg); -o-transform:rotate(2deg)

2. Efek miring ke kiri :

transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg)

Catatan : Sobat Perhatikan angka yang berwarna merah, itu adalah besar Rotate, jika makin besar angkanya maka akan semakin miring.. intinya itu saja..

Jadi caranya begini, misalkan sobat pengen memberikan efek rotate miring pada bagian Judul Posting, maka kita cari dulu Kode pada bagian Postinganya  dengan kode seperti berikut :

.post h3 a {
color:#222;
margin:0;
text-shadow:0px 1px 1px #fff;
}
.post h3 a:hover {
color:#ddd;
text-shadow:0px 1px 1px #000;
}

Setelah ketemu, sobat tinggal memasukkan kode CSS diatas didalamnya sebelum tag penutup }
Maka hasilnya seperti ini :

.post h3 a {
color:#222;
margin:0;
text-shadow:0px 1px 1px #fff;
transform:rotate(2deg); -moz-transform:rotate(2deg); -webkit-transform:rotate(2deg); -o-transform:rotate(2deg)
}
.post h3 a:hover {
color:#ddd;
text-shadow:0px 1px 1px #000;
transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg)
}

Setelah cara diatas kita lalukan, coba sobat Priview dulu, setelah ada perubahan, baru sobat bisa SAVE TEMPLATE.

Berikut Screenshotnya :

Sebelum di Sorot

Setelah di Sorot

Selamat berkreasi ^_^

Cara membuat teks bergerak melingkar mengikuti gerakan mouse (Circling text trail)

Welcome To GENETIK [ Generasi Teknik Informatika ] :

Hallo Semua Sobat Inside Lovers, kali ini Blog's GENETIK [ Generasi Teknik Informatika ] akan memposting Cara membuat teks bergerak melingkar mengikuti gerakan mouse (Circling text trail),
oke tanpa basa basi lagi liat tutorialnya di bawah :

Cara membuat teks bergerak melingkar mengikuti gerakan mouse atau dalam istilah bahasa Inggris dikenal dengan nama "Circling text trail". Teks tersebut akan bergerak melingkar mengelilingi pointer mouse disaat mouse sedang idle. Teks yang akan ditampilkan dapat diatur sesuai keinginan.

Yang perlu dilakukan adalah dengan memasukkan script di bawah ini ke dalam gadget html/javascript.


DEMO

Klik Untuk Melihat :

Salam Inside Lovers ^_^