Merhaba arkadaşlar elimden geldiği kadar sizlere yararlı olacak içerikler paylaşmaya devam ediyorum. Bu konuda sizlere nasıl öne çıkan slayt tarzına benzer içerikler yapılır konusunda sizlere kodlar vereceğim. Bu kodlar sayesinde Blogger sitenize görsel anlamda daha güzel bir hale getirebilirsiniz.


İlk önce tema panelimize gidiyoruz. Ardından tema düzenleme kısmından kısmını aratarak ya biliyorsanız hemen üstüne ekleyin

/* Featured Post */
#feature-posts-section{max-height:350px;overflow:hidden;margin:0 auto 20px auto}
.feature-post a{font-size:1em;color:#fff;}
.feature-post a:hover{color:#fff;}
.main-post.feature-post a{margin:0;font-size:17px}
.feature-post .col-post{float:left;position:relative;overflow:hidden;margin:0 20px 0 0}
.feature-post .secondary-post{background:#dadada;width:32%;margin:0 0 20px 0;transition:all .4s}
.feature-post .main-post{background:#dadada;width:65.8%;padding:0;transition:all .4s}
.feature-post span{background:#95a5a6;color:#fff;font-style:normal;position:absolute;font-size:11px;font-weight:700;text-transform:uppercase;line-height:1.4;padding:6px 8px;top:0;left:0;z-index:2}
.feature-post img{height:100%;transition:all .5s}
.feature-post .main-post img{height:350px;width:100%;object-fit:cover;}
.feature-post .secondary-post img{height:165px;object-fit:cover;width:100%;}
.feature-post .main-post:hover img,.feature-post .secondary-post:hover img{backface-visibility:hidden;transform-style:preserve-3d;}
.feature-post header{position:absolute;background:rgba(0,0,0,0.3);bottom:-40px;left:0;right:0;padding:20px;opacity:0;visibility:hidden;transition:all .4s}
.feature-post .main-post:hover header,.feature-post .secondary-post:hover header{opacity:1;visibility:visible;bottom:0;z-index:2;}
.feature-post header:hover{background:rgba(0,0,0,0.6)}
.feature-post .secondary-post header{padding:15px}
.feature-post header h3{font-size:18px;}
.feature-post h4{font-size:14px;}
@media screen and (max-width:768px) {
#feature-posts-section{display:none}}

Ardından altta verilen kodu yeni bir HTML/JAVASCRİPT widgeti açarak ekleyin

tabi eğer sizde widget menü altında veya blog kayıtlarının bulunduğu alanın üstünde yoksa şu şekilde bir yol izleyebilirsiniz.



gibi bir katman oluşturup ardından alttaki kodu ekleyebilirsiniz.




<script>/*function labelthumbs(t){document.write('
    ');for(var e=0;e'),document.write('
    '+n+'
    '),"featured-slider"==outerclass&&document.write(''+l+'

    '+n+'

    '+A+"
    "),"sub-menu"==outerclass&&document.write('

    '+n+'

    '+A+"
"),document.write(""+endtag)}document.write("")};
// Featured
function removeHtmlTag(e,t){for(var s=e.split("<"),r=0;r")&&(s[r]=s[r].substring(s[r].indexOf(">")+1,s[r].length));return s=s.join(""),s=s.substring(0,t-1)}function sliderposts(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts1<=e.feed.entry.length?maxpost=numposts1:maxpost=e.feed.entry.length;for(var t=0;timgr.length-1&&(j=0),img[t]=imgr[j],s=g,a=s.indexOf("'+l+'

'+o+"