Blog Budak Bungo

cara membuat menu Infinite Carousel di blog

Cara memasang

1. Masuk ke Dasbor Blog >> Tata Letak >> Tambahkan Gadget >> Pilih HTML/Javascript

2. Masukkan kode di bawah ini kedua nya.

.infiniteCarousel {
  width: 395px;
  position: relative;
}

.infiniteCarousel .wrapper {
  width: 315px; /* .infiniteCarousel width - (.wrapper margin-left + 
.wrapper margin-right) */
  overflow: auto;
  min-height: 10em;
  margin: 0 40px;
  position: absolute;
  top: 0;
}

.infiniteCarousel ul a img {
  border: 5px solid #000;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.infiniteCarousel .wrapper ul {
  width: 9999px;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  padding:0;
  position: absolute;
  top: 0;
}

.infiniteCarousel ul li {
  display:block;
  float:left;
  padding: 10px;
  height: 85px;
  width: 85px;
}

.infiniteCarousel ul li a img {
  display:block;
}

.infiniteCarousel .arrow {
  display: block;
  height: 36px;
  width: 37px;
  background: 
url(https://sites.google.com/site/anchamanproject/Left-Arrow.png) 
no-repeat 0 0;
  text-indent: -999px;
  position: absolute;
  top: 37px;
  cursor: pointer;
}

.infiniteCarousel .forward {
  background-position: 0 0;
  right: 0;
}

.infiniteCarousel .back {
  background-position: 0 -72px;
  left: 0;
}

.infiniteCarousel .forward:hover {
  background-position: 0 -36px;
}

.infiniteCarousel .back:hover {
  background-position: 0 -108px;
}

-->
</style>

$.fn.infiniteCarousel = function () {

function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
  
    return this.each(function () {
        var $wrapper = $('> div', this).css('overflow', 'hidden'),
            $slider = $wrapper.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),
            
            singleWidth = $single.outerWidth(), 
            visible = Math.ceil($wrapper.innerWidth() / singleWidth), //
 note: doesn't include padding or border
            currentPage = 1,
            pages = Math.ceil($items.length / visible);

// 1. Pad so that 'visible' number will always be seen, 
otherwise create empty items
        if (($items.length % visible) != 0) {
            $slider.append(repeat('
<li class="empty" />', visible -
 ($items.length % visible)));
            $items = $slider.find('> li');
        }

// 2. Top and tail the list with 'visible' number of items, top 
has the last section, and tail has the first
        $items.filter(':first').before($items.slice(- 
visible).clone().addClass('cloned'));
        $items.filter(':last').after($items.slice(0, 
visible).clone().addClass('cloned'));
        $items = $slider.find('> li'); // reselect
        
        // 3. Set the left position to the first 'real' item
        $wrapper.scrollLeft(singleWidth * visible);
        
        // 4. paging function
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
            
            $wrapper.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                if (page == 0) {
                    $wrapper.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    $wrapper.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                }

currentPage = page;
            });                
            
            return false;
        }
        
        $wrapper.after('<a class="arrow back"><</a><a 
class="arrow forward">></a>');
        
        // 5. Bind to the forward and back buttons
        $('a.back', this).click(function () {
            return gotoPage(currentPage - 1);                
        });
        
        $('a.forward', this).click(function () {
            return gotoPage(currentPage + 1);
        });
        
        // create a public interface to move to a specific page
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });  
};

$(document).ready(function () {
  $('.infiniteCarousel').infiniteCarousel();
});
</script>

Drop Down Messages di blog

>>> pada dasbor>>> Rancangan>>> Elemen Laman>>> Tambah Gadget>>> HTML/JavaScript

Contoh Demo

Kamu mau pasang widget seperti ini,Click Disini

Cara Membuat Gambar Di Pojok Kanan Atau Kiri Blog

biasanya saya sering menemukan blog yang memasang gambar bergerak penuh animasi yang keren-keren, nah! disini tidak perlu EDIT HTML, tetapi tips sederhana melalui widget saja,

1. Siapkan gambar dulu, bisa di upload di “photobucket, blogger uploader, dll”,kalo belom mengetahuinya silahkan baca dulu artikel Cara Mendaftar Meng-upload Gambar di Photobucket jika anda sudah mempunyai gambar yang ditentukan harap menunggu untuk step selanjutnya

2. Login ke Blogger, lalu Tata Letak(Layout), lalu Add Gadget (Tambah Gadget), pilih tanda HTML/Javascript

3. Masukan kode di bawah ke dalamnya seperti dibawah ini

<a href='URL LINK' style='display:scroll;position:fixed;Bottom:0px;right:0px;' title='Keterangan Gambar'><img src='URL Gambar'/></a>

Jika anda ingin memasangnya di pojok atas kodenya akan menjadi seperti ini:

<a href='URL LINK' style='display:scroll;position:fixed;top:0px;right:0px;' title='Keterangan Gambar'><img src='URL Gambar'/></a>

Cara Mengganti Background Postingan Dengan Gambar

Background post dari sebuah blog tidak hanya berupa warna yang kadang membosankan. Sebagai alternatif lain, anda dapat mengganti background post dengan image yang tentu harus disesuaikan dengan warna huruf pada postingan agar kehadiran image sebagai background tidak mengganggu tampilan huruf.

LANGKAH-LANGKAHNYA

PERTAMA

Siapkan sebuah gambar yang ukurannya telah disesuaikan dengan lebar postingan blog anda serta memiliki tinggi minimal 800 px lebar 1700px. Gunakan Adobe Photoshop atau aplikasi lainnya untuk me-resize image.
Upload image tersebut ke hosting penyimpanan image seperti Photobucket, Imageshack, Web Picasa atau hosting yang selama ini anda gunakan.
Copy Url/alamat gambar yang anda upload tadi. Simpan dulu pada note pad.

KEDUA

Masuk ke Blogger
Klik Tab Rancangan bagian Edit HTML
Cari kode seperti dibawah ini pada template blog anda

.post { margin:.5em 0 1.5em; border-bottom:1px dotted $bordercolor; padding-bottom:1.5em; }

Tambahkan kode untuk background seperti ini :

background: url(http://img268.imageshack.us/img268/6805/bodybgiq.jpg?imgmax=100%) repeat-x fixed top center;

Gabungkan kedua kode diatas sehingga menjadi seperti ini :

.post { background: url(http://img268.imageshack.us/img268/6805/bodybgiq.jpg?imgmax=100%) repeat-x fixed top center; margin:.5em 0 1.5em; border-bottom:1px dotted $bordercolor; padding-bottom:1.5em; }

Kode yang berwarna kuning http://img268.imageshack.us/img268/6805/bodybgiq.jpg merupakan Url/alamat image yang akan tampil sebagai background postingan. Ganti alamat gambar tersebut dengan alamat gambar yang anda upload tadi (yang disimpan pada note pad)
Klik tombol Simpan
Lihat background postingan anda sekarang.

Selamat mencoba, semoga bermanfaat...

Membuat Bubble tooltip di dalam posting

tooltip menggunakan css memungkinkan lebih cepatnya loading tanpa script pemanggil, yg biasanya tulisan pada tooltip akan muncul ketika loading pemanggil script selesai,Jika tertarik buat mencobanya silahkan mengikuti langkah berikut ini

O iya yg belum mengerti apa sih tooltip itu?
Tooltip adalah tulisan yang muncul ketika kursor berhenti diatas ling yg diberi tooltip atau semacam petunjuk dan penjelasan ya begitu lah kira2 contohnya anda letakan kursor di atas link di bawah ini..

tahan kursor disini

Dengan ditambahkan backgroud bubble lebih terlihat cantik, Untuk membuatnya Copy css dibawah ini

/*---------- bubble tooltip oce-modifblog.blogspot.com-----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(http://4.bp.blogspot.com/_camK6MacbVQ/SmNbRIxiTxI/AAAAAAAAAOc/zjNMwrdyd80/s320/bubble-712378.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(http://1.bp.blogspot.com/_camK6MacbVQ/SmNbQ-VEh2I/AAAAAAAAAOU/qiVSMin-U6k/s320/bubble_filler-711451.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(http://4.bp.blogspot.com/_camK6MacbVQ/SmNbRIxiTxI/AAAAAAAAAOc/zjNMwrdyd80/s320/bubble-712378.gif) no-repeat bottom;
}

Nah setelah di copy selanjutnya login blogger> tataletak> edit html> cari tag ]]></b:skin> paste code css yg udah di copy tadi di atasnya dan save Template. Untuk format penulisan link pada posting yg di beri tooltip seperti ini

<a href="#" class="tt">nama link disini<span class="tooltip"><span class="top"></span><span class="middle">keterangan atau tulisan pada tooltip disini</span><span class="bottom"></span></span></a>

Blog Budak Bungo

Iklan

BLOG BUDAK BUNGO

Pages

Connect With Us

Instructions

Recomended

Labels

Las series más vistas

Categories

About Me

Followers

Our Partners

Archive

cara membuat menu Infinite Carousel di blog

Drop Down Messages di blog

Cara Membuat Gambar Di Pojok Kanan Atau Kiri Blog

Cara Mengganti Background Postingan Dengan Gambar

Membuat Bubble tooltip di dalam posting

DAFTAR ISI

Entri Populer

Label

LIKE FB YA...........????

BUKU TAMU

TERJEMAHAN

Total Tayangan