Haberci Pro teması, ilk çıkan versiyondan daha profesyonel, kaliteli, ana sayfada bol içerikli olarak geliştirildi. Adsense reklam yerleşimi uygun biçimde destore edildi. Bunun yanı sıra, yine ana sayfada, kategorilerin son konuları çekilerek, ziyaretçinin okuma kapasitesi artırıldı. Ana sayfa java scriptler ile donatıldı. Son konular, çok okunanlar, en çok oylananlar, daha önce yazılmış konular bunların bir parçası..

Haberci Pro temasının bir takım özellikleri;

• Haberci temasında kullandığım mouseover slide son konular (daha düzgün, profesyonel, tüm tarayıcılarda çalışır biçimde),
• Mouseover slide son konuların yanında herhangi bir kategorinin son yazı başlıkları,
• Sidebarda mükemmel bir duruşu ile tüm konuları resimli gösteren script,
• Yine sidebarda resimli son 5 başlık,
• Ana sayfada kategorilerin resimli son yazıları,
• Sol sidebarda yine herhangi kategorinin resimli son 7 yazısı,
• En çok okunan 10 yazıyı script ile resimli bir şekilde, kaç kere okunduğunun gösterimi,
• Footer’ın hemen üstünde son başlıklar, son yorumlar, resimli sponsor şeklinde bir görsellik oluşturuldu,
• Single.php dosyası geliştirilerek bir takım özellikler eklendi,
• Yazıyı paylaşım için sosyal ağ sitelerinin resimli linkleri v.s,
• Kategori sayfası geliştirildi..

Daha çok özelliğe sahip olan Haberci Pro temasını satın almak isteyenler, iletişim sayfasından bilgi alabilirler. Şu an için temanın resmini ekliyorum. Kurulum, teknik destek ve düzenleme ücretsizdir. İlgilenen arkadaşları bekliyorum.

	Haberci Pro Teması Ana sayfa gösterimi (Resime tıkladığınızda temaya ait tam boyutu göreceksiniz.)
	Haberci Pro Teması tekil sayfa – single.php gösterimi (Resime tıkladığınızda temaya ait tam boyutu göreceksiniz.)
	Haberci Pro Teması kategori sayfası gösterimi (Resime tıkladığınızda temaya ait tam boyutu göreceksiniz.)

WordPress Son Dakika Haber Slider, blogunuzda yer alan makalelerin başlıklarını ve yazılma tarihlerini ajax sistemi ile rss’nizden çekerek son dakika şeklinde gösterilmesini sağlar. Haber sitelerinde genelde görmüşsünüzdür.

Bunun için öncelikle Google Api key sayfasından blogunuz için bir api key elde edin. Google size bir kod verevektir. Bu kodu şimdilik saklayın.

Daha sonra son-dakika.rar dosyasını indirin. İçinde;

• gajaxscroller.js,

• gfeedfetcher.js,

• images,

dosya ve klasörleri bulunmaktadır. Bunlardan, gajaxscroller.js ve gfeedfetcher.js dosyalarını kullandığınız tema klasörüne yükleyin. İmages klasörünün içinde bulunan resimleri ise yine kullandığınız temanın images klasörüne yükleyin. Unutmayın sadece içindeki resimleri klasörü değil.

Temanızın header.php dosyasını bir metin editörü yardımcısı ile açalım. (Notepad++ gibi). </head> tagını bulalım ve hemen üstüne aşağıdaki kodu yapıştıralım.

<script type=”text/javascript” src=”http://www.google.com/jsapi?key=SENİN-APİ-KEY“></script>
<script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/gfeedfetcher.js”></script>
<script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/gajaxscroller.js”>

Evet, Google’dan aldığımız ve size saklayın dediğim api keyimizi SENİN-APİ-KEY yazdığım bölüme ekleyin. Header.php dosyamızı kayıt edip kapatalım.

Şimdi geldi css dosyamızı oluşturmaya. Kullandığınız temanın style.css dosyasını açalım. Aşağıda vereceğim css kodlarını style.css dosyanızın en altına yapıştırın ve kayıt edip kapatalım.

.titlefield{
text-decoration: none;
}
.labelfield{
color:brown;
font-size: 90%;
}
.datefield{
color:gray;
font-size: 90%;
}
#example1{
width: 350px;
height: 16px;
padding: 6px;
}
.code{
color: red;
}
.son-dk {
width: 468px;
height: 30px;
background: url(images/son-dk.png) no-repeat;
}
.son-haber {
margin-left: 110px;
}
.son-haber a{
color: #000;
font-weight: bold;
}
.son-haber a:hover{
color: #c0c0c0;
}

Son olarak son dakika haberlerini göstermek istediğimiz dosyayı açalım. Ben css düzenlemesi olarak index.php üzerinde çalıştım. Sizde temanızın index.php dosyasını açın ve şu kodu bulun.

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

Hemen üstüne aşağıdaki kodları yapıştırın ve kayıt edip kapatın.

<div class=”son-dk”>
<div class=”son-haber”>
<script type=”text/javascript”>
var cssfeed=new gfeedpausescroller(“example1″, “example1class”, 2000, “_new”)
cssfeed.addFeed(“CSS Drive”, “http://www.emrahca.com/feed”) //Specify “label” plus URL to RSS feed
cssfeed.displayoptions(“date”) //show the specified additional fields
cssfeed.setentrycontainer(“div”) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, “date”) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div>

WordPress Son Dakika Haber Slide İndir

Tüm işlem yaptığınız dosyaları ftp ile sunucuya gönderin. Ve ana sayfaya gidin bakalım bu güzel uygulamayı görebilecek misiniz? İyi eğlenceler.

Bu özellik WordPress’te yazdığınız son 10 makaleyi veritabanından çeker ve özel alanlardan eklediğiniz o konuya ait resimleri, mouse ile konu başlığı üzerine gelindiğinde şatafatlı biçimde yan tarafında gösterir. Bu bir eklenti değildir. Ufak ve kolay bir kurulum ile hazır hale getirmeniz mümkündür.

WordPress Mouseover Slide Haber kurulum ve açıklama:

Özelliğin üzerine oturtturulan tasarımın boyutu soldan sağa 468px dir. Bu boyuttan daha küçük bir yere kullanıldığında görüntü olarak bozulacaktır. O yüzden bu boyuttan küçük tablolarda kullanmamanızı öneririm. Ve hiç bir koda müdahele etmemenizi öneririm. Aksi takdirde özellik çalışmayabilir.

Öncelikle aşağıdakı indir linkinden özelliğimizin dosya ve resimlerini indirelim. İndirdiğimiz slider.rar dosyasını açalım. İçerisinde asm.php dosyası ve images klasörü bulunmaktadır.

İçinden çıkan asm.php dosyasını bir metin editörü yardımı ile açalım. Ve aşağıdaki kodu bulalım;

$yol     = ‘./wp-content/themes/tema-isminiz/images/’;

bu kodda kalın olarak belirttiğim “tema isminiz” kısmana kendi kullandığınız temanın ismini yazın.

Aşağıdaki kodu bulalım;

background-image   :url(\’wp-content/themes/tema-isminiz/images/slide-bg.png\’);

bu kodda kalın olarak belirttiğim “tema isminiz” kısmana kendi kullandığınız temanın ismini yazın.

Aynı şekilde ve son olarak aşağıdaki kodu bulalım;

background-image   :url(\’wp-content/themes/tema-isminiz/images/asm.gif\’);

bu kodda da kalın olarak belirttiğim “tema isminiz” kısmana kendi kullandığınız temanın ismini yazın ve kaydedin.

Bu işlemlerin ardından asm.php dosyasını kullandığınız temanın içine ftp aracı yardımı ile yükleyin.Aynı zamanda images klasörünü açıp, içindeki resimleri, yine kullandığınız temanın images klasörüne yükleyin.

Özelliğin ana sayfada gösterimi:

Yükleme işi bittikten sonra sıra geldi bu özelliği ana sayfamızda gösterilmesine. İndex.php dosyamızı açalım. Ve içerisinde yer alan bu kodu bulalım;

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

bu kodun hemen üstüne asm.php dosyamızı çağırmak için bu kodu yapıştırın;

<?php include (TEMPLATEPATH . “/asm.php”); ?>

Yazı başlıkları uzun ise karakterleri kısaltmak için;

asm.php dosyasını açın ve içinde;

.$ziya[post_title].

kodunu bulun. Bu kodu silip, bunun yerine aşağıdaki kodu yapıştırın ve kaydedin.

.substr($ziya[post_title],0,30).

Buradaki 30 değeri başlıklarınızın ne kadar harf kadar görüneceği anlamına gelir. Bu değeri kendinize göre değiştirin.

Bu işlemin ardından herhangi bir yanlış yapmadıysanız, blogunuzun ana sayfasında slide haber görülecektir. Sorun ve tavsiyeleriniz için yorumlarınızı bekliyor olacağım.

WordPress Mouseover Slide İndir