-->






Iklan

Membuat Otomatis Slider Posting

Cara Membuat Otomatis Slider Posting/Artikel atau Cara membuat slideshow posting.
Slider posting artinya sebuah fitur untuk otomatis menampilkan postingan terbaru beserta gambar posting tersebut juga disertai dengan cuplikan artikelnya, semuanya serba otomatis.
Slider posting/artikel ini berbeda dengan slider image , jika slider image nantinya yang muncul gambar-gambar yang harus anda tambahkan sendiri dan juga untuk judul posting serta description nya juga harus di tambahkan secara manual (di tambahkan sendiri) , jika anda ingin mencoba nya silahkan buka panduanya di Cara Membuat Slider Image.

Untuk Cara membuat slider posting ini sebenarnya saya juga sudah membuat panduan semacam ini tapi ada perbedaan nya jika anda ingin melihat perbedaanya silahkan buka panduan Cara membuat Slider Posting Versi Lain

Jika anda sudah melihat perbedaanya dan untuk slider posting yang ini nantinya tampilanya akan seperti gambar yang di bawah ini , atau anda bisa melihat contohnya dalam demo di bawah ini



cara membuat slider posting


Cara Membuat Slider Posting
Cara pembuatan slider postingnya silahkan simak panduanya di bawah ini ;

1.buka website / blog anda bisa melalui alamat blogger.com
2.kemudian login dulu ke akun blog masing-masing.
3.selanjutnya klik desain untuk menuju dashboard blogger
4.pada menu dashboard blogger pilih Template , Lalu pilih lagi Edit Html , contohnya seperti gambar di bawah ini


cara edit html untuk membuat slider posting

5.Lalu cari kode seperti ini ]]></b:skin>
6.kemudian kopi kode yang ada di bawah ini dan pastekan 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: 300px; background: #eee; } .image_reel { position: absolute; top: 0; left: 0; } .image_reel img { float: left; width: 20%; height: 300px; } .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; }


7.kopi lagi kode di bawah ini dan pastekan di atas 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>


8.kopi lagi kode yang di bawah ini dan pastekan di atas kode </head>

<script type='text/javascript'>//<![CDATA[ imgr = new Array();imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA-GFm9FPsN9kGOZdoFS2wCEX72qZFzUUcrFk9xkMDlZERg6gKWLBQEd18_SZwCKFGzdZi928HPApZiY3EFVRUXQ6Qq9EToj-oeCrZharwYbLz4CZfJX7ZjiVGScC0N1cQ3Eitqs3IUTQ/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>

9.kopi lagi kode yang di bawah ini dan pastekan di bawah <div class="main-wrapper" > atau yang sejenisnya

<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>

10.selanjutnya simpan Template anda.
11.selesai.

Demikian Cara membuat Slider Show Otomatis Posting , jika ada kesulitan silahkan bertanya saja , untuk tampilan tinggi layar slider nya bisa anda sesuaikan dengan selera anda , serta warna tulisan judul dan description nya juga anda bisa rubah sesuai keinginan anda sendiri.

Komentar

Tampilkan

No comments:

Post a Comment

Terimakasih sudah mengunjungi jasa setting Website / Jasa Pembuatan Website www.jasa-website.web.id semoga bermanfaat , kontak 081399167240

Komputer

+