• Masuk ke akun blogger anda -> KlikTemplate -> Edit HTML
  • Cari tag / kode </head> dengan menggunakan CTR + F untuk memudahkan pencarian tag.
  • Pastekan Script kode berikut tepat diatas kode </head>
  • Simpan Template
  • Kemudian masuk -> Tata Letak
  • Klik Tambahkan Gadget -> Pilih HTML/Javascript
  • Pastekan kode dibawah ini didalamnya:
<style>
.kwicks {
     list-style: none;
     position: relative;
     margin: 0;
     padding: 0;
     background-image:url(http://3.bp.blogspot.com/--T9MLRmIQyA/USt4BuAmKUI/AAAAAAAAHBI/dP1cVTBDq8k/s1600/btrix_no_flicker.jpg); /*some browsers are to slow when aligning the menu items via jQuery and so the background shines through, this prevents this flickering*/}
 .kwicks li{
    display: block;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
 float: left;
 width: 125px;
 height: 40px;
 margin-right: 0px;
 background-image:url(http://4.bp.blogspot.com/-C7LE3AfhL-M/USt4BrUwefI/AAAAAAAAHBM/MhHSMjy4mA0/s1600/btrix_kwicks_sprite.jpg);
 background-repeat:no-repeat;}
.kwicks a{
 display:block;
 height:40px;
 text-indent:-9999px;
 outline:none;}
#kwick1 {
 background-position:0px 0px;}
#kwick2 {
 background-position:-200px 0px;}
#kwick3 {
 background-position:-400px 0px;}
#kwick4 {
 background-position:-600px 0px;}
#kwick1.active, #kwick1:hover {
 background-position: 0 bottom;}
#kwick2.active, #kwick2:hover{
 background-position: -200px bottom;}
#kwick3.active, #kwick3:hover {
 background-position: -400px bottom;}
#kwick4.active, #kwick4:hover {
 background-position: -600px bottom; }
#kwick1 a{
 background-image:url(http://2.bp.blogspot.com/-wvgBGxYk__c/USt4A9O96EI/AAAAAAAAHBA/_Ckyg3Jup6c/s1600/btrix_end.jpg);
 background-repeat:no-repeat;
 background-position: left 0px;}
#kwick1 a:hover{
 background-position: left -80px;}
#kwick4 a{
 background-image:url(http://2.bp.blogspot.com/-wvgBGxYk__c/USt4A9O96EI/AAAAAAAAHBA/_Ckyg3Jup6c/s1600/btrix_end.jpg);
 background-repeat:no-repeat;
 background-position: right -40px;}
#kwick4 a:hover{
 background-position: right -120px;
}
</style>
<ul class="kwicks">
     <li id="kwick1"><a href="#">Home</a></li>
     <li id="kwick2"><a href="#">Contact</a></li>
     <li id="kwick3"><a href="#">Downloads</a></li>
     <li id="kwick4"><a href="#">Search</a></li>
 </ul>  

  • Ganti tanda # dengan link anda
  • Simpan Gadget....Selesai.

Semoga bermanfa'at...

Cara membuat galeri gambar atraktif dengan JQuery di blog




  • Tambahkan kode berikut didalam HTML/Javascript pada menu Tata Letak di blog  
  • Klik Tata letak -> Tambahkan gadget (masukan kode) -> Simpan gadget.
 <style type="text/css">
.container1 {
 width: 660px;padding: 0;margin: 0 auto;
}
.folio_block {
 position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}
.main_view {float: left;position: relative;}
/*--Window/Masking Styles--*/
.window {-moz-box-shadow: 0px 0px 5px #303030;
-webkit-box-shadow: 0px 0px 5px #303030;
box-shadow: 0px 0px 5px #303030;border:1px solid #000000;height:240px; width: 660px;
margin-top:15px;overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
 position: absolute;top: 0; left: 0;
}
.image_reel img {float: left;}
.paging_btrix {
 position: absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100; /*--Assures the paging stays on the top layer--*/text-align: center;
 line-height: 40px;
 background: url(http://1.bp.blogspot.com/-UQAJVYvatlY/UTbGMUctYcI/AAAAAAAAHIE/PSM-s1tbAd8/s1600/paging_btrix_bg2.png) no-repeat;
 display: none;
}
.paging_btrix a {
 padding: 5px;text-decoration: none;color: #fff;
}
.paging_btrix a.active {
 font-weight: bold; background: #920000; border: 1px solid #610000;
 -moz-border-radius: 3px;
 -khtml-border-radius: 3px;
 -webkit-border-radius: 3px;
}
.paging_btrix a:hover {font-weight: bold;}
</style>
<!-- bof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka -->
<div class="container1">
<div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="https://www.blogger.com/blogger.g?blogID=5349897931690169537#"><img alt="" src="http://i1087.photobucket.com/albums/j479/jalupangna/Yogi-Bear-Movie.jpg" /></a>
            <a href="https://www.blogger.com/blogger.g?blogID=5349897931690169537#"><img alt="" src="http://i1087.photobucket.com/albums/j479/jalupangna/toy-story-3-1.jpg" /></a>
            <a href="https://www.blogger.com/blogger.g?blogID=5349897931690169537#"><img alt="" src="http://i1087.photobucket.com/albums/j479/jalupangna/toy-story-3.jpg" /></a>
            <a href="https://www.blogger.com/blogger.g?blogID=5349897931690169537#"><img alt="" src="http://i1087.photobucket.com/albums/j479/jalupangna/pixars-up.jpg" /></a>
        </div>
    </div>
    <div class="paging_btrix">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 //Set Default State of each portfolio piece
 $(".paging_btrix").show();
 $(".paging_btrix a:first").addClass("active");
 //Get size of images, how many there are, then determin the size of the image reel.
 var imageWidth = $(".window").width();
 var imageSum = $(".image_reel img").size();
 var imageReelWidth = imageWidth * imageSum;
 //Adjust the image reel to its new size
 $(".image_reel").css({'width' : imageReelWidth});
 //paging_btrix + Slider Function
 rotate = function(){
  var triggerID = $active.attr("rel") - 1; //Get number of times to slide
  var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
  $(".paging_btrix a").removeClass('active'); //Remove all active class
  $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
  //Slider Animation
  $(".image_reel").animate({
   left: -image_reelPosition
  }, 500 );
 };
 //Rotation + Timing Event
 rotateSwitch = function(){
  play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
   $active = $('.paging_btrix a.active').next();
   if ( $active.length === 0) { //If paging_btrix reaches the end...
    $active = $('.paging_btrix a:first'); //go back to first
   }
   rotate(); //Trigger the paging_btrix and slider function
  }, 5000); //Timer speed in milliseconds (3 seconds)
 };
 rotateSwitch(); //Run function on launch
 //On Hover
 $(".image_reel a").hover(function() {
  clearInterval(play); //Stop the rotation
 }, function() {
  rotateSwitch(); //Resume rotation
 });
 //On Click
 $(".paging_btrix a").click(function() {
  $active = $(this); //Activate the clicked paging_btrix
  //Reset Timer
  clearInterval(play); //Stop the rotation
  rotate(); //Trigger rotation immediately
  rotateSwitch(); // Resume rotation
  return false; //Prevent browser jump to link anchor
 });
});
</script>
  • Kalau mau mengganti link gambar, Lihat pada script diatas yang berwarna Merah. Ganti link gambar sesuai keinginan anda
Happy Blogging...

Cara membuat menu drop down terpecah di blog


photo dropdownmenu2_zps7d540613.png

 Dengan menggunakan kombinasi selektor dari CSS2, pseudo classes, CSS3 transisi, ditambah Java Script, akhirnya kita capai tombol menu yang terpecah/terpisah berbasis CSS. Konten yang dihasilkan pada tombol menu di sebelah kanan sangat dinamis menggunakan CSS2. Sedangkan Java Script disini hanya digunakan untuk mengaktifkan kotak centang / tombol arah bawah, secara menyeluruh dan dinamis. 

KODE CSS DAN CARA MENAMBAHKAN MENUNYA DI BLOG
  • Silahkan anda lihat kode CSS Disini
  • Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
  • Kemudian pilih -> Template -> Edit HTML
  • Cari tag/kode ]]></b:skin> tekan CTRL + F  untuk memudahkan pencarian
  • Berikutnya pastekan kode CSS tepat diatas tag  ]]></b:skin>  
  • Simpan template...
  • Masuk lagi ke Blogger -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript  
  • Pastekan kode berikut di bawah ini didalamnya:  
<div class="css3splitmenu">
<a href="#">Blogging</a> <input type="checkbox" />

<ul id="t">
<li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">Tips dan trik blog</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/blog%20tutorial">Blog tutorial</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">JQuery java script</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/widget">Gadget</a></li>
</ul>
</div>

<div class="css3splitmenu">
<a href="#">Dunia spiritual</a> <input type="checkbox" />

<ul>
<li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual" >Wawasan spiritual</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">Suluk</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/sejarah">Sejarah</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/babad">Babad</a></li>
</ul>
</div>

<div class="css3splitmenu nocss3splitmenu">
<a href="http://jalu-pangna.blogspot.com/search/label/jejaring%20sosial">Jejaring sosial</a>
</div>


<!-- Script below should follow all split menus -->

<script type="text/javascript">

( function(){ // local scope

    if (!document.querySelectorAll || !document.addEventListener)
        return
    var uls = document.querySelectorAll('div.css3splitmenu > ul'),
            docbody = document.documentElement || document.body,
            checkboxes = document.querySelectorAll('div.css3splitmenu > input[type="checkbox"]'),
            zindexvalue = 100

    for (var i=0; i<uls.length; i++){
        ( function(x){ // closure to capture each i value
            checkboxes[i].addEventListener('click', function(e){
                uls[x].style.zIndex = ++zindexvalue
                for (var y=0; y<uls.length; y++){ // loop through checkboxes other than current and uncheck them (since Chrome doesn't respond to onblur event on checkboxes)
                    if (y != x)
                        checkboxes[y].checked = false
                }
                e.cancelBubble = true
            })
            checkboxes[i].addEventListener('blur', function(e){
                setTimeout(function(){checkboxes[x].checked = false}, 100) // delay before menu closes, for Opera's sake (otherwise links are un-navigatable)
                e.cancelBubble = true
            })
        }) (i)
    }

    docbody.addEventListener('click', function(e){
        for (var i=0; i<uls.length; i++){
            checkboxes[i].checked = false
        }
    })

})();

</script>
  • Silahkan Ganti link warna kuning dengan URL/Link anda
  • Ganti judul Menu sesuai dengan yang anda inginkan
  • Ganti judul Sub Menu sesuai Sub Menu yang di inginkan
  • Simpan Gadget dan lihat hasilnya...
CATATAN: Untuk menambahkan tombol menu dan sub menu, tambahkan tag DIV dengan tag class="css3splitmenu dan menambahkan 3 element berikut:

<div class="css3splitmenu">
<a href="Link anda">Judul Menu</a> <input type="checkbox" />

<ul>
<li><a href="Link anda">Sub Menu</a></li>
<li><a href="Link anda">Sub Menu</a></li>
<li><a href="Link anda">Sub Menu</a></li>
<li><a href="Link anda">Sub Menu</a></li>
</ul>
</div>  
Mohon maaf kalau ada kekurangan dan kesalahan... Semoga bermanfa'at and Keep blogging..!

Cara membuat galeri photo menggunakan animasi CSS3 accordion




Pernahkah anda menggunakan plugin akordion dalam proyek anda? saya percaya bahwa anda semua pernah, dan sebagian besar anda bekerja membangun proyek menggunakan javascript  (atau jQuery). Kita Biasanya menggunakan plugin tersebut (akordion) untuk membuat promo dengan gambar, dengan sedikit galeri foto, atau dalam hal lain kita harus membuat sebuah iklan dengan daftar berbagai fitur produk. Kita bisa menggunakan kehebatan dan kelebihan dari CSS3.

<div class="accordion css3accordion">
            <span id="slide1"></span>
            <span id="slide2"></span>
            <span id="slide3"></span>
            <span id="slide4"></span>
            <span id="slide5"></span>
            <ol>
                <li class="slide1">
                    <a href="#slide1"><h2><span>Toy story</span></h2></a>
                    <div>
                        <img src="http://i1087.photobucket.com/albums/j479/jalupangna/toy-story-3.jpg" />
                    </div>
                </li>
                <li class="slide2">
                    <a href="#slide2"><h2><span>Pixar</span></h2></a>
                    <div>
                        <img src="http://i1087.photobucket.com/albums/j479/jalupangna/pixars-up.jpg" alt="Slide Two" />
                    </div>
                </li>
                <li class="slide3">
                    <a href="#slide3"><h2><span>Toy story 3</span></h2></a>
                    <div>
                        <img src="http://i1087.photobucket.com/albums/j479/jalupangna/toy-story-3-1.jpg" alt="Slide Three" />
                    </div>
                </li>
                <li class="slide4">
                    <a href="#slide4"><h2><span>Yogi Bear Movie</span></h2></a>
                    <div>
                        <img src="http://i1087.photobucket.com/albums/j479/jalupangna/Yogi-Bear-Movie.jpg" alt="Slide Four" />
                    </div>
                </li>
                <li class="slide5">
                    <a href="#slide5"><h2><span>The hobbit</span></h2></a>
                    <div>
                        <img src="http://i1087.photobucket.com/albums/j479/jalupangna/the-hobbit-2012.jpg" alt="Slide Five" />
                    </div>
                </li>
            </ol>
        </div>

  • Masuk ke akun blogger anda -> Klik Drop down menu
  • Kemudian klik Tata Letak -> Tambahkan gadget/HTML Javascript
  • Pastekan kode diatas didalamnya
  • Simpan gadget..
Silahkan ganti URL/link gambar pada warna pink diatas dengan URL/Link gambar anda.   Ganti judul slidenya sesuai dengan keinginan anda

KODE CSS 



  • Masuk ke akun blogger anda -> Klik Drop down menu
  • Kemudian klik Template -> Backup template terlebih dahulu -> Edit HTML
  • Cari tag / kode ]]></b:skin> kemudian pastekan kode CSS diatas tepat diatas kode ]]></b:skin> 
  • Simpan template...

 Happy Blogging..!

Cara membuat menu bolak balik dengan efek 3D di blog





Pada tutorial kali ini saya akan share ke anda tentang cara membuat menu Bolak balik dengan efek 3D. Menu ini murni berbasis CSS dengan konsep menggunakan efek 3D (tiga dimensi) yang bisa bolak balik. Menu ini akan bolak balik apabila krusor kita arahkan ke menu tersebut. Menu ini di buat oleh David Walsh. David adalah salah satu pengembang web favorit penulis.




Cara menambahkan Menu ini di blog  
  • Masuk ke akun blogger anda
  • Kemudian cari Kode / tag ]]></b:skin> ( CTRL + F untuk memudahkan pencarian)
  • Pastekan kode CSS berikut dibawah ini tepat di atas kode ]]></b:skin> 
Kode CSS 


Kode HTML
  • Masuk ke Blogger -> Tata Letak -> Klik tambahkan Gadget -> HTML/Javascript
  • Masukan kode HTML berikut didalamnya

  • Simpan Gadget, selesai...
Catatan:
Ganti seluruh tanda # dengan link-link anda, kemudian anda juga bisa menambahkan opsi menu berikutnya dengan menambahkan kode berikut dibawah ini tepat diatas tag / kode </ul>.

<span class="three-d-box"><span class="front">Title</span><span class="back">Title</span></span>


Salam ARDY MENTWOZT Happy Blogging..!

Menambah Fitur jQuery Animasi Slider Pada Blog

jQuery Animasi Slider Blog
Menambah Fitur jQuery Animasi Slider Pada Blog – untuk pengguna template blogger jika ingin memodifikasi dengan memasang slider pada blognya dan ingin langkah yang simple tanpa perlu melakukan editing template blog pada edit HTML bisa menggunakan langkah ini hanya dengan menambah widget HTML dan ini tentu sangat mudah karena untuk anda yang juga masih tahap belajar sama seperti saya juga pasti bisa melakukannya dengan waktu yang cepat dan mudah dalam menerapkan. Apabila suka menggunakan slider sama seperti saya untuk melengkapi desain blog mungkin ini bisa menjadi sedikit tambahan koleksi slider dan dapat langsung diterapkan pada elemen tata letak blog karena mungkin untuk sebagian blogger yang masih pemula sama seperti saya langkah ini bisa sebagai alternatif. Untuk lengkah lebih jelasnya dalam menerapkan animasi slider kedalam blog maka berikut adalah tutorial untuk cara Menambah Fitur jQuery Animasi Slider Pada Blog.

1. Login ke akun blogger.
2. Copy kode dibawah ini.
<style>
.wrapper-translider3d {
position:relative;
width:900px;
height:300px;
display:block;
}
.s-shadow-b{
background:#000;
width:900px;
height:15px;
position:absolute;
bottom:-15px;
}
#slider {
width:900px;
height:300px;
position:relative;
display:block;
}
.slide { display:none; }
.cs-activeSlide { display:block; }
.slide-descriptions { display:none; }
.caption {
background: url("https://lh3.googleusercontent.com/-cg8uKIjzGoE/Ud65ZM68T3I/AAAAAAAAFwU/thnZH2_dAOo/h120/d-bg.png") repeat scroll 0 0 transparent;
color: #FFFFFF;
display: none;
height: 260px;
padding: 20px;
position: absolute;
right: 40px;
top: 0px;
width: 180px;
z-index: 3;
}
.pagination {
bottom: -17px;
left: 345px;
position: absolute;
text-align: center;
}
.slider-pagination {
display:inline-block;
width:15px;
height:10px;
background:url(https://lh6.googleusercontent.com/-ea8FP6AH0ak/Ud65ZXw2q2I/AAAAAAAAFwY/lMg72r4aWVA/h120/navi.png) no-repeat left bottom;
margin:0 10px;
cursor:pointer;
position:relative;
}
.cs-active-pagination {
background:url(https://lh6.googleusercontent.com/-ea8FP6AH0ak/Ud65ZXw2q2I/AAAAAAAAFwY/lMg72r4aWVA/h120/navi.png) no-repeat left top;
}
.slider-2 {
padding-top:0;
}
#slider-1, #slider-2 {
width:900px;
height:300px;
position:relative;
display:block;
}
.cs-activeSlide-2 {
display:block
}
.cs-active-pagination-2 {
background:url(https://lh6.googleusercontent.com/-ea8FP6AH0ak/Ud65ZXw2q2I/AAAAAAAAFwY/lMg72r4aWVA/h120/navi.png) no-repeat left top;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/translider-2.2.0.min.js"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/translider-1.2.min.js"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/main.js"></script>

 <div class="wrapper-translider3d">
<div class="s-shadow-b"></div>
<div id="slider">
<div class="slide cs-activeSlide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh6.googleusercontent.com/-M23THLSuRrg/Ud8NlxAGQKI/AAAAAAAAAG0/UfMwDGOztzA/w900-h300-no/Faceblog-Evolutions-%25286%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh5.googleusercontent.com/-A2MtNufIpzo/Ud8NlPWcIcI/AAAAAAAAAGs/6kCO6qtAQGE/w900-h300-no/Faceblog-Evolutions-%25287%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh4.googleusercontent.com/-GVrMsIqi49U/Ud8Ni7kkDhI/AAAAAAAAAGk/H-4_2P_yhFw/w900-h300-no/Faceblog-Evolutions-%25285%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh6.googleusercontent.com/-0j4RiOQg_-o/Ud8NijnfO7I/AAAAAAAAAGc/H2cURxr8M4I/w900-h300-no/Faceblog-Evolutions-%25284%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh3.googleusercontent.com/-TERWahCegXo/Ud8NfWn7i5I/AAAAAAAAAGU/zeVqoJ9L-CE/w900-h300-no/Faceblog-Evolutions-%25281%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh6.googleusercontent.com/-MN6CXDO4EQs/Ud8NeqKpyRI/AAAAAAAAAGM/4G8mkR76g04/w900-h300-no/Faceblog-Evolutions-%25282%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh6.googleusercontent.com/-w2Zb4838Rqw/Ud8NeaDWPnI/AAAAAAAAAGI/ZEguMAppgm4/w900-h300-no/Faceblog-Evolutions-%25283%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
</div>
<div class="pagination">
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
</div>
<div class="slide-descriptions">
<div class="sl-descr"> ISI DENGAN DESKRIPSI GAMBAR </div>
<div class="sl-descr"> ISI DENGAN DESKRIPSI GAMBAR </div>
<div class="sl-descr"> ISI DENGAN DESKRIPSI GAMBAR </div>
<div class="sl-descr"> ISI DENGAN DESKRIPSI GAMBAR </div>
<div class="sl-descr"> ISI DENGAN DESKRIPSI GAMBAR </div>
<div class="sl-descr"> ISI DENGAN DESKRIPSI GAMBAR </div>
<div class="sl-descr"> ISI DENGAN DESKRIPSI GAMBAR </div>
</div>
<div class="caption"></div>
</div>
Keterangan:
Untuk width dan height maupun URL gambar serta descriptions silahkan anda sesuikan selera, ubah angka 900 dan samakan dengan lebar blog anda.
Untuk merubah link halaman dan URL gambar silahkan ubah pada bagian dibawah ini:
<div id="slider">
<div class="slide cs-activeSlide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh6.googleusercontent.com/-M23THLSuRrg/Ud8NlxAGQKI/AAAAAAAAAG0/UfMwDGOztzA/w900-h300-no/Faceblog-Evolutions-%25286%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh5.googleusercontent.com/-A2MtNufIpzo/Ud8NlPWcIcI/AAAAAAAAAGs/6kCO6qtAQGE/w900-h300-no/Faceblog-Evolutions-%25287%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh4.googleusercontent.com/-GVrMsIqi49U/Ud8Ni7kkDhI/AAAAAAAAAGk/H-4_2P_yhFw/w900-h300-no/Faceblog-Evolutions-%25285%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh6.googleusercontent.com/-0j4RiOQg_-o/Ud8NijnfO7I/AAAAAAAAAGc/H2cURxr8M4I/w900-h300-no/Faceblog-Evolutions-%25284%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh3.googleusercontent.com/-TERWahCegXo/Ud8NfWn7i5I/AAAAAAAAAGU/zeVqoJ9L-CE/w900-h300-no/Faceblog-Evolutions-%25281%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh6.googleusercontent.com/-MN6CXDO4EQs/Ud8NeqKpyRI/AAAAAAAAAGM/4G8mkR76g04/w900-h300-no/Faceblog-Evolutions-%25282%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh6.googleusercontent.com/-w2Zb4838Rqw/Ud8NeaDWPnI/AAAAAAAAAGI/ZEguMAppgm4/w900-h300-no/Faceblog-Evolutions-%25283%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
</div>
3. Selanjutnya klik Tata Letak >> HTML/Javascript lalu paste kode tersebut kemudian Simpan dan lihat hasilnya. 

Salam ARDY MENTWOZT tunggu tips Selanjutnya :) :)
Langganan: Postingan (Atom)