/ / / Cara Membuat Slide Show Poto Di Home Page Blog

Cara Membuat Slide Show Poto Di Home Page Blog

November 30, 2017 ,

Postingan kali ini saya menulis tentang bagaimana cara membuat slide show poto pada blog, penampilan slide show ini akan mempercantik blog kamu.

Slide show poto ini ada 2 cara memasangnya bisa dengan cara manual dan otomatis, untuk tutorialnya silahkan perhatikan berikut ini

1. Edit HTML template blogger kamu taruh script css dibawah 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: 98%; height: 290px; 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; width: 10px; height:10px; display: inline-block; border: none; outline: none; border: 2px solid #fff; border-radius: 10px; } .paging a.active { background: #0b84cb; border: 2px solid #fff; border-radius: 10px; } .paging a:hover { } .easytitledes { width: 70%; display: none; position: absolute; bottom: 20px; left: 20px; z-index: 101; background: #000A3F; background:rgba(0,0,0,0.7); padding: 10px 15px; border-radius: 10px; } .easytitledes a { color: #fff; font: 20px open sans; text-transform: uppercase; font-weight: bold; } .easytitledes a:hover { color:#0b84cb; } .easytitledes p { color: #fff; font: 12px Arial; }


2. Copy lagi kode javascript berikut ini taruh  di atas kode
</head> (jika sudah ada pada template kamu abaikan saja)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

3. Kemudian taruh lagi kode script berikut ini di atas kode yang sama yaitu kode </head>

<script type="text/javascript"> $(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>

Cara memasang slide show secara manual

1.Copy kode script berikut ini

<b:if cond='data:blog.url == data:blog.homepageUrl'> <div class='easyslider'> <div class='image_reel'> <a href="#"><img src="Masukin-URL-gambar-disini.jpg" /></a> <a href="#"><img src="Masukin-URL-gambar-disini.jpg" /></a> <a href="#"><img src="Masukin-URL-gambar-disini.jpg" /></a> <a href="#"><img src="Masukin-URL-gambar-disini.jpg" /></a> <a href="#"><img src="Masukin-URL-gambar-disini.jpg" /></a> </div> <div class='descriptionslider'> <div class="easytitledes"><a href='Masukin-URL-artikel-disini.html'>Masukin judul artikel disini</a><p>Masukin deskripsi disini</p></div> <div class="easytitledes"><a href='Masukin-URL-artikel-disini.html'>Masukin judul artikel disini</a><p>Masukin deskripsi disini</p></div> <div class="easytitledes"><a href='Masukin-URL-artikel-disini.html'>Masukin judul artikel disini</a><p>Masukin deskripsi disini</p></div> <div class="easytitledes"><a href='Masukin-URL-artikel-disini.html'>Masukin judul artikel disini</a><p>Masukin deskripsi disini</p></div> <div class="easytitledes"><a href='Masukin-URL-artikel-disini.html'>Masukin judul artikel disini</a><p>Masukin deskripsi disini</p></div> </div> <div class='paging'> <a class='' href='#' rel='1'/> <a class='' href='#' rel='2'/> <a class='' href='#' rel='3'/> <a class='' href='#' rel='4'/> <a class='' href='#' rel='5'/> </div> </div> </b:if>

2. Kemudian cari kode pada template blogger kamu untuk menaruhnya seperti
<div id='post-wrapper'>
<div class="main-wrapper">
<div id="main-wrapper">
Kalau sudah ketemu taruh scriptnya paste kan tepat di atas atau di bawah kode tersebut, tergantung selera masing- masing.
Untuk kode pada template bawaan blogger kamu cari kode seperti berikut ini
<div class='blog-posts hfeed'>

3. Selesai, simpan template kamu.

Cara memasang slide show secara otomatis

1. Kamu copy lagi kode script berikut ini tambahin lagi di atas kode </head>

<script type='text/javascript'>//<![CDATA[ imgr = new Array();imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";showRandomImg = true;aBold = true;summaryPost1 = 150;summaryTitle = 20;numposts1 = 5; function removeHtmlTag(strx,chop){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}s = s.join("");s = s.substring(0,chop-1);return s;} function showrecentposts1(json) {j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img = new Array(); for (var i = 0; i < numposts1; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href; break; }} for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {pcm = entry.link[k].title.split(" ")[0]; break; }} if ("content" in entry) {var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var trtd = '<div class="easytitledes"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>'; document.write(trtd); j++;}} function showrecentposts2(json) { j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img = new Array(); for (var i = 0; i < numposts1 ; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; }}for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') { pcm = entry.link[k].title.split(" ")[0]; break; }} if ("content" in entry) {var postcontent = entry.content.$t;}; if(j>imgr.length-1) j=0; img[i] = imgr[j]; s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d; var trtd = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>'; document.write(trtd); j++;}} //]]></script>

Keterangan:
Ganti url gambar pada kode script tersebut dengan url gambar yang kamu mau
http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg

2. Copy kode script berikut ini

<b:if cond='data:blog.url == data:blog.homepageUrl'> <div class='easyslider'> <div class='image_reel'> <script> document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;); </script> </div> <div class='descriptionslider'> <script> document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;); </script> </div> <div class='paging'> <a class='' href='#' rel='1'/> <a class='' href='#' rel='2'/> <a class='' href='#' rel='3'/> <a class='' href='#' rel='4'/> <a class='' href='#' rel='5'/> </div> </div> </b:if>


Kemudian cari kode pada template blogger kamu untuk menaruhnya seperti
<div id='post-wrapper'>
<div class="main-wrapper">
<div id="main-wrapper">
Kalau sudah ketemu taruh scriptnya paste kan tepat di atas atau di bawah kode tersebut, tergantung selera masing- masing.
Untuk kode pada template bawaan blogger kamu cari kode seperti berikut ini
<div class='blog-posts hfeed'>
Kalau sudah ketemu taruh scriptnya paste kan tepat di atas atau di bawah kode tersebut, tergantung selera masing- masing.
Untuk kode pada template bawaan blogger kamu cari kode seperti berikut ini

3. Selesai, simpan template kamu.

Sekian cara membuat slid show poto pada blogger.

Comentarios: