membuat slide gambar di blog

membuat slide gambar di blog

  07:04:00    Seoke.com

---

              Oke sobat seoke.com yang selalu setia mengunjungi seoke.com,akali ini seoke.com akan berbagi tentang Cara membuat slide gambar untuk blog.
slide gamab ialah gambar yang bergerak otomatis di blog,dan seoke.com akan menerangkan  dalam metode ini cara penerapan atau esangan code code tersebut.
Dan seoke.com  akan membuat slide yang begitu sederhana namun elegant.ukuran dalam slide ini cukuplah kecil tidak mengganggu saat loading masuk pada blog kalian.dan di desain secara detail oleh para master koding tersebut.

foto by www.tele-satellite-global.com

slide ini bisa termasuk menggunakan Javascript yang merupakan salah satu terbaik untuk menampilkan banyak informasi halaman yang relatif cukup kecil dan membuat fungsi dan piture yang baik.

Kita langsung aja mulai ke cara peerapan kode tersebut

• Cari code sperti ini ]]></b:skin> dan letakan kode di bawah ini tepat di atas kode ]]></b:skin>



.easyslider-wrapper { width: auto; float: left; position: relative; padding-right: 2%; padding-top: 10px; } .easyslider { overflow: hidden; position: relative; width: 100%; height: 350px; background: #eee; } .image_reel { position: absolute; top: 0; left: 0; } .image_reel img { float: left; width: 20%; height: 350px; } .paging { background: none; position: absolute; bottom: 15px; right: 20px; padding:4px 0 2px; z-index: 100; display: none; } .paging a { margin: 3px; background: #fff; width: 10px; height:10px; display: inline-block; border: none; outline: none; } .paging a.active { background: #15E3FF; border: 1px solid #15E3FF; } .paging a:hover { } .easytitledes { width:70%; display: none; position: absolute; bottom: 20px; left: 20px; z-index: 101; background: #000A3F; background: rgba(2, 0, 51, 0.6); padding: 10px 15px; } .easytitledes a { color: #15E3FF; font: 14px sans-serif; text-transform: uppercase; font-weight: bold; } .easytitledes a:hover { color:#29FF00 } .easytitledes p { color: #fff; font: 12px Arial; }




•  Berikutnya cari code sperti ini </head> dan letak kode di bawah ini tepat di atas kode </head>

<script type="text/javascript"> /*<![CDATA[*/ $(document).ready(function() { $(".paging").show(); $(".paging a:first").addClass("active"); var imageWidth = $(".easyslider").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; $(".image_reel").css({'width' : imageReelWidth}); rotate = function(){ var triggerID = $active.attr("rel") - 1; var image_reelPosition = triggerID * imageWidth; $(".paging a").removeClass('active'); $active.addClass('active'); $(".easytitledes").stop(true,true).slideUp('slow'); $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); $(".image_reel").animate({left: -image_reelPosition}, 400 ); }; rotateSwitch = function(){ $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); play = setInterval(function(){ $active = $('.paging a.active').next(); if ( $active.length === 0) { $active = $('.paging a:first'); } rotate(); }, 4000); }; rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() { clearInterval(play); }, function() { rotateSwitch(); }); $(".paging a").click(function() { $active = $(this); clearInterval(play); rotate(); rotateSwitch(); return false; }); }); /*]]>*/ </script>

• pada tahap bertikutnya cari code <div id="main-wrapper"> atau <div class ="main-wrapper"> jika klain tidak menukan seperti code yang 2 tadi silahkan cari yang mirip dengan code tersebut,di karnakan dalam setiap template blog itu berbeda beda tergantung yang membuat tersebut.
Setelah menemukan kode seperti di atau atau yang mirip code tersebut silahkan masukan kode di bawah ini tepat di bawah code tersebut

<b:if cond="data:blog.url == data:blog.homepageUrl"> </b:if><br />
<div class="easyslider">
<div class="image_reel">
<a href="https://www.blogger.com/blogger.g?blogID=800603341005712978#"><img src="...image1.jpg" /></a> <a href="https://www.blogger.com/blogger.g?blogID=800603341005712978#"><img src="...image2.jpg" /></a> <a href="https://www.blogger.com/blogger.g?blogID=800603341005712978#"><img src="...image3.jpg" /></a> <a href="https://www.blogger.com/blogger.g?blogID=800603341005712978#"><img src="...image4.jpg" /></a> <a href="https://www.blogger.com/blogger.g?blogID=800603341005712978#"><img src="...image5.jpg" /></a> </div>
<div class="descriptionslider">
<div class="easytitledes">
<a href="https://www.blogger.com/...post-link1.html">Post-Title 1</a><br />
Description / Caption 1</div>
<div class="easytitledes">
<a href="https://www.blogger.com/...post-link2.html">Post-Title 2</a><br />
Description / Caption 2</div>
<div class="easytitledes">
<a href="https://www.blogger.com/...post-link3.html">Post-Title 3</a><br />
Description / Caption 3</div>
<div class="easytitledes">
<a href="https://www.blogger.com/...post-link4.html">Post-Title 4</a><br />
Description / Caption 4</div>
<div class="easytitledes">
<a href="https://www.blogger.com/...post-link5.html">Post-Title 5</a><br />
Description / Caption 5</div>
</div>
<div class="paging">
<a class="" href="https://www.blogger.com/blogger.g?blogID=800603341005712978#" rel="1"> </a><a class="" href="https://www.blogger.com/blogger.g?blogID=800603341005712978#" rel="2"> </a><a class="" href="https://www.blogger.com/blogger.g?blogID=800603341005712978#" rel="3"> </a><a class="" href="https://www.blogger.com/blogger.g?blogID=800603341005712978#" rel="4"> </a><a class="" href="https://www.blogger.com/blogger.g?blogID=800603341005712978#" rel="5"> </a></div>
</div>



• silahkan peratinjau dulu dalam template kalain dan lihat hasilnya 
Mungkin cukup sekian dulu seoke.com menerangkan postingan tentang membuat slide gambar di blog.
jika kailan punya kriti atau pun saran tentang postingan atau yang seoke.com sampaikan.silahkan tinggalkan pesanya di komentar yang seoke.com telah sipakan .
Terima kasih.
dan baca juga artikel menarik seoke.com yang lainya dengan cara membuat menu navigasi dengan gambar

Share

Like

G+

Tweet

Tweet

Ditulis Oleh : Seoke.com Blogger

Terima kasih telah berkunjung di membuat slide gambar di blog.Silahkan kalian masukan mail kalian untuk berlangganan lewat mail tentang artikel terbaru dari SEOKE.COM.

Subscribe To Email!