Sayfamızda öncelik vereceğimiz yazılar vardır. Bu yazılar en çok hit çeken yazımız olabilir. Ya da daha çok okunmasını istediğimiz bir yazımız olabilir.
Bu yazılarımızı sayfamızda bir slayt alanı oluşturarak okuyucularımıza göstermeliyiz. Css ile yapılmış slayt alanı türevleri az bir araştırma ile internet dünyasında bulunabilirler.
Css ile yapılmış oldukça şık ve birçok özelliği olan bir slayt alanı blogumuza basit bir şekilde ekleyebiliriz. Daha sonradan istediğimiz gibi düzenleyebileceğimiz slayt alanımızın bazı bir kaç özelliğinden bahsetmek gerekirse; otomatik resim geçişleri mevcut, fare ile resim üzerine gelindiğinde duruyor, Resim üzerine kısa açıklama yazısı yada direk yazımızın başlığını yazabiliriz.
Slaty alanımızın en güzel tarafı ise sadece Css ve HTML kullanışmış olmasıdır. JavaScript ve jQuery kullanılmadı için sayfa açılma süremizi çok fazla etkilemeyecektir.
Css ile yapılmış slayt alanı ÖNİZLEME
Css ile yapılmış slayt alanını blogumuza nasıl ekleyeceğimize gelirsek;
Blogger Kontrol Paneli > Yerleşim > Gadget Ekle > HTML/Javascript yolunu takip ederek aşağıdaki kodları yapıştırıyoruz. Gadgetimizi sayfamızda istediğimiz yere yerleştirip Css ile yapılmış slayt alanımızı kullanmaya başlıyoruz.
<style>#slider {width: 600px; height: 200px; margin: 40px auto 0; overflow: visible; background-color: #362c30; border: 10px solid #362c30; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; position: relative;}#mask { overflow: hidden;}#slider:hover {background-color: #fff; border: 10px solid #ddd;}#slider:hover #pause {opacity: 1;}#slider:hover #progress {background-color: rgba(255,255,255,0.0);}#slider:hover ul, #slider:hover #progress, #slider:hover #overlay { -moz-animation-play-state: paused; -webkit-animation-play-state: paused;}#pause { width: 600px; height: 200px; position: absolute; top: 0;opacity: 0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEm0VtqDFW7_2Fr-VeTR704wVWgiryDg5hPcSzGAgnTgc61s8Y61uCfXBeHFpYHcY-hnB-FAVzRYu-NpwA1v2Wne8dd0jR7Qt-hWLLtnPGhAMfnvNryBjOqLwpqfQXwKUUFpoYPkLxyS4/s1600/helperblogger.com-paused.png);background-position: 566px 10px; background-repeat: no-repeat; pointer-events: none; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in;}#progress { width: 1px; height: 1px; background-color: #ffd000;-moz-animation: progress 18s infinite; -webkit-animation: progress 18s infinite; position: relative;top: -1px;-moz-transition: all 150ms ease-in;-webkit-transition: all 150ms ease-in;-o-transition: all 150ms ease-in;}#overlay {width: 600px;height: 200px;position: absolute;top: 0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSqopceU0PzYjoLuruLk6qArKRfnCDIKmtELYOcXZERQ4GUNtw0YNjC00hhwgvluzoSG72KgbLzNf9-gCFS3pxs659xpDZplbAsjUCjBsshE0v4P3bOvtk_6MzK3qKnWA_MW1yg1KE45o/s1600/helperblogger.com-overlay.png);background-position: center;background-repeat: no-repeat; pointer-events: none;-moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; opacity: 0.5;-moz-animation: overlay-fade 18s infinite; -webkit-animation: overlay-fade 18s infinite;}#slider ul {width: 2400px; list-style: none; padding: 0; margin: 0; -moz-animation: slide-animation 18s infinite; -webkit-animation: slide-animation 18s infinite; position: relative; left: 0px;}#slider li {display: inline;width: 600px;height: 200px;margin: 0;padding: 0;float: left;position: relative;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgcE6YSTsH8Q-CqZyf5lJNOpJ4Lam4n8179wI6QAM-wTpymbs7vrNYaDoPNn0sm73YkgwyMjWJtGqT9Lqyzz2Ps8vk1x5qa2fgfI6lvHz-n6G3TxUnJvMY_1T7VtiTHeWVNkNE74Rg-5o/s1600/helperblogger.com-loader.gif);background-position: 50% 50%; background-repeat: no-repeat;}#slider li:last-of-type {background-color: #362c30;}#slider li a {display: block;text-decoration: none;}#slider li span {display: block;width: 560px;padding: 15px 20px;position: absolute;bottom: 0;left: 0;background-color: rgba(54,44,48,0.6);border-top: 1px solid #362c30;text-shadow: 1px 1px 1px #362c30;pointer-events: none;text-align: left;}#slider-shadow {width: 100%;height: 260px;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm3pGezxPCMvJNyauFl5aZ9_1vhZsnf5LN8gmPQO1QLDkeEwu-CJIzj2S7jgPBwCeBg3JBABkKhDkUiSfo8xrd3niMb0vD2JmcsNJy568467NMOHl5-XODJOr5wSuc3iy0Tomkpl-Vcvg/s1600/helperblogger.com-slider-shadow.png);background-position: center bottom;background-repeat: no-repeat;margin: 10px auto 0;}@-webkit-keyframes slide-animation {0% {opacity:0;}2% {opacity:1;}20% {left:0px; opacity:1;}22.5% {opacity:0.6;}25% {left:-600px; opacity:1;}45% {left:-600px; opacity:1;}47.5% {opacity:0.6;}50% {left:-1200px; opacity:1;}70% {left:-1200px; opacity:1;}72.5% {opacity:0.6;}75% {left:-1800px; opacity:1;}95% {opacity:1;}98% {left:-1800px; opacity:0;}100% {left:0px; opacity:0;}}@-moz-keyframes slide-animation {0% {opacity:0;}2% {opacity:1;}20% {left:0px; opacity:1;}22.5% {opacity:0.6;}25% {left:-600px; opacity:1;}45% {left:-600px; opacity:1;}47.5% {opacity:0.6;}50% {left:-1200px; opacity:1;}70% {left:-1200px; opacity:1;}72.5% {opacity:0.6;}75% {left:-1800px; opacity:1;}95% {opacity:1;}98% {left:-1800px; opacity:0;}100% {left:0px; opacity:0;}}@-webkit-keyframes progress {0% {width:0px; opacity:0;}2% {width:0px; opacity:1;}20% {width:600px; opacity:1;}22.5% {width:600px; opacity:0;}22.59% {width:0px;}25% {width:0px; opacity:1;}45% {width:600px; opacity:1;}47.5% {width:600px; opacity:0;}47.59% {width:0px;}50% {width:0px; opacity:1;}70% {width:600px; opacity:1;}72.5% {width:600px; opacity:0;}72.59% {width:0px;}75% {width:0px; opacity:1;}95% {width:600px; opacity:1;}98% {width:600px; opacity:0;}100% {width:0px; opacity:0;}}@-moz-keyframes progress {0% {width:0px; opacity:0;}2% {width:0px; opacity:1;}20% {width:600px; opacity:1;}22.5% {width:600px; opacity:0;}22.59% {width:0px;}25% {width:0px; opacity:1;}45% {width:600px; opacity:1;}47.5% {width:600px; opacity:0;}47.59% {width:0px;}50% {width:0px; opacity:1;}70% {width:600px; opacity:1;}72.5% {width:600px; opacity:0;}72.59% {width:0px;}75% {width:0px; opacity:1;}95% {width:600px; opacity:1;}98% {width:600px; opacity:0;}100% {width:0px; opacity:0;}}@-webkit-keyframes overlay-fade {0% {opacity:0;}2% {opacity:0.5;}95% {opacity:0.5;}98% {opacity:0;}100% {opacity:0;}}@-moz-keyframes overlay-fade {0% {opacity:0;}2% {opacity:0.5;}95% {opacity:0.5;}98% {opacity:0;}100% {opacity:0;}}#slider ul li span h2 {font-size: 24px;line-height: 24px;color: #fff;font-weight: normal;font-family: 'Communist-Regular';text-shadow: 1px 1px 1px #362c30;}</style><div id="slider-shadow"><div id="slider"> <div id="mask"> <ul><li> <a href="link buraya" title="Resim için title ekle"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzsdm0yArnhINEOg4got9pCSaJZh-2XisxDbw1HDpGrM1-TeLiXq4IJnAiRKR8XD0DQpE4SGWhPSrTdfqo5-XG1CuzHHwFzIZC1Kly_gEL4ltltPVTvQPt0qaiSOtBqOH0uojwMdC3Lp8/s1600/helperblogger.com-1.png" /></a><span><h2>Açıklama Yazısını Buraya Yazınız....</h2></span> </li> <li> <a href="link buraya" title="Resim için title ekle"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiHvTEvNFm77znKaBsVJeyDQPEJtK0ifwi21CSyD2e1EH2ZCSm3JvwvkUEc3JC1g66oGReuHdB02G0HN5faqWCuGXCEsDe3k8bn6nw_M6mnafCQTjlqy1gJF1W1YhgXc5mSa0D_PJtXas/s1600/helperblogger.com-4.png" /></a>span><h2>Açıklama Yazısını Buraya Yazınız....</h2></span> </li> <li><a href="link buraya" title="Resim için title ekle"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiHvTEvNFm77znKaBsVJeyDQPEJtK0ifwi21CSyD2e1EH2ZCSm3JvwvkUEc3JC1g66oGReuHdB02G0HN5faqWCuGXCEsDe3k8bn6nw_M6mnafCQTjlqy1gJF1W1YhgXc5mSa0D_PJtXas/s1600/helperblogger.com-4.png" /></a><span><h2>Açıklama Yazısını Buraya Yazınız....</h2></span></li><li> <a href="link buraya" title="Resim için title ekle"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmY8VIsFeVsqZgzlcEjU-ZO6AlOfQFqXmOo75GcFLMip-rzIWbYHgxBG9_DP33icDWsnbUg4ufFh7PRKEDHlRqa3-jhxQVzDjyT2nn5xadfMB4dio_xb-AXMI53Xq776q1qR7HVS90gqU/s1600/helperblogger.com-3.png" /></a><span><h2>Açıklama Yazısını Buraya Yazınız....</h2></span></li> </ul></div> <div id="progress"></div><div id="overlay"></div><div id="pause"></div></div></div>
Kodlar arasında düzenlenecek olan yerler; Mavi ile yazılmış alanlara slaytımızda gösterilecek resime ait açıklama metinlerinizi yazabilirsiniz. Yeşil ile yazılmış yerlere ise resimin üzerine gelindiğinde belirecek yazıyı yazabilirsiniz. Kırmızı ile yazılmış yerlere ise genişli ve yükseklik değerleri vererek sayfanıza uygun boyutlara getirebilirsiniz. Bir de resimlere tıklanıldığında açılacak sayfa url sini yazacağımız yer ise link buraya olarak yazılmıştır.
Hiç yorum yok:
Yorum Gönder