Nrelate eklentisini Css kod ile özelleştir

nRelate, Linkwithin benzer yazılar eklenti uygulamasının benzeri olarak karşımıza çıkan çok fazla özelleştirilebilme özelliklerine sah...

...

nRelate, Linkwithin benzer yazılar eklenti uygulamasının benzeri olarak karşımıza çıkan çok fazla özelleştirilebilme özelliklerine sahip, wordpress sitelerinin de ilk tercih nedeni olan kullanışlı ilgili yazılar eklentilerinden biridir. nRelate site görünümünü değiştirmesi nedeni ile daha önce yazdığım yazılarımı aşağıdaki yazı başlık linklerine tıklayarak okuyabilirsiniz. Kullanmakta olduğunuz eklentiden daha fazlasını bekliyor özelleştirme seçenekleri sizi etkiliyor ise, nRelate eklentisinin nasıl kurulacağını okumanızı tavsiye ederim.
nRelate eklentisinin kurulum aşamalarında sorun yaşarsanız yorum penceresini kullanarak sorunlarınızı belirterek en kısa sürede yanıtlarını alabilirsiniz. nRelate eklentisi sitenizde kurulu ise eklentiniz için hazırlamış olduğum CSS kodlarını kullanarak eklentinize stil uygulayın. nRelate, Huffingtonpost stil’inde ki benzer yazılar görseliniz ile neler yapılabilir aşağıda inceleyelim. Huffingtonpost stil’i ilgili yayınlarınızın dikey olarak görünümünden oluşmaktadır. nRelate ayarlarından görünüm post miktarını seçerek ;

1. Benzer yazılar yazı karakteri, rengi ve vurgu rengini,

2. Maus’unuzu resim üzerine getirdiğinizde değişen resim şeklini,

3. Bağlantı link rengini

4. İçerik bağlantı vurgularının değişimini görebilirsiniz.

Şu anda bu yazıyı okuyorsanız en altta “Bunlarda ilginizi çekebilir” nRelate eklentisini görebilirsiniz.

İlgili yazılar :

nRelate eklenti Css kodlarını sitenize ekleyebilmeniz için ilgili adımlar :

1. Blogger şablon'unuzda aşağıdaki kod’u bulun.

</head>

2. Bulduğunuz kodun hemen üstüne aşağıdaki kodları ekleyin.

<style type="text/css">

/* ------Customized nRelate Related Post Widget CSS Codes------ */

.nr_post_title { color:#39AFEA !important !important;font-size:13px !important;font-family:'Lucida Sans Unicode','Lucida Grande','Lucida Sans','DejaVu Sans Condensed',sans-serif !important;}

.nr_post_title:hover { color:#EAB515 !important;}

.nr_title {font-family:Cambria,'Times New Roman','Nimbus Roman No9 L','Freeserif',Times,serif !important;font-size:20px !important;color:#D66A22 !important;}

.nr_title:hover { color:#22D633 !important;}

.nr_img { border-radius:none!important; }

.nr_panel:hover .nr_img {outline:1px solid #3952C0 !important;-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;-moz-transition:all .1s ease;

-webkit-transition:all .1s ease;-o-transition:all .1s ease;transition:all .1s ease;}

/* ------End CSS code------- */
</style>

Özelleştirme :

⇒ #D66A22 : Başlık metni , varsayılan nRelate başlığının rengini değiştirir.

Bunlarda ilginizi çekebilir, onaltılık renk kodu ile değişebilirsiniz.

⇒ #22D633 : nRelate başlık metni üzerinde iken görülecek olan renk.

⇒ #39AFEA : Yazı başlığının rengini değiştirir.

⇒ #EAB515 : Yazı başlık metni üzerinde iken görülecek olan renk değişimi.

⇒ #3952C0 : Fare üzerinde resim görüntü rengi değişimi.

Hex Color Finder proğramı birkaç tıklama ile hızlı ve kolay renk ve renk kodlarını bulan Windows RGB renk setleri ve bir rengin onaltılık değer kodlarını alabileceğiniz işlevi büyük arayüzü küçük ücretsiz bir araçtır. Kullanmanızı tavsiye ederim.