About

Welcome to Dunia Agnes Clicks "Happy Shopping"
Grid Detail
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Image Bubble with JQuery pada blog








Sedikit perbedaan dari image bubble yang tidak memakai jquery,,, efek transisi dengan yang menggunakan jquery lebih halus efek transisinya.. bisa dibedakan dengan yang  yang tidak menggunakan jQuery hanya memakai CSS,Cara membuatnya :






      
       1. Login blogger
       2. Rancangan, Edit HTML, cari kode ]]></b:skin>
       3. Simpan kode berikut ini diatasnya :



/* Buble Image with jQuery
----------------------------------------------- */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline-block;
zoom:1; /*Trigger haslayout in IE7 and less*/
*display:inline; /*For IE7 and less*/
position:relative;
width: 65px;
height:60px;
}

.bubblewrap li img{
position:absolute;
width: 55px; /*default width of each image.*/
height: 60px; /*default height of each image.*/
left:0;
top:0;
border:0;
}

.bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/
position:absolute;
font:bold 12px Arial;
padding:2px;
width:100px;
text-align:center;
background:white;
}
/*CSS for 2 demos on the page*/
#orbs li{
width: 65px; /*width of image container. Should be wider than contained images (before bubbling) */
height:60px; /*height of image container. Should be taller than contained images (before bubbling) */
}

#orbs li img{
width: 55px; /*width of each image before bubbling*/
height: 60px; /*height of each image*/
}

#squares li{
width: 45px; /*width of image container. Must be wider than contained images (before bubbling) */
height:40px; /*height of image container. Must be taller than contained images (before bubbling) */
}

#squares li img{
width: 31px; /*width of each image before bubbling*/
height: 31px; /*height of each image*/
}

Selanjutnya simpan java script berikut diatas kode </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>


jika sudah, sekarang simpan kode berikut tepat diatas kode </body> :

<script src='http://kangdadang.googlecode.com/files/imgbubbles.js' type='text/javascript'>
</script>
<script type='text/javascript'>

jQuery(document).ready(function($){
    $(&#39;ul#orbs&#39;).imgbubbles({factor:1.75}) //add bubbles effect to UL id=&quot;orbs&quot;
    $(&#39;ul#squares&#39;).imgbubbles({factor:2.5}) //add bubbles effect to UL id=&quot;squares&quot;
})

</script>

Simpan template.....

Untuk pemanggilannya misalkan pada Rancangan, Tambah Gadget, Html/Java Script :

<h4>Contoh 1</h4>
<ul id="orbs" class="bubblewrap">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGJvn-jgS-8ctm_VDtbnD3keqScWSkqLqLJ_ijoBkmWygTYxeRgF8MhhBp1Xxye1Qd7CBHjwQ_CnCPgSIJpmx-tgEBlEJXJG3S3cfVerJerVjMbhEDUgoYRtn4DBjIDHxgItuLhdjDu5w/s1600/stumbleupon.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Pr2RYJCIkOoRYXQqVFjZMYGMTTabbtm1Ik-5i-qR7DiR6jk3o97GSspRuXcHc4vTZ9CJT0jJpoa6t6sxBabPSGtOBjk_gtgR3tdOR2zYn4cb5IZH-iies8V1x6lQUw3_hm_DXMIRq_s/s1600/facebook.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvT8hNyQ3GZist23yGlYYCjWymAEPlVCujnQ-6rf6ONOILLF2UW7UErQSmS-EFcrCjkue_AGqPnI0gD1E5mpkUn5HzUOHplRFBWGH7Go587XaIih22cyMGhU_D4q-lfF4oj7wUe8Ijw9I/s1600/digg.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRrttfsWyWGwkKu1zD2-3XuN6GcQ7S8ldwqxpSfGL8wJNR5ae9x6y1MDXFWMBnjeMmAElldKPYEJk3k_q7oUIOrAhnChbiMB4ysKLDo_fGuKBwQAtBdguavpJr5_yW1lO7oL39EYPHXpQ/s1600/twitter.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5p-etjCBY9uLMYdcqQGAAkD7S7pf82-zYYXBlZNh3IP23j_I0upHgQRlpkaJ-zwdlRdUO9pEtAl7UQPik2riHJa_VAZP1ZynV8dHATwnZDQSMtTkvCkgJ-6QIapfYMd7vGIIl_P2wFh8/s1600/rss.png" /></a></li>
</ul>

<h4>Contoh 2</h4>
<ul id="squares" class="bubblewrap">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqnhJsMj1I80I0BoJIRsHzrOj_EKbVXwst9MgUru5HV1vilrWIvWu6KxvXMMUMl-LmzdYDoOLQk3RbnMkcgbhz4ExKlYAKqS6f_GX_Qtr2dreFkOKyDOoU-waNhfJ4PIVEWOUO3vpxA4Q/s1600/facebook1.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdfG978ia-ZE9uHKXaZXVRm6ziKgyyxuCcOt8i692XppVMCauTmQYQVH7pZNynGcW6p_8SgjlUCWnb1IWIKyubBn3vYEJjgOR4XfudcUHw0zHPb_oghedKIvJD6aDhbA-bxdCXahurcQ/s1600/delicious.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3qi2IfnAapsmywHb1VtbtqgXPJWE_7kYdm0cfy4BXR0spjt6t07BCJgFj6G-U7tldpneMRN1WzSW3knBJFS-XH1AwcTkjEmcvwvY8jOA9A91v9vZlLHneoqQru1lZALRF4aOftyMFzok/s1600/digg1.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIK5ZJyygazpx2tit632bx2h-z9Z9u8D464_FGExp2UzhV61B6bZdJVlmSDR1L4jmtVYax3IEcbyEvTb2Uk3LWIwMWX99RZFH78FqrOHoqTeUhMXi6zx438jPevafD_XXskTyRJBLB7PI/s1600/stumbleupon1.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtEhcLD6ffhCMAXb3ZxsGDyx24GuksZWxg5gyTjAIC7H5c929fkQVEXnkSTnfN4DtLERdMk2VZ0fLxMhG9izVax3Yay2MZaiToeHzGDPzNm_1NCrJHTfNDSJMi76oKtXZCIrkNwejblgA/s1600/rss1.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAQ6CJ9lTaQxEC0H60TuY5uH9sBEbo4J-eRV6Fr9rJCLyzHHcMcL9_RFN7jdY8F7Tm8qmqGO1LySguPq7NRSpNJfthmhAz2eLY4WOwj9mz0LSlQYA0M_Qw_lFluFT8EeHSkVNxqMDh9SU/s1600/twitter1.png" /></a></li>
</ul>

Simpan.......

untuk penempatan image buble nya silahkan ganti sesuai kebutuhan baik itu pada header nav, gadget, ataupun pada postingan..

Selamat mencoba.....
Semoga Bermanfaat Buat Teman-teman.
Add to Cart More Info
Label:

Cara Membuat Related Post Dibawah Posting Blogspot

Membuat related post, baik yang ditaruh dibawah posting maupun yang berupa related post widget yang diletakkan pada sidebar ini bukan hanya merupakan pemanis belaka, tapi juga merupakan hal yang sangat bermanfaat. selain dapat meningkatkan page views, related post ini sangat membantu apabila ada beberapa posting lama kita yang belum terindeks oleh mesin pencari. Related Post adalah daftar link posting yang berhubungan. dihubungkan oleh kategori atau label yang sama.Pada tutorial blogspot kali ini, saya akan memberikan tutorial tentang bagaimana cara membuat related post dibawah posting pada blog berplatform blogspot.


Berikut ini adalah langkah2 untuk membuat link artikel yang berhubungan atau membuat related post dibawah posting :
1. Login ke account blogger anda,
2. Pada dashboard, pilih edit layout–> edit HTML
3. Centang Expand widget template
4. Cari kode seperti dibawah ini, lebih mudah bila anda menggunakan ctrl+F
<p><data:post.body/></p>
5. Lalu sisipkan kode2 berikut persis dibawah kode tadi
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Artikel Terkait:</H2>
<DIV class='rbbox'>
<DIV style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<DIV id='albri'/>
<SCRIPT type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</SCRIPT>
</DIV>
<script type="text/javascript">RelPost();</script>
</DIV>
</b:if>

6. Simpan perubahan

silahkan mencoba. Semoga bermanfaat buat teman-teman semua .
Add to Cart More Info
Label:

Cara memberi Sound efek | efek suara pada blog

Bagi anda yang belum mengerti cara menyimpannya ikuti langkah-langkah di bawah ini
  • Login dulu ke blogger
  • Klik Rancangan
  • Klik Tambah gadget
  • Kemudian pilih HTML/JavaScript
  • Kemudian copy paste kode di bawah ini kedalamnya 

    <embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" width="1" src="http://www.swfcabin.com/swf-files/1257488371.swf" height="1" type="application/x-shockwave-flash"></embed>

  • Setelah itu simpan
  • Selesai
Untuk tulisan yang berwarna merah anda bisa mengganti dengan suara lain. anda bisa ganti dengan kode dibawah ini

suara musik = http://www.swfcabin.com/swf-files/1252840473.swf
Suara hantu = http://www.swfcabin.com/swf-files/1254889895.swf 

Atau anda bisa cari sendiri di http://www.swfcabin.com/search.php. selamat mencoba, semoga artikel ini bermanfaat untuk kita semua dan salam sukses...
Add to Cart More Info
Label:
Langganan: Postingan (Atom)