Spotify Link Kısaltma Nasıl Yapılır?
1 yıl önce
featured content etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
featured content etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
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:))
Blogger'a Featured Content Eklentisi ,Yazılarınızı Manşete Taşıyın
Manşet, Slide Menü, Featured Content isminin değil işlevinin önemli olduğu bu eklentiyi blogum da görebilirsiniz.
Bloggera featured content eklentisiyle renk katmak istemez misiniz? Bu eklentiyle birlikte kullanıcılar rahatlıkla son yazılarınıza ulaşabilirler, slide efektiyle de ilgilerini çekebilirsiniz. Sizde yazılarınızı manşete taşımak istiyorsanız aşağıdaki adımları takip edin. (Bir çok arkadaş bu menüyü sormuştu bunun da cevabını vermiş oluyorum.)
Örnek için buraya bakabilirsiniz.İşe koyulmadan önce lütfen tam şablonu kaydedin sorumluluk kabul etmiyorum
Şaka bir yana temanıza yazık olmasın.1. Adım:Evet ilk olarak bloggera giriş yapıyoruz. Yerleşim>Html'yi Düzenle ye gelip
Widget Şablonlarını Genişlet'in.
]]></b:skin>#myGallery{width: 600px !important;height: 200px !important;overflow: hidden;}Sonuna ise aşağıdaki kodları ekliyoruz.
<script src='http://taytanikblog.googlepages.com/mootools.v1.11.js' type='text/javascript'/><script src='http://taytanikblog.googlepages.com/jd.gallery.js' type='text/javascript'/><link href='http://taytanikblog.googlepages.com/jd.gallery.css' media='screen' rel='stylesheet' type='text/css'/>2. Adım: Şimdi ise aşağıdaki kodu buluyoruz.
<div id='sidebar-wrapper'><script type='text/javascript'>function startGallery() {var myGallery = new gallery($('myGallery'), {timed: true,showArrows: false,showCarousel: false});}window.addEvent('domready', startGallery);</script>(Yukarıdaki kodu bulamayanlar < /body> kodunun hemen önüne koyabilirsiniz.)
3. Adım: Şablonumuzu önizleme yapıyoruz eğer bir sorun yoksa html'yi düzenleden ayrılmanın vakti geldi. Şablonu kaydedelim. Şimdi "Sayfa Öğeleri" kısmına gelelim. Gadget ekle>Html/javascript ekleyelim.
Html/javascript gadget'ına aşağıdaki kodları yapıştıralım ve kendimize göre düzenleyelim:
<div id="myGallery"><div class="imageElement"><a class="open" href=" href=”http://tambirblog.blogspot.com/ "/><img src=" http://img140.imageshack.us/img140/1153/image1q.jpg" class="full"/><h3>Tam Bir Blog</h3><p>Yeni Blog Adresiniz...</p></a></div><div class="imageElement"><a class="open" href=" http://tambirblog.blogspot.com/ "/><img src=" http://img140.imageshack.us/img140/1153/image1q.jpg " class="full"/><h3>Tam Bir Blog</h3><p>Yeni Blog Adresiniz...</p></a></div><div class="imageElement"><a class="open" href=" http://tambirblog.blogspot.com/ "/><img src=" http://img140.imageshack.us/img140/1153/image1q.jpg " class="full"/><h3>Tam Bir Blog</h3><p>Yeni Blog Adresiniz...</p></a></div><div class="imageElement"><a class="open" href="http://tambirblog.blogspot.com/ "/><img src=" http://img140.imageshack.us/img140/1153/image1q.jpg" class="full"/><h3>Tam Bir Blog</h3><p>Yeni Blog Adresiniz...</p></a></div><div class="imageElement"><a class="open" http://tambirblog.blogspot.com/ "/><img src=" http://img140.imageshack.us/img140/1153/image1q.jpg" class="full"/><h3>Tam Bir Blog</h3><p>Yeni Blog Adresiniz...</p></a></div></div>(Kendini tekrarlayan kodları kullanarak istediğiniz kadar ekleme ya da çıkarma yapabilirsiniz.)
Yukarıdaki kodda renkli bölümleri siliyoruz, değişiklik yapılması gereken yerleri aşağıda açıkladım:
http://tambirblog.blogspot.com/ yerine yazınızın linkini;
http://img140.imageshack.us/img140/1153/image1q.jpg yerine resminizin Url'si ;
Tam Bir Blog yerine yazınızın başlığı ;
Yeni Blog Adresiniz... yerine ise yazınızdan kısa bir bölüm verebilirsiniz.
...Ve kaydediyoruz.
Bugünlük bu kadar....
http://tambirblog.blogspot.com/
Yazı güncellendi ve şu anda çalışıyor. Tekrar sorun çıkarsa yardımcı olmaya çalışırım. Eklenti için taytanik'e tekrar teşekkürler.
