expr:class='"loading" + data:blog.mobileClass'>

dotblogspot 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.
Vertical Sliding Panel mengggunakan jQuery .


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(http://2.bp.blogspot.com/_qHkYFLlP0Ms/SvJqelIzLFI/AAAAAAAAAKo/a6py-YJ9UOY/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(http://2.bp.blogspot.com/_qHkYFLlP0Ms/SvJqelIzLFI/AAAAAAAAAKo/a6py-YJ9UOY/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(http://4.bp.blogspot.com/_qHkYFLlP0Ms/SvJqhwz89bI/AAAAAAAAAKw/A9pygIXoy-g/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.).
Good luck!
»»  READMORE...

dotblogspot Membuat Link Blogroll Animasi Gulung (Update)

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:
Membuat jQuery Slick Tab.


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!,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.
»»  READMORE...

dotblogspot Membuat Back To Top Berefek (Smooth)

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

Membuat Back To Top Berefek (Smooth)
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:
Membuat Tombol Back To Top


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 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="http://3.bp.blogspot.com/-b1hw2cqey60/TfzE0oLSFkI/AAAAAAAAD3w/FpMh-mdf7rA/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>
»»  READMORE...

dotblogspot Parse Tool

Alat Pengubah Kode Agar Tampil di Postingan

Bismillah - berhubung waktu yang semakin malam (chie),langsung aja ya gan,kali ini hanya informasi kecil seputar parse kode html.
Sekali lagi untuk penjelasan lebih detil,sobat baca dulu ya di artikel saya sebelumnya:
klik di
http://dot-blogspot76.blogspot.com/2010/11/menampilkan-kode-html-parse-kode-html.html

Saya kira sudah sangat jelas ya sob,yuk kita cari tahu bagaimana sih contoh script parse html code ini.
Penjelasan singkatnya,kita mencoba menerapkan script dari http://www.donatofurlani.it/ideas,yang kurang lebih fungsi dari script ini seperti parse tool yang sudah banyak kita tahu di www.blogcrowds.com.

Caranya hanya letakkan kode berikut diposting blog sobat dan publikasikan.
<center><script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&up_grows=10&up_conv1=1&up_conv2=1&up_conv3=1&up_conv4=1&up_conv5=1&synd=open&w=315&h=200&title=Post-Code%3A+code+converter&border=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fimages%2F&output=js"> </script></center>

Sekarang lihat hasilnya ya,kurang lebih akan seperti ini gan:


Post-Code: code converter



Gadgets powered by Google



Script ini saya ambil dari http://www.donatofurlani.it/ideas
»»  READMORE...

dotblogspot 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-):

Membuat Efek Loading


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)


Efek Loading Blogger.
(2)


Cara Membuat Efek Loading Blogspot.
(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
»»  READMORE...
Related Posts Plugin for WordPress, Blogger...