İçeriği Göster/Gizle ve İspiyon Butonu Ekleme [B]

Şimdi anlatacağım Blogger Yazı İçeriğini Gizle - Göster eklentisini daha önce kaleme almıştım şimdi bu eklentinin alternatif ikinci bir yöntemi paylaşacağım sizlerle...Bu eklenti Gadget olarak ekleyip Blogspot Gadgetleriniz için kullanabilirsiniz yahut yazdığınız içeriğinizin HTML'yi düzenle kısmına ekleyerek de kullanılabilir...Şimdi ikinci yöntemin anlatımına devam edelim;

Kodları sırayla verelim;

* Kod 1;

<script type="text/javascript">

  function showBlock(blockId)

  {

    document.getElementById(blockId).style.display = "block";

  }

  function hideBlock(blockId)

  {

    document.getElementById(blockId).style.display = "none";

  }

</script>

<a href="javascript:showBlock('block1')" _fcksavedurl="javascript:showBlock('block1')">Demo Göster</a>

<div style="display: none;" id="block1">OLAY<a href="javascript:hideBlock('block1')" _fcksavedurl="javascript:hideBlock('block1')"><br />Demo Gizle</a></div>

Not 1: Buraya bir not düşmek istedim, hemen şunu söyleyeyim "block1" isimli mavi ile yazılmış bölüm eklentinin adıdır, aynı yazı içerisinde birden fazla kullanmak isterseniz bu isimleri değiştirin yoksa aynı isimli birden fazla eklenti olacağı için çakışma yapacaktır ve dolayısıyla eklenti çalışacaktır fakat ilk eklenen eklenti hangisi ise o çalışacaktır, aksi halde eklediğiniz tüm açılır kapanır div yapılarınız çalışmayacaktır.

* Kod 2 - Açılıp Kapanan İçerik Bölümün Arka Plan Rengini Değiştirme;

<script type="text/javascript">

  function showBlock(blockId)

  {

    document.getElementById(blockId).style.display = "block";

  }

  function hideBlock(blockId)

  {

    document.getElementById(blockId).style.display = "none";

  }

</script>

<a href="javascript:showBlock('block1')" _fcksavedurl="javascript:showBlock('block1')">Demo Göster</a>

<div style="display: none;" id="block1"> <span style="background-color: #f5f5f5;">OLAY</span>

  <a href="javascript:hideBlock('block1')" _fcksavedurl="javascript:hideBlock('block1')"><br />Demo Gizle</a></div>

Not 2: Bu kod da ise, uçuk mavi ile yazılmış "#f5f5f5" kodlarını isteğinize göre değiştirerek arka plan rengini kendi isteğinize göre özelleştirebilirsiniz.

* Kod 3 - Video veya Resim Gizle Göster;

<script type="text/javascript">

  function showBlock(blockId)

  {

    document.getElementById(blockId).style.display = "block";

  }

  function hideBlock(blockId)

  {

    document.getElementById(blockId).style.display = "none";

  }

</script>

<a href="javascript:showBlock('block1')" _fcksavedurl="javascript:showBlock('block1')">Demo Göster</a>

<div style="display: none;" id="block1"> <img src="Resim-Video URL'si" > <br /> <img src="Resim-Video URL'si" >

  <a href="javascript:hideBlock('block1')" _fcksavedurl="javascript:hideBlock('block1')"><br />Demo Gizle</a></div>

Not 3: Bu kodda ise yeşil renk ile "Resim-Video URL'si" yazan yere gizleyip göstermek istediğiniz video veya resmimizin linkini ekliyoruz.

* Kod 4 - Kodları Gizle/Göster Kodu;

<script type="text/javascript">

  function showBlock(blockId)

  {

    document.getElementById(blockId).style.display = "block";

  }

  function hideBlock(blockId)

  {

    document.getElementById(blockId).style.display = "none";

  }

</script>

<a href="javascript:showBlock('block1')" _fcksavedurl="javascript:showBlock('block1')">Demo Göster</a>

<div style="display: none;" id="block1">

<textarea style="background-color:#transparent; width: 630px; height: 135px;" >Gizlemek İstediğiniz Yazı, Resim, Video vb</textarea>

  <a href="javascript:hideBlock('block1')" _fcksavedurl="javascript:hideBlock('block1')"><br />Demo Gizle</a></div>

Not 4: Burada ki özelleştirilebilecek değişkenler ise; gizlenip gösterilecek içerik için oluşturulmuş yazı alanının arka plan rengini uçuk mavi le yazılmış "#transparent" bölüme istediğiniz bir kodu yazarak değiştirebilirsiniz, ikinci değişken ise oluşturulmuş içerik alanının genişlik ve yükseklik ayarları turuncu ile yazılmış "width: 630px; height: 135px" değerlerini isteğinize göre değiştirerek kafanıza göre boyutlandırabilirsiniz.

Kod 5 - Butonlu Gizle/Göster Kodu;

<script type="text/javascript">

  function showBlock(blockId)

  {

    document.getElementById(blockId).style.display = "block";

  }

  function hideBlock(blockId)

  {

    document.getElementById(blockId).style.display = "none";

  }

</script>

<a href="javascript:showBlock('block1')" _fcksavedurl="javascript:showBlock('block1')"><button>İçeriği Göster</button></a>

<div style="display: none;" id="block1">OLAY<a href="javascript:hideBlock('block1')" _fcksavedurl="javascript:hideBlock('block1')"><br /><button>İçeriği Gizle</button></a></div>

Burada pek değişiklik yapmanıza gerek yok açıkçası...

Not: Paylaştığım tüm kodlar sitenizde yazı içerisinde çalışacağı için sitenizin yüklenme hızını olumsuz yönde etkilemez, aksine daha hızlı yüklenecektir çünki sayfalar yüklenirken yukarıdan aşağı doğru yüklenir ve bu sırada yayın içeriğinizin yüklemesi ağırsa sayfa performansı düşecektir fakat bu eklenti sayesinde yayınlarınız daha hızlı yüklenecektir. Ekleyeceğiniz resim, video, link, yazı gibi elementleri html olarak eklerseniz renk, boy, font gibi özellikleri değiştirmek için html tagları kullanmalısınız.

* "OLAY" içerisine eklediğiniz her şeye (HTML/ Java kodlama dilleri) duyarlıdır. Örneğin yazdığınız yazıyı alt satıra geçirmek için  <br /> etiketi kullanılmalıdır. Bu kodu yazmamda ki sebep örneğin bir java yada html kodu yayınladınız, demo yada canlı görünümü sayfada yayınlarsanız sayfa çok uzuyor yada anlatım bozuluyor, bazen de demo sayfa dışına taşabiliyor bu nedenle genelde test blogları tercih ediliyor. Bu kod sayesinde ziyaretçi önizlemeyi aç/kapa şeklinde görebilir. böylece adminlerde bir demo için boş yere fazladan bir test blogu açmak zorunda kalmazlar.

* "Gizlemek İstediğiniz Yazı, Resim, Video vb" sitenizde yayınladığınız kodlar bazen çok uzun yada çok geniş olup düzeni bozuyor , bazende örnek kodu kopyalanamaz hale getiriyor. <textarea> ile çerçeve içerisine alınmış kullanışlı bir açılır kapanır kod penceresidir. Bu kod penceresini ziyaretçi açarak rahatça kodu alabilir yada yazdığınız uzun yazılara alt açıklama , referans, örnek resim gibi alt bilgiler eklemek için kullanabilirsiniz.

* Değişkenler;

"background-color: #f5f5f5" açılıp kapanan bölümün arka plan rengini uçuk mavi ile yazılmış hex kodlarını değiştirebilirsiniz. Renk kodları bulmak için tıklayın Renk Kodu Editörü yahut Renk Tablosundan yararlanabilirsiniz.

"width: 630px" Açılacak alanın genişliği

"height: 135px" Açılacak alanın yüksekliği

"Demo Göster,İçeriği Göster" Yazan yerleri istediğiniz gibi adlandırabilirsiniz.

"block1" yazan yerler ise eklentimizin ismidir, bunu da dilediğiniz gibi değiştirebilirsiniz. Tekrardan hatırlatıyorum aynı sayfa, yazı içerisinde birden fazla bu eklentiyi kullanacaksanız muhakkak eklentinin adını türkçe karakter kullanmadan değiştirin, aksi halde çakışma olacaktır.

Bu eklenti çok kullanışlı gerçekten ihtiyacınızı karşılamak için bu eklentinin hangi yöntemini kullanmak istiyorsanız onu seçin ben şimdilik ikinci yöntemi paylaşıyorum üçüncü bir yöntem de var, onu da paylaşacağım ilerleyen yayınlarda şimdilik bu kadar, esenle kalın iyi çalışmalar...

Blogger'a Kayan Yazi Eklemek

Kayan yazı kodları ile duyuru panoları, mesaj panoları, son yorumlar vb. paneller oluşturabilirsiniz. Yapmanız gereken yazı modellerinden birini seçmek ve yazmak istediklerinizi "Yazılar Buraya" yazan alana yazmak ve kodlardaki değiştirmek isteiğiniz yerleri kendi isteğinize göre düzenlemek, işte bu kadar.

Sola Doğru Kayan Yazı

<marquee>Yazılar Buraya</marquee>

Yazılar Buraya

Sağa Doğru Kayan Yazı

<marquee direction="right">Yazılar Buraya</marquee>

Yazılar Buraya

İki Tarafa Çarpıp Geri Gelen Yazı

<marquee behavior="alternate">Yazılar Buraya</marquee>

Yazılar Buraya

Aşağıdan Yukarı Doğru Kayan Yazı

<marquee direction="up">Yazılar Buraya</marquee>

Yazılar Buraya

Yukarıdan Aşağı Doğru Kayan Yazı

<marquee direction="down">Yazılar Buraya</marquee>

Yazılar Buraya

Kare İçerisinde Sola Doğru Kayan Yazı

<marquee style="border:BLUE 2px SOLID" mce_style="border:RED 2px SOLID">Yazılar Buraya</marquee>

Yazılar Buraya

Sağa Doğru Açılan Yanıp Sönen Sola Doğru Kayan Titreyen Yazı

<marquee behavior="alternate"><marquee width="150">Yazılar Buraya</marquee></marquee>

Yazılar Buraya

Ortada Başlayan Sağa Doğru Açılan Yanıp Sönen Sola Doğru Kayan Titreyen Yazı

<marquee behavior="alternate" direction="right" ><marquee width="150">Yazılar Buraya</marquee></marquee>

Yazılar Buraya

Aşağıdan Yukarı Doğru Kayan Yazı (Mouse ile üzerine gelince duruyor)

<marquee direction="up" height="100" loop="99999" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="1" scrolldelay="60" width="200">Yazılar Buraya</marquee>

Yazılar Buraya

Yukarıdan Aşağı Doğru Kayan Yazı (Mouse ile üzerine gelince duruyor)

<marquee direction="down" height="100" loop="99999" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="1" scrolldelay="60" width="200">Yazılar Buraya</marquee>
Yazılar Buraya

Sola Doğru Kayan Yazı (Mouse ile üzerine gelince duruyor)

<marquee style="width: 200px; height: 33px" scrollamount="1" scrolldelay="60" loop="99999" width="200" height="33" onmouseout="this.start()" onmouseover="this.stop()">Yazılar Buraya</marquee>

Yazılar Buraya

Değiştirmek isteyebilecekleriniz;

* width: bu değeri değiştirerek yazdığınız yazının genişlik miktarını ayarlayabilirsiniz

* height: yazınızın yükseklik miktarıdır, kendinize göre değiştirebilirsiniz.

* Scrollamount: değeri ise yazınızın geçiş hızını belirler, nasıl bir hız istiyorsanız ona göre değiştirebilirsiniz.

HTML Kayan Yazı Kodları da bu kadar kafanıza takılan birşey olursa yorum bırakabilirsiniz en kısa zamanda geri dönüş yaparım....

İçeriği Göster/Gizle ve İspiyon Butonu Ekleme [A]

Bu yazımda sizlere, belirli bir kelimeye tıkladığınızda içeriği gizleme ve göstermeyi anlatacağım...Bu eklenti tam olarak ne işimize yarayacak hemen onu söyleyelim, yazılarınızda bütün anlatım içerisinde detay bilgiler veriyorsanız yazılarınızın açıklama kısmını bu eklentiyle tek bir kelime içerisine almış oluyoruz ve o kelimeye tıkladığınız da açıklamalarımız geliyor...Bir diğer yararı ise içeriğinizin uzunluğunu kısaltmış oluyorsunuz yani yerden ve uzun görünümden kurtulmuş oluyorsunuz...

Demo Görünüm Göster/Gizle

Yazılarınızı kısaltırken yazmak istedikleriniz bu şekilde "Göster/Gizle" ibaresinin altına eklememizi sağlayan bu küçük eklenti ile açıklamalarımızı kısaltmamıza ve aynı zaman sayfa kullanımını da ekonomik olarak kullanmamıza yarıyor

Evet şimdi sıra bunu nasıl yapacağımız da...

Adım 1 - Blogger'a giriş yapıp hemen ardından Kumanda Paneli'nde, Şablon bölümüne giriyoruz ve HTML'yi Düzenle'ye tıklıyoruz.

Not: Muhakkak bu işlemleri yapmadan önce Şablon Yedeğini Alın.

Adım 2 - Karşımıza blogumuzun kodları karşılıyor bizi, CTRL+F tuş kombinasyonu ile aşağıdaki kodu buluyoruz.
]]></b:skin> Ve bu kodun hemen bir üst satırına aşağıdaki kodu yapıştırıyoruz. .commenthidden {display:none} .commentshown {display:inline} Adım 3 - Yine CTRL+F yardımıyla bu kez aşağıdaki kodu buluyoruz. </head> Ve bu kodun hemen bir üst satırına alttaki kodları yapıştırıyoruz. <script type="text/Javascript"> function togglecomments (postid) { var whichpost = document.getElementById(postid); if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; } } </script> Adım 4 - Şimdi Şablonu Önizle'ye tıklayın eğer bir sorun yoksa kaydedin ve kalan adımları takip edin. Buraya kadar ki yaptıklarımızı sadece bir kez yapıyoruz, bundan sonrası için sürekli olarak  Adım 5'deki yolu takip ediyoruz.
Adım 5 - Artık bu kadar eklediğimiz kodlardan sonra bu eklentiyi yazı içerisinde kullanmaya geldi sıra, yazımızı yazdık düzenlememiz gereken yerler için Blogger'da yazılarınızı yazarken "Oluştur/HTML" sekmesinden yazımızın kodlarını görüntüleyelim ve HTML bölümüne aşağıdaki kodları ekleyelim <a aiotitle="click to expand" href="javascript:togglecomments('Eklentinize Özel Bir İsim Verin')">Gizle/Göster - Başlık</a><div class="commenthidden" id="Eklentinize Özel Bir İsim Verin"> <p> Yazıları Buraya Yazın</div> Şimdi eklediğimiz kodlarda nasıl bir değişiklik yapabiliriz biraz da ondan bahsedelim; * "Eklentinize Özel Bir İsim Verin" kısmı eklentimizin ismi, kafanıza göre değiştirebilirsiniz * "Gizle/Göster - Başlık" kısmı kısaltmış olduğumuz içeriğin başlık kısmıdır, isteğinize göre değiştirebilirsiniz * "Yazılar Buraya Yazınız" bölümü ise başlığa tıkladığında görüntülenecek yazınız, kısaltmak istediğiniz yazılarınızı buraya ekleyin
Not: Hemen buraya not düşmek istiyorum, yaptığım araştırmalar da belirtilmemiş bir noktadan bahsetmek istiyorum; aynı yazı içerisinde birçok kez kullanmak isterseniz, kodların adları birbirinden farklı olsun eğer aynı olursa ilk eklediğiniz kod çalışır fakat diğerleri çalışmayacaktır...O kadar yer gezdim bu detayı kimse vermemiş nedense!
Not: Bu kodları sağ-sol sütunlara da uygulayabilirsiniz, kodları ihtiyacınıza göre düzenleyip sonra Yerleşim'den Gadget Ekle yoluyla sütunlarda ki öğelerinize de Gizle-Göster özelliği kazandırabilirsiniz... Evet bu ekleti de bu kadar, kafanıza takılan bir şey olursa yorum bırakabilir yahut iletişimden yazabilirsiniz...İçeriği Göster/Gizle Butonu diğer bir yöntem de var onu da diğer yazımda anlatacağım...Sağlıcakla kalın...

Blogspot'ta Eklentileri Ortalamak

Sevgili Dostlar;

Kaç zamandır şu final sınavları muhabbetine bir türlü ayılıp yayın yapamıyorum, nerdeyse cinnet noktasındaydım sonunda yayınlara devam ediyorum kaldığım yerden...

Evet bugün sizlere eklenti paylaşmak isterdim fakat eklentileri kullanırken çok işimize yarayacak bir olayı sizlerle paylaşmak istedim..."Blogspot Widget/Gadget Ortalama" muhtemelen sizlerde karşılaşmışsınızdır, bazı eklentileri bloga yerleştirdiğinizde, eklenti sağa dayalı yahut sola dayalı durduğunu ve bunun sizin istediğiniz görüntüyü bozduğunu görmüşsünüzdür muhakkak!

Bu gibi durumlardan kurtulmak için ise eklediğiniz widget/gadget'ı ortalamak gerek, şimdi bunu nasıl yapıyoruz ona gelelim;

* Blogunuza eklediğiniz eklentinin kodunu, aşağıdaki kırmızı renkli kodları arasına yerleştiriyoruz.

<center> EKLENTİ KODUNU BURAYA EKLİYORUZ </center>

Not: Eklentiyi hizalarken bir püf nokta var, nedense bunu kimse yazmamış; widget'i ortalama yaparken widget kodunun tamamını yukardaki kodlar arasına almayacaksınız. Ekleyeceğiniz widget'e göre değişebilir, hemen birkaç örnekle başlayalım.

Örnek 1 - Auto Ping

Şu an bu blogun sol alt köşesinde ki Auto Ping eklentisi, "<a href=" veya "script" yapısı ile başlayan eklentilerde de aynen şu şekilde yolu izledim;

<center><!-- auto ping by http://www.auto-ping.com/ -->
<a href="http://www.auto-ping.com/pinger" target="_blank"><img src="http://www.auto-ping.com/iping.php?aut=EF14380489BD68920487F89D5739455201155A64B924A54A750E6D8DD2AD0BC1854A7AD421A02FC8C1" alt="Ping your blog, website, or RSS feed for Free" border="0" /></a>
<!-- auto ping by http://www.auto-ping.com/--></center>

Örnek 2 - Disqus Son Yorumlar Eklentisi

Sağ taraftaki Tweet'lerin hemen altında, Disqus'un son yorumlar eklentisi. Tabi bu eklentiyi bloga eklemek için önce Disqus eklemek gerek :) Son yorum eklentisi "div" yapısıyla başladığı için şu şekilde bir yol izledim;

<div id="recentcomments" class="dsq-widget"><center>
<h2 class="dsq-widget-title">Son Yorumlar</h2><marquee direction="up" height="200" loop="99999" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="1" scrolldelay="60" width="295">
<script type="text/javascript" src="http://usefultoolstrblogspotcom.disqus.com/recent_comments_widget.js?num_items=8&hide_avatars=0&avatar_size=32&excerpt_length=300&hide_mods=0"></script></marquee></center>
</div>

Hemen "div" yapısının içine yerleştirdim, çok güzel çalıştı...

Not: Bu arada yukarıdaki eklenti kodları içinde yazının kayması için gerekli kodlar var onları sonradan ekledim bunu ayrıca anlatacağım.

Örnek 3 - Popüler Yayınlar

Popüler yayınlar eklentisini hizalamak için ilk önce Kumanda Paneli/Şablon/HTML'yi Düzenle yolunu izleyerek şablonumuzun kodlarını açıyoruz, hemen ardından ortalamak istediğimiz kodları bulmak için Ctrl + F diyerek eklentimizin adını yazıyoruz. Eklentimizi bulduğumuzda kodlar kapalı olabilir yani şu şekilde;

<b:widget id='HTML9' locked='false' title='' type='HTML'>...</b:includable>

Bu şekilde ise hemen sol taraftan kodları genişletin, anlatıma kendimdeki Popüler Yayınlar kodlarıyla devam ediyorum;

<b:widget id='PopularPosts1' locked='false' title='Popüler Yayınlar' type='PopularPosts'>     <b:includable id='main'>         <center>           <b:if cond='data:title'>             <h2>               <data:title/>             </h2>           </b:if>           <div class='widget-content popular-posts'>             <ul>               <b:loop values='data:posts' var='post'>                 <li>                   <b:if cond='data:showThumbnails == &quot;false&quot;'>                     <b:if cond='data:showSnippets == &quot;false&quot;'>                       <!-- (1) No snippet/thumbnail -->                       <a expr:href='data:post.href'>                         <data:post.title/>                       </a>                       <b:else/>                       <!-- (2) Show only snippets -->                       <div class='item-title'>                         <a expr:href='data:post.href'>                           <data:post.title/>                         </a>                       </div>                       <div class='item-snippet'>                         <data:post.snippet/>                       </div>                     </b:if>                     <b:else/>                     <b:if cond='data:showSnippets == &quot;false&quot;'>                       <!-- (3) Show only thumbnails -->                       <div class='item-thumbnail-only'>                         <b:if cond='data:post.thumbnail'>                           <div class='item-thumbnail'>                             <a expr:href='data:post.href' target='_blank'>                               <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>                             </a>                           </div>                         </b:if>                         <div class='item-title'>                           <a expr:href='data:post.href'>                             <data:post.title/>                           </a>                         </div>                       </div>                       <div style='clear: both;'/>                       <b:else/>                       <!-- (4) Show snippets and thumbnails -->                       <div class='item-content'>                         <b:if cond='data:post.thumbnail'>                           <div class='item-thumbnail'>                             <a expr:href='data:post.href' target='_blank'>                               <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>                             </a>                           </div>                         </b:if>                         <div class='item-title'>                           <a expr:href='data:post.href'>                             <data:post.title/>                           </a>                         </div>                         <div class='item-snippet'>                           <data:post.snippet/>                         </div>                       </div>                       <div style='clear: both;'/>                     </b:if>                   </b:if>                 </li>               </b:loop>             </ul>             <b:include name='quickedit'/>           </div>         </center>       </b:includable>
<b:includable id='main'> ile başlayan kodun hemen altına hizalama kodunun açılışını yazıyoruz (<center>), widget kodunun hemen alt kısmındaki </b:includable> ifadesinin hemen üstüne de hizalama kodunun kapanışını yazıyoruz (</center>). Popüler Yayınlar widget'i için de böyle bir yöntem uyguladım.
Tabi ki son uyguladığım yöntemle Takip Ettiklerim vs bir çok widget'i ortalayabilirsiniz. Artık eklentilerden hangisini ortalamak isterseniz rahat rahat ortalayın, yukarıdaki yöntemlerin hepsi tarafımdan denenmiştir sorunsuz çalışmaktadır.

Kafanıza takılan soru olursa yorum bırakın ve yaptığınız yoruma e-mail ile abone olun yazılan cevaplar mail adresinize gelsin...İyi günlerde kullanın, esenle kalın...

Blogspot'a Twitter Profili Eklemek

Merhaba sevgili okurlar, bugün ki yazı konusu aslında benden değil de kadim bir dostumun sorusu üzerine araştırdığım bu uygulamayı, hem uygulayıp hemde sizlerle paylaşmak istedim. Blog yazarları olarak bir çok sosyal medya denen zımbırtılarda eyepce yer almamız gerekiyor açıkçası, fakat yerimizi alıyoruz almasına da gelen okuyucular bir oraya bir buraya bakmak durumunda kalmaları baya yorucu olacaktır onlar için. Twitter Widget eklentisi hem bize hemde okuyuculara kolaylık sağlıyor aslında, gelen okuyucu Blog'da gezinirken bir yandan da sizin güncel olarak  attığınız Tweet'leri görmüş oluyor yani okuyucularla daha yakından temas halinde oluyoruz, tabi ki bu tercihe bağlı neyse lafı daha da uzatmadan anlatıma hemen geçelim...

* https://twitter.com/settings/widgets adresine Twitter hesabımızla giriş yapıyoruz.

Açılan sayfa Twitter'ın bileşenler sayfası

* Sağ üst taraftan "Yeni Oluştur" diyoruz

* Oluşturabileceğimiz bir sürü bileşen seçeneğimiz var hemen kısaca tanıtayım onları size;

- Kullanıcı zaman akışı (bizim uygulamasını yapacağımız bileşen)
- Favoriler, favori olan Tweet'lerimizin bileşenini oluşturmak için kullanabileceğimiz seçenek
- Liste bileşenimiz
- Ara bileşeni, Twitter'daki arama özelliğiniz istediğiniz bir konu için #"konu adı" ile ilgil Tweet'lerin otomatik güncellendiği bileşen
- Özel zaman akışı diye bilinen bileşen

* Oluşturmak istediğiniz bileşeni seçtikten sonra yapmamız gereken yapılandırmayı tamamlanak, zaten yapılandırma önizlemeli olduğu için yaptığınız işlemlerin nasıl olduğunu net göreceksiniz

* Yapılandırmaları tamamladıktan sonra "Bileşen Oluştur" diyoruz

* Bileşen oluştur dedikten sonra hemen sağ alt köşede HTML kodlarımız var bunu kopyalıyoruz ve ardından Blog'umuza giriş yapıyoruz

* Kumanda Paneli'nden Yerleşim'e tıklıyoruz sonra "Gadget Ekle" diyoruz

* açılan sayfada "HTML/JavaScript Ekle" diyoruz, başlık alanını boş bırakabilirsiniz Twitter Gadget'ının üzerinde başlık olması abes kaçabilir yinede siz bilirsiniz, "İçereik" kısmına kopyaladığımız kodu yapıştırıyoruz ve kaydet diyoruz ve artık hazırdır sizinde bir Twitter Profil Widget'ınız var...

Güle güle kullanmanız dileğiyle esen kalın...

Not: Bu yazıyı, işime yarayan bu eklentiyi araştırmama vesile olan Rüzgar Ewerest adlı kadim dostumun sorusuna cevaben yazılmıştır...

Blogspot'ta 'Etiketine Sahip Kayıtlar' İbaresini Kaldırmak

Merhabalar,

Blogspot'da özel kategori yaptığımız da, kategorilerden herhangi birine tıkladığımız anda bizi karşılayan, en sinir olduğum ve muhtemelen bir çok kişininde sinirini bozan bir yazı çıkıyor karşımıza.

Evet sinir bozucu olabilir ama istersek bunu rahatça kaldırabiliriz. Vakit kaybetmeden hemen anlatıma geçiyorum;

Adım 1 - Kotrol Paneli/Şablon'a geliyoruz ve "Yedekle/Geri Yükle" diyerek önce şablonumuzun yedeğini alalım. Ne olur ne olmaz risk almamak lazım.

Adım 2 - HTML'yi düzenle diyoruz ve açılan kodlar da "CTRL+F" diyerek tırnak işareti içindeki en üstteki kodu buluyoruz.

<b:includable id='status-message'> <b:if cond='data:navMessage'> <div class='status-msg-wrap'> <div class='status-msg-body'> <data:navMessage/> </div> <div class='status-msg-border'> <div class='status-msg-bg'> <div class='status-msg-hidden'> <data:navMessage/></div> </div> </div> </div> <div style='clear: both;'/> </b:if> </b:includable>
Adım 3 - Şimdi ise tırnak işaretleri arasında kalan kodları siliyoruz ve bunların yerine aşağıda ki tırnak işaretleri arasında kalan kodları yapıştırıyoruz.

<b:includable id='status-message'> <b:if cond='data:navMessage'> <div> </div> <div style='clear: both;'/> </b:if> </b:includable>
Son Adım - Değiştirdiğimiz şablonu kaydettikten sonra artık o sinir bozucu ibare görünmeyecektir.

Not: Eğer HMTL kodlarınız kapalıysa aradığımız kod şu şekilde görnebilir,

"<b:includable id='status-message'>...</b:includable>"

Bu durumda hemen üstteki gibi tırnak işareti içinde yer alan kodu komple silip yerine, Adım 3 de bahsettiğim kodların tümünü yapıştırıyoruz. Yani kodların kapalı olduğu durumda telaş yapmaya gerek yok, yine aynı işlemi yapmış oluyoruz.

Artık o sinir bozucu "Etiketine Sahip Kayıtlar" yazısından kurtulduk. Güle güle kullanmanız dileğiyle, eğer bir sorunla karşılaşırsanız yorum bırakın en kısa sürede yardımcı olmaya çalışırım...İyi bloglamalar...

Blogspot'a "Devamını Göster" Eklentisi Eklemek

Merhaba arkadaşlar bu yazımda sizlere Blogspot için Devamını Oku Eklentisini Eklemeyi ve Yayınılarımızda resim olmadığı zaman, Anasayfamız da yazımızın önüne otomatik resim koymayı Blogumuza nasıl ekleyeceğimizi anlatacağım.

İlk olarak Blogumuzun Kontrol Panelinden/Şablon 'a geliyoruz ve sonrasında Yedekle/Geri Yükle'ye tıklıyoruz, burdan "Tam Şablonu indir" diyoruz ve şablonumuzun yedeğini almış oluyoruz.

Not: Yapacağınız işlemler için muhakkak yedek almanızı tavsiye ederim zira, zarar ziyan olmasın.

                     Otomatik Thumbnail Eklentisi için;

Not: Resimsiz Yazıya Otomatik Resim Gösterme (Sadece Anasayfa da Çıkıyor)

* Yedeğimizi aldığımıza göre bir sonraki aşamamızda HTML' yi düzenle diyoruz

* Ctrl+F ile "</head>" bu kodu buluyoruz, arama yaparken tırnak işaretinin arasında kalan kodları yazın ve aşağıdaki kodları, bulduğumuz kodun bir üst satırına yapıştırın.


Kodları Göster

<script type='text/javascript'>var thumbnail_mode = "no-float" ; summary_noimg = 400; summary_img = 400; img_thumb_height = 120; img_thumb_width = 120; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); if(img.length<=0) { imgtag = '<span style="float:left;margin-right:5px;"><img src="https://lh3.googleusercontent.com/-AWMpVJJr2jM/UuRbwz9m3DI/AAAAAAAAASw/0w6yWlm1XZE/w275-h266-no/mn3x.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; var summ = summary_noimg; } if(img.length>=1) { imgtag = '<span style="float:left;margin-right:5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } var summary = imgtag + '<div> ' + removeHtmlTag(div.innerHTML,summ) + '</div> '; div.innerHTML = summary; } //]]> </script> </div>

Not: Arkadaşlar eğer diyorsanız ki "Ben otomatik resim koymayacağım sadece devamını oku eklentisi olsun" ki cazip bir bakış açısı, yapmanızı tavsiye edeceğim şey şudur, yine yukarıda ki işlemleri harfiyen yapın yaptıktan sonra yukarı da verilen kodlar arasından aşağıda ki tırnak içerisinde olan kodları silin. Bu işlem şu demek oluyor; sadece "Devamını Oku Eklentisi" eklerseniz yazıyı kafasına göre bölmüş ve ardından gelen "Devamını Oku" yazısı ile karşılaşırsınız, fakat siz yazının miktarını ayarlamak isteyebilirsiniz bunu için Otomatik Thumbnail Eklentisini de ekleyin. Tüm işlemileri bitirdikten sonra Otomatik Thumbnail eklentisi için eklediğiniz kodlar arasından aşağıda ki kodları silin ve şablonu kaydedin. 

"if(img.length<=0) {
imgtag = '<span style="float:left;margin-right:5px;"><img src="https://lh4.googleusercontent.com/-STEFMbvwAXQ/Ux5Bu1IhINI/AAAAAAAAAsQ/Tn_u6EujGx4/w275-h266-no/mn3x.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}"

* Şablonu ön izleme yapıyoruz eğer bir sıkıntı yoksa devam ediyoruz. 

                     Devamını Oku Eklentisi için;

 * Aynı şekilde CTRL+F diyerek aşağıdaki kodu buluyoruz.

<data:post.body/>

* Evet bahsettiğim yerdeki kodu bulduysak bu kodu siliyoruz ve aşağıdaki kodu bunun yerine yapıştırıyoruz.

<!-- Oto devamını oku başlangıç -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Devamını oku...</a>
</b:if>
</b:if>
<!-- Oto devamını oku bitiş -->

* Tüm işlemleri sorunsuz yaptıysanız kodlar çalışacaktır. Fakat sizlere tavsiyem şablonu önizle diyerek muhakkak ön izleme yapın direkt kaydetmeyin.

Not: Buraya dikkat! Eğer, "<data:post.body/>" bu koddan birden fazla bulursanız, tüm bulduğunuz kodları yukarıda ki kodlarla değiştirin. Aksi halde eklenti çalışmayacaktır bilginize...

* Düzenlemek isteyebileceğiniz şeyler;

Yazının miktarını ayarlamak için ise ilk eklediğimiz kodların içinde şu kodları bulup istediğiniz yazı miktarını ayarlayabilirsiniz;

sumary_noimg = Yazıda resim olmadığı zaman belirlenecek yazı miktarı
sumary_img = Yazıda resim varken gösterilecek yazı miktarı

Bu belirleyeceğiniz yazı miktarları yazının ana sayfadaki gösterilecek özet kısmını oluşturmaktadır, burada ki rakamları kafanıza göre değiştirerek kendi isteğinize uygun bir özet görünümü elde edebilirsiniz;

* Resim eklemediğiniz yazılarınızdaki resmin, ana sayfada hangi boyutlarla görüneceğini ise aşağıdaki kodlar belirler;

img_thumb_height = 120;
img_thumb_width = 120;

* Eğer yazınızda resim yoksa, yazınızın ana sayfadaki görünecek resmi belirleyen link ise aşağıdaki linkimizdir. Bu linki istediğiniz bir resmin linkiyle değiştirebilirsiniz. Sizlere verdiğim kodlardaki örnek resim linki ise;

https://lh4.googleusercontent.com/-STEFMbvwAXQ/Ux5Bu1IhINI/AAAAAAAAAsQ/Tn_u6EujGx4/w275-h266-no/mn3x.jpg

1. Not: Bu resim sadece anasayfa da görünecektir.
2. Not: Burda anlatılanları değiştirmek tamamen sizin hayal gücünüze kalmıştır, istediğiniz herşeyi değiştirmek sizin elinizde.

Hadi hayırlı olsun eklentiniz artık hazırdır. İlerleyen zamanlarda sadece Devamını Oku Eklentisi Eklemeyi de Anlatacağım artık dilediğinizi kullanmak size kalmış...

Takıldığınız bir yer olursa yorum sekmesinden yorum bırakabilirsiniz en kısa sürede yardımcı olurum...İyi Çalışmalar...