Featured Post Menarik di Sidebar

As-Salam. Banyak dah widget-widget serta gadget menarik yang boleh anda letakkan di sidebar blog anda, ini termasuklah featured post yang akan saya kongsikan kepada anda. Menarik mengenai widget ini ialah ia akan memaparkan entri-entri dalam blog secara rawak dan menjadikannya lebih berketrampilan daripada bahagian lain. Ia dilakukan menerusi efek JQuery yang dipasang pada bahagian tersebut.

Featured Post Menarik di Sidebar

Cara Pasang Featured Post di Sidebar Blogspot

Mudah je nak pasang, apa yang perlu anda buat ialah copy-paste kod HTML yang disediakan di bawah ke bahagian sidebar blog anda. Daripada Layout - Add HTML.

<style scoped="" type="text/css"> ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} ul.rcentside{font:normal normal 11px Verdana,Geneva,sans-serif} ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative} ul.rcentside{width:100%;height:500px} ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none} ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block} ul.rcentside img{border:0;width:100%;height:100%} ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0} ul.rcentside li:nth-child(2){left:0;top:50%} ul.rcentside li:nth-child(3){left:50.5%;top:50%} ul.rcentside li:nth-child(4){width:100%;left:0;top:75%} ul.rcentside .overlayx,ul.rcentside li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out} ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5WrCljAKGeRicht_6r1fpA4oULttwzWvHWASJvULZw6XXi1XkWaPKHUpHWZ42iFUTCtp59n1OddhqBRk47WPn6eJ_Bs5wkTslLMx4-fc1lzXGZjCb9As9aYK7tlT53yVLRi3GsrxLyH8/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x} ul.rcentside .overlayx,ul.rcentside img{border:4px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px} ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%} ul.rcentside .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1} ul.rcentside h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal} ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%} ul.rcentside .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%} ul.rcentside li:nth-child(2) .autname,ul.rcentside li:nth-child(3) .autname{display:none} .buttons{margin:5px 0 0} .buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative} .buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%} .buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px} </style> <div id="featuredpostside"> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> <script src="https://ivyth.googlecode.com/svn/js/featuredpostside.min.js" type="text/javascript"></script> <script type='text/javascript'> //<![CDATA[ FeaturedPostSide({ blogURL:"http://BLOG-ANDA.blogspot.com", MaxPost:8, idcontaint:"#featuredpostside", ImageSize:300, interval:5000, autoplay:true, tagName:false }); //]]> </script>
Anda hanya perlu tukar BLOG-ANDA dengan url blog anda sahaja. Dan lihat hasilnya. Tak pasti bagaimana rupa bentuk widget Featured Post menarik di sidebar ini, anda boleh tengok aksinya di blog ini - Bonusleaks.com


Selamat Mencuba.

Sumber: MKR-Site