<style type="text/css">
#top-main{position:relative}
#top-main .widget{border:0;padding:0 0 22px}
#top-main h2{position:absolute;left:-9999px}
#slides li {
display: none;
background-color: white;
padding: 4px;
border: 1px solid #CECECE;
-webkit-border-radius: 3px;
margin-top: 0;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
position: absolute;
}
#slides li:nth-child(1) .overlayx {
background-position: 0 0;
}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:20;margin:0;list-style:none;position:relative}
#slides ul{height:275px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{width:100%;height:100%}
#slides .overlayx {
position: absolute;
top: 0;
left: 0;
border: 4px solid white;
width: 100%;
height: 100%;
z-index: 2;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC6GFpsqPh81TJuSe70fuEeiexQQbuNbz7QyTvLuxMOSAbN9NOm7wPsWbYY1Z_U_nB9VN9VARgGTYqZzmZAIq7giKzCsK69LAu4-taiqR67b5Fc5cp6swp0W1JbHh2IHLLI0jpd_2sCZkC/s0/linebg-fade.png);
background-position: 70% 70%;
background-repeat: repeat-x;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#slides h4{position:absolute;bottom:25px;width:100%;padding:0 10px;margin:0 -5px;font-size:14px;z-index:3;color:white;text-shadow:0 1px 2px #918F8F}
#slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:14px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin: 0px auto;text-align: center;width: 10%;}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:49.8%}
#slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
#slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
#slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
#slides .overlayx {
position: absolute;
top: 0;
left: 0;
border: 4px solid white;
width: 100%;
height: 100%;
z-index: 2;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC6GFpsqPh81TJuSe70fuEeiexQQbuNbz7QyTvLuxMOSAbN9NOm7wPsWbYY1Z_U_nB9VN9VARgGTYqZzmZAIq7giKzCsK69LAu4-taiqR67b5Fc5cp6swp0W1JbHh2IHLLI0jpd_2sCZkC/s0/linebg-fade.png);
background-position: 60% 60%;
background-repeat: repeat-x;
}
</style>
<div id="featuredpost">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://softglad.at.ua/widgets/slider.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://www.tolgagonul.net",
MaxPost:15,
idcontaint:"#featuredpost",
ImageSize:300,
interval:7000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
Blogger Slider Manşet Eklentisi
merhaba arkadaşlar bugun css ve jquery ile yapılmış güzel bir slider manşet eklentisi sunucağız bu eklentyi ister sidebar kısmında istersenizde blog kayıtlarının üstünde kullana bilirsiniz. bu eklentiyi sadece bloğunuzun yerleşim bölgesinden gadget ekle diyip Html/Javascript seçip ekleme yapıyorsunuz.
sizin yapmanız gereken aşağıdaki kod içersindeki http://www.tolgagonul.net/ yerine kendi sitenizin linkini eklemek
Demo
About author: Tolgagnl
Cress arugula peanut tigernut wattle seed kombu parsnip. Lotus root mung bean arugula tigernut horseradish endive yarrow gourd. Radicchio cress avocado garlic quandong collard greens.
Kaydol:
Kayıt Yorumları (Atom)
Bunun birde sidebar kısmında olanı var.Bu manşetler themeforset'in manşeti diye biliyorum.Bir kaç çeşidi daha var fakat ben denedim blogumda başarılı olamadım.
YanıtlaSilbu kodu sidebar kısmınada ekliye biliyorsun ben her ikisinide denediğim için ekledim kodu. sende kod çalışmadımı hiç bi şekilde onu anlamadım başarılı olamadım diyince
SilThemeforset'i biliyorsundur.Bu manşet onların yaptığı bir manşet sanırım.Yabancı bir blogda 3 farklı manşet görmüştüm buda onların içinde.Ben ötekilerden birini denedim çalışmamıştı blogumda, demek istedim.
YanıtlaSilmanşetteki <script src="https://ivyth.googlecode.com/svn/js/featuredpost.min.js" bölümü şifre istiyor ne yapmamız gerek.
YanıtlaSililk eklediğim zaman böyle bir sorun yoktu şimdi baktığımda şifre soruyor enteresan :) başka bir eklenti eklemeye çalışca bilgilendirdiğin için teşekkürlet
Sileklentiyi tekrar düzenledim tekrar aynı sorun verirse eklentide sorun vardır demektir.
YanıtlaSilTekrar ekledim hiçbirşey çıkmadi yani çalışmadı :(
SilBen su kodlari inceleyimde tekrar bi gunceleme yapcam gibi yarin sabah tekrar eklerim eklentiyi
YanıtlaSilson durum nedir :)
Silkodlara baktımda kodların içindeki script src="https://ivyth.googlecode.com/svn/js/featuredpost.min.js" type="text/javascript bu kodda sorun oluşuyor girerken şifre istiyor :) buda kendi js dosyasıyla alakalı buna pek birşey yapamadım
Silevet zaten öyle işte ivyth.js lazım veya http://www.allbloggertricks.com/2013/04/fully-automated-slider-for-sidebar-of.html bak burdaki slideri yan çevirebilirsen onu paylaşabilirsin bize yan lazımda :)
Silbi denerim bakalım yapabilirsek veya başka bulursam tekrar eklerim
SilDenedinizmi tolga bey
Silkod değiştirilmiştir.
SilSüper ötesi :) teşekkürler :) 3 aydır istediğimi bulamıyodum :) çok saol :)
YanıtlaSilManşeti blmemde, bi temada çok guzel bi slide eklentisi var, aslnda ona benzer bi cok eklentı var ama, gecislerini sevmedigm icin tercih etmiyorum. zmanım pek olmadığı ve pek kavrayamadığm icin ayarlıyamıyorum. gadgetide var ama, css kısmıda var tabıkı, benım ıstegım bu eklentıyı sadece gadget ıle kurmak, mumkunmudur bu. degıl gbı gorunuyor, bılmıyorum, sadece goruslerınızı ve bılgılerınızı merak edıyorum.
YanıtlaSilHangi temada görmüştünüz adresi yazsaydınız keşke birde benimle iletişim kısmından ulaşırsanız daha detaylı bir şekilde açıklıyabiliris. elimizden geldiğince
Silpeki, ben sze ulasrm temayı'da adresıde bılıyorum zaten, bu arada gecısler karartı seklınde ve yanyana degıl bu yuzden tercih ettm.
YanıtlaSilHocam merhaba , ben bu eklentiyi çok beğendim fakat , sadece blogumun anasayfasında gözükmesini istiyorum , nasıl yapabilirim ?
YanıtlaSilapkportali.blogspot.com
http://www.tolgagonul.net/2013/08/blogger-sidebar-eklentisini-sadece.html burdaki uygulamayı aynı şekilde uyguladığınız zaman slider sadece ana sayfada gözükücektir.
SilHocam cevabınız için çok teşekkürler , bir soru daha sormak istiyorum , benim yayınlarımın ilk resmi bu eklentide gözükmüyor , ikinci resimleri gözüküyor ve hoş olmuyor , Bu konuda bilginiz varsa yardım edermisiniz . Çok Teşekküerler Hocam...
Silo şu şekilde oluyordur siz önce sanırım 2 ci resimleri eklediniz. 1 ci olan resmi sonradan eklediniz. her zmana resim eklerken ana sayfada gösterilicek resmi önce ekleyin sonra konuları yazmaya başlayın onları düzeltmek için tekrar o resimleri silin ilk olarak konunun resmini ekleyin sonra link ekle png leri ekleyin. bende bazen bu şekil yaptım zaman hep 2 ci olan resimler gözükürdü
SilAna sayfada gösterilicek resimleri siteden url olarak eklemeyin bilgisayarınıza indirin öyle ekleyin.
SilHocam ne diyeyim vallaha Allah Razı olsun , iyiki varsın
SilBir takipçi daha kazandın hocam ...
Rica ederim her zaman resimleri bilgisayarınıza indirin ve o şekilde bloğa ekleyin o resimler ilk gözükücektir.
SilHocam , sizin dediğinizle olmadı [-( , yinede teşekkür ederim (h), çözüm şuymuş ; Eklentide çıkmasını istediim oyunun logosunu bilgisayarımdan upload ederek kayıt'a ekleyecekmişim , şimdi oldu Allah'a şükür (o)
SilBende onu anlatmaya çalıştım eklediğiniz konunun resmini bilgisayarınıza indirip o şekilde bloğunuza ekliyiceksiniz. öncelik olarak hangi resim gözükçekce o resmi ekleyin yani :)
Silİnsan kıt olmasın hocam , Vallahi yüzüm kızardı :)
SilRezil olduk iyimi :D :o
hocam çok güzel bir slider ama ekliyorum slideri
YanıtlaSilbakın www.uzmanhbr.blogspot.com.tr
resimler çıkmıyor hocam ne olduğunuda anlayamadım bi el at :)
Hocam slideri ekliyoum çalışıyor lakin resimleri çıkmıyor en altta :)
YanıtlaSilhttp://oyuuncuyuz.blogspot.com.tr/
Resimlerin sliderde çıkması için oyunlara yani konulara eklediğiniz resimleri önce bilgisayarınıza indirin sonra konuyu ekleren bilgisayarınızdan resmi atın o şekilde çıkıyor resimleri konulara link olarak eklediğinizde çıkmaz eğer bu şekilde yapıyorsanız
YanıtlaSilsağolun tolga bey ben öyle yapıyordum şimdi düzelticem gerçekten çok güzel bir blog takip ediyorum sizi :)
YanıtlaSilHocam kodun sağa sola geçiş butonları gözüküyor kendisi gözükmüyor ama.Bu sorun sadece sizin adresiniz yerine kendi adresimi yazınca oluyor lütfen yardımcı olu musunuz?
YanıtlaSilHocam cevabınızı bekliyorum
YanıtlaSilYarın müsait bir zamanda incelerim site adresinizi de yazarsanız iyi olur
SilHocam ilginiz için teşekkürler o sorunu hallettim bu sefer şöyle bir sorunum var
SilBu slider ben blog kayıtlarının üstüne ekledim.Ve ben sadece anasayfada çıkmasını istiyorum.Yukarıdaki yorumda belirttiğiniz konuyu okudum ama olmadı o sanırımsadece sidebar için.İlgilenirseniz sevinirim
http://www.tolgagonul.net/2013/08/blogger-sidebar-eklentisini-sadece.html burdaki yazıda anlatmışım bu uygulama tüm gadget ler için geçerlidir
Silben manşeti logonun hemen altına ekliyorum ancak resimler küçük görünüyor. kod içerisinde çerçeve değişimi vs. yaptım, resimleri tam oturtamıyorum, yapabilen yardım edebilirmi?
YanıtlaSilbkz: http://swordscene.blogspot.com.tr/
sitenize baktım yanlız resimler normal bi anormallik yok su an slider düzgün yani
SilEklenti ekleniyo ama hiç birşey çıkmıyo boş bir kare ?
YanıtlaSilsite adresinizi yazarsanız bi görmem gerekiyor aslında kodlarda bi sıkıntı yok demo da görüldüğü gibi çıkıyor sizde nasıl sorun oluştu anlamış değilim
Silresim boyutu kaç olsa iyi olur
YanıtlaSilResimleri eklerken sitenize çok ufak resim eklemeyin 450 wight genişliğinde olsa yeterlidir ufak eklediğimiz zaman resimelr bulanık gösteriyor
SilHocam slider sitemde biraz solda duruyor.Yardımcı olur musunuz bunu nasıl ortalarım?
YanıtlaSil#slides ul,#slides li{padding:20;margin:0;list-style:none;position:relative} burdaki kodları arayıp bulun css lerin içinde sonra margin 0 olan yeri margin-right: 65px olarak değiştirin bu şekilde sağdan biraz kısaltmış oluyorsunuz.
YanıtlaSilHocam sağolun o sorunu hallettim az önce sayenizde.Ayrıca slider yukarıya çok yakın duruyor menüye.Menü ile aradaki boşluğu nasıl arttırabilirim.Neredeyse bir gibi duruyor.
Silaslında aradaki boşluk normal ama yinede boşluğu arttırmak istiyorsanız şu kodu bulun .tabs-inner { bu kodun arasına padding-top: 30px; ekleyin orda bi padding kod daha vardır onu ellemeyin hemen yanına verdiğim padding-top olanı ekleyin
Sil.tabs-inner { bu kod ne şablonda nede slider kodlarında yok hocam
SilUsta bu fotoğrafların boyunu ve slaytın boyunu nasıl ayarlıyoruz.şekilsiz duruyor.
YanıtlaSilslideri headerin altına eklemişşiniz sanırım blog kayıtlarının üstüne ekleyin benim incelediğimde resimlerin boyutları normal sadece geniş kısma eklemişşiniz
SilYa bir sorum daha olacak.bu manşetteki resimlerde adım ve tarih yazıyor.bunları nasıl kaldırabiliriz?
Silonları bence kaldırmayın pek iyi olmaz yani iyi gözükmez bu şekilde daha estetik duruyor
Silresim ve slaytların boyutunu nasıl ayarlıyoruz?
YanıtlaSilbenim blogtada resim gözükmüyor .sadece yazı görünüyor
YanıtlaSilResimlerin gözükmesi için sitenize resimleri bilgisayarınızdan eklemeniz gerekiyor internet sitelerindne linkleri kopyalıyarak ekledinizmi resimler gözükmez resimleri önce kendi bilgisayarınıza kaydediceksiniz sonra yükleme yapıcaksınız
Silbenim blogta yazı içindede slider gözüküyor, onu nasıl kaldırabilirim.?
YanıtlaSil(Çok güzel bir tema buldum eğer bu slider de olursa wordpress'i brakıp blogger'a geçeceğim)
Burdaki konuda sadece ana sayfada gösterilmesi için anlatmıştım burdaki işlemleri yaptığınız zaman konu içinde değil sadece ana sayfada gösterilir. http://www.tolgagonul.net/2013/08/blogger-sidebar-eklentisini-sadece.html
Silbu slider gerçekten çok güzel
YanıtlaSilBen ne yaptıysam çalışmadı sitede basic temayı editliyicem ama olmuyor
YanıtlaSilevet bu kodlarda da bi sorun oluştu yeni kodları bulursam ekliyicem
Sil