Renkli Son Yayınlanan Yayınlar Widget Tasarımı - Bu yazımızda blog sitenizde renkli widget tasarımı ekleme hakkında öğretici ipuçları paylaşıyoruz. Oldukça kullanışlı ve ilginç olan renkli widget tasarımı ekran boyutuna duyarlıdır. Öncelikle widget tasarımlarına göz atmak için aşağıdaki butonlara tıklayın.
Renkli widget renk sürümü 1
Renkli widget renk sürümü 2
Renkli widget tasarımını blogunuza eklemek istiyorsanız aşağıdaki adımları takip edin.
Renkli Son Yayınlanan Yayınlar Widget Tasarımı
1- Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör (kodları) sayfasını açın. CTRL+F yardımıyla ]]></b:skin> veya </style> kodunu bulun ve aşağıda eklemek istediğiniz stil 1 veya stil 2 CSS kodlarını ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin.
Renkli widget renk sürümü 1 CSS
/* Renkli Widget Stil 1 */
.uxfeatured{display:flex;margin:0 auto 20px auto;width:100%;overflow:hidden;max-width:970px}
.uxfeatureditem{background:rgba(0,0,0,0.02);display:block;position:relative;float:left;overflow:hidden;height:220px;width:25%}
.uxfeatureditem .uxcontent{background:#3498db;display:block;position:absolute;z-index:6;bottom:0;left:0;right:0;transform:translate(0,60px);opacity:0;visibility:hidden;transition:all .3s}
.uxfeatureditem:hover .uxcontent{opacity:1;visibility:visible;transform:translate(0,0)}
.uxfeatureditem .uxcontent h3{font-size:14px;color:#fff;padding:15px;margin:0;text-align:center}
.uxfeatureditem .feat-img{width:100%;height:100%;background-size:cover;background-position:50%}
.uxfeatureditem a{display:block;color:rgba(255,255,255,1);position:relative;vertical-align:bottom;z-index:5;height:100%;transition:all .3s}
.uxfeatureditem a:before{content:'';background:#3498db;width:100%;height:100%;position:absolute;z-index:3;top:0;opacity:0.9;transition:background 0.3s linear,opacity 0.3s linear}
.uxfeatureditem.first a:before,.uxfeatureditem.first .uxcontent{background:#56a8df}
.uxfeatureditem.second a:before,.uxfeatureditem.second .uxcontent{background:#e49148}
.uxfeatureditem.third a:before,.uxfeatureditem.third .uxcontent{background:#5bccb6}
.uxfeatureditem.fourth a:before,.uxfeatureditem.fourth .uxcontent{background:#f5b44c}
.uxfeatureditem a:hover:before{opacity:0.1;}
.uxfeatureditem a:after{content:'textsms';font-family:Material Icons;position:absolute;z-index:3;font-size:3rem;top:32%;left:0;right:0;bottom:0;color:#fff;text-align:center;transform:translate(0,0);animation:jellygrav .6s linear;opacity:1;visibility:visible;transition:all .3s}
.uxfeatureditem:hover a:after{opacity:0;visibility:hidden;transform:translate(0,-60px)}
@media screen and (max-width:826px){
.uxfeatureditem{width:50%}
.uxfeatureditem.third,.uxfeatureditem.fourth{display:none}}
@media screen and (max-width:641px){
.uxfeatureditem{width:100%}
.uxfeatureditem.second,.uxfeatureditem.third,.uxfeatureditem.fourth{display:none}}Renkli widget renk sürümü 2 CSS
/* Renkli Widget Stil 2 */
.uxfeatured{display:flex;margin:0 auto 20px auto;width:100%;overflow:hidden;max-width:970px}
.uxfeatureditem{background:rgba(0,0,0,0.02);display:block;position:relative;float:left;overflow:hidden;height:220px;width:25%}
.uxfeatureditem .uxcontent{background:#3498db;display:block;position:absolute;z-index:6;bottom:0;left:0;right:0;transform:translate(0,0);opacity:1;visibility:visible;transition:all .3s}
.uxfeatureditem:hover .uxcontent{opacity:0;visibility:hidden;transform:translate(0,60px)}
.uxfeatureditem .uxcontent h3{font-size:14px;color:#fff;padding:15px;margin:0;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.uxfeatureditem .feat-img{width:100%;height:100%;background-size:cover;background-position:50%}
.uxfeatureditem a{display:block;color:rgba(255,255,255,1);position:relative;vertical-align:bottom;z-index:5;height:100%;transition:all .3s}
.uxfeatureditem a:before{content:'';background:#3498db;width:100%;height:100%;position:absolute;z-index:3;top:0;opacity:0;transition:background 0.3s linear,opacity 0.3s linear}
.uxfeatureditem.first a:before,.uxfeatureditem.first .uxcontent{background:#56a8df}
.uxfeatureditem.second a:before,.uxfeatureditem.second .uxcontent{background:#e49148}
.uxfeatureditem.third a:before,.uxfeatureditem.third .uxcontent{background:#5bccb6}
.uxfeatureditem.fourth a:before,.uxfeatureditem.fourth .uxcontent{background:#f5b44c}
.uxfeatureditem a:hover:before{opacity:0.9;}
.uxfeatureditem a:after{content:'textsms';font-family:Material Icons;position:absolute;z-index:3;font-size:3rem;top:32%;left:0;right:0;bottom:0;color:#fff;text-align:center;transform:translate(0,-60px);animation:jellygrav .6s linear;opacity:0;visibility:hidden;transition:all .3s}
.uxfeatureditem:hover a:after{opacity:1;visibility:visible;transform:translate(0,0)}
@media screen and (max-width:826px){
.uxfeatureditem{width:50%}
.uxfeatureditem.third,.uxfeatureditem.fourth{display:none}}
@media screen and (max-width:641px){
.uxfeatureditem{width:100%}
.uxfeatureditem.second,.uxfeatureditem.third,.uxfeatureditem.fourth{display:none}}2- Renkli widget tasarımında material simgeler bulunduğundan aşağıdaki material simge CSS bağlantısını </head> kodunun bir satır üzerine ekleyin.
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'/>Eğer blogunuzda Fontawesome simge CSS bağlantısı kullanıyorsanız, CSS kodları arasında bulunan aşağıda belirtilen yerleri değiştirin.
.uxfeatureditem a:after{content:'textsms';font-family:Material Icons;position:absolute;z-index:3;font-size:3rem;top:32%;left:0;right:0;bottom:0;color:#fff;text-align:center;transform:translate(0,0);animation:jellygrav .6s linear;opacity:1;visibility:visible;transition:all .3s}3- Aşağıdaki jQuery kodunu </body> kodunun bir satır üzerine ekleyin.
<script type='text/javascript'>
//<![CDATA[
// Renkli Widget jQuery
function getPostUrl(a){for(var b=0;b<a.link.length;b++)if("alternate"==a.link[b].rel){var c=a.link[b].href;return c}}function getPostPublishDate(a){var b=a.published.$t,c=b.split("-")[2].substring(0,2),d=b.split("-")[1],e=b.split("-")[0],f=["January","February","March","April","May","June","July","August","September","Octobor","November","December"],g=f[d-1],h=g+" "+c+", "+e;return b?h:""}function getPostCategory(a){var b=a.category;b&&(b=a.category[0].term);var c='<div class="category-wrapper"><a class="category" href="/search/label/'+b+'?max-results=10">'+b+"</a></div>";return b?c:""}function Slider(a){for(var c=(new Array,""),d=a.feed.entry.length,e=0;e<d;e++){var f=a.feed.entry[e],g=f.title.$t,h=getPostUrl(f),l=(f.author[0].name.$t,getPostPublishDate(f),getPostCategory(f),f.category[0].term),m=a.feed.entry[e].content.$t,n=$("<div>").html(m);if(m.indexOf("//www.youtube.com/embed/")>-1)var o=a.feed.entry[e].media$thumbnail.url,p=o;else if(m.indexOf("<img")>-1)var q=n.find("img:first").attr("src"),p=q;else var p=no_image;0==e&&(c=c+'<div class="uxfeatureditem first"><div class="uxcontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>'),1==e&&(c=c+'<div class="uxfeatureditem second"><div class="uxcontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>'),2==e&&(c=c+'<div class="uxfeatureditem third"><div class="uxcontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>'),3==e&&(c=c+'<div class="uxfeatureditem fourth"><div class="uxcontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>')}slider.html('<div class="uxfeatured">'+c+"</div>"),$(".uxfeatured").find(".feat-img").each(function(){$(this).attr("style",function(a,b){return b.replace("/default.jpg","/mqdefault.jpg")}).attr("style",function(a,b){return b.replace("s72-c","s1600")}).attr("style",function(a,b){return b.replace("s320","s1600")}).attr("style",function(a,b){return b.replace("s400","s1600")}).attr("style",function(a,b){return b.replace("s640","s1600")})})}var slider=$("#uxfeatured .widget-content"),sliderContent=slider.text().trim();"no"!==sliderContent.toLowerCase().trim()&&'"no"'!==sliderContent.toLowerCase()&&""!==sliderContent?"[son]"!==sliderContent?$.ajax({url:"/feeds/posts/default/-/"+sliderContent+"?alt=json-in-script&max-results=4",type:"get",dataType:"jsonp",success:function(a){Slider(a)}}):$.ajax({url:"/feeds/posts/default?alt=json-in-script&max-results=4",type:"get",dataType:"jsonp",success:function(a){Slider(a)}}):$("#slider").remove();
//]]>
</script>4- Son olarak aşağıdaki widget kodunu blogunuzda görünmesini istediğiniz alana ekleyin.
<b:section class='uxfeatureds' id='uxfeatured' showaddelement='yes'>
<b:widget id='HTML97' locked='false' title='' type='HTML' version='1'>
<b:includable id='main'>
<div class='widget-content'>
<data:content/>
</div>
<div class='clear'/>
</b:includable>
</b:widget>
</b:section>Yukarıdaki widget kodunu ekledikten sonra blogunuzu kaydedin. Blogunuzun kumanda panelinde bulunan Yerleşim menüsünden yukarıda eklediğiniz widget içerisine aşağıdaki kodu ekleyin ve kaydedin.
[son]Blogunuzu kontrol ederek renkli son yayınlanan yayınlar widget'inin nasıl çalıştığını görebilirsiniz. Bir blogger eğitici ipucu daha sizinle paylaştık, bizi ziyaret ettiğiniz için teşekkürler.