Blog Kang Fatur: Tips dan Trik

    Social Items

Home / Tips dan Trik
Showing posts with label Tips dan Trik. Show all posts
Showing posts with label Tips dan Trik. Show all posts
Pada postingan sebelumnya pernah saya membahas tentang "Cara Membuat Slideshow Dengan Jquery Cycle Plug In" dan "Floating Menu JQuery Dengan Link Efek Disko"

Sekarang kita akan membuat menu navigasi dengan efek slide out yang tetap menggunakan framework jQuery. Menu ini mempunyai efek slide yang sangat halus, saat kita mengarahkan pointer mouse (mouse hover) pada menu, maka menu akan bergeser keluar (slide out) secara perlahan dan akan kembali pada posisi semula jika kita menggeser mouse keluar dari area menu selain itu menu ini akan selalu dalam posisi tetap walau kita menggeser (scroll) halaman naik ataupun turun. Kita bisa saja menggunakan navigasi menu ini untuk berbagai keperluan, misal Sosial Bookmark dan lain sebagainya. Seperti contoh pada gambar di bawah ini :

kang fatur

Jika sobat ingin mencobanya silahkan iktui langkah langkah berikut :

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:

]]></b:skin>


Langkah 5
Masukan (copypaste) kode CSS dibawah ini diatas kode pada langkah 4:

ul#menusisi {
position: fixed;
margin: 0px;
padding: 0px;
top: 50px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#menusisi li {
width: 100px;
}
ul#menusisi li a {
display: block;
margin-left: -50px;
width: 100px;
height: 55px;
background-color:#141414;
background-repeat:no-repeat;
background-position:48px center;
border:1px solid #cfcfcf;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#menusisi .beranda a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);
}
ul#menusisi .tentang a{
background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S9BJaX0yaqI/AAAAAAAAD_4/GZhfUKvK588/d/nav_info.png);
}
ul#menusisi .cari a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJejnwlAI/AAAAAAAAEAE/B_LZd63vGeI/d/nav_search.png);
}
ul#menusisi .komentar a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png);
}
ul#menusisi .rssfeed a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);
}
ul#menusisi .alat a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJelocqyI/AAAAAAAAEAI/6SmP-UHv-eg/d/nav_tools.png);
}
ul#menusisi .kontak a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);
}



Langkah 6
Cari kode dibawah ini:

</head>


Langkah 7
Masukan (copypaste) kode jQuery dibawah ini diatas kode pada langkah 6:

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type="text/javascript">
$(function() {
$('#menusisi a').stop().animate({'marginLeft':'-50px'},1000);
$('#menusisi > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
});
</script>


Langkah 8
Cari kode dibawah ini:

</body>


Langkah 9
Masukan (copypaste) kode dibawah ini diatas kode pada langkah 8:

<ul id='menusisi'>
<li class='beranda'><a href='LINKSOBAT' title='Beranda'></a></li>
<li class='tentang'><a href='LINKSOBAT' title='Tentang'></a></li>
<li class='cari'><a href='LINKSOBAT' title='Cari'></a></li>
<li class='alat'><a href='LINKSOBAT' title='Alat'></a></li>
<li class='rssfeed'><a href='LINKSOBAT' title='RSS Feed'></a></li>
<li class='komentar'><a href='LINKSOBAT' title='Komentar'></a></li>
<li class='kontak'><a href='LINKSOBAT' title='Kontak'></a></li>
</ul>



KETERANGAN
  1. Ubahlah LINKSOBAT sesuai dengan link keinginan sobat.
  2. Ubahlah keterangan didalam tag title (misal; title='Beranda' di ubah menjadi title='Home') sesuai dengan keinginan sobat.
  3. Perhatikan kode pada Langkah 5 baris 5 yaitu top: 50px; ubahlah nilai 50 untuk menentukan jarak antara bagian atas halaman blog dengan menu.
  4. Perhatikan kode pada Langkah 5 baris 15 yaitu margin-left: -50px; ubahlah nilai -50 untuk mengatur berapa jarak menu yang akan disembunyikan.
  5. Jika nilai -50 diubah (pada keterangan nomor 4) maka nilai -50 pada Pada Langkah 7 baris 7 dan baris 13 juga harus diubah atau disamakan.
  6. Perhatikan kode pada Langkah 5 baris 34, 37, 40, 43, 46, 49, 52 ubahlah URL Icon sesuai dengan icon yang telah sobat siapkan.




KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Navigasi Efek Slide Out dengan jQuery

Aatas permintaan sahabat SERI kali ini saya setelah berbuka puasa dan sebelum tarawih menyempatkan diri untuk menulis sebuah postingan yang singkat. Seri menuliskan di kotak komentar meminta agar saya mebantunya dia meminta tutorial tentang "Menampilkan Next Page Hanya Judul Postingan" saja yang muncul.Dan mudah-mudahan postingan ini menghasilkan apa yang di inginkan oleh Seri.

Oke langsung aja ke topik pembicaraan yaitu menampilkan next page dengan judul postinganya saja di main blog. Gimana maksudnya next page sih?
Maksud Saya "next page" itu adalah halaman dari blog selain halaman depan itu loh! apabila Sobat mengklik link "Older post" atau "Posting lama" di main page hanya muncul judul postingnya saja.

Seperti Sobat jika mengklik link "older post" di blog kang rohman

Next Page

Adapun cara memasangnya adalah sebagai berikut :

Masuk menu Layout kemudian masuk menu Edit HTML dan centang tanda "Expand widget templates"

Kemudian cari kode seperti di bawah ini :

<b:include data='post' name='post'/>

Bila sudah ketemu. Ganti kode tersebut dengan kode di bawah ini :

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div style='border: 2px outset rgb(189, 189, 189); width: 500px; padding: 10px; background-color: rgb(247, 248, 224); text-align: left;'>
<a expr:href='data:post.url'>
<data:post.title/></a></div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>


PERHATIAN
Untuk kode yang berwarna Merah silahkan sesuaikan dengan kehendak sobat, Mulai dari Lebar, Warna Background, dan Warna Border


Bila langkah-langkah di atas sudah selesai klik tombol SIMPAN/SAVE

Kemudian lihat hasilnya, mudah-mudaha berhasil. Khususnya buat sahabat Seri Bahasa



KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Menampilkan Next Page Hanya Judul Postingan

Assalamu'alaikum salam Blogger, sebelumnya Saya ucapkan selamat Berpuasa, setelah lama Saya gak posting di blog untuk kesempatan ini saya meluangkan waktu untuk membuat postingan khususnya untuk para sobat Kang Fatur semua, ya sambil ngabuburit dibulan Ramadhan mudah-mudahan postingan ini menjadi sebuah Amal bagi Kang Fatur dan dapat bermanfaat bagi pa ra sobat semua.

Postingan kali ini Kang Fatur mao mengetengahkan tutorial sederhana yaitu tentang "Pasang Tombol Ganti Background Blog". dengan adanya tombol ini Blog kita bisa di ganti-ganti dengan bermacam-macam efek Background Warna sesuai kesukaan kita.

Untuk DEMO silahkan klik salah satu warna di bawah ini dan lihat perubahannya :















OK, Kang Fatur tidak akan banyak-banyak berbicara lagi kita langsung aja ke tahap pembuatan Tombol Ganti Background Blog :

  1. Seperti biasa LogIn ke Blogger sobat
  2. Pada halaman Dasbor klik Rancangan
  3. Pada Halaman Elemen Laman klik Tambah Gadget / add a gadget, pilih yang HTML/Javascript
  4. Kemudian Copy dan Paste Kode di bawah ini di ktak HTML/Javascript


    <center><script type="text/javascript">
    function bgChange(bg)
    {
    document.body.style.background=bg;
    }
    </script>

    <table border="1" width="660" height="20">
    <tr> <td
    onclick="bgChange('#FFFFFF')" bgcolor="white">
    <td
    onclick="bgChange('#000000')" bgcolor="#000000">
    <td
    onclick="bgChange('#F0E68C')" bgcolor="#F0E68C">

    <td
    onclick="bgChange('#E0FFFF')" bgcolor="#E0FFFF">
    <td
    onclick="bgChange('#98FB98')" bgcolor="#98FB98">
    <td
    onclick="bgChange('#B0E0E6')" bgcolor="#B0E0E6">
    <td
    onclick="bgChange('#87CEFA')" bgcolor="#87CEFA">
    <td
    onclick="bgChange('#FFDAB9')" bgcolor="#FFDAB9">
    <td
    onclick="bgChange('#FFC0CB')" bgcolor="#FFC0CB">

    <td
    onclick="bgChange('#E6E6FA')" bgcolor="#E6E6FA">
    <td
    onclick="bgChange('#D3D3D3')" bgcolor="#D3D3D3">

    </td
    ></td
    ></td
    ></td
    ></td
    ></td
    ></td
    ></td
    ></td
    ></td
    ></td
    ></tr>
    </table>

    <div class='clear'></div></center>


  5. Kemudian Klik tombol Simpan/Save



PERHATIAN
  • Untuk kode yang berwarna Biru silahkan sobat ganti dengan nama warna yang di pasang oleh sobat. dan
  • Untuk kode yang berwarna Merah silahkan sobat ganti dengan kode warna yang sobat inginkan, untuk kode warna silahkan klik disini ata disini


Selamat mencoba, dan semoga bermanfaat. Untuk tombol Ganti Background dengan Gambar akan menyusul.


KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Pasang Tombol Ganti Background Blog

Slid Show JqueryjQuery Cycle Plugin adalah sebuah Slideshow Plug In yang ringan dan cukup mengagumkan. Plugin ini menyediakan sebuah metode pemanggilan cycle yang di libatkan pada sebuah element container,yang mana tiap-tiap bagian element dari container menjadi sebuah slide. Jika sobat tertarik menggunakan jquery slideshow dengan cycle plugin untuk blogger khususnya atau website sobat ikutilah langkah-langkah di bawah ini

  1. Seperti biasa sobat harus log in dulu ke blogger
  2. Pilih Rancangan
  3. Kemudian pilih Edit HTML
  4. centang Expand Widget Templates dan backup dulu templete sobat (untuk menghindari apabila terjadi kesalahan)
  5. Copy code dibawah ini dan pastekan diatas code </head> atau di bawah code ]]></b:skin>


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"> </script>
    <script type="text/javascript" src="http://my-slideshow.googlecode.com/files/jquery.cycle.all.min.js"> </script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('#myslides').cycle({
    fx: 'cover',
    speed: 500,
    timeout: 2000
    });
    });
    </script>



  6. Untuk code CSS di bawah ini sobat copy dan pastekan diatas kode ini ]]></b:skin>

    #myslides {
    width: 370px;
    height: 220px;
    padding: 0;
    margin: 0 auto;
    }

    #myslides img {
    padding: 10px;
    border: 1px solid rgb(100,100,100);
    background-color: rgb(230,230,230);
    width: 350px;
    height: 200px;
    top: 0;
    left: 0
    }


    PERHATIAN
    Sobat bisa mengedit kode css diatas sesuai dengan yang sobat inginkan misalnya width (lebar slidshow/gambar) dan height (tinggi slideshow/gambar)


  7. Langkah yang terakhir adalah sobat memasang kode HTML di bawah ini dimana sobat ingin meletakkan SlidShow tersebut dengan mendambah Gadget.


<div id="myslides">
<img src="http://my-slideshow.googlecode.com/files/cilimus.jpeg.jpg" />
<img src="http://my-slideshow.googlecode.com/files/air-panas.jpg" />
<img src="http://my-slideshow.googlecode.com/files/gunung-ciremai.jpg" />
<img src="http://my-slideshow.googlecode.com/files/telaga-remis.jpg" />
<img src="http://my-slideshow.googlecode.com/files/kolamlinggarjati.jpg" />
</div>

PERHATIAN
kode yang berwarna kuning adalah alamat Gambar. Silahkan sobat ganti dengan alamat gambar sobat.


KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Cara Membuat Slideshow Dengan Jquery Cycle Plug In

Floating Menu SQueryPada tutorial kali ini saya akan mengetengahkan cara membuat "Floating Menu JQuery dengan Link Efek Disko", kenapa saya kasih judul ini mungkin karena apa yang saya bahas mirip dengan lampu disko hehehe, mungkin para sobat juga kurang puaskan apa dan seperti apa yang dibahas kali ini??..

Untuk kepastian dan meyakinkan kepada para sobat semua silahkan para sobat klik disni atau disini untuk melihat langsung demo yang kita bahas.

Gimana tertarik? OK kalau sobat semua tertarik dan ingin mencobanya silahkan lakukan langkah langkah sebagai berikut :

Langkah Pertama :
Seperti biasa para sobat harus dalam keadaan LogIn. Dasbor --> Rancangan --> Edit HTML. kemudian cari ]]></b:skin> Setelah ketemu simpan kode tersebut di atas kode tadi.

#floatMenu {
position:absolute;
top:150px;
left:50%;
margin-left:235px;
width:200px;
}
#floatMenu ul {
margin-bottom:20px;
}
#floatMenu ul li a {
display:block;
border:1px solid #999;
background-color:#222;
border-left:6px solid #999;
text-decoration:none;
color:#ccc;
padding:5px 5px 5px 25px;
}
#floatMenu ul li a:hover {
color:#fff;
background-color:#333333;
}
#floatMenu ul.menu1 li a:hover {
border-color:#09f;
}
#floatMenu ul.menu2 li a:hover {
border-color:#9f0;
}
#floatMenu ul.menu3 li a:hover {
border-color:#f09;
}

Langkah ke Dua cari kode seperti ini <head> setelah ketemu simpan kode di bawah ini sebelum kode <head>

<script language="javascript" src="http://longfield22.googlecode.com/files/jquery_mini.js"></script>
<script language="javascript" src="http://longfield22.googlecode.com/files/jquery.dimensions.js"></script>
<script language="javascript">
var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});
</script>

<link href="http://longfield22.googlecode.com/files/reset.css" rel="stylesheet" type="text/css" />
<link href="http://longfield22.googlecode.com/files/page.css" rel="stylesheet" type="text/css" />




Langkah ke Tiga yaitu sobat cari kode seperti ini <body> setelah ketemu letakkan kode di bawah ini dibawah kode <body>

<div id="page-wrap">
<div id="header">
<h2> Longfield Floating menu</h2>
<h1>jQuery&CSS</h1>
</div>
<div id="content">


</div>
</div>

<div id="floatMenu">
<ul class="menu1">

<li><a href="#" onclick="return false;"> Home </a></li>
</ul>
<ul class="menu2">
<li><a href="#" onclick="return false;"> category </a></li>
<li><a href="#" onclick="return false;"> forum </a></li>
<li><a href="#" onclick="return false;"> facebook gw </a></li>

</ul>
<ul class="menu3">
<li><a href="#" onclick="return false;"> Technical support </a></li>
</ul>
</div>


Setelah langkah-langkah di atas beres klik Simpan Template, beres deeh

PERHATIAN
JIka ada </div> yang kurang silahkan ditutup OK


Selamat mencoba semoga berhasil dan bermanfaat

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Floating Menu JQuery Dengan Link Efek Disko

Membuat Template 3D, atau bagaimana caranya membuat agar template kita terlihat 3D. cara untuk membuat bagian dari body template kita agar terlihat 3D, yaitu kita hanya perlu menambahkan nilai ukuran border dan perpaduan warna pada bagian template tersebut. Ada juga cara lainnya, yaitu dengan memasukan background gambar yang sudah berbentuk 3D pada bagian template tersebut.

Yang akan Kita bahas kali ini, yaitu tentang cara membuat agar tampilan dari template kita terlihat 3D tanpa menggunakan Background gambar. Contohnya untuk membuat bagian sidebar, Headder, dll dari template tersebut terlihat 3D seperti contoh pada gambar dibawah ini.

tampilan template 3D


Agar bagian template kita terlihat 3D seperti pada contoh gambar diatas. caranya adalah sebagai berikut ini.

  1. Misalnya kita akan membuat bagian sidebar kita terlihat 3D. yang harus sobat lakukan adalah Edit kode CSS sidebar tersebut pada halaman HTML template kamu dengan memberi nilai ukuran border dan paduan warna pada background dan setiap sisi sidebar itu, contohnya :

    #sidebar1 .widget {
    margin: 0px 0px 5px 0px;
    padding: 5px 5px 5px 5px;
    background: #0000c0; /*-Background = Biru --*/
    border-top: 10px solid #6666ff; /*-Border atas = Biru Muda-*/
    border-bottom: 10px solid #6666ff; /*-Border Bawah = Biru Muda-*/
    border-left: 10px solid 1414b0; /*-Border kiri = Biru Tua--*/
    border-right: 10px solid 1414b0; /*-Border kanan = Biru Tua--*/
    }


  2. Terus misalnya pada bagian Header sidebar tersebut ingin dibuat 3D juga, caranya yaitu :


#sidebar1 h2 {
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
text-align: center;
color: $sidebar1HeaderColor;
font: $sidebarHeaderFont;
text-transform: none;
text-decoration: none;
background: #cc0000; /*-Background = Merah --*/
border-top: 5px solid #ff7070; /*-Border atas = Merah Muda--*/
border-bottom: 5px solid #ff7070; /*----Border Bawah = Merah Muda-*/
border-left: 5px solid #b00000; /*-Border kiri = Merah Tua-*/
border-right: 5px solid #b00000; /*Border kanan = Merah Tua--*/
}


Maka hasilnya akan seperti pada gambar dibawah ini :

template 3D

Pada dasarnya untuk membuat bagian template tersebut agar terlihat 3D, kita hanya perlu memberi ukuran border dan perpaduan warna saja, silahkan Sobat coba praktekkan tips ini pada template Sobat. Dan bila Sobat berminat dengan template 3D karya Kang Fatur, Sobat bisa lihat contoh templatenya dan mendownloadnya disini. Saya rasa cukup sekian dulu postingan Saya tentang cara membuat tampilan template 3D kali ini.

Untuk para sobat yang perlu kode warana V3 silahkan klik disini

Selamat mencoba semoga dapat bermanfaat dan salam Blogger mania.



KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Membuat Tampilan Template 3D

judul blog bergerakSelama ini, Sobat dapat membuat teks berjalan di area blog dengan marquee, seperti teks pada side bar, footer, header, atau judul postingan. Namun untuk membuat judul blog berjalan di bagian title bar pada browser, Sobat harus menggunakan bantuan Javascript tersendiri karena marquee hanya bisa berjalan (digunakan) di area blog saja.

Dengan tips ini, mungkin akan membuat blog Kita akan tampil beda dan yang pasti lebih hidup dan menarik. Jika tertarik, silakan ikuti tipsnya berikut ini:

Langkah-langkah membuat judul blog bergerak di title bar pada browser adalah sebagai berikut.

1. Seperti biasa Login ke Blogger hingga masuk dasbor, rancangan (design), edit HTML.

2. Kemudian cari kode <title>&lt;data:blog.pageTitle/&gt;</title> yang letaknya di bagian awal.

3. Kemudian ganti kode tersebut dengan kode di bawah ini:

<script language="JavaScript"><br />var txt="<data:blog.pagetitle/>";<br />var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;<br />txt=txt.substring(1,txt.length)+txt.charAt(0);<br />segarkan=setTimeout("bergerak()",kecepatan);}bergerak();</script>


CATATAN:
Angka 100 menunjukkan kecepatan bergerak, Anda dapat menggantinya dengan angka yang lebih kecil atau lebih besar, semakin besar maka kecepatan bergeraknya semakin lambat dan berlaku sebaliknya.


4. Sebelum Anda simpan, klik pratinjau terlebih dahulu untuk melihat hasilnya.

5. Jika sudah berjalan dengan baik kemudian Simpan Template.

6. Selesai.

Selamat mencoba dan semoga bermanfaat


KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Membuat Judul Blog Bergerak

Subscribe to: Posts (Atom)

Subscribe Our Newsletter

Notifications

Disqus Logo