CSS3 yardımı ile Popüler Yayınlar Gadget'ı yapımı

CSS3 yardımı ile Popüler Yayınlar Gadget'ı yapımı film izle ,CSS3 yardımı ile Popüler Yayınlar Gadget'ı yapımıdizi izle ,
ful hd sinema filmi , sinemalarda film,tek parça film izle ,2013 film izle ,2012 sinema filmi

İşte popüler yayınlar gadget'ı için güzel bir stil daha. Bu stili uygulamak için ne javascript ne de başka bir eklentiye gerek var. Sadece CSS3'ün güzel nimetlerinden faydalanarak bu gadget'ı oluşturuyoruz.

Öncelikle Tasarım kısmına gidip;

]]>

Kodunu bulup öncesine aşağıdaki kodları ekliyoruz.

#PopularPosts1{max-width:300px} #PopularPosts1 dd{float:left;border-bottom:none;margin:8px 8px 0 8px;background:none;display:block;padding:0} #PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);} #PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

Tasarımınızda bir Popüler Yayınlar gadget'ı yoksa ekleyin, varsa aşağıdaki gibi olmasına dikkat edin.

Son olarak, Tasarımda Widget Şablonlarını Genişlet kutusunu işaretlemeden aşağıdaki kodu buluyoruz.

Şununla Değiştiriyoruz