Facebook Fanpage

Wellcome to Blog-LVstar

This is default featured slide 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

Sabtu, 11 Agustus 2012

Cara Membuat Judul Link Terbuka Saat Kursor Mouse Diatasnya

10.14    No comments

What's up gan?
Are you fine today?
If you fine, I want to tell you about "Cara Membuat Judul Link Terbuka Saat Kursor Mouse Diatasnya"

Dari judulnya aja udah panjang banget, apa lagi tutorialnya..??
Hmm, tenang aja gan tutorialnya sangat mudah dan tidak terlalu panjang kok..



Kalau gan penasaran apa maksud dari judulnya, silahkan lihat beberapa gambar di bawah.. ::


Dari 2 gambar diatas pasti kita sudah mengetahui, bahwa script kali ini akan membuat judul link akan terlihat/terbuka saat kita menaruh kursor mouse kita tepat di linknya.

Allright gan, langsung aja kita ke tutorialnya :
1. Loggin di blogger.com
2. Dari Dasbor > Template > Edit HTML > Lanjutkan > Centang 




3. Cari kode <body> (Untuk mempermudah pencarian tekan tombol F3 atau tekan tombol CTRL + F), jika sudah ketemu, letakkan code dibawah ini sebelum code <body>


<!-- SweetTitlesTooltips Plugin -->
<link href='http://www.geocities.com/cuitnazz/SweetTitles.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://www.geocities.com/cuitnazz/ToolTips.js' type='text/javascript'/>
<script src='http://www.geocities.com/cuitnazz/SweetTitles.js'
type='text/javascript'/>

Jika code <body> tidak ditemukan, cobalah taruh di atas kode </body>, jika scriptnya tidak jalan juga, cobalah letakkan di CSS.

4. Simpan Template
5. Gan sudah bisa melihat hasilnya

*jika ada yang kurang jelas silahkan berkomentar*


Sekian dulu pemberitahuan dari saya..
See you in my next pages..
Bye gan..!!

Selamat mencoba..

*jangan lupa komentarnya ya gan.. :D


-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
DAFTAR ISI :

Read More

Jumat, 10 Agustus 2012

Cara Membuat Tulisan Berjalan Pada Halaman Awal Blog

09.42    No comments

What's up gan?
Are you fine today?
If you fine, I want to tell you about "Cara Membuat Tulisan Berjalan Pada Halaman Awal Blog"

Sebetulnya, tutorial ini sangatlah mudah.. Langsung aja kita lihat contoh/demonya :


itu dia demonya..

Cara Membuat :
1. Loggin di blogger.com
2. Dari dasbor pilih Tata Letak > Tambah Gadget > HTML/JavaScript


3. Masukkan code di bawah ini :


<div><script src="http://www.widgeo.net/message.php?msg=SELAMAT DATANG &adult=0&cat=internet&big=&cl=rainbow"><br />
<noscript><a href="http://www.widgeo.net">widgets</a></noscript>
<a href="http://www.widgeo.net"><img alt="widgets" border="0" src="http://www.widgeo.net/img/logopm.png" /></a></script></div>

** Silahkan ganti tulisan SELAMAT DATANG dengan tulisan yang gan inginkan

4. Setelah itu Simpan
5. Silahkan dipindah-pindahkan di mana akan  dibuat Tulisan berjalannya, misalnya ditaruh di bawah Header.
6. Klik Simpan Setelan
7. Gan sudah bisa melihat hasilnya


Sekian dulu pemberitahuan dari saya..
See you in my next pages..
Bye gan..!!

Selamat mencoba..

*jangan lupa komentarnya ya gan.. :D


-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
DAFTAR ISI :

Read More

Cara Mengubah Kursor di Blog

09.11    No comments

What's up gan?
Are you fine today?
If you fine, I want to tell you about "Cara Mengubah Kursor di Blog"

Sudah banyak teman-teman saya yang bertanya-tanya, bagaimana sih cara mengganti kursor di blog??..
Kali ini saya akan mengshare tutorialnya, mudah-mudahan tutorialnya bisa membantu gan-gan semua.
Okelah gan, langsung aja kita ke intinya..

Langkah-langkah Mengubah Kursor Di Blog :
1. Loggin di blogger.com
2. Dari dasbor pilih Tata Letak/Page Element > Tambah Gadget > HTML/JavaScript



3. Letakkan code dibawah ini :

<style type="text/css"> body{cursor: url("http://i1122.photobucket.com/albums/l524/riyosuke/7updot-ani-1.gif"), auto;} body a:hover{cursor: url("http://i1122.photobucket.com/albums/l524/riyosuke/7updot-ani-1.gif"), auto;} </style>


- Code yang diatas adalah code cursor permanen, yang artinya jika kursor diletakkan di link, kursornya tidak berubah.
- Tapi jika gan tidak ingin yang permanen, gan tinggal hapus aja code body a:hover{cursor: url("http://i1122.photobucket.com/albums/l524/riyosuke/7updot-ani-1.gif"), auto;}  

4. Setelah itu kilih Simpan
5. Setelah itu klik Simpan Setelan

Gan juga bisa merubah link http://i1122.photobucket.com/albums/l524/riyosuke/7updot-ani-1.gif dengan link-link gambar kursor yang lainnya, saya ada beberapa link kursor, silahkan memilih-milih.. :
 ➪ http://i1122.photobucket.com/albums/l524/riyosuke/7updot-ani-1.gif
 ➪ http://i1122.photobucket.com/albums/l524/riyosuke/aliendance-1.gif


➪ http://i1122.photobucket.com/albums/l524/riyosuke/bananathumbsup.gif
➪ http://i1122.photobucket.com/albums/l524/riyosuke/banghead.gif
➪ http://i1122.photobucket.com/albums/l524/riyosuke/bullseye-ani.gif

➪ http://cursors2.totallyfreecursors.com/thumbnails/earwig.gif
➪ http://i1122.photobucket.com/albums/l524/riyosuke/guitarblackglitter.gif
➪ http://i1122.photobucket.com/albums/l524/riyosuke/heartbowarrow1-1.gif
 ➪ https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVdrAACSb7NHmwXnP2EW7vZUMsjd5u-QkhZHTiES57svUNOYkveKem-0NO0FBrLXBuQeacno9ceF1ir3xSOtv_C4RifcmI3cffazI3ucRXE0J3F9DyBNqBlEpyZmVHSy0Mco98i5sY3ohr/s1600/jasablogsitus-web-id.gif

➪ http://i1122.photobucket.com/albums/l524/riyosuke/tail2.gif

➪ http://i1122.photobucket.com/albums/l524/riyosuke/monkey-ani.gif



Atau gan bisa melihat lebih banyak kursor lagi di lvstarcursor.blogspot.com




Sekian dulu pemberitahuan dari saya..
See you in my next pages..
Bye gan..!!

Selamat mencoba..

*jangan lupa komentarnya ya gan.. :D


-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
DAFTAR ISI :

Read More

Kamis, 09 Agustus 2012

Cara Membuat Menu Horizontal Tanpa JQuery

10.55    No comments

What's up gan?
Are you fine today?
If you fine, I want to tell you about "Cara Membuat Menu Horizontal Tanpa JQuery"

Di Post/Artikel saya yang sebelumnya, saya telah mengshare tentang Cara Membuat Menu Drop-Down/Horizontal, tetapi artikel saya yang itu membuat menu horizontal dengan menggunakan JQuery, maka saya akan mengshare yang tanpa JQuery, karena saya rasa lebih aman kalau kita tidak menggunakan versi yang menggunakan JQuery, karena jika terjadi kesalahan bisa terjadi GALAT. Maka itu, supaya lebih aman, saya akan memberitahukan langkah-langkahnya.

LAHKAH - LANGKAH :

1. Loggin di blogger.com
2. Dari Dasbor, pilih Template

3. Pilih Edit HTML, pilih Lanjutkan,Centang





4. Cari kode berikut ini :

<div class='main-outer'> atau
<div id='main-wrapper'> atau
<div id='main'>

*!! Untuk mempermudah mencari tekan F3 atau tekan CTRL + F !!*

DESAIN 1 / MODEL 1 :

Untuk melihat demo/previewnya, silahkan klik tulisan DEMO dibawah ini :
::DEMO::

<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li  { height:30px; border-top:1px solid #fff; }
#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul  { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover  { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu + Sub Menu</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu + Sub</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub 1</a></li>
<li><a href='#'>Sub 2</a></li>
<li><a href='#'>Sub 3</a></li>
<li><a href='#'>Sub 4</a></li>
<li><a href='#'>Sub 5</a></li>
<li><a href='#'>Sub 6</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu Sub 6 </a></li>
<li><a href='#'>Sub Menu Sub 6</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Menu</a></li>
</ul>
</div>


- Ganti tulisan #156994 untuk merubah warna background dengan warna yang gan suka
- Ganti tanda pagar (#) dengan link tujuan menu tersebut, bisa link posting, bisa juga link kategori
- Ganti tulisan Menu, Sub Menu, Sub 1-6, Anak Sub Menu dengan kata-kata yang gan suka
-  <ul id='sub-custom-nav'> berfungsi untuk menambahkan Sub Menu/Anak menu. Dan jika gan mau menambahkan sub menu/anak menu, gan harus menghapus code "</li>" yang ada di menu yang mau dibuat anak menunya, dan gan copy code <li><a href='#'>Judul Menu</a></li> dan dibawahnya diakhiri dengan code
</ul>
</li>
Dan setiap kali gan menambahkan anak menu lagi harus di akhiri kode tersebut, yaitu kode </ul> dan </li>.
- Gan juga bisa mengganti-ganti warna-warna backgound anak-anak menunya, silahkan aja dicoba untuk mengganti-ganti kode warna yang ada di bagian <style> nya.

DESAIN 2 / MODEL 2 :

Untuk melihat demo/previewnya, silahkan klik tulisan DEMO dibawah ini :
::DEMO::

 <style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#FF0000;margin:0 15px;padding:0;height:35px; border-top:4px double #000; border-left:4px double #000; border-bottom:4px double #000; border-right:4px double #000;}
#cat-nav a { color:#fff; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:2px dotted #000;}
#cat-nav a:hover { color:#fff; background:#000;}
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none; background:#FF0000; }
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; background:#FF0000;}
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#FF0000; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li  { height:30px; border-top:1px solid #fff; border-left:2px solid #000;}
#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul  { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover  { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu + Sub Menu</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Anak Sub Menu 3</a></li>
<li><a href='#'>Anak Sub Menu 3</a></li>
<li><a href='#'>Anak Sub Menu 3</a></li>
<li><a href='#'>Anak Sub Menu 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu + Sub</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub 1</a></li>
<li><a href='#'>Sub 2</a></li>
<li><a href='#'>Sub 3</a></li>
<li><a href='#'>Sub 4</a></li>
<li><a href='#'>Sub 5</a></li>
<li><a href='#'>Sub 6</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Anak Sub 6 </a></li>
<li><a href='#'>Anak Sub 6</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Menu</a></li>
</ul>
</div>


Keterangan sama dengan desain 1/model 1.
Untuk mengganti background, silahkan ganti code #FF0000 yang ada di code "cat-nav {background:#FF0000;margin:0 15px;padding:0;height:35px; border-top:4px double #000; border-left:4px double #000; border-bottom:4px double #000; border-right:4px double #000;}"


..JIKA ADA YANG KURANG JELAS SILAHKAN TULIS DI KOTAK KOMENTAR, SAYA AKAN SIAP SEDIA UNTUK MEMBANTU..



Sekian dulu pemberitahuan dari saya..
See you in my next pages..
Bye gan..!!

Selamat mencoba..

*jangan lupa komentarnya ya gan.. :D


-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
DAFTAR ISI :

Read More

Rabu, 08 Agustus 2012

Cara Membuat Menu Drop-Down/Horizontal

08.06    No comments

What's up gan?
Are you fine today?
If you fine, I want to tell you about "Cara Membuat Menu Drop-Down/Horizontal"

Pada para pemula-pemula yang baru saja menggunakan blogger, mungkin sedikit bingung bagaimana sih caranya membuat menu-menu yang bisa ada anak-anaknya atau yang bisa bercabang-cabang??
..Nah, supaya para gan2 semua tidak bingung, kali ini saya akan memberitahukannya kepada gan2 semua dengan cara2 saya dan semoga artikel ini dapat membantu gan2 semua.

Okelah gan cukup basa-basinya, langsung aja kita ke langkah-langkahnya..
*(Tapi sebelumnya, saya punya beberapa style/desainnya, jdi silahkan gan yang pilih desain mana yang mau gan pilih)*

Cara 1 / Model 1 :
1. Login di blogger.com
2. Masuk ke Menu Template
*!! sebelum memulai langkah yang ke-3, sebaiknya gan BackUp/Unduh dulu template yang gan gunakan sekarang, agar ketika step ini gagal, gan bisa mengembalikannya ke awal/sebelumnya. (Cara BackUp/Mengunduh/Mendownload Template Sendiri) !!*
3. Pilih Edit HTML, pilih Lanjutkan
4. Centang/Ceklis
5. Search/Cari kode </body> (untuk lebih mudah mencari, tekan tombol F3 / tekan tombol CTRL + F) , lalu letakkan kode berikut diatas kode </body>

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

6. Setelah itu gan letakkan code berikut ini diatas kode yang tadi ( </body> )


<script type='text/javascript'>
//<![CDATA[

(function($){
    /* hoverIntent by Brian Cherne */
    $.fn.hoverIntent = function(f,g) {
        // default configuration options
        var cfg = {
            sensitivity: 7,
            interval: 100,
            timeout: 0
        };
        // override configuration options with user supplied object
        cfg = $.extend(cfg, g ? { over: f, out: g } : f );

        // instantiate variables
        // cX, cY = current X and Y position of mouse, updated by mousemove event
        // pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
        var cX, cY, pX, pY;

        // A private function for getting mouse position
        var track = function(ev) {
            cX = ev.pageX;
            cY = ev.pageY;
        };

        // A private function for comparing current and previous mouse position
        var compare = function(ev,ob) {
            ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
            // compare mouse positions to see if they've crossed the threshold
            if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
                $(ob).unbind("mousemove",track);
                // set hoverIntent state to true (so mouseOut can be called)
                ob.hoverIntent_s = 1;
                return cfg.over.apply(ob,[ev]);
            } else {
                // set previous coordinates for next time
                pX = cX; pY = cY;
                // use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
                ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
            }
        };

        // A private function for delaying the mouseOut function
        var delay = function(ev,ob) {
            ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
            ob.hoverIntent_s = 0;
            return cfg.out.apply(ob,[ev]);
        };

        // A private function for handling mouse 'hovering'
        var handleHover = function(e) {
            // next three lines copied from jQuery.hover, ignore children onMouseOver/onMouseOut
            var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget;
            while ( p && p != this ) { try { p = p.parentNode; } catch(e) { p = this; } }
            if ( p == this ) { return false; }

            // copy objects to be passed into t (required for event object to be passed in IE)
            var ev = jQuery.extend({},e);
            var ob = this;

            // cancel hoverIntent timer if it exists
            if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }

            // else e.type == "onmouseover"
            if (e.type == "mouseover") {
                // set "previous" X and Y position based on initial entry point
                pX = ev.pageX; pY = ev.pageY;
                // update "current" X and Y position based on mousemove
                $(ob).bind("mousemove",track);
                // start polling interval (self-calling timeout) to compare mouse coordinates over time
                if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}

            // else e.type == "onmouseout"
            } else {
                // unbind expensive mousemove event
                $(ob).unbind("mousemove",track);
                // if hoverIntent state is true, then call the mouseOut function after the specified delay
                if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
            }
        };

        // bind the function to the two event listeners
        return this.mouseover(handleHover).mouseout(handleHover);
    };

})(jQuery);

//]]>
</script>
<script type='text/javascript'>
//<![CDATA[

/*
 * Superfish v1.4.8 - jQuery menu widget
 * Copyright (c) 2008 Joel Birch
 *
 * Dual licensed under the MIT and GPL licenses:
 *     http://www.opensource.org/licenses/mit-license.php
 *     http://www.gnu.org/licenses/gpl.html
 *
 * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
 */

;(function($){
    $.fn.superfish = function(op){

        var sf = $.fn.superfish,
            c = sf.c,
            $arrow = $(['<span class="',c.arrowClass,'"> »</span>'].join('')),
            over = function(){
                var $$ = $(this), menu = getMenu($$);
                clearTimeout(menu.sfTimer);
                $$.showSuperfishUl().siblings().hideSuperfishUl();
            },
            out = function(){
                var $$ = $(this), menu = getMenu($$), o = sf.op;
                clearTimeout(menu.sfTimer);
                menu.sfTimer=setTimeout(function(){
                    o.retainPath=($.inArray($$[0],o.$path)>-1);
                    $$.hideSuperfishUl();
                    if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
                },o.delay);
            },
            getMenu = function($menu){
                var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
                sf.op = sf.o[menu.serial];
                return menu;
            },
            addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };

        return this.each(function() {
            var s = this.serial = sf.o.length;
            var o = $.extend({},sf.defaults,op);
            o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
                $(this).addClass([o.hoverClass,c.bcClass].join(' '))
                    .filter('li:has(ul)').removeClass(o.pathClass);
            });
            sf.o[s] = sf.op = o;

            $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
                if (o.autoArrows) addArrow( $('>a:first-child',this) );
            })
            .not('.'+c.bcClass)
                .hideSuperfishUl();

            var $a = $('a',this);
            $a.each(function(i){
                var $li = $a.eq(i).parents('li');
                $a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
            });
            o.onInit.call(this);

        }).each(function() {
            var menuClasses = ;
            if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
            $(this).addClass(menuClasses.join(' '));
        });
    };

    var sf = $.fn.superfish;
    sf.o = [];
    sf.op = {};
    sf.IE7fix = function(){
        var o = sf.op;
        if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
            this.toggleClass(sf.c.shadowClass+'-off');
        };
    sf.c = {
        bcClass     : 'sf-breadcrumb',
        menuClass   : 'sf-js-enabled',
        anchorClass : 'sf-with-ul',
        arrowClass  : 'sf-sub-indicator',
        shadowClass : 'sf-shadow'
    };
    sf.defaults = {
        hoverClass    : 'sfHover',
        pathClass    : 'overideThisToUse',
        pathLevels    : 1,
        delay        : 800,
        animation    : {opacity:'show'},
        speed        : 'normal',
        autoArrows    : true,
        dropShadows : true,
        disableHI    : false,        // true disables hoverIntent detection
        onInit        : function(){}, // callback functions
        onBeforeShow: function(){},
        onShow        : function(){},
        onHide        : function(){}
    };
    $.fn.extend({
        hideSuperfishUl : function(){
            var o = sf.op,
                not = (o.retainPath===true) ? o.$path : '';
            o.retainPath = false;
            var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
                    .find('>ul').hide().css('visibility','hidden');
            o.onHide.call($ul);
            return this;
        },
        showSuperfishUl : function(){
            var o = sf.op,
                sh = sf.c.shadowClass+'-off',
                $ul = this.addClass(o.hoverClass)
                    .find('>ul:hidden').css('visibility','visible');
            sf.IE7fix.call($ul);
            o.onBeforeShow.call($ul);
            $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
            return this;
        }
    });

})(jQuery);

//]]>
</script>


<script>

    $(document).ready(function(){
        $(&quot;ul.menu-secondary&quot;).superfish({
            pathClass:  &#39;current&#39;
        });
    });

</script>

7. Selanjutnya gan cari code ]]></b:skin> , dan letakkan code berikut tepat diatas kode ]]></b:skin>


.menus,.menus *{margin:0;padding:0;list-style:none;list-style-type:none;}
.menus ul{position:absolute;top:-999em;100%;}
.menus ul li{width:100%}
.menus li:hover{visibility:inherit}
.menus li{float:left;position:relative}
.menus a{display:block;position:relative}
.menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99}
.menus li:hover li ul,.menus li.sfHover li ul{top:-999em}
.menus li li:hover ul,.menus li li.sfHover ul{left:100%;top:0}
.menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em}
.menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0}
.sf-shadow ul{padding:0 8px 9px 0;-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px}
.menus .sf-shadow ul.sf-shadow-off{background:transparent}
.menu-secondary-wrap{padding:0;margin:0;position:relative;height:40px;z-index:300;background: #BDB76B; width: 100%;}
.menu-secondary{height:40px}
.menu-secondary ul{min-width:160px}
.menu-secondary li a{color:#1B1A1A;padding:13px 15px 12px 15px;text-decoration:none;text-transform:uppercase;font:bold 12px Arial,Helvetica,Sans-serif; border-right: 1px solid #A52A2A;}
.menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover > a,.menu-secondary li.current-cat > a,.menu-secondary li.current_page_item > a,.menu-secondary li.current-menu-item > a{color:#FFF;background: #C3C3C3;outline:0;}
.menu-secondary li li a{color::#A52A2A;background:#FFEBCD;padding:10px 15px;text-transform:none;font-weight:normal; border-right: 0;}
.menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover > a,.menu-secondary li li.current-cat > a,.menu-secondary li li.current_page_item > a,.menu-secondary li li.current-menu-item > a{color:#A52A2A;background:#FFEBCD;outline:0}
.menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px}
.menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:10px 13px 0 0}
.menu-secondary li li .sf-sub-indicator{padding:6px 13px 0 0}

Untuk menyesuaikan warna dengan keinginan sobat, silahkan ganti tulisan-tulisan yang berwarna merah dengan warna yang gan sukai, untuk melihat kode-kode warna, silahkan kunjungi beberapa artikel saya :
- Kode Warna 238 Warna
- Tabel & Kode Warna
*!! Tapi untuk mengubah-ubah warnanya, saya harap itu belakangan saja karena belum bisa dilihat/dipratinjau

8. Selanjutnya cari kode <div id='content-wrapper'> jika gan tidak menemukan kodenya coba kode yang satu ini <div class='content'>, jika sudah ketemu, letakkan kode berikut di atas kode <div id='content-wrapper'> atau <div class='content'> :

 
<div class='menu-secondary-wrap'>
<ul class='menus menu-secondary'>
<li><a href='/'>Home</a></li>
<li><a href='#'>Kategori1</a>
<ul class='children'>
<li><a href='#'>Sub Kategori1</a></li>
<li><a href='#'>Sub Kategori1</a></li>
<li><a href='#'>Sub Kategori1</a></li>
</ul>
</li>
<li><a href='#'>Kategori2</a>
<ul class='children'>
<li><a href='#'>Sub Kategori2</a></li>
<li><a href='#'>Sub Kategori2</a></li>
<li><a href='#'>Sub Kategori2</a>
<ul class='children'>
<li><a href='#'>sub menu kategori2</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Kategori3</a>
<ul class='children'>
<li><a href='#'>Sub Kategori3</a>
<ul class='children'>
<li><a href='#'>Sub menu Kategori3</a></li>
<li><a href='#'>Sub menu Kategori3</a></li>
<li><a href='#'>Sub menu Kategori3</a></li>
</ul>
</li>
<li><a href='#'>Sub Kategori3</a></li>
<li><a href='#'>Sub Kategori3</a></li>
<li><a href='#'>Sub Kategori3</a></li>
</ul>
</li>
<li><a href='#'>Kategori4</a></li>
<li><a href='#'>Kategori5</a>
<ul class='children'>
<li><a href='#'>Sub Kategori5</a></li>
<li><a href='#'>Sub Kategori5</a></li>
</ul>
</li>
<li><a href='#'>Kategori6</a></li>
<li><a href='#'>Kategori7</a></li>
</ul>
</div>

*!! Silahkan gan ganti tanda pagar (#) dengan link tujuan menu tersebut !!*
*!! Silahkan ganti tulisan "Kategori, Sub Kategori, dan Sub Menu Kategori" dengan keinginan gan masing-masing !!*

9. Coba gan pratinjau terlebih dahulu, jika tidak ada gangguan, silahkan simpan templatenya, dan silahkan gan ubah-ubah warna, dan tulisan-tulisannya.

Sekian dulu desain yang Pertama, saya akan meng-share desain yang kedua segera, karena saya sedang sibuk jadi saya tidak sempat untuk mengsharenya sekaligus. Dan saya akan segera menerbitkan live demo untuk desain yang pertama. Thanks.


Sekian dulu pemberitahuan dari saya..
See you in my next pages..
Bye gan..!!

Selamat mencoba..

*jangan lupa komentarnya ya gan.. :D


-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
DAFTAR ISI :

Read More

Cara Back Up/Mengunduh/Mendownload Template Sendiri

06.57    No comments

What's up gan?
Are you fine today?
If you fine, I want to tell you about "Cara Back Up/Unduh Template Sendiri"

Bagi gan2 semua yang belum tahu bagaimana cara mengunduh template yang kita sedang gunakan/aktifkan sekarang, saya akan memberitahukan solusinya.


Langkah-langkah :
1. Login di blogger.com
2. Masuk ke Menu Template
3. Pilih kotak "Cadangkan/Pulihkan" yang berada di ujung sebelah kanan atas.
(untuk lebih jelas, lihat gambar dibawah)

 
 Gambar 1


 
Gambar 2

4. Lalu gan akan melihan tampilan seperti yang dibawah ini :
 
Gambar 3

5. Lalu gan pilih "Unduh Template Lengkap"
6. Save File, tunggu sampai file siap di unduh/download.
*!! hati-hati gan jika gan sudah selesai mengunduh/mendownload templatenya, sebaiknya gan simpan baik-baik, agar jika gan ingin mengunggah templatenya, gan tidak kehilangan templatenya.
7. Selesai deh,



Sekian dulu pemberitahuan dari saya..
See you in my next pages..
Bye gan..!!

Selamat mencoba..

*jangan lupa komentarnya ya gan.. :D


-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
DAFTAR ISI :

Read More

Google Search Engine Picture 2012

05.41    No comments

http://www.google.com/doodles Holiday Logos and Events - Google style! A collection of all Google logos commemorating holidays and events around the world. enHurdles 2012





http://www.google.com/doodles/hurdles-2012
Hurdles 2012
Date: Aug. 7, 2012
Location: Global
Tags: Current Event, hurdle, London 2012, Sports
Bolivia Independence Day 2012





http://www.google.com/doodles/bolivia-independence-day-2012 Bolivia Independence Day 2012
Date: Aug. 6, 2012
Location: Bolivia
Tags: National Holiday
Javelin 2012




http://www.google.com/doodles/javelin-2012 Javelin 2012
Date: Aug. 6, 2012
Location: Global
Tags: stadium, toss, London 2012, blimp, sports, Current Event, javelin, stars, throw
Synchronized Swimming 2012



http://www.google.com/doodles/synchronized-swimming-2012 Synchronized Swimming 2012
Date: Aug. 5, 2012
Location: Global
Tags: Sports
Pole Vault 2012


http://www.google.com/doodles/pole-vault-2012 Pole Vault 2012
Date: Aug. 4, 2012
Location: Global
Tags: clouds, crowd, London 2012, pole, Sports, Current Event, audience, stadium
Shot Put 2012

http://www.google.com/doodles/shot-put-2012 Shot Put 2012
Date: Aug. 3, 2012
Location: Global
Tags: Sports
Tu B'av 2012
http://www.google.com/doodles/tu-bav-2012 Tu B'av 2012
Date: Aug. 3, 2012
Location: Israel
Tags: National Holiday, love
Table Tennis 2012http://www.google.com/doodles/table-tennis-2012 Table Tennis 2012
Date: Aug. 2, 2012
Location: Global
Tags: Sports
Field Hockey 2012http://www.google.com/doodles/field-hockey-2012 Field Hockey 2012
Date: Aug. 1, 2012
Location: Global
Tags: Current Event, field hockey, London 2012, sports
Rings 2012http://www.google.com/doodles/rings-2012 Rings 2012
Date: July 31, 2012
Location: Global
Tags: London 2012, Current Event, Sports, audience, gymnastics, stage
Fencing 2012http://www.google.com/doodles/fencing-2012 Fencing 2012
Date: July 30, 2012
Location: Global
Tags: fencing, London 2012, Current Event, competition, parry, foil, sword, Sports
Diving 2012http://www.google.com/doodles/diving-2012 Diving 2012
Date: July 29, 2012
Location: Global
Tags: crowd, London 2012, audience, swimsuit, Current Event, Sports, diver, pool
Archery 2012http://www.google.com/doodles/archery-2012 Archery 2012
Date: July 28, 2012
Location: Global
Tags: clouds, target, London 2012, bow, Current Event, bullseye, arrow, Sports
Peru Independence Day 2012http://www.google.com/doodles/peru-independence-day-2012 Peru Independence Day 2012
Date: July 28, 2012
Location: Peru
Tags: Stamp, National Holiday, Chan Chan Ruins, History
Opening Ceremony 2012http://www.google.com/doodles/opening-ceremony-2012 Opening Ceremony 2012
Date: July 27, 2012
Location: Global
Tags: soccer, basketball, runner, fencing, London 2012, football, javelin, sports, Current Event, diving, Sports, swimming
Jaakonpäivähttp://www.google.com/doodles/jaakonpaiva Jaakonpäivä
Date: July 25, 2012
Location: Finland
Tags: rock tossing, National Holiday, winter is coming
Amelia Earhart's 115th Birthdayhttp://www.google.com/doodles/amelia-earharts-115th-birthday Amelia Earhart's 115th Birthday
Date: July 24, 2012
The name Amelia Earhart conjures up feelings of admiration and respect in the minds of millions of people. But personally, Amelia Earhart is more than just a name in the footnotes of history. Her enduring legacy as one of the world’s most celebrated aviatrices embodies the true spirit of American adventure. This legend, born 115 years ago in Atchison, Kansas, is an American heroine and one of my favorite icons.

Representing Amelia Earhart’s family for the past 25 years has grown my appreciation for their beloved relative, who is a beacon of hope and a symbol of courage in our society. Today’s Google Doodle, celebrating her 115th birthday, is the perfect tribute to the woman who is remembered for her groundbreaking achievements in aviation and her fight for gender equality. She is truly an admirable role model. As the first female pilot to cross the Atlantic Ocean, she was awarded the U.S. Distinguished Flying Cross. Nicknamed “Lady Lindy”, Earhart set numerous aviation records before her disappearance over the Pacific Ocean on her final flight in 1937.

While her aviation achievements are legendary, her commitment to women’s rights is also noteworthy. Throughout her remarkable career she focused on proving that women were equal to men in “jobs requiring intelligence, coordination, speed, coolness, and willpower.”

Representing this was not an easy task during the Victorian Era. Earhart’s family has often told me about her competitive nature and inborn stubbornness. This, coupled with her strong convictions, routinely challenged the prejudicial barriers in her path. A fantastic example of this Victorian tomboy is how in the wintertime rather than daintily sitting on her sled she was instead a “belly-whopper”, flying down the hill head first on her stomach.

Even as an adventurous dreamer, Amelia still knew that making a lasting legacy involved an element of risk. In a letter to her husband, George Putnam, she wrote, "Please know I am quite aware of the hazards. I want to do it because I want to do it. Women must try to do things as men have tried. When they fail, their failure must be but a challenge to others." The message she leaves behind is especially evident to me: start living your life. Start setting aside your fears. Start believing it is acceptable to fail, knowing if you did not fail, you did not try. Without a doubt, her philosophy and lifetime accomplishments transcend time.

Amelia’s legacy is timeless and remains stronger than ever more than 75 years after her disappearance, assuring her a perpetual place in history. Her daring belly-slamming essence lives on and will continue to make lasting impressions by inspiring many, like me, to pursue their dreams.

~Mark Roesler, attorney for the estate of Amelia Earhart
Location: Global
Tags: Birthday, History
Belgium National Day 2012http://www.google.com/doodles/belgium-national-day-2012 Belgium National Day 2012
Date: July 21, 2012
Location: Belgium
Tags: National Holiday, gastronomy, food, mussels, pot, fries, frites, chocolate, brussel sprouts, flag, strawberries, waffle, endives
Colombia Independence Day 2012http://www.google.com/doodles/colombia-independence-day-2012 Colombia Independence Day 2012
Date: July 20, 2012



July 20th is an important day in Colombia. This year we've rediscovered the meaning of the Colombian flag and the spirit of freedom that Simon Bolivar sought out with the help of the modern artist, Armando Villegas, "El Maestro". In describing this project he shared that ¨An assignment of this nature comes with lots of responsibility. I like that it has a meaning and a projection, specially when it comes to such a lively media¨.

After first meeting with Villegas he began exploring all the past Colombian doodles and the idea emerged of Bolivar combined with the colors of the Colombian flag and native animals filling in the background. Beyond being the country's national colors, according to Villegas they have a universal value: yellow, blue, and red are the most important colors in nature and the base of any pictorial work.

It's done in the style he's most known for as well, that of subtraction. What you see is the result of his discovering of different shapes within the material. One shape leads to another which leads to yet another. This artistic process is much like how he hopes users will think about the doodle: ¨My work is intended to disturb, motivate, create a curiosity on the people to make them reflect about the images I’ve created and their significance as homeland sense through universal colors¨.

The combination of the colors with the elements of nature also have a profound meaning. Within the red section primary beings refer to an early stage. The blue is a transition period with the animals evolving and changing. The yellow is the final result where birds, specially five hummingbirds, symbolize the liberty Bolivar fought for. The significance continues further referencing human evolution where red depicts the present, blue the past, and yellow the brilliant future ahead.

¨The word Google connects the three colors. It is done in a simple and elemental way, it isn't an indecipherable writing. With this simple writing I wanted to explain the backdrop of this manifestation¨.
Happy Independence Day, Colombia!

***

Y en Español

El 20 de Julio es una fecha importante no solo para Colombia sino también para Google. La celebración de la Independencia nacional empieza siempre con un cambio de vestimenta en nuestro doodle para representar y realzar el sentido de la fiesta patria. Para este 2012 quisimos hacer algo diferente y redescubrir el significado de la bandera colombiana, los colores que están presentes y el espíritu de libertad que Simón Bolívar buscó con la gesta emancipadora.

El maestro Armando Villegas, importante artista plástico representante del realismo fantástico y uno de los pioneros del arte moderno en el país, fue el encargado de la realización de la obra que se podrá encontrar si se entra al buscador y que rescata muchas de las imágenes icónicas de la época independentista. Presenta este legado pero con un nuevo significado, que va de la mano con el proceso creativo que llevó al maestro a crear formas y colores para que descubramos eso que nos hace sentir colombianos en estas fechas.

“Un encargo de esta naturaleza es de mucha responsabilidad. Me gusta que tiene un sentido y una proyección, sobre todo cuando se trata de un medio tan ágil”, comenta el Maestro respecto al valor que tiene el hacer una imagen representativa para Internet.

Descubriendo el doodle

Este doodle presenta la imagen del Libertador combinada con los colores de nuestra bandera, en un fondo en el que se pueden entrever diferentes tipos de animales presentes en la fauna colombiana. Los colores primarios, además de estar relacionados con nuestro sentido patrio, tiene para el maestro un valor más universal: amarillo, azul y rojo son los más importantes de la naturaleza y la base de cualquier trabajo pictórico.

La combinación de los colores con los elementos naturales también tiene un sentido profundo. En la franja roja se pueden observar seres primarios que hablan de una primera etapa, los anfibios de columna vertebral horizontal que están en la tierra. La franja azul es una transición, estos animales están buscando su evolución. La amarilla es el resultado en la que se pueden vislumbrar aves, en especial cinco colibríes, símbolo de la libertad que Bolívar buscaba para el mismo número de naciones por las que luchó.

El significado va más allá de esta primera explicación, pues junto con ese sentido de evolución de los animales, también está representada la del hombre en el que el rojo es el presente y el ahora, el azul es el pasado y el amarillo es el brillante futuro que está por venir.

“El nombre de Google es el que enlaza los tres colores. Está hecho de una forma muy simple y elemental, no es una escritura indescifrable. Con esta letra sencilla busqué explicar el trasfondo de esta manifestación”, complementa el Maestro Villegas la explicación del doodle.

Todo un proceso creativo

La historia comienza hace tres meses, momento en el que Google contactó al Maestro Villegas por su reconocimiento y valor en el arte colombiano. Cuando acepta, comienza con la exploración de todos los doodles que se han hecho para los momentos especiales del país y surge la idea, que aunque tuvo diferentes bocetos, todos los elementos estuvieron presentes desde sus orígenes.

El doodle es una muestra de la técnica por la que las pinturas del Maestro Villegas son reconocidas: el trabajo por sustracción. Lo que se ve es el resultado del descubrimiento de diferentes figuras en el material que el Maestro preparó con anterioridad, y que va revelando de una forma que puede ser relacionada con lo arqueológico. Al raspar el lienzo se descubren las aves, colibríes, peces y anfibios que hacen parte de la figura total.

Este proceso no difiere de lo que el maestro desea que suceda con quienes entren a Google y vean el doodle: “Mi trabajo pretende inquietar, motivar, crear una curiosidad en la gente para que reflexione sobre las imágenes que he creado y el significado que tienen, como sentido de patria a través de estos colores universales”.

Con este doodle se puede descubrir y encontrar el verdadero sentido de la libertad para nuestro país. ¡Feliz Día de la Independencia, Colombia!


Location: Colombia
Tags: National Holiday, Woodcut, Armando Villegas, Guest Artist, Simón Bolívar, flag, portrait
Santos Dumont's 139th Birthdayhttp://www.google.com/doodles/santos-dumonts-139th-birthday Santos Dumont's 139th Birthday
Date: July 20, 2012
Location: Brazil
Tags: Flight, Technology, Plane, Field, Birthday, Hat
Read More

Langganan: Postingan (Atom)