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
cara membuat recent post with thumbnail style mouse rollover great
ada bisa liat di tampilan demonya jika anda menginginkan contoh dari script ini nantinya:

 Demo recent post horizontal style mouse over


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

Previous
Next Post »

2 komentar

Write komentar
26 Maret 2017 pukul 23.13 delete

dicopi kmn ini bro, head, body to dmn kok gk dijelasin

Reply
avatar
28 Mei 2017 pukul 04.02 delete

sory lama ndak aktive ngebloging..
langsung aja masukin code scriptny di penambahan gadget aja mas di tata letaknya, ndak perlu masuk dan edit htmlnya kok..
thxs smoga bisa membantu

Reply
avatar
Related Posts Plugin for WordPress, Blogger...