Spotify Link Kısaltma Nasıl Yapılır?
1 yıl önce
blogger featured content etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
blogger featured content etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Zinmag Primus Resimli Manşet/Slide Yapımı
1. Adım:İlk olarak şablonumuzda Html kodlarından ]]></b:skin> kodunu buluyoruz ve hemen önüne aşağıdaki kodları yapıştırıyoruz.
#slider {
background:url(http://img99.imageshack.us/img99/9594/slide.png);
height: 254px;
overflow: hidden;
position: relative;
margin: 5px 0;
}
#mover {
width: auto;
position:absolute;
overflow:hidden;
}
.slide {
padding: 20px 0px;
width: 1000px;
float: left;
position: relative;
height:200px;
}
.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px;
overflow:hidden;
}
.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}
.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}
span.slmet {
color: #ee0909;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #999;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}
.slide img {
position: absolute;
top: 20px;
left: 577px;
background:#fff;
padding:10px 10px;
}
#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 65px;
color: #AC0000;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}
2. Adım: Şimdi ]></b:skin> kodundan sonra aşağıdaki kodları yapıştırıyoruz.
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
3. Adım: Şimdi aşağıdaki kodları arıyoruz.
<div id='header-wrapper'>
.......... ..........
......... .........
</b:section> </ b: section>
4. Adım: Header-wrapper kodunun bittiği b:section kodundan sonra aşağıdaki kodları ekliyoruz. Header-wrapper kodu temanızda bulunmayabilir, o zaman sadece header olarak da aratabilirsiniz. Yalnız temanızın yedeğini almayı unutmayın. Temayı kaydetmeden önce de önizleyin. Geniş temalar için uyumludur.
<!-- Casing -->
<div id='casing'>
<!-- Slider -->
<div id='slider'>
<div id='mover'>
<div class='slide'>
<span class='slmet'> Tam Bir Blog tarafından yayınlandı </span>
<h2><a href='http://tambirblog.blogspot.com/2009/04/resimli-son-yazlar-eklentisi.html'>Resimli Son Yazılar Eklentisi</a></h2>
<p>Bu eklenti Türkiye'de ilk kez Tam Bir Blog'da. Bu eklenti sayesinde son yazılarınızı resimleri ve yorum sayısıyla birlikte blogunuzda gösterebileceksiniz. Hem kullanışlı hem de görsel açıdan zengin ve tasarımınıza göre ayarlarıyla oynayabilirsiniz.</p>
<img alt='' src='http://img5.imageshack.us/img5/3928/resimlisonyazlartambirb.jpg'/>
</div>
<div class='slide'>
<span class='slmet'> Tam Bir Blog tarafından yayınlandı. </span>
<h2><a href='http://tambirblog.blogspot.com/2009/04/blogger-yorumlara-avatar-ekleme.html'>Blogger Yorumlara Avatar Ekleme</a></h2>
<p>Bloggerda yepyeni bir eklentiyle daha karşınızdayım. Bloggerda yorumlarımıza MyBlogLog aracılığyla yorumcularımızın avatarlarını blogumuzda yayınlayabileceğiz.</p>
<img alt='' src='http://img5.imageshack.us/img5/1571/yorumlaraavatarekleme.jpg'/>
</div>
<div class='slide'>
<span class='slmet'> Tam Bir Blog tarafından yayınlandı. </span>
<h2><a href='http://tambirblog.blogspot.com/2009/04/blogger-yorumlara-avatar-ekleme.html'>Blogger Yorumlara Avatar Ekleme</a></h2>
<p>Bloggerda yepyeni bir eklentiyle daha karşınızdayım. Bloggerda yorumlarımıza MyBlogLog aracılığyla yorumcularımızın avatarlarını blogumuzda yayınlayabileceğiz.</p>
<img alt='' src='http://img5.imageshack.us/img5/1571/yorumlaraavatarekleme.jpg'/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
</div>
<div class='clear'/>
Şimdi kaydediyoruz ve blogu görüntülüyoruz.
Peki nasıl düzenleyebiliriz bu kodları temamız göre? 1) Eklentinin daha hızlı çalışması için tüm javascript dosyalarını ücretsiz host sitelerine upload edebiliriz. Javascript dosyalarını buradan indirebilrisiniz.
2) Arkaplan başka bir resim mi koymak istiyorsunuz ya da farklı bir renkli bir arkaplan mı yerleştireceksiniz; yapmanız gereken tek şey kodlardan
# slider (background: url (http://img99.imageshack.us/img99/9594/slide.png); height: 254px;
overflow: hidden;
position: relative;
margin: 5px 0;)
kodunu bulup yeşil renkli linkle kendi resim Url'nizin yerini değiştirmek.
3) Slide showuna resim ve yazı eklemeye geldi sıra. 4. adımda bulunan aşağıdaki kodları farkedeceksiniz. Bu kodlar slide showdaki yazı ve resimlerinizin görünmesini sağlayacaktır. Birazdan vereceğim kodu 4. adımda istediğiniz kadar çoğaltarak birden fazla yazınızın manşette çıkmasını sağlayabilirsiniz.
<div class='slide'>
<span class='slmet'> Tam Bir Blog tarafından yayınlandı. </span>
<h2><a href='http://tambirblog.blogspot.com/2009/04/blogger-yorumlara-avatar-ekleme.html'>Blogger Yorumlara Avatar Ekleme</a></h2>
<p>Bloggerda yepyeni bir eklentiyle daha karşınızdayım. Bloggerda yorumlarımıza MyBlogLog aracılığyla yorumcularımızın avatarlarını blogumuzda yayınlayabileceğiz.</p>
<img alt='' src='http://img5.imageshack.us/img5/1571/yorumlaraavatarekleme.jpg'/>
</div>
Lacivet kod: yazınızın linki,
Mor kod: Yazınızın başlığı.
Yeşil kod: Yazınızın özeti.
Kırmızı kod: Slide showda gözükmesini istediğiniz resmin Urlsi.
Tekrar yinelemek istiyorum. 4. Adımda verdiğim kodlarla yalnızca slide showunuzda 3 adet yazı çıkacaktır. Siz yukarıdaki kodu 4. adımda istediğiniz kadar yapıştırarark daha fazla yazınızın manşette gözükmesini sağlayabilirsiniz.
Bugünlük bu kadar... Biraz geç de olsa yazıyı yayınlayabildim. Güle güle kullanın...
Blogger Resimli Manşet(Featured Content) Yapımı-1
Tam Bir Blog daha iyi bir bloga sahip olmanız için yardımcı olmaya devam ediyor. Gelecek üç yazımda sizlere bloggerda üç değişik manşet yapımını göstereceğim. Bu eklenti sayesinde blogunuzdaki en özel ve en iyi içerikli yazılarınızı blogunuzun istediğiniz bir yerine taşıyabileceksiniz. İnanılmaz slideshowlar artık sizinde blogunuzda yer alabilecek. Yazınızın başlığı ve kısa bir özeti farklı efektleriyle etkileyici bir görselliğe sahip.
Tabiiki demosunu incelemeden olmaz. İşte üç farklı özel içerik eklentisinin tamanının önizlemesi…
Bu üç eklenti temanıza göre tamamen özelleştirilebilir. Enini,boyunu temanıza uyumlu hale getirmek sizin elinizde, sadece Tam Bir Blog farkıyla sizlerle… “(Bu sıralar yazılarımın çok fazla kopyalandığını görüyorum, yazılarımdan eğer faydalanmak istiyorsanız ya da blogunuzda yazıma yer vermek istiyorsanız lütfen altına alıntıdır ibaresiyle yazının ulaşılabilir linkini veriniz.)”
Özel İçerik-Manşet (Featured Content-Slayt Şov)-1
1. Adım:
Bir sorun yaşamamak için aşağıdaki dosyaları bilgisayar indirmenizi ve varsa kendi hostunuza yoksa bşrazdan isimlerini vereceğim sitelere yükleyebilirsiniz. Böylece eklentiler güvenli ve hızlı çalışacaktır.
jquery.js
s3Slider.js
Dosyaları buradan indirebilirsiniz.
2. Adım:
İndirdiğim,iz bu iki dosyayı varsa kendi hostumuza yoksa HotLinkFiles.com ya da SigMirror.com adreslerine yüklüyoruz. Tabikii önce kayıt oluyoruz. Daha sonra yüklediğimiz dosyaların direkt linkini bir yere not alıyoruz.
3. Adım:
Şimdi kod bölümüne geldik. Blogger’a giriş yaptıktan sonra Yerleşim---->Html’yi düzenle---->Widget şablonunu genişlet diyoruz.
Aşağıdaki kodu buluyoruz.
</head>
Kodu bulduktan sonra bu kodun hemen önüne aşağıdaki kodlarımızı yapıştırıyoruz.
<!--SLIDE-SHOW-BASLANGICI-->Mavi olan linklieri silip, 2. adımda yüklemiş olduğumuz dosyaların linkini yapıştırıyoruz. Şimdi şablonumuzu önizlemeye alıyoruz. Eğer bir sorun yoksa kaydediyoruz. Yukarıdaki kırmızı renkteki sayılar ise eklentinin genişliğidir. Onları kendi temanıza göre düzenlemeniz gerekmektedir.
<!-- JavaScripts-->
<script type="text/javascript" src="http://hotlinkfiles.com/........./jquery.js"></script>
<script type="text/javascript" src="http://hotlinkfiles.com/........./s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>
<!-- CSS -->
<style type="text/css" media="screen">
#slider
width: 410px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent {
width: 410px; /* important to be same as image width or wider */
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 384px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {
clear: both;
}
.sliderImage span strong {
font-size: 14px;
}
.top {
top: 0;
left: 0;
}
.bottom {
bottom: 0
left: 0;
}
ul { list-style-type: none;}
</style>
<!--SLIDE-SHOW-BITISI-http://tambirblog.blogspot.com-->
4. Adım
Şimdi Yerleşim---->Sayfa Öğeleri kısmına geliyoruz.Gadget ekleye basıp Html/Javascripti seçiyoruz.
Daha sonra aşağıdaki kodları içine yapıştırıyoruz.
<div id="slider">Kırmızı kodları silip gözükmesini istediğimiz resimlerin linkini giriyoruz.
<ul id="sliderContent">
<li class="sliderImage">
<a href="#"><img src="images/410/1.jpg" alt="1" /></a>
<span class="top"><strong>Title text 1</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="#"><img src="images/410/2.jpg" alt="2" /></a>
<span class="top"><strong>Title text 2</strong><br />Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span>
</li>
<li class="sliderImage">
<a href="#"><img src="images/410/3.jpg" alt="3" />
<span class="top"><strong>Title text 3</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="#"><img src="images/410/4.jpg" alt="4" />
<span class="top"><strong>Title text 4</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="#"><img src="images/410/5.jpg" alt="5" />
<span class="top"><strong>Title text 5</strong><br />Content text...</span>
</li>
<div class="clear sliderImage"></div>
</ul>
</div>
class=”bottom/top” ise yazılarınızın üstte mi altta mı görünmesini istiyorsanız ona göre değiştirebilirsiniz. (Top:yukarı bottom:aşağı)
# işaretinin yerine ise yazının gideceği adresi giriyoruz.
Mavi kodlar ise anlaşılacağı gibi (Text title) yazınızın başlığı ve (content text) yazınızın özeti:)) Eklentide resimlerinizin daha hoş durmasını istiyorsanız. Temanıza göre ayarlamış olduğunuz eklentinin genişlik ve eninin yükleyeceğiniz resimlerle aynı ölçüde olmasına dikkat ederseniz daha iyi sonuçlar elde edebilirsiniz.
Şimdi widgetı kaydediyoruz ve istediğimiz yere sürüklüyoruz. Bence en iyi yer blog yazılarınızın üst kısmı olacaktır. Diğer iki eklentiyi kullanmak istiyorsanız tabiiki biraz beklemeniz gerekecek:))
