Bu eklentiyi nerede kullanabilirim diye kafanızda bir soru oluştuysa.. Bir kaç örnekle kullanım alanları hakkında ipuçları verebilirim.
Öykü yazıyorsanız aşağıya doğru uzayıp giden sayfalar yerine bu eklentiyi kullanabilirsiniz.
Ya da son izlediğim filmlerim / kitaplarım şeklinde kullanmakta iyi bir seçim olur.
1. Blogger kumanda panelinde Template edit kısmını açıyoruz. Aşağıdaki kodları kopyalayıp ></b:skin> ya da </style> üzerine yapıştırıyoruz.
/* Yazı Alanı Slider Eklentisi */
a.movepg.nexter,a.movepg.prever{color:#fff}
.separator{overflow:hidden;max-height:240px;margin:0 0 20px}.separator img{background:#eee;max-width:100%;vertical-align:middle;background-position:middle;border:0;height:auto;width:100%}.next-wrap img,.next-wrap video,.next-wrap object{max-width:100% }.next-wrap{position:relative;padding:0 0 0 40px;line-height:normal;}.instruction{display:block;height:100%;width:100%;overflow:hidden}.slidecontentWrap{width:1000%}.slidecontent{float:left;width:10%;line-height:161%;overflow:hidden}.movepg{display:none;position:absolute;bottom:20px;background:#e74c3c;color:#fff;font-weight:700;text-transform:uppercase;padding:6px 12px;cursor:pointer;font-size:80%;outline:none;border-radius:3px;transition:background .6s}.movepg:hover{background:#c0392b}.movepg.prever{left:20px}.movepg.nexter{right:20px}
2. Adım olarak yine temamızda </body> kodunu aratarak hemen üzerine aşağıdaki kodları yapıştırıyoruz.
<script type='text/javascript'>
//<![CDATA[
function updateBtnState(){0==index?$(".prever").hide():$(".prever").show(),index==maxIndex?$(".nexter").hide():$(".nexter").show()}var index=0,maxIndex=4;$(".nexter").on("click",function(e){if(index++,index>maxIndex)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),$(".prever").on("click",function(e){if(index--,0>index)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),updateBtnState();
//]]>
</script>
Java kodları içindeki maxIndex=4 değerini değiştirerek slayt sayınızı ayarlayabilirsiniz.
Temamızı Kaydediyoruz ve çıkıyoruz.
3. Son olarak yazımıza entegre edebilmek için, yeni yayın penceresini açarak aşağıdaki kodları kopyalayıp HTML kısmına yapıştırıyoruz.
<div class="next-wrap">
<div id="photocons" class="instruction">
<div class="slidecontentWrap">
<div class="slidecontent">
<-- İÇERİK 1 -->
</div>
<div class="slidecontent">
<-- İÇERİK 2 -->
</div>
<div class="slidecontent">
<-- İÇERİK 3 -->
</div>
<div class="slidecontent">
<-- İÇERİK 4 -->
</div>
<div class="slidecontent">
<-- İÇERİK 5 -->
</div>
</div>
</div>
<a class="movepg prever">prev</a>
<a class="movepg nexter">next</a>
</div>
İçerik yazan kısımlara resim ve yazımızı ekleyerek yazımızı yayınlıyoruz.
BLOG YAZILARINIZI SÜTUNLARA BÖLME ilginizi çekebilir.
Örnek gösterim :
Next
« Prev Post
« Prev Post
Previous
Next Post »
Next Post »
3 yorum
Hızlı yorum CommentsMerhabalar.
Cevap verBloggerlere faydalı olabilmek için araştırıyorsunuz buluyorsunuz ve okuyucularınızla paylaşmak için de epeyce bir efor ve emek sarfediyorsunuz. Paylaştığınız her konu çok değerlidir ve paylaştığınız her bir konu, birimizin arayıp da erişemediği konular olabilir.
Çalışmalarınızdan ve yararlı paylaşımlarınızdan ötürü size takdir ediyor ve teşekkürlerimi sunuyorum.
Selam ve dualarımla birlikte en Güzel'e emanet olun.
teşekkürler
Cevap verConversionConversion EmoticonEmoticon