Cara membuat recent post horizontal mouse rollover, tanpa ribet

TutorialMixs - Sobat blogger, penampilan untuk mempercantik blog, mau tidak di akui, ini benar-benar sering kita lakukan untuk menambah daya tarik sendiri pada blog kita, jika orang lain mengunjungi blog kita.. banyak yang menampilkan script slider, tp yang aku coba share saat ini adalah tutorial menambahkan random post slider horizontal kagak pakek ribet, alias mudah, cepat tanpa harus otak atik script html template sobat blogger..

Maaf  ada kesalahan pembuatan title/judul, dan judul yang benar adalah :"cara membuat recent post horizontal with thumbnail style mouse rollover"

dan berikut adalah image yang benar :

cara membuat recent post with thumbnail style mouse rollover great

ada bisa liat di tampilan demonya jika anda menginginkan contoh dari script ini nantinya:

nah,, bagimana?? apakah anda berkenan untuk menggunakan script ini? jika iya silahkan ikutin tutorialnya di bawah ini:

kode CSS nya:

<style type="text/css">#thumbnail-scroller { height:110px; position:relative; overflow:auto; width:90%; margin:0 auto;}#thumbnail-scroller:before,#thumbnail-scroller:after { content:""; display:block; position:absolute; left:-4px; width:4px; height:100%; box-shadow:0 0 4px #000; z-index:10;}#thumbnail-scroller:after { left:auto; right:-4px;}#thumbnail-scroller .container { width:300%; height:100px; position:absolute;}#thumbnail-scroller figure { display:block; float:left; width:100px; height:100px; position:relative; overflow:hidden;margin:0 5px 0 0;}#thumbnail-scroller figure img { display:block; border:none; width:100px; height:100px;}</style>

dan berikut adalah script untuk code HTMLnya:

<div id="thumbnail-scroller">
 <script type="text/javascript">
 //<![CDATA[
 var thumbnails = 30;
 function showThumbs(json) {
 var entry = json.feed.entry,
 title, url;
 document.write('<div class="container">');
 for (var i = 0; i < thumbnails; i++) {
 for (var j = 0; j < entry[i].link.length; j++) {
 if (entry[i].link[j].rel == 'alternate') {
 url = entry[i].link[j].href;
 break;
 }
 }
 title = entry[i].title.$t;
 if ("media$thumbnail" in entry[i]) {
 img = entry[i].media$thumbnail.url.replace(/\/s72\-c/, "/s100-c");
 } else {
 img = "http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png";
 }
 document.write('<figure><a href="' + url + '" title="' + title + '"><img src="' + img + '" alt="" /></a></figure>');
 }
 document.write('</div>');
 }
 //]]>
 </script>
 <script type="text/javascript" src="http://tutorialmixs.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=showThumbs"></script>
</div>

dan yang terakhir silahkan copy juga script untuk Java Scriptnya..

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
var config = {
 itemMargins: 5 // Distance between the thumbnails
 };
var $thumbnailScroller = $('#thumbnail-scroller'),
 $container = $thumbnailScroller.find('.container'),
 $item = $container.find('figure'),
 item_length = $item.length,
 item_width = $item.outerWidth(),
 item_margin = config.itemMargins,
 total_width = (item_width + item_margin) * item_length,
 $window = $(window);
$thumbnailScroller.css('overflow', 'hidden');
 $container.css('width', total_width);
$window.on("resize", function() {
 var o_l = $thumbnailScroller.offset().left,
 t_w = $thumbnailScroller.width(),
 c_w = total_width;
 $thumbnailScroller.on("mousemove", function(e) {
 if ($(this).width() < $container.width()) {
 $container.css('left', -((e.pageX - o_l) * (c_w - t_w) / t_w));
 }
 });
 }).trigger("resize");
})(jQuery);
</script>
<a href="http://www.exeideas.com/2015/12/blogger-post-moving-thumbnail.html">Thxs to JQuery Blogger Post Moving Thumbnail On Mouse RollOver</a>

silahkan masukkan ketiga code tersebut di penambahan widget anda pada template sobat. bisa di atas title, di bawah title atau juga di footer widget sobat
yab,, aku rasa jika cara sobat memasukkan code dengan benar,, hasilnya akan anda liat seperti di image demo di atas

jika ada pertanyaan jangan ragu untuk kirim pertanyaan anda di sini, 
oke semoga tutorial ini bisa bermanfaat buat sobat blogger

dan jika anda menginginkan widget random post horizontal silahkan klik image berikut :

link ke pembuatan random post horizontal

mohon maaf atas tidak nyamanan ini, maklum manusia kadang juga melakukan kesalahan he,e,
salam
semoga bisa bermanfaat buat anda

Share this

Related Posts