Membuat Efek Memindahkan Gambar Dengan jQuery

Gambar dalam sebuah artikel sangat berarti dalam memperjelas isi atau konten yang sedang kita buat. Tampilan gambar juga bisa dimodifikasi sehingga menjadi lebih cantik, Setelah sebelumnya saya pernah membahas dalam mempercantik tampilan gambar dengan efek zoom, kali ini saya akan berbagi  lagi satu tips untuk memperindah gambar yang kita tampilkan di artikel, yaitu memindahkan gambar dengan jQuery. Maksud dari effect ini ialah kita dapat menggeser atau mendrag gambar sesuai dengan keinginan kita pada gambar posting kita atau gambar di blog kita. Untuk lebih jelasnya klik tombol demo dibawah ini, geser salah satu gambar yang ada disana.:

Nah jika temen-temen tertarik untuk membuatnya, perhatikan langkah-langkahnya di bawah ini :

1. Login dulu di Blogger dengan akun anda.
2. Pada dashboard pilih Rancangan >> edit HTML
3. Jangan lupa Centang Expand Template Widget
4. Klik Download template lengkap untuk jaga-jaga.
5. Sekarang pasang Css kode dibawah ini diatas kode ]]></b:skin>
   

   .drag_gambar img { cursor: move;}

6. Selanjutnya simpan script berikut diatas kode </head>
   

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

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

   <script type='text/javascript'>

   $(document).ready(function() {

   $(&quot;div.drag_gambar img&quot;).draggable();

   });

   </script>

   Keterangan :
   Perhatikan kode script berwarna Kuning diatas, jika pada template anda sudah terdapat script tersebut, jangan dipasang lagi, pasang saja script yang berwarna merah.
   
   
7. Kemudian klik Save/Simpan Template 
8. Untuk penggunaannya pada gambar, anda bisa menggunakan kode berikut :
   

   <div class='drag_gambar'><img alt='KETERANGAN GAMBAR' src='URL GAMBAR'/></div>

Mudah bukan, tutorial ini sangat sederhana dan bisa memperindah tampilan gambar yang ada di artikel anda. Jika ada yang mau ditanyakan silahkan untuk mengisi kotak komentar yang ada di bawah. Selamat mencoba dan semoga bermanfaat.

Read More

10 WordPress plugins to work with images

According to Wikipedia, the popular adage “An image is worth a thousand words” refers to the idea that complex stories can be described with just a single still image, or that an image may be more influential than a substantial amount of text. This is true, and as a blogger you have to work a lot with images. This is why it is important to have tools that can really make your blogging life easier. In this article, I have compiled 10 excellent WordPress plugins to work with images.

Hot Linked Image Cacher

As I said in my previous post about content thieves, people using images from your server on their own site can be a nuisance. The Hot Linked Image Cacher plugin can detect when your images are using elsewhere than on your blog and forbid them from displaying, in order to help you save your precious bandwidth.

Get it: http://wordpress.org/extend/plugins/hot-linked-image-cacher/

NextGEN Gallery

How can I write a post about using images in WordPress without saying a word about one of the most popular plugin ever? NextGEN Gallery is a full gallery management system which integrates in your blog. It allows you to create galleries, slideshows and more. A must have for photographers!

Get it: http://wordpress.org/extend/plugins/nextgen-gallery/

WP Smush it

Smush.it is a webservice which allow you to dramitically decrease your images size, without losing any quality. However, smush.it is not very user-friendly; your images have to be on a server (you can’t upload them directly) and you can’t “smush” more than 5 images at a time. WP Smush.it integrates the power of the smush.it webservice into your WordPress blog. Just upload your images using WP built-in form, “smush” them, and enjoy your saved bandwidth. How cool is that?

Get it: http://wordpress.org/extend/plugins/wp-smushit/

Watermark Reloaded

On small nich blogs, (such as my blog in French Visiter New York) I have noticied that many visitors are coming from Google images, and I can guess that many of them are saving some of the pictures they’ve found on their hard drive. Another thing to consider is images theft: In fact, it is extremely common that people search Google images and then re-use the pics they found on their own website, without giving credit to the original author. The Watermark plugin is good for both of the above case: It will automatically add a watermark on uploaded images. You can choose the text to display, its color, its size and its position.

Get it: http://wordpress.org/extend/plugins/watermark-reloaded/

Timthumb

Well, TimThumb is not a plugin but a script. Its aim is pretty simple: It can resize any images from your server “on the fly”, which is extremely useful and will make you save a lot of time. Using TimThumb is easy: Click here to get the code, paste it on a file and save it as timthumb.php, under your wp-content directory. In other words, you just have to call the timthumb.php file and pass your image as a parameter. same goes for desired width or height.

Get it: http://timthumb.googlecode.com/svn/trunk/timthumb.php

Max Image Size Control

Have you ever seen a blog where a displayed image were too large and destroyed the layout? I have seen many, and honestly, this looks extremely amateurish. To avoid this, give the Max Image Size Control plugin a try. It allows you to set a maximum size for images, and even better, you can have various sizes depending on categories.

Get it: http://wordpress.org/extend/plugins/max-image-size-control/

jQuery Image Lazy Load WP

It is well known that images can take a while to load on websites. As many bloggers are displaying lists of images (for example, “lists” posts illustrated, or posts such as “X beautiful blog footers”) the visitor often has to wait bfore being able to read the post. “Lazy loading” is a process that only load an image if requested, which is great for blogger who often display a huge number of images per post. The jQuery Image Lazy Load WP plugin will do a great “Lazy loading” job, using the power of jQuery.

Get it: http://wordpress.org/extend/plugins/jquery-image-lazy-loading/

Shutter Reloaded

When displaying images, the “Lightbox” functionality is very popular. Consequently, many different “Lightbox like” plugins are available on the WordPress plugin repository. But which one is the best? My favorite is definitely Shutter Reloaded; it is highly customizable and it requires no additional javascript libraries.

Get it: http://wordpress.org/extend/plugins/shutter-reloaded/

WordPress Media Flickr

If you’re a photographer or just someone who use lots of images, there’s no doubt that you have a flickr account. This popular service, which allow people to share pictures, is in fact extremely popular.The WordPress Media Flickr plugin allow you to easily use your flickr pictures in your WordPress blog posts.

Get it: http://wordpress.org/extend/plugins/wordpress-media-flickr/

Faster Image Insert

Have you ever noticed that uploading images in WordPress could have been easier? In fact, you have to click on a button, wait for the thickbox to load, and finally upload your picture. The Faster Image Insert plugin purpose is to move WordPress Media Manager down in a meta-box, right next to main editing panel, in order to make image uploading/editing easier and faster.

Get it: http://wordpress.org/extend/plugins/faster-image-insert/

Any other WordPress plugins you find very useful for working with images? Don’t hesitate to let me know in a comment!

Read More

Memasang Gambar Slideshow Dibawah Header

Jumpa lagi dengan saya, hari ini langit agak mendung, mungkin sebentar lagi hujan. Kali ini saya akan berikan tutorial cara pasang slideshow di bawah header. Saya mengambil kode yang paling sederhana dengan menu slideshow yang juga sangat sederhana. Slideshow sendiri fungsinya sebagai navigasi link yang biasanya diletakkan dibawah header, dan selalu menampilkan gambar sebagai pemanis agar pengunjung tertarik untuk mengklik isi yang dimaksud. Untuk demo saya gunakan template 3pictsel bikinan mas Riki dan meletakkannya di dalam main post, silahkan cek disini.

Kode css yang akan saya berikan tidak mutlak harus sama, karena setiap template pasti berbeda terutama dalam tutorial ini adalah lebar kolom postingan. Untuk demo saya gunakan template yang lebar postingannya kurang lebih 660px. Buat anda yang memiliki lebar kolom post lebih atau kurang dari 660px silahkan disesuaikan saja.

1. Login dulu di blogger.
2. Masuk ke Rancangan >> Edit HTML.
3. Jangan lupa klik Expand Template Widget karena akan membuat anda jadi pusing dengan kode yang panjang.
4. Copy paste kode berikut diatas kode ]]></b:skin>

/* SLIDESHOW */ 
#slider-holder{width:660px;height:200px;overflow:hidden;margin-left:-20px; margin-right:10px; padding:0} #s3slider{width:660px;height:660px;position:relative;overflow:hidden} 
#s3sliderContent{width:660px;position:absolute;top:0;margin-left:0}
.s3sliderImage{float:left;position:relative;display:none} 
.s3sliderImage span{position:absolute;left:0;font-weight:700;font-size:12px;color:#fff;height:45px;width:660px;background-color:#4e4d3c;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;display:none;bottom:0;padding:10px} 
.s3sliderImage span a.featured-title:link,.s3sliderImage span a.featured-title:visited{color:#FFF;font-size:14px;padding:0 0 2px} 
.s3sliderImage span a.featured-title:hover{color:#999} 
.s3sliderImage span a:link,.s3sliderImage span a:visited{color:#888} 
.s3sliderImage span a:hover{color:#555}

5. Kemudian copas kode berikut diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
<!--//--><![CDATA[//><!--
(function($){
    $.fn.s3Slider = function(vars) {     
        var element     = this;
        var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
        var current     = null;
        var timeOutFn   = null;
        var faderStat   = true;
        var mOver       = false;
        var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
        var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
        items.each(function(i) {
            $(items[i]).mouseover(function() {
               mOver = true;
            });
            $(items[i]).mouseout(function() {
                mOver   = false;
                fadeElement(true);
            });
        });
        var fadeElement = function(isMouseOut) {
            var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
            thisTimeOut = (faderStat) ? 10 : thisTimeOut;
            if(items.length > 0) {
                timeOutFn = setTimeout(makeSlider, thisTimeOut);
            } else {
                console.log("Poof..");
            }
        }
        var makeSlider = function() {
            current = (current != null) ? current : items[(items.length-1)];
            var currNo      = jQuery.inArray(current, items) + 1
            currNo = (currNo == items.length) ? 0 : (currNo - 1);
            var newMargin   = $(element).width() * currNo;
            if(faderStat == true) {
                if(!mOver) {
                    $(items[currNo]).fadeIn((timeOut/6), function() {
                        if($(itemsSpan[currNo]).css('bottom') == 0) {
                            $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        } else {
                            $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        }
                    });
                }
            } else {
                if(!mOver) {
                    if($(itemsSpan[currNo]).css('bottom') == 0) {
                        $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                            $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    } else {
                        $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                        $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    }
                }
            }
        }
        makeSlider();
    };
})(jQuery);
//--><!]]></script>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>
6. Setelah itu siapkan gambar dan url yang akan ditampilkan dalam menu slideshow, jika sudah ada gambar dan url-nya, silahkan anda copas kode berikut setelah kode <div id='main-wrapper'>
<div id='slider-holder'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage' style='display: list-item;'>
<a href='LETAK LINK DISINI 1'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9zr5cZLpK5DNrZ69kEiE7tVBhMjxraK8qdMWl0OYQ0KSuEAuaAzlNOeEF4wv4NRU4yApPW526aSEtOcjXph3RsboYnxy3-hiYn8Om02TGQQLB9GYMkST4yDyWZ9uaI75gTnUHff90Z8o/s1600/NorahJones.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: block;'>
<a class='featured-title block' href='LETAK LINK DISINI 1'>INI GAMBAR NORAH JONES</a><br/>
Norah Jones adalah seorang musisi jazz yang sudah banyak mendapatkan Grammy Award
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 2'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1af5O2x8BKFO9vtpQa6gEzV2kkxcik_3Q7hY8QI6kRp8igk6KN47igKSORuFjPPmf7ElopkWECoAt2TP0rWxh8YZvcxmsSReZ7ZGzx7wJfq781RzYubXJq8xMWF3KW3w2hvmWKIrq1LE/s1600/174456_1_f.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 2'>FOURPLAY</a><br/>
Nggak usah dijelaskan udah ada tulisanya diatas
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 3'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitGtnYB6WaZhpHlQA8vAoZRhLqntXBXuV0l6uQ6dMDIZPzCJ12VTrHXcEdtRGAZmMEsUcPxnguddC86jjBcRnSdwtmEpZDOKa1V_jBRLQZUQVhI0Cvm2VQMs_3x8knH4kbMFBYuoh2kVU/s1600/andien.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 3'>MBAK ANDIEN</a><br/>
Ini orangnya yang..............
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 4'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfCyUtzBhL78ipJNPQ4P9IAMusc0Py4R33bW5Tu76XOG_mt_FqVfyzQqMLU9SXhyphenhyphenIodQWjJ-OMN5pmWm1Ychp5mTz2c9Onf3tYdcYIHRIVz97NOyo_xHsroRcPX5BIiXb8PPd3j7lVGc8/s1600/Alanis-Morissette-2.JPG' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 4'>ALANIS MORISSETTE</a><br/>
Tampangnya sih biasa, tapi lagunya teman-teman semua harus mendengarkan
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 5'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiVLRvbV8tHHSJBUmgnbDCScou6m05D_o_yLbXdZ5h2xShm8L2bDo8ymFP0-chAEqdcbQgHTFep8TnFZL-970opPsfxGVaQfdaFC3tXg7NJ_neqGY1AJNEav4PWmmPaUihD85S1Bqi2ZA/s1600/Anne-Hathaway-02.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 5'>WANITA CANTIK</a><br/>
Siapa coba gambar cewek diatas? Kasih jawabannya di kotak komentar ya....
</span>
</li>
<li class='clear s3sliderImage'/>
</ul>
</div>
</div>
7. Simpan Template

Keterangan :

• Perhatikan lebar 660px, silahkan sesuaikan saja dengan lebar post template anda.
• Perhatikan juga angka -20px pada kode css-nya, saya gunakan margin-left:-20px karena menyesuaikan dengan demo template yang saya gunakan. 
• Tulisan yang berwarna merah ganti dengan deskripsi tentang gambar anda.
• Kode yang berwarna biru adalah kode url untuk gambar yang sudah anda upload sebelumnya.

Gimana teman-teman, cukup panjang kan? Jangan khawatir, saya yakin teman-teman semua bisa melakukannya, semoga berhasil ya !

Read More

Membuat Recent Post Thumbnail + Spy di Blog

Kali ini saya akan memberikan tutorial tentang gimana caranya membuat recent post yang ada gambarnya, nggak itu aja gambarnya bisa jalan lagi, hebat kan? Karena dengar-dengar fungsi atau keberadaan recent post akan sangat berguna (terasa dibutuhkan) ketika pengunjung berada pada halaman posting. Kemungkinan besar mereka ingin mencari link posting-posting terbaru yang masih tergolong fresh.

Recent post kali ini ada sedikit berbeda dengan recent post yang  saya postingkan kemarin  yang hanya menyediakan fasilitas thumbnailsnya saja, teman teman bisa lihat di homepage blog ini. Tapi kalau yang ini agak sedikit berbeda, karena selain memiliki thumbnail (gambar), disertakan juga tampilan tanggal postingan dan jumlah komentar, dan tentu dengan efek spy. Sangat menarik untuk di coba teman-teman. Recent post ini saya dapatkan dari hasil browsing ke tempatnya om Abu Farhan .

Silahkan lihat demo ini bagi yang belum melihatnya, soalnya widgetnya saya tampilkan di home saja. Baik, langsung kita menuju ke langkah-langkah pembuatannya  :

1. Log in ke Blogger
2. Kemudian pilih Design --> Page Element
3. Add gadget -->> HTML/Javascript
4. Copy paste kode di bawah ini ke gadget sidebar teman-teman.

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

<style type="text/css" media="screen">

<!--

#spylist {

overflow:hidden;

margin-top:5px;

padding:0px 0px;

height:350px;

}

#spylist ul{

width:220px;

overflow:hidden;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#spylist li {

width:208px;

padding: 5px 5px;

margin:0px 0px 5px 0px;

list-style-type:none;

float:none;

height:70px;

overflow: hidden;

background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;

border:1px solid #ddd;

}

#spylist li a {

text-decoration:none;

color:#4B545B;

font-size:11px;

height:18px;

overflow:hidden;

margin:0px 0px;

padding:0px 0px 2px 0px;

}

#spylist li img {

float:left;

margin-right:5px;

background:#EFEFEF;

border:0;

}

.spydate{

overflow:hidden;

font-size:10px;

color:#0284C2;

padding:2px 0px;

margin:1px 0px 0px 0px;

height:15px;

font-family:Tahoma,Arial,verdana, sans-serif;

}

.spycomment{

overflow:hidden;

font-family:Tahoma,Arial,verdana, sans-serif;

font-size:10px;

color:#262B2F;

padding:0px 0px;

margin:0px 0px;

}

-->

</style>

<script language='JavaScript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;
thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;
home_page = "http://creatingwebsite-maskolis.blogspot.com/";

limitspy=4

intervalspy=4000

</script>

<div id="spylist">

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>

</div>

Save-->> Selesai.

Catatan Penting :

1. Ganti URL ( http://creatingwebsite-maskolis.blogspot.com/ ) dengan URL teman .
2. Atur lebar dan sesuaikan dengan lebar sidebar teman-teman.
3. Apabila ingin menyesuaikan lagi dengan background template teman-teman, bisa menggantinya dengan background yang lain.
4. Sesuaikan juga lebar dan tinggi gambar (thumbnails) nya.
5. Berapa post yang teman-teman ingin tampilkan bisa di ubah sesuai selera.

Itu tadi sedikit gambaran bagaimana caranya untuk membuat recent post thumbnail yang bisa gerak naik turun, semoga berhasil.

Sekian dari saya. Semoga bermanfaat

Read More

Membuat Menu Navigasi Horizontal Glossy di Blog

Kembali saya akan berikan tutorial dalam modifikasi menu navigassi horisontal di blog anda. Seperti yang sudah saya jelaskan sebelumnya menu navigasi pada blog merupakan elemen yang penting di  alam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Setelah sebelumnya saya memberikan tutorial membuat multi level menu drop down, kali ini saya akan berikan lagi penjelasan membuat menu horisontal glossy. contohnya ada pada gambar di bawah, atau langsung menuju disini.

Langsung saja. berikut ini tutorial membuat glossy horizontal menu

1. Login ke blogger dengan akun anda 
2. Kemudian pada dasbor  klik Rancangan >> Edit HTML 
3. Tambahkan kode CSS berikut diatas tag  ]]></b:skin>
   
   /*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
   /*Modified : IB  (http://www.maskolis.co./) */
   .glossymenu{
       position: relative;
       padding: 0 0 0 34px;
       margin: 0 auto 0 auto;
       background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisKB78aSL0Nc7RYrvssPVkmALxtKmTj-wbMHgiqOwCmXH8tP01namX2EzHA1n7HVTsf9KUVOzk03nioGasayxThBqdt-VE0P2y-i_giFsPRP1aX3yLsPogW4GRM_t6tQs-_r6OP5-_YEQ/s1600/maskolis+menu.png) repeat-x; /*tab background image path*/
       height: 46px;
       list-style: none;
   }
   .glossymenu li{
       float:left;
   }
   .glossymenu li a{
       float: left;
       display: block;
       color:#000;
       text-decoration: none;
       font-family: sans-serif;
       font-size: 13px;
       font-weight: bold;
       padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
       height: 46px;
       line-height: 46px;
       text-align: center;
       cursor: pointer;   
   }
   .glossymenu li a b{
       float: left;
       display: block;
       padding: 0 24px 0 8px; /*Padding of menu items*/
   }
   .glossymenu li.current a, .glossymenu li a:hover{
       color: #fff;
       background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaHEEjNKQ0YLbn1thi3F-UugzwQF6xL2wG9F3WMeHnJM0sqL0agM1J5Voarr5cGpmL7rhhX7zf8bOJo7Qu2H8AVQKQyQuOd0qCwuJylR7tIs7En5dPNwibV-OmyNJo8x_TxZkANshFKKc/s1600/maskolis+nav.png) no-repeat; /*left tab image path*/
       background-position: left;
   }
   .glossymenu li.current a b, .glossymenu li a:hover b{
       color: #fff;
       background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE6Ba-UJ5FE-fpekzhVurh-5o4R3Wf7ANmSFhcodeO6dWnpDIAD8Yo0rz_Ll6UPvEejoSmm2HHCEF9nWgHHaDxcduv0sghaiVMG4fVLCmOmuD7zDQ2WgyoV_XkvwFcl6IQBTdmxwdtTzg/s1600/naskolis+leftnav.png) no-repeat right top; /*right tab image path*/
   }
   Jika gambarnya tidak cocok, bisa anda ganti sesuaikan dengan template yang dipakai. Di bawah ini adalah contoh gambar background yang bisa anda gunakan :
   
    
4. Silahkan upload dulu image diatas ke tempat hosting masing-masing. 
5. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>

   <ul class='glossymenu'>

   <li class='current'><a href='http://creatingwebsite-maskolis.blogspot.com/'><b>Home</b></a></li>

   <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/tutorial blog' title='tutorial blog'><b>Tutorial Blog</b></a></li>

   <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/SEO' title='SEO'><b>SEO</b></a></li>

   <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/wordpress' title='wordpress'><b>Wordpress</b></a></li>

   <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/affiliate' title='affiliate'><b>Affiliate</b></a></li> 

   <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/hosting' title='hosting'><b>Hosting</b></a></li> 

   </ul>

6. Temen-temen bisa edit link dan anchor teks kode HTML diatas 
7. Terakhir Save template anda

Memang banyak sekali menu navigasi horisontal yang dapat kita pakai untuk memperindah blog. Pada postingan selanjutnya saya akan coba memberikan cara membuat menu navigasi animasi dengan jQuery..Tunggu tanggal mainnya.....

Read More

Membuat Effect JQuery Link Nudging di Blog

Kali ini kembali saya akan memberikan penjelasan kepada temen-temen dalam memodifikasi tampilan link di blog. Jika sebelumnya saya sudah pernah posting membuat efek pelangi link, kali ini saya akan menjelaskan cara menambahkan efek jQuery nudging link. JQuery link nudging adalah effect animasi pada link hasil dari penambahan padding kiri, effect ini akan nampak saat kita menyentuhkan pointer/mouse  pada link, link akan bergerak kekanan atau bergoyang.

Untuk contoh dari efek jQuery nudging ini bisa anda lihat disini. Klik salah satu label yang ada pada sidebar blog demo itu. Jika temen-temen tertarik, langsung saja saya akan berikan penjelasannya :

1. Login ke blogger dengan akun anda 
2. Kemudian pada dasbor  klik Rancangan >> Edit HTML
3. Tambahkan Script JQuery berikut diatas kode </head>
   

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

   Catatan : Jika anda sudah memasukkan script JQuery diatas, langkah ketiga bisa anda abaikan
4. Setelah itu tambahkan lagi script berikut dibawah script JQuery tadi:
   

   <script type='text/javascript'>        
   $(document).ready(function()  {         
   $(&#39;#Label1 li&#39;).hover(function() {  //mouse in         
   $(this).animate({ marginLeft:  &#39;12px&#39; }, 400);         
   }, function() { //mouse out          
   $(this).animate({ marginLeft: 0 }, 400);         
   });          
   });         
   </script><!-- end LinkNudging -->

5. Terakhir Save Template anda, dan lihat hasilnya

Itu tadi tutorial kali ini, jika ada pertanyaan teman-teman bisa isi kotak komentar di bawah. Selamat mencoba dan semoga bermanfaat

Read More

Membuat Multi Level Drop Down dengan jQuery

Saya sebelumnya ucapkan terima kasih kepada temen-temen yang telah setia mengunjungi blog ini. Saya akan terus berikan apa yang saya tahu tentang tutorial membuat website kepada anda semua. Nah, kali ini saya akan memberikan satu lagi tutorial blog mengenai cara membuat multi level drop down menu dengan jQuery. Memang sebelumnya saya sudah pernah posting cara membuat menu drop down yang sederhana, kali ini saya akan berikan lagi cara membuat menu drop down lagi, bedanya kali ini lebih menarik karena terdapat beberapa sub menu yang dapat ditampilkan setelah menu utama. Jika anda penasaran silahkan lihat gambar di bawah ini atau langsung saja klik disini.

Gimana, menarik kan? Nah, jika temen-temen berminat membuatnya simak langkah-langkah pembuatannya :

1. Login ke Blogger dengan akun   
2. Kemudian pada dasbor klik Tata Letak >> Edit HTML centang expand template widget
3. Jangan lupa untuk download template anda, berjaga-jaga jika nanti ada kesalahan.
4. Letakkan script JQuery berikut sebelum tag </head>
   

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

   Catatan : bagi anda yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah ini abaikan saja
5. Tambahkan juga script berikut setelah script JQuery yadi
   

   <link rel="stylesheet" type="text/css"  href="jqueryslidemenu.css" />      <!--[if lte IE 7]>         
   <style type="text/css">         
   html  .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/         
   </style>          
   <![endif]--> 
   <script  type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/maskolis.js"></script>
   

6. Selanjutnya tambahkan kode CSS berikut diatas tag  ]]></b:skin>: 
   
   .jqueryslidemenu{
   font: bold 12px Verdana;
   background: #414141;
   width: 100%;
   }
   
   .jqueryslidemenu ul{
   margin: 0;
   padding: 0;
   list-style-type: none;
   }
   
   /*Top level list items*/
   .jqueryslidemenu ul li{
   position: relative;
   display: inline;
   float: left;
   }
   
   /*Top level menu link items style*/
   .jqueryslidemenu ul li a{
   display: block;
   background: #414141; /*background of tabs (default state)*/
   color: white;
   padding: 8px 10px;
   border-right: 1px solid #778;
   color: #2d2b2b;
   text-decoration: none;
   }
   
   * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
   display: inline-block;
   }
   
   .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
   color: white;
   }
   
   .jqueryslidemenu ul li a:hover{
   background: black; /*tab link background during hover state*/
   color: white;
   }
   
   /*1st sub level menu*/
   .jqueryslidemenu ul li ul{
   position: absolute;
   left: 0;
   display: block;
   visibility: hidden;
   }
   
   /*Sub level menu list items (undo style from Top level List Items)*/
   .jqueryslidemenu ul li ul li{
   display: list-item;
   float: none;
   }
   
   /*All subsequent sub menu levels vertical offset after 1st level sub menu */
   .jqueryslidemenu ul li ul li ul{
   top: 0;
   }
   
   /* Sub level menu links style */
   .jqueryslidemenu ul li ul li a{
   font: normal 13px Verdana;
   width: 160px; /*width of sub menus*/
   padding: 5px;
   margin: 0;
   border-top-width: 0;
   border-bottom: 1px solid gray;
   }
   
   .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
   background: #eff9ff;
   color: black;
   }
   
   /* ######### CSS classes applied to down and right arrow images  ######### */
   
   .downarrowclass{
   position: absolute;
   top: 12px;
   right: 7px;
   }
   
   .rightarrowclass{
   position: absolute;
   top: 6px;
   right: 5px;
   }
7. Setelah itu tambahkan kode HTML berikut diatas <div id='header-wrapper'> (menu drop down diatas header), jika ingin meletakkan di bawah header cari kode penutup header seperti ini       </div><!-- end header-wrapper --> kemudian letakkan dibawahnya :
   

   <div id="myslidemenu" class="jqueryslidemenu">
   <ul>
   <li><a href="http://creatingwebsite-maskolis.blogspot.com/">Item 1</a></li>
   <li><a href="#">Item 2</a></li>
   <li><a href="#">Folder 1</a>
     <ul>
     <li><a href="#">Sub Item 1.1</a></li>
     <li><a href="#">Sub Item 1.2</a></li>
     <li><a href="#">Sub Item 1.3</a></li>
     <li><a href="#">Sub Item 1.4</a></li>
     </ul>
   </li>
   <li><a href="#">Item 3</a></li>
   <li><a href="#">Folder 2</a>
     <ul>
     <li><a href="#">Sub Item 2.1</a></li>
     <li><a href="#">Folder 2.1</a>
       <ul>
       <li><a href="#">Sub Item 2.1.1</a></li>
       <li><a href="#">Sub Item 2.1.2</a></li>
       <li><a href="#">Folder 3.1.1</a>
           <ul>
               <li><a href="#">Sub Item 3.1.1.1</a></li>
               <li><a href="#">Sub Item 3.1.1.2</a></li>
               <li><a href="#">Sub Item 3.1.1.3</a></li>
               <li><a href="#">Sub Item 3.1.1.4</a></li>
               <li><a href="#">Sub Item 3.1.1.5</a></li>
           </ul>
       </li>
       <li><a href="#">Sub Item 2.1.4</a></li>
       </ul>
     </li>
     </ul>
   </li>
   <li><a href="http://creatingwebsite-maskolis.blogspot.com/">Item 4</a></li>
   </ul>
   <br style="clear: left" />
   </div>

8. Terakhir Save Template anda, dan lihat hasilnya.

Silahkan ganti kode yang saya beri warna dengan tulisan anda sendiri, itu dulu tutorial kali ini selamat mencoba dan jangan sungkan jika bingung anda bisa isi kotak komentar di bawah.

Read More

Membuat Info Panel Slide Vertikal dengan jQuery

Temen-temen sudah baca artikel saya tentang Membuat Chatbox Slide Vertikal Dengan jQuery kan? Tutorial kali ini pada dasarnya sama, yaitu kita menyembunyikan panel ini dengan tombol. Hanya disini yang kita sembunyikan adalah informasi tentang blog kita atau seputar tentang penulis blog. Nah, pada tutorial blog kali ini saya akan memberikan cara dalam membuat info panel slide vertikal dengan jQuery.

Sesuai dengan namanya fungsi dari menu ini adalah memberikan informasi tentang penulis kepada pembaca dengan sedikit kemasan animasi jQuery untuk memperindahnya.Untuk contoh gambarnya anda bisa lihat di atas, atau langsung lihat disini, klik tombol info yang ada di sebelah kiri atas. Bagi anda yang tertarik untuk membuatnya berikut ini langkah-langkahnya :

1. Login ke blogger dengan akun anda.
2. Kemudian klik rancangan
3. Pilih Edit HTML jangan lupa centang "Expand Template Widget"
4. Cari kode berikut ]]></b:skin> gunakan control + f biar cepet, kemudian copy kode dibawah dan letakkan diatas kode tersebut
   

   .panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
   .panel p{color:#ccc;margin:0 0 15px;padding:0}
   .panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
   .panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
   a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-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-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
   a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-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-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
   a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
   .columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
   .colleft{float:left;width:130px;line-height:22px}
   .colright{float:right;width:130px;line-height:22px}
   a:focus{outline:none}
   .panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
   .panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
   .columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

5. Setelah itu cari kode </head> lalu copy kode dibawah ini dan letakkan diatasnya.
   

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

Jika anda telah memasang script Jquery sebelumnya anda dapat meninggalkan langkah diatas.
6. Masukan kode Javascript berikut dibawah script jQuery tadi:
   

   <script type="text/javascript">
   $(document).ready(function(){
   $(".trigger").click(function(){
   $(".panel").toggle("fast");
   $(this).toggleClass("active");
   return false;
   });
   });
   </script>

7. Langkah terakhir cari lagi kode berikut </body> setelah itu copas kode dibawah ini dan taruh diatasnya.

   <div class='panel'>
   <h3>Selamat Datang bahasa inggrisnya welcome</h3>
   <p style='text-align:justify'>Selamat datang di blog maskolis, saya harap anda senang berada diblog sederhana ini. Blog ini saya tulis dengan komputer yang sederhana dan koneksi internet yang juga sederhana. Saya berharap Anda sering datang kembali. Silahkan anda mencari hal-hal yang baru di blog saya ini <a href='http://creatingwebsite-maskolis.blogspot.com/' title='creating website'>Selengkapnya tentang blog ini</a></p>
   
   <h3>Sekilas tentang maskolis</h3>
   <img height='73px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjs0MGE8RGAiiYrcK7IRkhe6APqRDpplApJTnKDNev37nY1JnsoxsLZwNyfritmSC4pY3-gQ3qMewCPTJU6Wx5JIP-Koj-LvNXEaWUjd5oAYn9yTTQkPX8q2tTkLOWxptopFvi22TOblE/s1600/maskolis.jpeg' width='73px'/>
   <p>Photo di samping itu bukan saya dan juga bukan pacar saya, pokoknya bukan siapa-siap saya. Nama saya maskolis saya seorang yang ingin belajar blogger. Saya mulai belajar blogger sejak bulan Oktober 2010, dan blog ini saya buat pada bulan Desember 2010</p>
   
   <div style='clear:both;'/>
   
   <div class='columns'>
   <div class='colleft'>
   <h3>Navigasi</h3>
   <ul>
   <li><a href='#' title='home'>Home</a></li>
   <li><a href='#' title='about'>About</a></li>
   <li><a href='#' title='portfolio'>Portfolio</a></li>
   <li><a href='#' title='contact'>Contact</a></li>
   <li><a href='#' title='blog'>Blog</a></li>
   </ul>
   </div>
   
   <div class='colright'>
   <h3>Social Stuff</h3>
   <ul>
   <li><a href='http://twitter.com/#!/4rifin123' title='Twitter'>Twitter</a></li>
   <li><a href='http://www.blogger.com/profile/00429201158192562265' title='About Me'>About Me</a></li>
   <li><a href='mailto:helmi4rifin@gmail.com' title='Gmail'>Gmail</a></li>
   </ul>
   </div>
   </div>
   <div style='clear:both;'/>
   </div>
   <a class='trigger' href='#'>Info</a>

8. Terakhir Save Template anda, dan lihat hasilnya

Tentu temen-temen sudah tahu kan? Tulisan yang saya beri warna bisa diganti dengan tulisan yang diinginkan. Demikian tadi penjelasan mengenai membuat panel info dengan jQuery selamat mencoba dan semoga bermanfaat.

Read More

Membuat Chatbox Slide Vertikal Dengan jQuery di Blog

Satu lagi fasilitas untuk berinkteraksi dengan pengunjung anda, chatbox namanya. Sebenarnya fungsinya sama dengan buku tamu dari shoutmix tapi kali ini agak dimodifikasi sedikit sehingga tempatnya tersembunyi. Jika kita ingin menampilkan menu ini, kita harus meng-klik tombol chatbox yang ada di sebelah kiri blog . Untuk memasang chatbox slide vertikal dengan jQuery ini sangat mudah, anda tinggal menambahkan kode-kode HTML yang nanti akan saya uraikan secara lengkap di bawah. Gambar di bawah adalah contoh chatbox slide vertikal yang ada di demo blog saya, jika anda belum jelas gambar itu ada disini. Klik tombol chatbox yang ada di sebelah kiri, anda akan melihat tampilannya.

Oke, tidak pakai lama, langsung saja ke langkah-langkah pembuatannya :

1. Login ke Blogger dengan akun anda.
2. Kemudian pilih Rancangan >> Edit HTML
3. Seperti biasa klik Download Template Lengkap biar aman
4. Jangan lupa centang Expand Template Widget
5. Selanjutnya cari kode ]]></b:skin>, jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode ]]></b:skin> tersebut:
   

   .panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
   .panel p{color:#ccc;margin:0 0 15px;padding:0}
   .panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
   .panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
   a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-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-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
   a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-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-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
   a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
   .columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
   .colleft{float:left;width:130px;line-height:22px}
   .colright{float:right;width:130px;line-height:22px}
   a:focus{outline:none}
   .panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
   .panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
   .columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

6. Setelah itu cari kode </head> setelah itu copas kode dibawah ini dan taruh diatasnya.
   

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

   Jika anda telah memasang script Jquery ini sebelumnya anda dapat meninggalkan langkah diatas
7. Masukan kode Javascript berikut dibawah script jQuery tadi:
   

   <script  type="text/javascript">
   $(document).ready(function(){
   $(".trigger").click(function(){
   $(".panel").toggle("fast");
   $(this).toggleClass("active");
   return false;
   });
   });
   </script>

8. Kemudian cari lagi kode berikut ini <body>
9. Setelah itu masukkan kode dibawah ini kemudian taruh diatasnya
   

   <div class="panel">
   
   

   Kode script ChatBox Anda atau bisa diganti dengan kode widget atau apa sajalah terserah.....

   
   </div>
   <a class="trigger" href="">ChatBox</a>

10. Dan yang terakhir Save Template anda.

Anda bisa ganti tulisan warna kuning berkedip dengan kode shoutmix yang sudah anda buat sebelumnya. Untuk cara membuat shoutmix di blog sudah pernah saya jelaskan sebelumnya. Nah, sampai disini dulu tutorialnya ya, selamat berkreasi dan semoga bermanfaat.

Read More

Membuat Daftar Isi Dengan jQuery Accordion

Daftar isi sangat penting bagi keberadaaan sebuah blog atau web. Karena daftar isi pada website/blog berfungsi sebagai alat navigasi bagi pemilik maupun pengunjung untuk menjelajahi isi dari website/blog. Setelah sebelumnya saya sudah membahas tentang cara membuat daftar isi manual dan otomatis, kali ini saya akan berikan satu lagi cara membuat daftar isi, tapi kali ini beda karena menggunakan jQuery dan hasilnya nanti akan lebih keren.

Selain itu daftar isi yang saya bahas disini juga menggunakan efek animasi accordion, hal ini dimaksudkan agar daftar isi blog ini terasa lebih ringkas dan tidak terlalu panjang sekaligus mudah dan rapi untuk blog serta artikel yang disusun berdasarkan Label/Kategori. Sehingga serasa seperti blog anda seperti blog profesional. Nah, untuk contoh soalnya temen-temen bisa lihat gambar di bawah atau langsung klik disini.

Baiklah, saya akan langsung saja pada langkah-langkah pembuatannya :

Langkah Pertama

1. Login dulu ke blogger anda
2. Pada dasbor masuk ke Rancangan lalu pilih Edit HTML.
3. Setelah itu cari kode berikut ini ]]></b:skin>
4. Kemudian copas kode dibawah ini dan taruh diatasnya
   

   #dafis-acc{
   

   font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;

   font-size:12px;

   color:#333;

   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH31QUX5_LNrhb_9XZP8dZtSWL2nO9uH_Yh69S_O7UCRj8s0GG_0YF11zGHvwYsDctQ_BPWJNWVtf6IBNxgUCrgWGSmihiBKuqItv20kj_j9rimzkYzXfNR0XWso61vMQZdJtvc5gDrpY/d/bg5.gif) repeat-y scroll left center #E7F7FB;

   padding:2px 0;

   border:1px solid #339DC6;

   }

   .dafis-label{

   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8OEl4ChqHP8f3EtnH9fK0zzhgqf0xc5W5L7B6UyZNLY9Sn_7B6gNaKAvatvi6YacAxObp8mXU0bADAaJ3hhuqcP6pypY7ETYJmn82z_-rNrwGNXibwLtOdcfHFuyu_1og-cuZihI9jRc/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB;

   font-weight:bold;

   line-height:1.4em;

   overflow:hidden;

   white-space:nowrap;

   vertical-align: baseline;

   margin: 1px 3px;

   outline: none;

   cursor: pointer;

   text-decoration: none;

   padding: 2px 10px;

   color: #fff;

   text-shadow: 0 1px 1px rgba(0,0,0,.3);

   border:1px solid #2F94BA;

   }

   .dafis-label:hover{

   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJlJ63Z0yq0UjB6nA7KySbWl-LelQPj3siMBPI192ozcAlZlADSTbLe2cy3-xBxLNMUlc5XpOgHDETA-BBmQMqyRUOv61FxF83w9w9tjgXhAx5Ddne4pRsVfCH-w77VcbqyWDA8vVVUGY/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB;

   color:#003366;
   }
   .dafis-daf ol{
   margin:0 0 0 30px !important;
   padding:0 !important;
   }
   .dafis-daf ol li{
   background-color:#C9E9F4;
   line-height:1.5em;
   margin:1px 3px !important;
   white-space:nowrap;
   text-align:left;
   border:1px solid #339DC6;
   }
   .dafis-daf ol li a{
   text-decoration: none !important;
   color:#333 !important;
   display:block;
   padding-left:10px;
   }
   .dafis-daf ol li a:hover{
   background: #7BC4DF;
   border-left: 5px #333 solid;
   padding-left: 5px;
   text-shadow: 0 1px 1px rgba(0,0,0,.3);
   }

5. Selenjutnya cari kode </head>, lalu letakkan kode dibawah ini diatas kode </head>.
   

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

Nb : Jika sebelumnya sobat telah memasang scipt jQuery ini lewati saja langkah diatas
6. Kemudian Klik Simpan Template.

Langkah Kedua

1. Buatlah sebuah posting blog dengan judul terserah (Misalnya : Daftar Isi Blog Lengkap Atau Table Of Content )
2. Selanjutnya Masukkan kode di bawah ini pada postingan, caranya seperti membuat postingan seperti biasa tetapi dalam mode Edit HTML.

   <script type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/daftarisimaskolis.js"></script>
   <script src="http://namablogsobat.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

3. Ubah namablogsobat dengan url blog anda
4. Selanjutnya Klik Publish Post.

Itu tadi tutorial kali ini, jika ada di antara temen-temen yang bingung, isi saja kotak komentar yang ada di bawah. Karena komentar temen-temen semua sangat berarti bagi blog ini. Selamat mencoba dan semoga bermanfaat.

Read More

Membuat Efek Image Zoom dengan Jquery

Seperti temen-temen ketahui, banyak sekali cara untuk memodifikasi gambar yang terdapat di dalam postingan kita agar lebih kelihatan menarik. Setelah sebelumnya saya menulis tentang membuat efek blur pada gambar, kali ini saya akan berikan satu lagi tips modifikasi gambar di postingan, yaitu membuat efek image zoom. Cara kerja dari efek image zoom ini adalah ketika seorang pengunjung melakukan klik (klik kiri atau klik kanan) pada suatu gambar pada blog kita, maka gambar akan ditampilkan tetap pada halaman tersebut dengan efek membesar (zoom-in) yang lembut. Dan jika di klik tombol [X] Close atau menekan tombol Esc pada keyboard maka gambar akan di sembunyikan (zoom-out) dengan efek mengecil yang lembut. Tapi ini berlaku untuk semua gambar yang ada di blog kita tanpa terkecuali.

Untuk lebih jelasnya anda bisa lihat disini, klik salah satu gambar yang ada disitu, maka gambar tersebut akan membesar. Nah, jika temen-temen tertarik di bawah ini akan saya berikan langkah-langkah pembuatannya :

1. Login dulu ke blogger anda
2. Kemudian klik Rancangan 
3. Setelah itu klik Edit HTML
4. Lalu anda cari kode berikut ]]></b:skin>
   
5. Setelah ketemu masukkan kode CSS dibawah ini sebelum kode diatas
   

   div.jquery-image-zoom {
   line-height: 0;
   font-size: 0;
   z-index: 10;
   border: 5px solid #fff;
   margin: -5px;
   -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   }
   div.jquery-image-zoom a {
   background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;
   display: block;
   width: 25px;
   height: 25px;
   position: absolute;
   left: -17px;
   top: -17px;
   /* IE-users are prolly used to close-link in right-hand corner */
   *left: auto;
   *right: -17px;
   text-decoration: none;
   text-indent: -100000px;
   outline: 0;
   z-index: 11;
   }
   div.jquery-image-zoom a:hover {
   background-position: left -25px;
   }
   div.jquery-image-zoom img,
   div.jquery-image-zoom embed,
   div.jquery-image-zoom object,
   div.jquery-image-zoom div {
   width: 100%;
   height: 100%;
   margin: 0;
   }

6. Masih belum selesai setelah itu cari kode berikut </head>. Setelah ketemu masukkan kode berikut diatasnya.

<script  type='text/javascript'  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script  type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/maskolisjquery.imageZoom.min.js"/>
<script type="text/javascript">
jQuery(document.body).imageZoom();
</script>

7. Yang terakhir Save Template anda. Selesai dah....

Catatan :
Sekedar catatan, sebaiknya anda simpan kode HTML imagezoom pada file penyimpanan anda sendiri agar script ini bisa berjalan dengan baik. Berhubung kemarin ada teman yang nyoba ternyata nggak bisa jalan scriptnya. Download scriptnya di sini. Untuk mengetahui bagaimana cara menyimpan file di penyimpanan online (google code) silahkan baca di sini.

Setelah semua proses diatas sudah anda lakukan dengan benar, sekarang coba klik salah satu gambar di dalam postingan, pasti gambarnya akan membesar. Nah, itu tadi tutorial membuat efek zoom pada gambar dengan sentuhan jQuery. Selamat mencoba dan semoga bermanfaat.

Read More