Merhaba arkadaşlar, Datalife Engine'de manşet sistemini yapmaya birlikte öğrenicez bu dersimde
Şimdi arkadaşlar bilindik bi manşet sistemi yok henüz DLE'de ya da ben duymadım
Varsada hep manual.. Benim size anlatacağım otomatik olucak. Konu eklendikçe sizin belirlediğiniz sınırda manşette gösterilecek. Örneğin manşette 5 konu olacak diyelim. Ve her konu eklediğinizde 5. konu kaybolucak. Yerini 4. konu alıcak ve ilk sıraya son açtığınız konu yerleşicek
Ee tabi birde bu jQuery destekli olup kaysa ve kayma efektide biraz farklı olsa hiç fena olmazdı sanırım? İşte bende bunu düşünerekten sizler için hazırladım bu eklentiyi
Aslında izlemeyedeger.net için hazırlamıştım
Madem yaptım dedim başkalarıda yararlansın. Bu yüzden kendi sitemde paylaşıyorum. Aşağıdaki adımları sırası ile yaparsanız sorunsuz kurabilirsiniz.. Hadi başlayalım
Adım 1 - Gerekli İlave Alanları Oluşturalım
Evet arkadaşlar oluşturmamız gereken tek bir ilave alanımız var.
mansetresim - Tek Satır
Bunu
http://www.siteadi.com/admin.php?mod...tion=configure adresindeki siteadi kısmına adresinizi yazarak admin panel ilave alan kısmından yeni alan ekle diyerek oluşturuyoruz.
Adım 2 - main.tpl dosyamızda gerekli yerleri değiştirelim
Kullanacağımız temanın main.tpl dosyasını açıyoruz. Ve manşetin görünmesini istediğiniz yere;
[aviable=main]
<div id="gamesHolder">
<div id="games">
{custom category="1,2,3,4,5,6,7,9,10,11,12,13,14,15,16" template="manset" aviable="main" from="0" limit="10" cache="yes"}
</div>
</div>
<script type="text/javascript">
$('#games').coinslider({ hoverPause: false });
</script>
[/aviable] yukarıdaki kodu yapıştırıyoruz. Şimdi yukarıdaki kodu biraz anlamaya çalışalım.
İlk olarak
[aviable=main][/aviable] içine aldık kodlarımız farkettiyseniz. Bu tag içine alma sebebimiz ise manşet kısmı ana sayfada haricinde hiçbiryerde görünmeyecek. Yani konunun devamına tıkladığımızda manşet kısmı gözükmüyor olacak. Sadece ana sayfada gözükücek
Bu yüzden aviable tagımızı kullandık.
{custom ..} Burada ise arkadaşlar
category ye yazılan sayılar oluşturduğunuz site kategorilerinin ID'leridir. Bu kısma hangi kategorilerden görüntüleceyeceğini yazabilirsiniz. Benim size tavsiyem ne kadar kategoriniz varsa hepsinin ID'sini yazmanız. (,) virgüller ile ayırarak yazmayı unutmayın.
template kısmı ise manşete özel bir .tpl dosyası oluşturuyoruz. Oluşturduğumuz bu .tpl dosyasında kullanabieceğimiz DLE tagları (short-stroty.tpl ve full-story.tpl) tagları ile sınırlıdır unutmayın.
limit kısmı ise gösterilecek konu sayısını belirler. Kaç yazarsanız o kadar konu gösterektir. Örneğin son 10 konu son 5 konu gibi..
main.tpl dosyamızda HEAD tagımızın arasına alttaki kodu yapıştırın.
<script type="text/javascript" src="http://www.siteadi.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.siteadi.com/coin-slider.js"></script>
siteadi.com kısmına site adresinizi yazın ve gerekli JS dosyalarını hemen alttan indirip ftp ana dizininize atın.
js.rar [26,58 Kb]
main.tpl dosyamızla işimiz bitti.
Adım 3 - manset.tpl dosyamızı oluşturmak ve düzenlemek
temamızdaki short-story.tpl dosyasını kopyasını oluşturun adını manset.tpl olarak değiştirin. Ve not defteri ile açarak aşağıdaki kodları mevcut kodlarla değiştirip kaydedin.
[full-link]
<img src="[xfvalue_mansetresim]" alt="{title}" />
<span>{title}</span>
[/full-link] Evet arkadaşlar manset.tpl dosyamızda tamam.
Adım 4 - Gerekli CSS Kodları
temamızda css klasörümüzdeki style.css dosyamızın içine aşağıdaki css kodlarınıda yerleştirelim.
.coin-slider { overflow: hidden; position: relative; width: 653px;}
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title { width: 653px; padding: 10px; background-color: #000000; color: #FFFFFF; }
.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }Artık manset sistemimiz hazır. Sizin yapacağınız tek şey yeni konu açarken mansetresim adında oluşturduğumuz ilave alan kısmına manset resminin adresini eklemeniz olacaktır
Gerikalanı kendisi halledicek.
Unutmayın arkadaşlar ekleyeceğiniz manşet resmi manset kısmının genişlik ve yüksekliğine uygun olmalıdır. Ne az ne çok. 600x300'se manset kısmınız ekleyeceğiniz resimde 600x300 olmalı. MANŞETİN BOYUTU AYARLAMAK
manşet kısmının boyutunu ayarlamak isterseniz
coin-slider.js dosyasını not defteri ile açın ve aşağıdaki kodları bulun;
$.fn.coinslider.defaults = {
width: 653, // width of slider panel
height: 300, // height of slider panel
spw: 7, // squares per width
sph: 5, // squares per height
delay: 3000, // delay between images in ms
sDelay: 30, // delay beetwen squares in ms
opacity: 0.7, // opacity of title and navigation
titleSpeed: 500, // speed of title appereance in ms
effect: '', // random, swirl, rain, straight
navigation: true, // prev next and buttons
links : true, // show images as links
hoverPause: true // pause on hover
}; yukarıdaki kodda width: 653 yazan kısım genişliğinin 653px olduğunu belirtiyor. Height 300 yazan kısım yüksekliğinin 300px olduğunu belirtiyor. Buradan gerekli yükseklik ve genişlik ayarını yapıp kaydedip tekrar ftp'nize atabilirsiniz.
Not: manset ile ilgili yaptığınız her değişiklikte ftp'nizde engine/cache/ kısmından custom_cat_234567910111213141516template_mansetfro m_0limit__0.tmp dosyasını silmeniz gerekiyor ki değişiklikleri görebilesiniz..
Takıldığınız yerde sormayı ihmal etmeyin.
Gerekli Teşekkürler
1)
http://www.matematiktutkusu.com - Manşet sistemini çözmemde büyük yardımı dokunan bu sitedeki anlatımcı kardeşime sonsuz teşekkürler.
2)
http://workshop.rs/projects/coin-slider/ - Kullandığımız manşet sistemi bu site tarafından geliştirilmiş. Bu siteyede sonsuz teşekkürler.
Bu anlatımımda buraya kadardı, manşet sisteminin demosunu görmek isterseniz;
izlemeyedeger.net adresini ziyaret edebilirsiniz.
Herkese kolay gelsin / Tayfun Erbilen