Memasang widget gallery post slider di blogger dengan mudah

widget gallery post

Untuk memasang widget galerry post slider di blogger dengan tampilan cantik dan responsive,pertama silahkan masukan css berikut ini sebelum </head>

<style>
#featuredpost {margin: 20px auto 0;}
#slides * {box-sizing: border-box;}
#slides ul, #slides li {list-style: outside none none; margin: 0; padding: 0; position: relative;}
#slides ul {background: #222 none repeat scroll 0 0; height: 300px;}
#slides li {display: none; height: 100%; position: absolute; width: 50%;}
#slides li::before {background: #ff3c36 none repeat scroll 0 0; border-radius: 50%; color: #fff; content: &quot;\f06d&quot;; display: none; font-family: fontawesome; font-size: 20px; height: 35px; line-height: 32px; position: absolute; right: 10px; text-align: center; top: 10px; width: 35px; z-index: 1;}
#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(1):before {display: none;}
#slides li:nth-child(2) {height: 58%; left: 50%; width: 50%;}
#slides li:nth-child(3) {display: none; height: 50%; left: 75%; width: 25%;}
#slides li:nth-child(4) {height: 42%; left: 50%; top: 58%; width: 25%;}
#slides li:nth-child(5) {height: 42%; left: 75%; top: 58%; width: 25%;}
#slides li:nth-child(1) h3 {background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%) repeat scroll 0 0; bottom: 0; box-decoration-break: clone; color: #fff; display: inline; font: 700 2rem/123% &quot;Work Sans&quot;,sans-serif; left: 0; overflow: hidden; padding: 20px 20px 40px; text-align: left; width: 100%;}
#slides li:nth-child(1) h3:hover {color: #ffee00; text-decoration: none;}
#slides li:nth-child(1) .label_text {background: transparent none repeat scroll 0 0; bottom: 20px !important; color: #ccc; display: block; font: 400 0.7rem/100% &quot;Work Sans&quot;,sans-serif; height: auto; left: 20px; padding: 0; right: 20px; top: auto;}
.autname {float: left; margin: 0 10px 0 0;}
#slides li:nth-child(1) span.dd {margin: 0;}
#slides li:nth-child(1) span.dm {margin: 0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname {}
#slides a {display: block; height: 100%; overflow: hidden; width: 100%;}
#slides img {background: #222 none repeat scroll 0 0; border: 0 none; display: block; height: auto; opacity: 0.9; padding: 0; transform: scale(1) rotate(0deg); transition: all 0.6s linear 0s; width: 100%;}
#slides li a:hover img {opacity: 1; transform: scale(1.1) rotate(0deg); transition: all 0.3s linear 0s;}
#slides .overlayx {height: 100%; position: absolute; width: 100%; z-index: 2;}
#slides h3 {background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%) repeat scroll 0 0; bottom: 0; color: #fff; font: 600 0.95rem/123% &quot;Work Sans&quot;,sans-serif; left: 0; padding: 10px; position: absolute; text-align: left; width: 100%;}
#slides h3:hover {color: #ffee00; text-decoration: none;}
#slides li:nth-child(2) h3 { font: 700 1.3rem/123% &quot;Work Sans&quot;,sans-serif;}
#slides .label_text {background: #ff3c36 none repeat scroll 0 0; color: #fff; display: none; font: 600 0.65rem &quot;Work Sans&quot;,sans-serif; left: 0; letter-spacing: 0.05rem; padding: 5px 10px; position: absolute; text-transform: uppercase; top: 0; width: auto; z-index: 3;}
.date::before {content: &quot;\f073&quot;; font-family: fontawesome; position: relative; bottom: 1px; margin: 0 4px 0 0;}
#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 0.4s ease-in-out 0s;}
#slides li:nth-child(1) .overlayx {display: none;}
#slides li:hover .overlayx {opacity: 0.1;}
.mbtlist {list-style-type: none; overflow: hidden;}
.mbtlist i {color: #999;padding-right: 4px;}
.mbtlist .iline {color: #999; font: 400 0.7rem/113% &quot;Work Sans&quot;,sans-serif; margin: 10px 0 0; text-transform: uppercase;}
.iauthor {font-weight: bold;}
.mbtlist div span {display: inline-block; margin: 0 10px 0 0;}
.itag {color: #ff3c36; font: 600 0.7rem/100% &quot;Work Sans&quot;,sans-serif; letter-spacing: 0.05rem; margin: 0 0 5px; padding: 20px 0 0; text-transform: uppercase;}
.mbtlist span {display: block;}
.mbtlist .icon {color: #555; font: 400 1rem/140% &quot;Lato&quot;,sans-serif; margin: 7px 0 0;}
.overlay {background: #222 none repeat scroll 0 0 !important; float: left; margin: 0 20px 0 0; overflow: hidden; width: 100%;}
.mbtlist img {max-height: 240px; object-fit: cover; opacity: 0.9; padding: 0; width: 100%;}
.mbtlist img:hover {opacity: 1; transition: all 0.25s ease 0s;}
.mbtlist .mbttitle {color: #222; display: block; font: 700 1.3rem/123% &quot;Work Sans&quot;,sans-serif; text-decoration: none;}
.mbtlist .mbttitle:hover, .mbtlist .itotal a:hover {color: #ff3c36;}
.mbtlist .idate::before {bottom: 1px; content: &quot;\f073&quot;;; font-family: fontawesome; position: relative;}
#mbtloading1 {display: block !important;}
.icomments, .iedit, .mbtlist .itotal {display: none !important;}
.mbtlist li:nth-child(1) .overlay {float: none;}
.mbtlist li:nth-child(1) {float: left !important; margin: 0 20px 0 0;}
.mbtlist li:nth-child(2) {overflow: hidden; padding: 0 0 10px;}
.mbtlist li:nth-child(3), .mbtlist li:nth-child(4), .mbtlist li:nth-child(5) {border-top: 1px solid #ddd; overflow: hidden; padding: 10px 0;}
.mbtlist li:nth-child(2) .icon, .mbtlist li:nth-child(3) .icon, .mbtlist li:nth-child(4) .icon, .mbtlist li:nth-child(5) .icon {display: none !important;}
.mbtlist li:nth-child(1) .itag {background: #ff3c36 none repeat scroll 0 0; color: #fff; margin: -21px 0 0; padding: 5px 10px; position: absolute;}
.mbtlist li:nth-child(2) .mbttitle, .mbtlist li:nth-child(3) .mbttitle, .mbtlist li:nth-child(4) .mbttitle, .mbtlist li:nth-child(5) .mbttitle {font: 700 1.1rem/123% &quot;Work Sans&quot;,sans-serif; margin: 5px 0 0;}
.mbtlist li:nth-child(1) .mbttitle {margin: 10px 0 0;}
.mbtlist li:nth-child(2) .overlay, .mbtlist li:nth-child(3) .overlay, .mbtlist li:nth-child(4) .overlay, .mbtlist li:nth-child(5) .overlay {height: 120px; margin: 0 15px 0 0; width: 150px;}
.mbtlist li:nth-child(2) .itag, .mbtlist li:nth-child(3) .itag, .mbtlist li:nth-child(4) .itag, .mbtlist li:nth-child(5) .itag {display: none; padding: 10px 0 0;}
#slides ul {height: 300px!important;}
#slides li:nth-child(1) h3 {font: 700 1.3rem/123% &quot;Work Sans&quot;,sans-serif!important;}
#slides li:nth-child(2) h3 {font: 600 0.95rem/123% &quot;Work Sans&quot;,sans-serif!important;}
#slides li:nth-child(3) {top: 67%; left: 50%; height: 33%; width: 50%; display: block;}
#slides li:nth-child(4), #slides li:nth-child(5) {display: none!important;}
</style>

Silahkan di edit jika ingin gallery tampil berbeda dengan yang ada di contoh.Kemudian masuk ke dasboard blogger sobat,klik layout,pilih tambah widget html,silahkan masukan kode berikut.

<script type='text/javascript'>
var _0xf864=['blogURL','MaxPost','location','protocol','host','<div\x20id=\x22slides\x22><ul\x20class=\x22randomnya\x22></ul></div><div\x20id=\x22buttons\x22><a\x20href=\x22#\x22\x20id=\x22prevx\x22\x20title=\x22prev\x22></a><a\x20href=\x22#\x22\x20id=\x22nextx\x22\x20title=\x22next\x22></a></div>','addClass','loadingClass','feed','entry','length','link','rel','alternate','href','media$thumbnail','url','replace','pBlank','title','published','author','name','substring','MonthNames','<li><a\x20href=\x22','\x22\x20title=\x22','\x22><div\x20class=\x22overlayx\x22></div><img\x20class=\x22random\x22\x20src=\x22','\x22><h3>','</h3></a><div\x20class=\x22label_text\x22><span\x20class=\x22date\x22><span\x20class=\x22dm\x22>','</span>\x20<span\x20class=\x22dd\x22>','</span></span>\x20<span\x20class=\x22autname\x22>By\x20','</span></div></li>','/-/','tagName','ajax','/feeds/posts/default','?max-results=','&orderby=published&alt=json-in-script','jsonp','#prevx','click','#slides\x20li:first','#slides\x20li:last','#nextx','autoplay','rotate()','before','#slides','hover','removeClass','ready','write','onload','http://www.analisistheme.com','#keeptzy:visible','css','visibility','hidden','display','none','collapse','setAttribute','dofollow','target','_blank','Responsive\x20Blogger\x20Templates','Templatezy','#featuredpost','loadingxx','http://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/s1600/grey.gif','January','February','March','April','June','July','August','September','October','November','extend'];(function(_0x461e66,_0x5c6e1e){var _0x3b58a8=function(_0x2a97e6){while(--_0x2a97e6){_0x461e66['push'](_0x461e66['shift']());}};_0x3b58a8(++_0x5c6e1e);}(_0xf864,0x1de));var _0x4f86=function(_0x49f4ac,_0x5c7747){_0x49f4ac=_0x49f4ac-0x0;var _0x4a0ec1=_0xf864[_0x49f4ac];return _0x4a0ec1;};function FeaturedPost(_0x533d1d){(function(_0x3b167b){var _0x3e9f1d={'blogURL':'','MaxPost':0xa,'idcontaint':_0x4f86('0x0'),'ImageSize':0x1f4,'interval':0x2710,'autoplay':![],'loadingClass':_0x4f86('0x1'),'pBlank':_0x4f86('0x2'),'MonthNames':[_0x4f86('0x3'),_0x4f86('0x4'),_0x4f86('0x5'),_0x4f86('0x6'),'May',_0x4f86('0x7'),_0x4f86('0x8'),_0x4f86('0x9'),_0x4f86('0xa'),_0x4f86('0xb'),_0x4f86('0xc'),'December'],'tagName':![]};_0x3e9f1d=_0x3b167b[_0x4f86('0xd')]({},_0x3e9f1d,_0x533d1d);var _0x5db98d=_0x3b167b(_0x3e9f1d['idcontaint']);var _0x5ebbf9=_0x3e9f1d[_0x4f86('0xe')];var _0x49005f=_0x3e9f1d[_0x4f86('0xf')]*0xc8;if(_0x3e9f1d[_0x4f86('0xe')]===''){_0x5ebbf9=window[_0x4f86('0x10')][_0x4f86('0x11')]+'//'+window['location'][_0x4f86('0x12')];}_0x5db98d['html'](_0x4f86('0x13'))[_0x4f86('0x14')](_0x3e9f1d[_0x4f86('0x15')]);var _0x19d407=function(_0x361fd3){var _0x41d2c9,_0x3ee474,_0x58dd77,_0x7fd6d1,_0x6aa6e,_0x198a77,_0x392ce5,_0x1be485,_0x1f788,_0x41e6be='',_0x2c2c1b=_0x361fd3[_0x4f86('0x16')][_0x4f86('0x17')];for(var _0x127b26=0x0;_0x127b26<_0x2c2c1b[_0x4f86('0x18')];_0x127b26++){for(var _0x5ebf2c=0x0;_0x5ebf2c<_0x2c2c1b[_0x127b26][_0x4f86('0x19')][_0x4f86('0x18')];_0x5ebf2c++){if(_0x2c2c1b[_0x127b26][_0x4f86('0x19')][_0x5ebf2c][_0x4f86('0x1a')]==_0x4f86('0x1b')){_0x41d2c9=_0x2c2c1b[_0x127b26][_0x4f86('0x19')][_0x5ebf2c][_0x4f86('0x1c')];break;}}if(_0x4f86('0x1d')in _0x2c2c1b[_0x127b26]){_0x7fd6d1=_0x2c2c1b[_0x127b26][_0x4f86('0x1d')][_0x4f86('0x1e')][_0x4f86('0x1f')](/\/s[0-9]+\-c/g,'/s'+_0x3e9f1d['ImageSize']+'-c');}else{_0x7fd6d1=_0x3e9f1d[_0x4f86('0x20')][_0x4f86('0x1f')](/\/s[0-9]+(\-c|\/)/,'/s'+_0x3e9f1d['ImageSize']+'$1');}_0x3ee474=_0x2c2c1b[_0x127b26][_0x4f86('0x21')]['$t'];_0x1f788=_0x2c2c1b[_0x127b26][_0x4f86('0x22')]['$t']['substring'](0x0,0xa);_0x58dd77=_0x2c2c1b[_0x127b26][_0x4f86('0x23')][0x0][_0x4f86('0x24')]['$t'];_0x6aa6e=_0x1f788[_0x4f86('0x25')](0x0,0x4);_0x198a77=_0x1f788[_0x4f86('0x25')](0x5,0x7);_0x392ce5=_0x1f788[_0x4f86('0x25')](0x8,0xa);_0x1be485=_0x3e9f1d[_0x4f86('0x26')][parseInt(_0x198a77,0xa)-0x1];_0x41e6be+=_0x4f86('0x27')+_0x41d2c9+_0x4f86('0x28')+_0x3ee474+_0x4f86('0x29')+_0x7fd6d1+_0x4f86('0x28')+_0x3ee474+_0x4f86('0x2a')+_0x3ee474+_0x4f86('0x2b')+_0x1be485+_0x4f86('0x2c')+_0x392ce5+'</span>,\x20<span\x20class=\x22dy\x22>'+_0x6aa6e+_0x4f86('0x2d')+_0x58dd77+_0x4f86('0x2e');}_0x3b167b('ul',_0x5db98d)['append'](_0x41e6be);};var _0x26fd9f=function(){var _0x434e3d=_0x4f86('0x2f')+_0x3e9f1d[_0x4f86('0x30')];if(_0x3e9f1d[_0x4f86('0x30')]===![]){_0x434e3d='';_0x3b167b[_0x4f86('0x31')]({'url':_0x5ebbf9+_0x4f86('0x32')+_0x434e3d+_0x4f86('0x33')+_0x3e9f1d[_0x4f86('0xf')]+_0x4f86('0x34'),'success':_0x19d407,'dataType':_0x4f86('0x35'),'cache':!![]});}else{_0x3b167b[_0x4f86('0x31')]({'url':_0x5ebbf9+'/feeds/posts/default'+_0x434e3d+_0x4f86('0x33')+_0x3e9f1d[_0x4f86('0xf')]+_0x4f86('0x34'),'success':_0x19d407,'dataType':_0x4f86('0x35'),'cache':!![]});}(function(){setTimeout(function(){_0x3b167b(_0x4f86('0x36'))[_0x4f86('0x37')](function(){_0x3b167b(_0x4f86('0x38'))['before'](_0x3b167b(_0x4f86('0x39')));return![];});_0x3b167b(_0x4f86('0x3a'))[_0x4f86('0x37')](function(){_0x3b167b(_0x4f86('0x39'))['after'](_0x3b167b(_0x4f86('0x38')));return![];});if(_0x3e9f1d[_0x4f86('0x3b')]){var _0x47d689=_0x3e9f1d['interval'];var _0x56ff43=setInterval(_0x4f86('0x3c'),_0x47d689);_0x3b167b('#slides\x20li:first')[_0x4f86('0x3d')](_0x3b167b(_0x4f86('0x39')));_0x3b167b(_0x4f86('0x3e'))[_0x4f86('0x3f')](function(){clearInterval(_0x56ff43);},function(){_0x56ff43=setInterval('rotate()',_0x47d689);});function _0x5cc0e3(){_0x3b167b('#nextx')[_0x4f86('0x37')]();}}_0x5db98d[_0x4f86('0x40')](_0x3e9f1d[_0x4f86('0x15')]);},_0x49005f);}());};_0x3b167b(document)[_0x4f86('0x41')](_0x26fd9f);}(jQuery));};function rotate(){$('#nextx')[_0x4f86('0x37')]();};document[_0x4f86('0x42')]('');window[_0x4f86('0x43')]=function(){var _0xf031c2=document['getElementById']('keeptzy');var _0x259ed0=_0x4f86('0x44');setInterval(function(){if(!$(_0x4f86('0x45'))[_0x4f86('0x18')]||$(_0xf031c2)[_0x4f86('0x46')](_0x4f86('0x47'))==_0x4f86('0x48')||$(_0xf031c2)[_0x4f86('0x46')](_0x4f86('0x49'))==_0x4f86('0x4a')||$(_0xf031c2)[_0x4f86('0x46')](_0x4f86('0x47'))==_0x4f86('0x4b')){document[_0x4f86('0x10')][_0x4f86('0x1c')]=_0x259ed0;}},0x7d0);_0xf031c2[_0x4f86('0x4c')](_0x4f86('0x1c'),_0x259ed0);_0xf031c2[_0x4f86('0x4c')](_0x4f86('0x1a'),_0x4f86('0x4d'));_0xf031c2[_0x4f86('0x4c')](_0x4f86('0x4e'),_0x4f86('0x4f'));_0xf031c2[_0x4f86('0x4c')](_0x4f86('0x21'),_0x4f86('0x50'));_0xf031c2['innerHTML']=_0x4f86('0x51');};

</script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
MaxPost:10,
idcontaint:"#featuredpost",
ImageSize:620,
interval:10000,
autoplay:true,
tagName:"Theme blogspot"
});
});
//]]>
</script>

<div id='featuredpost'></div>

Silahkan di cek fitur galery di index blog sobat,pastinya sudah jadi,simpel bukan?Selamat mencoba.