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.
0 komentar: