Processing: April 2012

Senin, 30 April 2012

Membuat Efek Loading

Bagaimana Membuat Efek Loading / 'Memuat' dalam Blogspot Blogger?

Dari tetangga sebelah sob,sekalian mo promosi blog sahabat di AkuPunya.Com,script ini sengaja kami ambil untuk sekedar berbagi trik dan tips membuat efek loading di blog.

Bentuk fisiknya sobat dapat lihat di SINI,saat sobat membuka halaman atau mengklik link posting misalnya akan ada efek menunggu atau istilahnya dengan 'animation loading page widget'.

Jadi sambil sobat menunggu konten blog tampil sempurna,widget ini akan tampil dengan gambar animasi yang telah disediakan dalam script.
Seperti yang telah AkuPunya.Com ciptakan,berikut bahan yang dibutuhkan:

1.Script dengan ekstention *.js,silakan lihat di:

http://tc.comze.com/js/preloadpage.js

2.Gambar yang akan tampil,disini adalah yang berformat *.gif yang beralamat di:

http://lh3.googleusercontent.com/-kcn5J_HBL0k/TjwQzEsyEAI/AAAAAAAAAcw/fyuDdV9NDmU/ajax-loader.gif

Tampilan akan seperti ini (gambar ini akan tampil jika yang bersangkutan masih mengabadikannya pent-):

3.Langkah dan caranya.

Langkah dan Cara Membuat Efek Loading Blog dari AkuPunya.Com

Pertama,pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3).

Lihat Gambar ya :D

Membuat Loading Blog mengggunakan jQuery.

(1)

(2)

(3)

Nah,selanjutnya cari kode <head> (Gunakan Ctrl+F),setelah ketemu sob,tepat dibawahnya letakkan kode berikut:

<script src='http://tc.comze.com/js/preloadpage.js' type='text/javascript'/>

Setelah itu,cari lagi kode <body>,setelah ketemu hapus kode tersebut dan ganti dengan kode ini:

<body onLoad='PreloadPage();'> <div id='prepage' style='position: fixed; _position: absolute; top: 0px; right: 0px; clip: inherit; _top: expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-offsetHeight); _left: expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth-offsetWidth); width: 100%; height: 100%; background-color: #000; padding: 0px; border: 0px; text-align: center; filter: alpha(opacity=75); -moz-opacity: .75; opacity: .75; font-family: verdana; font-weight: bold; color: #ccc;'> <script type='text/javascript'>PreLoading();</script> </div>

Simpan dan lihat hasilnya :D

Kamis, 26 April 2012

Membuat Back To Top Berefek (Smooth)

Bagaimana Membuat Back To Top / Kembali ke Atas pada Blogger?

Setelah beberapa waktu lalu sharing seputar bagaimana membuat link anchor back to top dalam satu halaman posting blog,dengan konsep yang sama namun dengan sentuhan jQuery (bahasa javascript) dapat kita ciptakan sebuah tombol back to top yang berfungsi untuk mempermudah pengunjung dalam melihat semua konten blog dalam halaman tersebut.

Biasanya,back to top button ini sangat berguna sekali untuk blog atau situs yang memiliki konten sangat panjang hingga memaksa pengunjung harus menggulung scroll window dalam melihat konten yang ada.

Nah,seperti yang sudah Pelajaran Blog terapkan,scroll back to top ini sobat dapat lihat di sebelah kanan bagian bawah saat scroll window sobat gulung ke bawah:

Dan saat ada eksekusi klik pada tombol backtotop tersebut maka membawa kita pada halaman atas dengan sedikit efek smooth (cari aja dengan google translate apa itu arti 'smooth' ya hihihi)

Langkah dan Cara Membuat Back To Top Button jQuery

Pertama,pilih Tata Letak / Rancangan,dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar:

Membuat Back To Top ( kembali keatas) Dengan Smoothscroll.

Membuat Back To Top ( kembali keatas) Dengan Smoothscroll.

Membuat Tombol Back To Top Menggunakan JavaScript.

Kemudian letakkan kode berikut,lalu simpan.Selesai.

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

<script type="text/javascript" >
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDzMTYcy_4JBdcyUXJlGaWGIOSwGl_VF74yfDnz723w-LWwgmKPM04n8fiYUyX-fpjmm0BKkSHEgOBHw66AHAUAOROSGCr-WOUc6JJFfoXEzstBsQjW7dxucoDjUPzUb3nQ344sDa8qJ8/s400/Back-to-top.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

state: {isvisible:false, shouldvisible:false},

scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},

keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},

togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},

init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

Jumat, 20 April 2012

Membuat Link Blogroll Animasi Gulung (Update)

Cara Membuat Tab View dengan Efek Animasi Gulung Jquery

Membuat Link Blogroll Animasi Gulung (Update) - beberapa hari lalu di facebook page Pelajaran Blog sudah memberikan bocoran 'membuat show hide tab view widget for blogger'.
Membuat tab view biasa dan tab view menggunakan jquery memang tidak jauh berbeda,hanya saja ada penambahan beberapa kode javascript untuk menghasilkan efek menggulung atau istilah kerennya Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget Membuat Tab Vanilla Slick jQuery

Lihat screenshot pic nya gan ato sobat bisa juga lihat widgetnya di sidebar pada blog ini:

Yup,tab view yang diciptakan dapat menyembunyikan widget pada sidebar,ini sangat bermanfaat sekali untuk menambah tampilan blogger agar lebih menarik dan akan terkesan rapi nantinya.

Langkah membuatnya sangat mudah sob,tinggal ikuti aja langkah-langkah dibawah ini ya Tab Vanilla Slick.

Langkah Cara Membuat jQuery Slick Tab pada Blogger

Langkahnya sangat sederhana,agan pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3).
Lihat Gambar ya :D

Membuat Tab Slick Di Blogger Menggunakan Java Script Jquery.

(1)

Membuat Tab View Menggunakan Efek Jquery.

(2)

Cara Membuat Tab View Blogger dengan JQuery.

(3)

Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.


#slick_area {
border:0px solid #585858;
background-color:#ffffff;
padding:8px;
margin:10px 0;
line-height:18px;
}
#slick_area a{
color:#ffffff;
text-decoration:none;
}
.slick_area a:hover{
color:#FF0000;
}
ul.slick {
margin:2px 5px 8px 0;
padding:0px;
}
ul.slick li {
list-style:none;
display:inline;
background-color:#ffffff;
padding:5px 14px;
text-decoration:none;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
border:0px solid #585858;
}
ul.slick li:hover {
color:#red;
}
ul.slick li.active {
background-color:#ffffff;
border:1px solid #585858;
color:#222222;

}
.content-slick {
background-color:#ffffff;
border:0px solid #585858;
color:#222222;
min-height:40px;
padding:7px 13px 5px;
text-align:left;
}
.content-slick ul {
margin:20px;
padding:0;
}
.content-slick ul li {
list-style:none;
border-bottom:1px solid #222222;
padding:1px;
}
.content-slick ul li:last-child {
border-bottom:none;
}
.content-slick ul li:hover, .content-slick ul li a:hover {
display:block;
background-color:#ffffff;
}
.content-slick ul li a {
text-decoration:none;
color:black;
display:block;
}

Setelah itu,carilah kode </head>,setelah ketemu tepat diatasnya letakkan kode javascript dan jQuery berikut:


<script language='javascript' src='https://sites.google.com/site/pujiantoroinc/Home/jquery-1.3.2.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#tabdua, #tabtiga&#39;).hide();
$(&quot;ul.slick li&quot;).click(function () {
$(&quot;.active&quot;).removeClass(&quot;active&quot;);
$(this).addClass(&quot;active&quot;);
$(&quot;.content-slick&quot;).slideUp();
var content_show = $(this).attr(&quot;title&quot;);
$(&quot;#&quot;+content_show).slideDown();
});
});
</script>

Lalu simpan templates sobat ya.
Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)

Cara Membuat Tab View (with jQuery).

(4)

Cara Menambahkan Tab View Pada Blogspot Template.

(5)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:


<ul class="slick">
<li title="tabsatu" class="slick active">Tab Satu Gan</li>
<li title="tabdua" class="slick active">Tab Dua Gan</li>
<li title="tabtiga" class="slick">Tab Tiga Gan</li>
</ul>

<div id="tabsatu" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Satu
</div>

<div id="tabdua" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Dua
</div>

<div id="tabtiga" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Tiga
</div>

Setelah itu simpan dan sobat sekarang dah punya slick tab view widget yang dapat dijadikan alternative buat ngehemat tempat hore! widget tab view slick jquery vanilla berhasil!

hore! widget tab view slick jquery vanilla berhasil!

,moga berhasil and selamat ngulik kodenya ya :D

ket:kode bercetak tebal gantilah atau isilah dengan widget yang sobat inginkan,bisa kode iklan,alexa widget,maupun kode HTML/Javascript yang lain.

Selasa, 17 April 2012

Cara Membuat Vertical Slide Menu / Trigger Hover (Update)

Cara Membuat Vertical Slide Menu / Trigger Hover (Update) Sudah Direvisi! Dijamin Berhasil 100%

Membuat Vertical Sliding di Sudut Blog dengan Animasi menggunakan jQuery

Sepertinya pelajaran blog sedang demam ya dengan jquery,hehehe (begitulah,ini juga dari hasil copas sana sini kok mas,weqz???? pent-)
Contoh tampilannya lihat gambar dibawah ini ya,sedang untuk demo-nya sobat bisa lihat di SINI.

Langkah cara membuat Trigger Hover jQuery / Vertical Sliding Panel mengggunakan jQuery ini sobat bisa lakukan langkah -langkah berikut:

Pertama,pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3).
Lihat Gambar ya :D

Cara membuat Sexy Vertical Sliding Panel mengggunakan jQuery.

(1)

javascript - Combine hover and click functions (jQuery) ?.

(2)

Membuat Vertical Sliding Info Panel With JQuery.

(3)

Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.

#container {
    clear: both;
    margin: 0;
    padding: 0;
    }
   
    #container a{
    float: right;
    background: #9FC54E;
    border: 1px solid #9FC54E;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomleft: 20px;
    -webkit-border-bottom-left-radius: 20px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color:#fff;
    padding: 20px;
    font-weight: 700;
    }
   
    #container a:hover{
    float: right;
    background: #a0a0a0;
    border: 1px solid #cccccc;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomleft: 20px;
    -webkit-border-bottom-left-radius: 20px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color:#fff;
    padding: 20px;
    font-weight: 700;
    }
   
    .content {
    font-style:normal;
    font-family:helvetica, arial, verdana, sans-serif;
    color:#ffffff;
    background:#333333;
    border:1px solid #444444;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomleft: 20px;
    -webkit-border-bottom-left-radius: 20px;
    margin: 30px 0 50px;
    padding: 15px 0;
    }
   
    .content p {
    margin: 10px 0;
    padding: 15px 20px;
    }

    .panel {
    position: absolute;
    top: 250px;
    left: 0;
    display: none;
    background: #000000;
    border:1px solid #111111;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
    width: 330px;
    height: auto;
    padding: 30px 30px 30px 130px;
    filter: alpha(opacity=85);
    opacity: .85;
    }
   
    .panel p{
    margin: 0 0 15px 0;
    padding: 0;
    color: #cccccc;
    }
   
    .panel a, .panel a:visited{
    margin: 0;
    padding: 0;
    color: #9FC54E;
    text-decoration: none;
    border-bottom: 1px solid #9FC54E;
    }
   
    .panel a:hover, .panel a:visited:hover{
    margin: 0;
    padding: 0;
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid #ffffff;
    }
   
    a.trigger{
    position: absolute;
    text-decoration: none;
    top: 250px; left: 0;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color:#fff;
    padding: 20px 40px 20px 15px;
    font-weight: 700;
    background:#333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDu6TqJExWHE_0mXgyZ_8r-XqZQVUfrt89u21-k9AIBzAxBwKm-3InqLKpR8lNqLTsc3qA9ZI6jzxqxteu-HEpgViAe9Wko6vM0lteJThm7wARBINjfEG_5t49nMVFPT5bsUwwp86a-CU/s320/plus.png) 85% 55% no-repeat;
    border:1px solid #444444;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-bottom-left-radius: 0px;
    display: block;
    }

    a.trigger:hover{
    position: absolute;
    text-decoration: none;
    top: 250px; left: 0;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color:#fff;
    padding: 20px 40px 20px 20px;
    font-weight: 700;
    background:#222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDu6TqJExWHE_0mXgyZ_8r-XqZQVUfrt89u21-k9AIBzAxBwKm-3InqLKpR8lNqLTsc3qA9ZI6jzxqxteu-HEpgViAe9Wko6vM0lteJThm7wARBINjfEG_5t49nMVFPT5bsUwwp86a-CU/s320/plus.png) 85% 55% no-repeat;
    border:1px solid #444444;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-bottom-left-radius: 0px;
    display: block;
    }
   
    a.active.trigger {
    background:#222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvX_B5cl1jvyHF3b9QRnhZPfHOx24l3TsfCc_qooCQ4_xRhBXV_2YCAgpOQZCoVpiyAxtSN1wkauv7WI6G293CZxNP740Zr60_SH6I7nY8ifJwNUW8_72_M6kieOGDJgJmhs8kJxRUdIw/s320/minus.png) 85% 55% no-repeat;
    }
   
    .columns{
    clear: both;
    width: 330px;
    padding: 0 0 20px 0;
    line-height: 22px;
    }
   
    .colleft{
    float: left;
    width: 130px;
    line-height: 22px;
    }
   
    .colright{
    float: right;
    width: 130px;
    line-height: 22px;
    }
   
    ul{
    padding: 0;
    margin: 0;
    list-style-type: none;
    }
   
    ul li{
    padding: 0;
    margin: 0;
    list-style-type: none;
    }

Setelah itu,carilah kode </head>,setelah ketemu tepat diatasnya letakkan kode javascript dan jQuery berikut:

<script src='https://sites.google.com/site/pujiantoroinc/Home/jquery-1.3.2.js' type='text/javascript'/>
 
 <script type='text/javascript'>
 $(document).ready(function(){
     $(&quot;.trigger&quot;).click(function(){
         $(&quot;.panel&quot;).toggle(&quot;fast&quot;);
         $(this).toggleClass(&quot;active&quot;);
         return false;
     });
 });
 </script>

Lalu simpan templates.
Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)

googlecode.com/files/jquery-1.3.2.js.

(4)

javascript - Jquery 1.3.2 error on Internet Explorer.

(5)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:

<div class="panel">
            
<h2>Silakan pilih kategori:</h2>
<div style="clear:both;"></div>
    <div class="columns">
        <div class="colleft">
        <h3>Bisnis Online</h3>
            <ul>
                <li><a href="http://marshaaruan.blogspot.com/" title="Bisnis Gratis">Bisnis Gratis</a></li>
                <li><a href="http://marshaaruan.blogspot.com/" title="Domain Gratis">Domain Gratis</a></li>
                <li><a href="http://marshaaruan.blogspot.com/" title="Pasang Iklan Gratis">Pasang Iklan Gratis</a></li>
                <li><a href="http://marshaaruan.blogspot.com/" title="Bisnis Tanpa Modal">Bisnis Tanpa Modal</a></li>
                <li><a href="http://marshaaruan.blogspot.com/" title="Uang Gratis Free!">Uang Gratis Free!</a></li>
            </ul>
        </div>
   
        <div class="colright">
            <h3>Ngemis Dollar Internet</h3>
            <ul>
                                <li><a href="http://marshaaruan.blogspot.com/" title="Bisnis Gratis">Bisnis Gratisan (Baru)</a></li>
                <li><a href="http://marshaaruan.blogspot.com/" title="Domain Gratis">Baru! Domain Gratis</a></li>
                <li><a href="http://marshaaruan.blogspot.com/" title="Pasang Iklan Langsung!">Pasang Iklan Langsung!</a></li>
                <li><a href="http://marshaaruan.blogspot.com/" title="Bisnis di Rumah">Bisnis di Rumah</a></li>
                <li><a href="http://marshaaruan.blogspot.com/" title="Gratis Uang Jajan">Gratis Uang Jajan</a></li>
            </ul>
        </div>
    </div>
    <div style="clear:both;"></div>
    </div>
    <a class="trigger" href="#">Surf!</a>

Nah,sekarang simpan dan sobat bisa langsung lihat hasilnya,dan script ini akan bekerja dengan baik di browser mozilla dan Google Chrome ya gan(oya,edit dan ulik sendiri ya kabuuur... Belajar Membuat Trigger Hover jQuery / Vertical Sliding Panel mengggunakan jQuery selesai.

Belajar Membuat Trigger Hover jQuery / Vertical Sliding Panel mengggunakan jQuery selesai.

).
Good luck!

Jumat, 13 April 2012

Membuat Menu Kwicks jQuery Slide Geser (Update)

Membuat Menu Navigasi dengan jQuery (Kwicks jQuery Sliding Navigation Menu for Blogger) Sudah Direvisi! Dijamin Berhasil 100%
(mohon maklum ya sob,ada yang ketinggalan,hihihi)

Kwick Menu Navigasi Blogger dengan jQuery

Untuk kesekian kalinya di blog bertema tutorial blog dan seo blogger blogspot ini mengunduh tutorial jQuery dalam membuat menu navigasi di blogger.

Jika sebelumnya telah dipublikasikan bagaimana menerapkan jQuery di blogspot dalam beberapa trik membuat slide show widget,sliding panel dan slick tab view menggunakan jQuery,kini ada trik satu lagi yang tak kalah menarik.
Betul gan! Yuk kita intip bagaimana sih membuat menu navigasi untuk flatform blogger/blogspot dengan jQuery ini.

Membuat Menu Navigasi Blogger dengan Kwicks jQuery

Sobat pernah lihat di beberapa blog atau situs dimana pada menu navigasi-nya dapat menyembunyikan icon atau gambar secara geser / slide saat mouse berada diatasnya?
Demo atau contoh dari menu navigasi kwicks jQuery ini sobat dapat lihat di:

http://www.jeremymartin.name/examples/kwicks.php?example=1

atau yang telah berhasil saya buat di :

http://pujiantoroblog.blogspot.com/

Memang betul,bahwa kelemahan dari kwicks menu navigasi ini tidak dapat dibaca oleh beberapa browser khususnya handphone atau browser yang tidak mengaktifkan javascript.Namun kwicks menu navigasi jQuery ini dapat bekerja sangat baik di browser mozilla juga Google chrome dan IE terbaru.

Penasaran,yuk mari kita pelajari bagaimana membuat menu navigasi blogger dengan jQuery kwicks tricks.
Pertama langkahnya seperti biasanya ya hanya pilih Dashboard (gb.1),lalu Tata Letak (gb.2) kemudian contreng tulisan Expands Widget Templates (gb.3).

(1)

(2)

(3)

Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diATAS kode ]]></b:skin> tersebut.


.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block
}

Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

</head>

Setelah sobat ketemukan kode </head> tersebut,tepat diatasnya letakkan script berikut:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script class='jsbin' src='https://sites.google.com/site/pujiantoroinc/Home/kwicks.js'> </script> <script type='text/javascript'> $(document).ready(function(){ $('.kwicks').kwicks({ duration: 500, max: 170, spacing: 0 }); }); </script>

**Kode berwarna hijau,jika ditemplate sobat sudah tersedia,maka kode tersebut tak perlu dicantumkan kembali.

Lalu simpan templates sobat.
Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)

Cara Membuat kwicks jquery navigasi menu for blogger blogspot.

Cara Membuat kwicks jquery navigasi menu for blogger blogspot.

(4)

membuat navigasi menu javascript css blogger jquery.

(5)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:

<table width="100%" border="0"><tr><td bgcolor="black">
<ul class='kwicks'>
<li id='kwick1'><a href='http://pujiantoro.blogspot.com/' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='http://pujiantoro.blogspot.com/search' title='daftar isi.'>Blog</a></li>
<li id='kwick3'><a href='http://pelajaran-blog.blogspot.com/2009/02/profil.html' title='about'>About</a></li>
<li id='kwick4'><a href='#' title='futures'>Portfolio</a></li>
<li id='kwick5'><a href='#' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='http://pelajaran-blog.blogspot.com/' title='recomended links'>Resource</a></li>
</ul></td></tr></table>

Simpan,selesai sudah dan sobat sudah bisa lihat hasil dari menu navigasi kwick jquery ini.
Jikaa mengalami kesulitan mohon diskusikan adi facebook pagenya ya gan and selamat mencoba!

Selasa, 10 April 2012

Cara Download Youtube (Cepat,Mudah,Praktis)

Download Youtube Tanpa Software

Hi guys,ketemu lagi kita ya,Alhamdulillah,ada info nih yang pingin ana bagi2 pada agan-agan,yup cara praktis download video dari youtube.Jika di artikel tetangga mengups tuntas bagaimana download youtube dengan software semisal IDM (Internet Download Manager) atau situs pihak ketiga seperti www.KeepVid.Com dan sejenisnya,di Pelajaran Blog kali ini akan sharing mas alah bagaimana sih cara donlot youtube tanpa software.

Betul gan,yang kita butuhkan hanya browser mozilla,yes...that's it!
Sepintas memang panjang banget teorinya,tapi setelah dicoba tak ubahnya seperti membalikkan telapak tangan,wah..mudah banget kayanya ya :D

Cara Downlaod Streaming Video

Langsung aja ya,pertama sebagai ujicoba sobat kunjungi video ini (filenya kecil sob,hhihi):
http://www.youtube.com/watch?v=vi-iaFmSsHc

Setelah itu,lihat samapai selesai ya,kemudian ketik :
about:cache?device=disk pada browser:

Sehingga nanti akan muncul halaman seperti ini,lalu copy aja ya url yang tertera seperti pada gambar berikut:

cara praktis download youtube tanpa software

Setelah sobat copy,kini buka jendela My Document di komputer sobat,dan paste url yang baru saja kita copy tadi kedalam kolom directory,lihat gambar:

Kemudian sobat tekan Enter dan akan tampil folder seperti ini,kemudian klik Search ya gan:

Setelah itu,klik 'all files and folders' dan klik 'search' untuk mulai merayapi file,lihat gambar:

Maka setelah hasil folder kita kumpulkan lewat pencarian tadi,kini kita mendapatkan folder-folder seperti gambar berikut,klik kanan pilih 'Arrange Icons By' lalu pilih 'Size'.

cara download video streaming youtube,4shared

Ini bertujuan untuk melihat ukuran file yang paling besar,nah ukuran file yang paling besar inilah yang merupakan file video dari streaming video youtube yang baru saja kita lihat,kemudian setelah kita mendapatkan ukuran file yang paling besar,klik kanan file tersebut dan pilih 'Rename':

Tambahkan ekstension *.flv,misal nama filenya D16D5d01 maka rubah menjadi D16D5d01.flv,llihat gambar:

Kini,sobat bisa lihat video youtube yang baru saja kita lihat dalam bentuk file yang sudah ada di komputer sobat,lihat gambar hasil videonya (ingat ya install juga flv playernya berhubung file dari youtube adalah flv alias Flash Video,hihihi)

Selamat mencoba gan :D

Sabtu, 07 April 2012

Cara Membuat Related Post Berkedip jQuery (Update)

UPdate! Trik Cara Membuat Artikel Yang Berhubungan / Related Post / Artikel Terkait,Sudah Direvisi! Dijamin Berhasil 100%

Setelah beberapa hari kemarin kami saling sharing seputar belajar seo blogspot,kini saatnya kembali utak atik blog seputar tutorial jquery kembali.

Ketinggalan terlalu banyak materi jquery dalam blog ini?,jangan kuatir sob,tutorial blog ini baru memposting beberapa posts kok :D

Sebelum posting tentang bagaimana membuat recent post jQuery ini,biar kami share kembali beberapa tutorial jQuery dalam blog ini beberapa waktu lalu,diantaranya:

Belajar Membuat Trigger Hover jQuery / Vertical Sliding Panel mengggunakan jQuery
Membuat Widget Gambar Slide Show / Slideshow Javascript dan Css di Blogger
Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget
Membuat Menu Navigasi dengan jQuery (Kwicks jQuery Sliding Navigation Menu for Blogger)

Nah,belum terlalu banyak khan sob,sedot buruan ya :D

Langkah Cara Membuat Related Post / Recent Post jQuery untuk Blogger

Bagi yang masih bingung seperti apa sih related post yang dimaksudkan,sobat bisa lihat contoh gambarnya dibawah ini:

Contoh yang sudah diterapkan sobat bisa lihat di sini.
Gimana sob,pingin ga punya widget kaya gitu?yuk intip gimana sih cara bikin recent post jquery blogger ini..

Pertama langkahnya seperti biasanya ya hanya pilih Dashboard,lalu Tata Letak / Rancangan kemudian klik tulisan Add New Widget atau Tambah Gadget dan pilih HTML/Javascript,lihat Gambar:

Cara Membuat jquery related post blogger blogspot.

Kemudian letakkan kode berikut sob:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><center><strong>Artikel Acak</strong></center>
<center>
   <style type="text/css" media="screen">
   <!--

   #spylist {
   overflow:hidden;
   margin-top:1px;
   padding:0px 0px;
   height:300px;
   }
   #spylist ul{
   width:100%;
   overflow:hidden;
   list-style-type: none;
   padding: 0px 0px;
   margin:0px 0px;
   }
   #spylist li {
   width:100%;
   padding: 0px 0px;
   margin:0px 0px 5px 0px;
   list-style-type:none;
   float:none;
   height:70px;
   overflow: hidden;
   background:#fff url() repeat-x;
   border:1px solid #ddd;
   }

   #spylist li a {
   text-decoration:none;
   color:#4B545B;
width:100%;
   font-size:10px;
   height:12px;
   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:8px;
   color:#0284C2;
   padding:2px 0px;
   margin:1px 0px 0px 0px;
   height:12px;
   font-family:Tahoma,Arial,verdana, sans-serif;
   }

   .spycomment{
   overflow:hidden;
   font-family:Tahoma,Arial,verdana, sans-serif;
   font-size:8px;
   color:#262B2F;
   padding:0px 0px;
   margin:0px 0px;
   }

   -->
   </style>
       <script language='javascript'>
   imgr = new Array();
   imgr[0] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

   imgr[1] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

   imgr[2] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

   imgr[3] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

   imgr[4] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";
   showRandomImg = true;
   boxwidth = 200;
   cellspacing = 6;
   borderColor = "#232c35";
   bgTD = "#000000";
   thumbwidth = 50;
   thumbheight = 50;
   fntsize = 9;
   acolor = "#666";
   aBold = true;
   icon = " ";
   text = "comments";
   showPostDate = true;
   summaryPost = 40;
   summaryFontsize = 10;
   summaryColor = "#666";
   icon2 = " ";
   numposts = 100;
   home_page = "http://pelajaran-blog.blogspot.com/";
   limitspy=4
   intervalspy=4000
   </script>

   <div id="spylist">
       <script src='https://sites.google.com/site/pujiantoroinc/Home/recent_post_berkedip.js' type='text/javascript'></script>
   </div></center>

Lalu Simpan dan sobat dah bisa lihat hasilnya :D

Membuat Related Post Widget Blogger (Update)

UPdate! Trik Membuat Related Post Widget Untuk Blogger (Keren Abis!),Sudah Direvisi! Dijamin Berhasil 100%

Widget Related Post / Artikel Terkait / Posting Yang Berhubungan

Sebenarnya sudah pernah saya posting sebelumnya,bagaimana membuat related post pada blogger di Cara Membuat Artikel Yang Berhubungan / Related Post / Artikel Terkait.
Namun widget related post yang satu ini sangatlah unik,menarik sekaligus dapat membantu pengunjung melihat posting yang berkaitan.

Jika related post widget untuk blogger yang satu ini masih valid,contohnya bisa sobat lihat di SINI.
Tapi sebelumnya memang sobat diharuskan membuat label terlebih dahulu,caranya sobat bisa baca di SINI.

Setelah label telah diciptakan,dan pastikan rss sobat valid(available rss),seperti rss pelajaran blog,bisa sobat klik icon rss disebelah kanan browser,tampilannya rss nanti seperti klik disini.

Ada 2 pilihan widget related post keren abis yang bisa sobat gunakan,dan dua-duanya pantas untuk sobat coba.

1.Related Post Widget for Blogger dengan Javascript

Contoh gambarnya sobat bisa lihat dibawah ini:

Related Post Widget Untuk Blogger (Keren Abis!)

Lihat Gambar Besar

Dan hasilnya kurang lebih akan seperti di sini

Nah,untuk caranya bisa sobat ikuti langkah berikut ini:

Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini.

Gb.1
Selanjutnya pilih tab Edit Html (Gb.2).

Gb.2
Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates' (Gb.3).

Gb.3

Nah,setelah itu cari kode </head> (Gunakan Ctrl+F),setelah ketemu,persis diatasnya letakkan kode javascript ini di atas kode </head> tersebut:

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUkVwSJh395bPssdBLIo4Z22EKCEYzorqgmUR0iHKGmLvgp9NMjQaZSUAdgp5_bhShliw-09eXMvV0wAD2OvYHGnfo7PdeAudZbQfsrrReyHZVHDVOnOwozVQ0ONf3NS8s8F4Xtw1sh-E/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://sites.google.com/site/pujiantoroinc/Home/related_post_pelajaran_blog.js' type='text/javascript'/>

Setelah itu,cari lagi kode berikut <data:post.body/>,setelah ketemu,tepat dibawahnya letakkan kode berikut:

<br/><br/><b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Setelah itu simpan,selesai.

2.Related Post Widget for Blogger dengan Jasa Blogger Widget (LinkWithin)

Tampilan related post blogger dengan jasa www.linkwithin.com akan seperti ini:

Ingin memilih cara yang no 2 ini? tinggal sobat kunjungi saja situsnya di sini

Bagaimana? siap menghias blog dengan tampilan widget related post terbaru?

Jumat, 06 April 2012

Cara Membuat Popup jQuery (Update)

UPdate! Trik Membuat Membuat Anchor Popup dengan jQuery (Popup Keren dengan Klik),Sudah Direvisi! Dijamin Berhasil 100%

Trik Cara Membuat Popup dengan jQuery

Membuat popup adalah salah satu dalam kiat kita menghias blog,ini akan memiliki peran sebagai penghemat tempat namun blog tetap dalam keadaan full performance.

Langsung gan,untuk melihat contohnya (ini mungkin akan bekerja pada browser di kompi ya seperti mozilla dan selainnya,alias kurang bekerja baik pada handphone ataupun IE:() sobat bisa lihat gambar dibawah ini:

Atau sobat bisa lihat situsnya di sini.(jika situs masih tersedia ya :D)

Gimana sob,tertarik?

Gini nih cara bikinnya,Pertama langkahnya seperti biasanya ya hanya pilih Dashboard (gb.1),lalu Tata Letak (gb.2) kemudian contreng tulisan Expands Widget Templates (gb.3).

(1)

(2)

(3)

Letakkan kode berikut tepat diatas kode </head>

<!-- Kode Menampilkan berita muslim sahih  -->
<script type="text/javascript" src="http://layanan.oposisi.net/tampilan/highslide-with-html.js"></script>
<link rel="stylesheet" type="text/css" href="http://layanan.oposisi.net/tampilan/highslide.css" />
<script type="text/javascript">
hs.graphicsDir = 'http://layanan.oposisi.net/tampilan/bingkai/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header';
</script>
<!-- Kode Menampilkan berita muslim sahih  Sampai di sini -->

Lalu simpan templates.
Selanjutnya,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)

Cara Membuat Javascript Anchor Link dan Jenis-Jenisnya.

Cara Membuat Javascript Anchor Link dan Jenis-Jenisnya.

(4)

(5)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:

<a href="http://1.bp.blogspot.com/-8mQnRA_9rpw/TYh3n0lPDDI/AAAAAAAAAxs/gi5Vv6PqqpA/s1600/berita%2Bmuslim%2Bsahih.jpg" class="highslide"
onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: 270, height: 300,} )">Lihat Gambar Al-Qur'an</a>

Lalu Simpan.Selesai deh :D

Ket:

Kode yang berwarna merah sesuaikan dengan keinginan sobat ya :D
http://1.bp.blogspot.com/-8mQnRA_9rpw/TYh3n0lPDDI/AAAAAAAAAxs/gi5Vv6PqqpA/s1600/berita%2Bmuslim%2Bsahih.jpg rubahlah dengan url gambar sobat atau bisa juga alamat situs seperti http://www.google.co.id/,http://www.youtube.com/,dll.