Membuat Recent Fiture Post Slider Responsive Macho

TutorialMixs - langsung saja karena ini widget mudah jadi tidak perlu di jelasin panjang dan lebar
silahkan sobat masuk saja di sini 
 Blogger sobat >> Template >> Tata Letak/Layout >> Add Widget >>  HTMl JavaScript
dan masukkan script berikut ini:

DEMO

<style>#featuredpost {margin:15px auto;}#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}#slides ul{height:320px}#slides li{width:50%;height:100%;position:absolute;display:none}#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}#slides li:nth-child(1){left:0;top:0}#slides li:nth-child(2){left:50%;width:25%;height:50%}#slides li:nth-child(3){left:75%;width:25%;height:50%}#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;background:#ff6553;margin:0;}#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;padding:5px 21px;text-transform:uppercase;margin:0;}#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}#slides a{display:block;width:100%;height:100%;overflow:hidden}#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;;left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;;text-transform:uppercase;}#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}#slides .overlayx,#slides li{transition:all .4s ease-in-out}#slides li:nth-child(1) .overlayx{display:none;}#slides li:hover .overlayx{opacity:0.1}@media only screen and (max-width:800px){#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}@media only screen and (max-width:600px){  #slides ul{height:600px}  #slides li:nth-child(1){width:100%;height:50%}  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}  #slides li:nth-child(5){display:none;}}@media only screen and (max-width:480px){#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}</style><script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/newbe/seocips-rec-post-slider.js"></script><script type='text/javascript'>//<![CDATA[$(document).ready(function () {FeaturedPost({blogURL:"http://youtube-most-wanted.blogspot.com/",MaxPost:5,idcontaint:"#featuredpost",ImageSize:500,interval:6000,autoplay:true,tagName:false});});//]]></script><div id="featuredpost"></div>

Baca juga : Bagaimana cara membuat Recent / Fiture Posts slider ciamixs tanpa pakek ribet

thxs semoga bermanfaat
nb: jangan lupa ganti urlnya dengan url sobat

Membuat Recent Posts Slider Ciamixs Simple

TutorialMixs - langsung saja karena ini widget mudah jadi tidak perlu di jelasin panjang dan lebar
silahkan sobat masuk saja di sini
Blogger sobat >> Template >> Tata Letak/Layout >> Add Widget >>  HTMl JavaScript
dan masukkan script berikut ini:

DEMO

<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
    url: "http://youtube-most-wanted.blogspot.com" // Add your blog URL
});
</script>

semoga bisa bermanfaat
nb : jangan lupa ganti url dengan url sobat
salam

Widget Recent Posts Satu Thumbnail by label

cara membuat recent post satu thumbnail per catagory

Tutorialmixs -  Sobat blogger, untuk widget recent post satu tumbnail memang masih belum banyak yang ngebahasnya, dulunya sih aku udah pernah makai dan nerapin widget ini di Youtube-most-Wanted, dan sudah berhasil, tapi aku kelupaan untuk ngebackupnya.

Nah kali ini aku tertarik lagi untuk mencoba share ke sobat, dan berikut aku kasihkan referensi blog yang ngebahas masalah recent post dengan satu thumbnail ini, tapi mohon maaf, untuk uji kelanyakannya belum sempat aku praktekin..

san silahkan langsung masuk saja ke alamat blog ini Duniabloggerku67, next setelah aku coba srcipt ini, nanti aku akan berikan recomendasi masalah jalannya script ini.

sepertinya itu saja yang bisa akau sampaikan, semoga bisa di mengerti.
salam

Cara Membuat Recent Posts Feed Slider dengan Scrol Otomatis

Recent Post Feed slider dan scrol with Thumbnail SImple

TutorialMixs - Sobat blogger dalam kesempatan ini aku mo coba share terkait bagaimana cara membuat atau menampilan Recent Post Feed dengan tampilan Slider dengan Scroll otomatis tanpa harus ribet otak atik script html sobat, jadi sobat tinggal copy saja perintah di bawah selesai dah..

Tampilannya yang oke membuatblog juga terlihat mentereng, di tambah lagi tidak usah pakek ribet cara membuatnya..

oke langsung saja, silahkan masuk ke template sobat dan klik tambah widget di mana tampilan ini akan sobat kehendaki untuk di tampilan...

silahkan copy script berikut:

<!-- start feedwind code -->
<script type="text/javascript">document.write('\x3Cscript type="text/javascript" src="' + ('https:' == document.location.protocol ? 'https://' : 'http://') + 'feed.mikle.com/js/rssmikle.js">\x3C/script>');</script><script type="text/javascript">(function() {var params = {rssmikle_url: "http://feeds.feedburner.com/tutorialmixs",rssmikle_frame_width: "280",rssmikle_frame_height: "400",frame_height_by_article: "0",rssmikle_target: "_blank",rssmikle_font: "Arial, Helvetica, sans-serif",rssmikle_font_size: "12",rssmikle_border: "off",responsive: "off",rssmikle_css_url: "",text_align: "left",text_align2: "left",corner: "off",scrollbar: "on",autoscroll: "on",scrolldirection: "up",scrollstep: "4",mcspeed: "20",sort: "New",rssmikle_title: "off",rssmikle_title_sentence: "",rssmikle_title_link: "",rssmikle_title_bgcolor: "#000814",rssmikle_title_color: "#FFFFFF",rssmikle_title_bgimage: "",rssmikle_item_bgcolor: "#04010F",rssmikle_item_bgimage: "",rssmikle_item_title_length: "80",rssmikle_item_title_color: "#FFBA19",rssmikle_item_border_bottom: "on",rssmikle_item_description: "on",item_link: "off",rssmikle_item_description_length: "150",rssmikle_item_description_color: "#525252",rssmikle_item_date: "off",rssmikle_timezone: "Etc/GMT",datetime_format: "%b %e, %Y %l:%M %p",item_description_style: "text+tn",item_thumbnail: "crop",item_thumbnail_selection: "media_content",article_num: "15",rssmikle_item_podcast: "off",keyword_inc: "",keyword_exc: ""};feedwind_show_widget_iframe(params);})();</script><div style="font-size:10px; text-align:center; width:280px;"><a href="http://feed.mikle.com/" target="_blank" style="color:#CCCCCC;">RSS Feed Widget</a><!--Please display the above link in your web page according to Terms of Service.--></div><!-- end feedwind code -->
<!--  end  feedwind code -->

untuk yang aku warnai biru silahkan ganti dengan alamat feedsburner sobat

sangat gampang bukan??
salam semoga bermanfaat

Cara Menambahkan Recent Post Multi Label Simple. Great!!

recent post multi label/katagori automatic update simple

TutorialMixs - hallo broo.. jumpa lagi pada postingan yang rada ngadat karena beberapa aktifitas. baik langsung saja, pada kesempatan ini aku mo sedikit share, bagaimna membuat/menambahkan recent post multi label, tanpa melakukan otak-atik html templete sobat.. sangat sederhana tapi penampilannya oke punya dan mak jusss

langsung saja menuju tutorialnya:
seperti biasa lakukan tahapan seperti image berikut di penambahan widget di template anda (saya nyakin anda sudah memahaminya jadi tidak perlu aku kasih tutorialnya mendetail)

terserah anda mau taruh di penambahan widget sidebar atau di bawah postingan.. jika tamplate anda sudah ada widget di bawah postingan, berarti anda beruntung karena tidak usah pusing-pusing lagi buat penambahan widget bawah postingan.

Tetapi jika template anda belum ada widget bawah posting, anda bisa memasukkan ini langsung di template anda tanpa harus melakukan penambahan widget pada template anda. walaupun ini bisa mempengaruhi masalah kualitas kecepatan blog anda, karena sript yang di tambahkan begitu banyak.
kalo ada kesempatan nanti aku akan kupas bagaimana cara memperingkas script pada html.. moga aja tidak males he,e,e, oke lanjut sobbb

dasar penambahan widget pada template anda

untuk melihat hasil dari demo silahkan klik link di bawah

kalau demonya seperti yang anda inginkan silahkan masukkan script di bawah ini pada widget template anda

Berikut Scriptnya :

<!-- recent post lebih dari satu label otomatis simple --> <link rel="stylesheet" type="text/css" scoped="scoped" href="http://blogger-json-experiment.googlecode.com/svn/resources/multi-feed/multi-feed.min.css"/> <a href="http://tutorialmixs.blogspot.com/" rel="dofollow" target="_blank" /></a> <style type="text/css" scoped="scoped"> /* Custom CSS */ .list-entries { margin:5px; width:315px; /* Lebar widget */ float:left; font-size:11px; } </style> <div id="feed-list-container"> </div> <div style="clear:both;"> </div> <script type="text/javascript"> var multiFeed = { feedsUri: [ { name: "SCANDAL PUBLIC", url: "http://youtube-most-wanted.blogspot.com", tag: "Youtube%20Scandal" }, { name: "HEALTHY SEX", url: "http://youtube-most-wanted.blogspot.com", tag: "Healthy" }, { name: "HOT TRENDING TOPIC NEWS", url: "http://youtube-most-wanted.blogspot.com", tag: "Hot%20News" }, { name: "MISTERY DAN FENOMENA UNIK", url: "http://youtube-most-wanted.blogspot.com", tag: "Mistery" }, { name: "DANGDUT SUPER HOTs", url: "http://youtube-most-wanted.blogspot.com", tag: "Dangdut%20Ampuh" }, { name: "HOT NEWS INDI", url: "http://youtube-most-wanted.blogspot.com", tag: "Hindi" } ], numPost: 4, showThumbnail: true, showSummary: true, summaryLength: 100, titleLength: "auto", thumbSize: 72, containerId: "feed-list-container", readMore: { text: "Selengkapnya", endParam: "?max-results=7" } }; </script> <div style='font-size: 8px;float: right; margin: 5px;'> <a href='http://tutorialmix.blogspot.com/' rel='dofollow' style='font-size: 8px; text-decoration: none;'>Thxs To>>www.dte.web.id</a></div> <script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/multi-feed/multi-feed.min.js"></script> <br/> <!-- referensi recent post thxs to http://www.dte.web.id/ -->

berikut sedikit pembahasan yang perlu di lakukan:
    name: "HOT TRENDING TOPIC NEWS", (isi kan judul yang ingin di tampilan pada recent post)
    url: "http://youtube-most-wanted.blogspot.com", (ganti dengan menggunakan url sobat)
    tag: "Hot%20News" (Tag/label yang ingin ditampilkan)

    numPost: 4,  (jumlah postingan yang ingin ditampilkan)
    showThumbnail: true, (menampilkan image pada recent post)
    showSummary: true, (menampilkan description)
    summaryLength: 100, (panjang description yang ingin di tampilkan)
    titleLength: "auto",
    thumbSize: 72, (ukuran gambar, silahkan anda ganti jika ingin di ganti)

oke selesai sudah tutorial ini, semoga bisa bermanfaat buat anda..
salam blogger