Bir süre önce gönüllü olarak başlattığımız BlogEngine.NET TR projesi farklı ortamlarda ilgi görmeye devam ediyor.

ASPIndir.Com sitesi gibi alanında çok başarılı hazır script download siteleri de projemize yer vermeye başladı. 

Bu nedenle, bu alanda bize destek veren ilk sistem olan ASPIndir.Com yönetimine teşekkür etmek istiyorum. 

Projemizin tanıtım sayfasına buradan ulaşabilir, yorum ve puanlarınızla destek verebilirsiniz.

05.09.2008 itibari ile BlogEngine.NET TR Projesi | www.blogenginetr.com INETA üyesi olmuştur.

Üyelikle ilgili bilgi sayfamıza bu bağlantı üzerinden erişebilirsiniz.

INETA 
INETA, Microsoft .NET teknolojileri ile ilgilenen sanal topluluklara kar amacı gütmeden, bağımsız bir organizasyon olarak destek veren uluslararası bir kurum. Ana amacı .NET konusundaki içerikleri ile bilgi paylaşımına imkan veren sanal topluluklara materyal, mekan, finans ya da konuşmacı desteği sağlamak olan INETA, başta Microsoft olmak üzere birçok sponsor tarafından destekleniyor. INETA sponsorlarından aldığı desteği bugün için sayısı sekizyüzden fazla olan üye topluluklarla paylaşıyor.

       AddThis ve türkçeleştirilip , türk sitelerini de barındıran EkleBunu servisleri size tek bir butonda bütün link paylaşım ve sosyal sitelerine kendi ziyaretçilerinizin herhangi bir yazınızı veya tüm sitenizi o sitelerde kaydetmesini , paylaşmasını sağlayabilirsiniz. Böylece sitenize yazdığınız bir yazıyı kendi ziyaretçilerinizin yardımıyla , yazdığınız konuları seven ilgili kişileri sitenize çekebilirsiniz. Daha önce yayınladığımız Sosyal Etiketler Eklentisi ile aynı işlevi yapıyor , fakat hem çok daha fazla site sunuyor , hem de çok az bir yer kaplayarak. Kendi blogengine sitemde AddThis 'in kendime göre özelleştirdiğim versiyonunu görebilirsiniz , her yazının sağ altında "PAYLAŞ" yazılı butonuna tıklayarak göz atabilirsiniz. EkleBunu da tamamen aynı işlevi sağlıyor isim benzerliğinden de anlaşılıyor.

Hangisini Seçmeliyim ( AddThis || EkleBunu ) ?

       İki servis de ücretsiz üyeliklerle size özel kod yaratıp , sitelerindeki kendi sayfanıza girince istatistik sağlıyorlar. Hangi gün , hangi yazım , kaç kez tıklanmış grafiklerle inceleyebiliyorsunuz. EkleBunu 'nun avantajı türk sitelerine de kayıt olabilmesi. AddThis'in avantajı ise site isminizin yazdığı ve site logonuzu koyabileceğiniz bir yer sağlıyor. Özelleştirme yapmak için AddThis daha avantajlı.  Ama her ikisinde de üzerine bastığınız butonu kendi sitelerinde örnek verdiklerinden birini seçebilir veya o butonu kendiniz yaratabilirsiniz . Ve EkleBunu kaliteli olmayan türk siteleri koyarak bazı benim gözümde önemli olan yabancı siteleri atlamış Twitter , MySpace  gibi ama bunlar AddThis'de var. İkisini de denemenizi öneririm.

Kurulum: EkleBunu

       Siteye üye olduktan sonra buton al sayfasında hangi tür buton istediğinize eklebunu butonunu seçiyoruz. [ Diğer seçenek RSS Ekle butonu ise BlogEngine'daki Abone Ol ( Subscribe to my Feeds)  ile aynı işlevi görüyor. RSS'inizi kaydedenlerin İstatistiğini tutmak isterseniz RSS butonunu da kullanabilirsiniz. ] "Hangi Buton" bölümünde beğendiğiniz bir buton varsa seçebilirsiniz , yok ben kendi butonumu yaratmak istiyorum derseniz oluşan daha sonradan oluşacak kodda butonun her ayarını HTML kodlarıyla butonu değiştirebiliriz. Daha sonra "Nereye" dediği yerde "Blog Sayfalarına" seçeneğini daha sonra altında oluşan yere de "Diğer" seçeneğini seçip "Butonu Al" dediğinizde size özel kodunuz oluşacaktır.

       Oluşan kodu BlogEngine'a uyarlamamız için bir kaç işlem yapmamız gerekiyor. İşlemleri gösterirken kendime özel oluşan kodları sizle paylaşacağım. Kişiye özel olmasını sağlayan yer ise  benim kodlarımda  k=8935  yazan yer. Buradaki kodları kopyalarken üst tarafta anlatığım özel kodunuzda oluşan k= ? sayısını kendinizinkiyle değiştirmeniz gerekiyor. İşlevinde bir farklılık yaratmaz ama kendi istatistiğinizi tutmanıza yarıyor. Aşağıda örnek kodu veriyorum. Daha sonra değiştirdiğim yerleri nedenleriyle beraber sizlere anlatacağım.

<!-- EkleBunu Sosyal Paylaşım Butonu kodu başlangıcı -->

<a href="http://www.eklebunu.com/ekle.php" onmouseover="actionListener(this);" onclick="window.open(' http://www.eklebunu.com/ekle.php?k=8935& amp;u='+ encodeURIComponent('<% =Post.AbsoluteLink.ToString()  %>')+'&amp;t='+ encodeURIComponent( ' <%=Post.Title.ToString().Replace("'","^").Replace("\"","+") %> '), 'eklebunu', ' scrollbars=yes, menubar=no, width=620, height=520, resizable=yes, toolbar=no,  location=no, status=no, screenX=200, screenY=100, left=200, top=100'); return false;" title="Tüm link Paylaşım sitelerine ekleyin!" target="_blank"><img src="http://www.eklebunu.com/pub/eklebuton2.gif" width="125" height="16" border="0" alt="EkleBunu Sosyal Paylaşım Butonu" /></a>

<!-- EkleBunu Sosyal Paylaşım Butonu kodu sonu -->

       EkleBunu işlevini gerçekleştirebilmesi için iki parametre alması gerekiyor. Yazı'nın adresi ve yazı'nın başlığı. EkleBunu sitesinde oluşan kodunuzu incelerseniz bu parametrelerin ilkinde   encodeURIComponent(location.href)   kullanıyor. Bu da yazıyı nerede okuyorsanız direk o anki adresi parametre olarak geçiriyor. Bu BlogEngine için çalışmaz çünkü BlogEngine'da bir sürü yazıyı anasayfa üzerinde okuyoruz. Örneğin bir ziyaretçi bir yazınızı beğenip delicious ' da kaydetti diyelim ama kodunuz yanlış olduğu için sizin anasayfanızı kaydetmiş olacak , daha sonra o yazıya ulaşmak isteyenler o yazıya ulaşamayacaklar. Aynı sorun yazı'nın başlığı için de geçerli. Sıradaki kod ile encodeURIComponent(document.title)  anasayfanın başlığını almış olacak sitenin verdiği kod ile. EkleBunu butonunun basıldığı yerdeki yazının başlığını ve adresini almasını sağlamamız gerekiyor.

EkleBunu'nun Yarattığı Kodu BlogEngine'a Geçirmek İçin Gerekli Olan Değişiklikler

1-)   encodeURIComponent(location.href)      yerine 

encodeURIComponent('<%=Post.AbsoluteLink.ToString()%>')

2-)  encodeURIComponent(document.title)   yerine

encodeURIComponent( '<%=Post.Title.ToString().Replace("'","^").Replace("\"","+")  %>')

<% =     %>  ile C# gömülü kodlarını kullanarak BlogEngine objelerini kullandım. İkinci yaptığım değişiklikteki iki tane replace'in nedeni ise başlıktaki yazılabilecek olası tırnak karakterlerini başka bir karaktere değiştirmek. Çünkü fazladan  ' ve " işaretleri javascript kodunun çalışmamasına dolayısıyla EkleBunu butonunuzun çalışmamasına neden olur. Ben ' işaretini ^ ile " işaretini de + ile değiştirdim. Siz istediğiniz bir karakter veya sadece boşluk bırakabilirsiniz.

Butonu Nereye Eklemem Gerekiyor?

       Üstteki işlemlerle kodumuz hazır , yerleştirilmeyi bekliyor. Kullandığınız tema'nın klasörünü açın ve içindeki PostView.ascx dosyasını [ themes\(kullandığınız tema)\PostView.ascx ] herhangi bir yazı editörüyle açıp , istediğiniz yere yerleştirin. img ile oynayıp kendi butonunuzu yaratabilirsiniz.

Kurulum: AddThis

       Tamamen aynı işlemlerden oluşuyor. Kodları da tamamen aynı olmasına rağmen AddThis için BlogEngine'a uyarlanmış versiyonunu aşağıya kopyalıyorum. Yine kişiye özel kod olduğu için pub=alpcoker  yazan yeri kendi kullanıcı isminiz ile değiştirmeniz gerekiyor , eğer istatistikleri öğrenmek istiyorsanız.

 <!-- AddThis Button BEGIN -->
<a href="http://www.addthis.com/bookmark.php" onclick="window.open('http://www.addthis.com/bookmark.php? wt=nw &pub=alpcoker &url='+encodeURIComponent(' <%=Post.AbsoluteLink.ToString()  %> ')+'&title='+encodeURIComponent(' <%=Post.Title.ToString().Replace("'","^").Replace("\"","+")  %> '), 'addthis', ' scrollbars=yes, menubar=no,width=620,height=520,resizable=yes, toolbar=no, location=no, status=no, screenX=200, screenY=100, left=200, top=100'); return false;" title="Bookmark and Share" target="_blank"><img src="http://s9.addthis.com/button1-addthis.gif" width="125" height="16" border="0" alt="Bookmark and Share" /></a>
<!-- AddThis Button END -->

Özelleştirilebilir AddThis

       Bu sayfadan butonunuzun kendi blogengine sitemdeki gibi daha küçük bir pencerede fareyle üzerine gelince veya tıklayınca açılmasını sağlayıp en çok kullandığınız sekiz siteyi oraya ekleyip geriye kalan siteleri de "More" tuşuna basılarak açılmasını sağlayan butonun kurulumunun anlatıldığı dökümanı bulabilirsiniz. Ayrıca bir çok görünüm ayarını değiştirebilirsiniz. Eğer üstte yazdıklarımı çalıştırabildiyseniz kendi sitem için hazırladığım bu kodu da incelemenizi öneririm.

            <script type="text/javascript">
            addthis_pub             = 'alpcoker';
            addthis_logo            = 'http://www.alpcoker.com/themes/Monochrome/images/alpcokerLogo.gif';            

            addthis_logo_background = '000000';
            addthis_logo_color      = '666699';
            addthis_brand           = 'alpcoker.com';
            addthis_offset_left = -55;
            addthis_options         = 'favorites, email, digg, delicious, myspace, facebook, google, live, more';
            </script>
            <a href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '<%=Post.AbsoluteLink.ToString()  %>', '<%=Post.Title.ToString().Replace("'","^").Replace("\"","+")  %>')" onmouseout="addthis_close()" >
                <img id="Img1" runat="server" src="~/themes/Monochrome/images/paylas.gif" width="103" height="17" border="0" alt="Bu yazıyı diğer sitelerde paylaş" />
            </a>
            <script type="text/javascript" src="http://s7.addthis.com/js/152/addthis_widget.js"></script> 

Sevgili BlogEngine.NET TR kullanıcıları;

BlogEngine.NET TR tarafında olan gelişmeleri daha hızlı takip etmek, siteye eklenen her içerikten anında haberdar olabilmek ve tartışma gruplarıyla tavsiyelerinizi bildirerek sistemimizin daha da ileri gitmesini sağlamak için BlogEngine.NET TR MSN Grubu'na katılabilirsiniz.

Böylece daha aktif şekilde bilgiyi paylaşıyor olacağımızı düşünüyoruz.

BlogEngine.NET TR Ekibi

       APML , Attention Profiling Mark-up Language 'in kısaltması. APML , bir kişinin ilgi alanlarının bulunduğu XML formatında bir dosyadır. Örneğin DVD almak için bir siteye girdiniz , site sizin sevdiğiniz türdeki filmleri veya hangi yönetmenleri sevdiğinizi bilseydi ve ona göre sevebileceğiniz filmleri size listeleseydi çok güzel olurdu değil mi? İşte bunu bilgisayarınızdan veya internetten APML dosyanızı tanıtmak ile yapabilirsiniz. İlgi alanlarının kataloglandığı bir web standardı olmaya çok yakın , APML.

BlogEngine ve APML

       Benim üzerinde duracağım kısım ise BlogEngine tarafında üretilen APML dosyası. Bu dosyayı blogunuzun ana dizininde oluştuğunu göreceksiniz. ( ~/apml.axd , örnek:  http://www.blogenginetr.com/apml.axd ) . Her BlogEngine sitesine özel olarak üretilen bu dosya , kişinin hangi konularda yazılar yazdığını belirleyip , ilgi alanlarını saptamaya çalışıyor. Bunu da yazılara eklediğiniz etikeler (tags) ve kategorilerden elde ediyor. Ayrıca bu işlemi yaparken hangi konularda daha çok ilgili olduğunuzu da 0 ile 1 arasında bir değer vererek öncelik sırasına koyuyor. Örneğin blogengine en çok yazı yazdığınız konu onun ilgi alanı derecesi olarak tabir edebileceğimiz değeri 1 ise az yazdığınız bir konu tema'ysa onun değeri de 0.0431578 gibi bir değer oluyor. Böylece ister istemez yazdığımız konular ile bütün ilgi alanlarımızın bir dosyası oluşuyor.

Nerede Kullanabilirim?

       En üstte verdiğim örnek gibi , biz de kendi blogengine sayfamızdaki ilgi alanlarımızın bulunduğu APML dosyasını başka bir blogengine kullanan siteye tanıtıp , sadece ilgilendiğiniz alanlardaki yazıların filtrelenip bize sadece o yazıların gösterilmesi hoş bir özellik olarak göze çarpıyor. Eğer standard temasını incelediyseniz sağ üstte "APML ile filtrele" adresini göreceksiniz. Ona bastığınızda bir javascript penceresi açılacaktır ve açıklamanın da belirttiği gibi sadece kendi blogunuzun adresini girmeniz yeterli , otomatik olarak apml dosyasınıza bağlanacaktır (blog adresininizi yazarken sitenizin başına http:// eklemeyi unutmayın ) veya başka bir yerde tutuyorsanız APML dosyanızı onun adresini /apml.axd şeklinde sonlanarak girmeniz gerekiyor. Filtrele dediğinizde ortak ilgi alanlarınız önem sırasına göre listelenecektir.

       Eğer filtrelenen yazıların daha özet bir şekilde arama'nın kullandığı listemeyi isterseniz , arama kutusunu bulup aynı şekilde sitenizin veya APML dosyanınızın internette bulunduğu dosyayı göstererek , o kişinin ilgilendiğiniz konulardaki yazıları çıkacaktır.

Nasıl Siteme Koyabilirim?

       Bizim BlogEngineTR blogumuzda kullandığımız gibi Standard temasına dikkat ettiyseniz APML ile filtrele linkini görebilirsiniz. Eğer kendiniz tema yazdıysanız veya başka bir temayı blogengine'a çevirdiyseniz  <a href="javascript:void(filterByAPML())" >APML ile filtrele</a> bu kod ile temanıza o linki ekleyebilirsiniz.

Kendim geliştirmiş olduğum, sadece BlogEngine için değil, kendi asp.net projelerinize de uyarlayabileceğiniz kullanışlı bir sayfalama kontrolü olan ECPager'ı tanıtıyor olacağım.
Bildirgec okurlarının kolaylıkla tanıyabilecekleri bir sistem, çünkü aynı mantıkla çalışmakta (:

Kurulumu:
Yazının sonunda bulunan linkten indirebileceğimiz ECPager.cs dosyasını, BlogEngine projemizde "<root>\App_Code\Controls\" dizinine kopyalayalım.
Ardından "<root>\User Controls\PostList.aspx" dosyasını açıp, sayfanın en altına aşağıdaki kodu ekleyelim.
<blog:ECPager ID="ecPager" runat="server" CssClass="pager"></blog:ECPager>

Şimdi, "<root>\User Controls\PostList.aspx.cs" dosyasını açıp, sayfalama kontrolümüzün propertylerini set edelim. Bunun için PostList.aspx.cs dosyası içersinde bulunana BindPosts fonksiyonun en altına aşağıdaki kodları yazmamız yeterli olacaktır.
private void BindPosts()
{
 //Var olan kodlarda bir değişiklik yapmadan
 //Fonksiyonun en sonuna aşağıdaki kodları ekliyoruz.

 ecPager.TotalRecords = visiblePosts.Count;
 ecPager.ItemsPerPage = BlogSettings.Instance.PostsPerPage;
 ecPager.CurrentPageIndex = page+1;
 ecPager.LinkPageFormat = "page=";
}

ECPager Sayfalama kontrolümüz hazır!

Opsiyonel Ayarlar

İstersek CssClass property'sinde belirtdiğimiz "pager" isimli bir class yaratıp, sayfalama kontrolümüzün style'ını değiştirebiliriz. (Aşağıdaki gibi)
.pager
{
 text-align: center;
 color: #777777;
 font-size: 14px;
 font-weight: bold;
 margin-bottom: 20px;
}
.pager a
{
 color: #E8A02C;
 font-size: 14px;
}

BlogEngine'e ait olan eski sayfalama linklerini de yine isterseniz kaldırabilirsiniz. Bunun için PostList.aspx ve PostList.aspx.cs dosyası içersindeki gerekli yerleri silmeniz yeterli.

Saygılarımla,

Emrah ÇETİNER

ECPager.rar (1,20 kb)

Merhabalar ;

Last Fm'e üyelik bir çılgınlıktır gidiyor. Blogengine'nin twitter'ı vardı ancak LastFm için widget'ı eksikti. Ve bu eksiği bu eklenti ile kapatıyoruz.

Bu eklentiyi kullanmak için sizlere 2 farklı yol anlatacağım. Hangisi size uygun ve hangisi sizin tarafınıza daha kolay ve erişebilir geliyorsa onu kullannabilirsiniz.

1) Sql aracılığı ile erişim.

Not : Bu bölümde Source kısmından derlenip dll kullanılacağı için daha önceden kendine göre değişiklik yapıp yada kendine özel geliştirmeler yapan aşağıdaki işlemleri kendi derleriği projeye ugulamalıdırlar.

a) Öncelikle Blogengine ‘nin derlenmemiş Source halini bilgisayarınıza Buradan  indiriniz.
b) İndirdiğiniz dosyayı paketinden çıkartınız.
c) Visual Studiu çalıştırınız ve , File menüsünden Open’ı daha sonrada Project/Solution’u tıklayınız. Daha sonra yol olarak paketi çıkarttığınız yerdeki Solution "BlogEngine.NET 1.4.x.sln" tıklayınız. Ve Blogengine karşınıza gelecektir.
d) Daha sonra Solutionda BlogEngine.Core da bulunan "BlogSettings.cs" Classını açınız. Sayfanın en altına indiriniz.
e) Aşağıdaki kodları birebir aynen kopya/yapıştır yapınız.

        private string LastFmString;
        public string LastFm
        {
            get
            {
                return LastFmString;
            }
            set
            {
                if (String.IsNullOrEmpty(value))
                {
                    LastFmString = string.Empty;
                }
                else
                {
                    LastFmString = value;
                }
            }
        }
f) Daha sonra projeyi derleyiniz.
g) Derleme işlemi bittikten sonra "BlogEngine.Web" Altında bulunan Bin klasorunden "BlogEngine.Core.dll" alınız ve kendi projeniz altındaki bin ile yer değiştiriniz.
h) Yer değiştirme işlemi sornasında kendi projenizi derleyiniz.
i) Lütfen Buradan dosyaları indiriniz ve ftp ana dizininiz altında bulunan widget klasorune upload ediniz.
j) Daha sonra Diğer widgetleri eklediğiniz gibi projenize ekleyiniz.
k) Düzenle diyerek, Kendi lastfm url adresinizi ve kaç şarkı gözüneceğini belirleyiniz.

Kullanıma hazırdır.

2) Class dosyası ile erişim.

a) Buradaki amac herhangi bir database kullanmadan class içerisinde url ve adeti belirleyerek yapmaktadır.
b) Buradan dosyaları indiriniz.
c) İndirdiğiniz dosyayı paketinden çıkartınız.
d) Paketdeki dosyalardan widget.aspx.cs dosyasını açınız ve aşağıdaki belirttiğim yerleri kendinize uygun olarak değiştiriniz.
LastFmUserURL : Buraya kendi username’inize ait url bilgisini giriniz
LastFmUserSayi : Göstermesini istediğiniz şarkı adetini giriniz.
e) Yukarıdaki alanları değiştirtikten sonra ftp nizde ana dizininde bulunan widget klasorune upload ediniz.
f) Diğer widgetleri eklediğiniz gibi projenize ekleyiniz.
g) Düzenle diyerek başlığı değiştirebilirsiniz.

Kullanıma hazırdır.

Last Fm Widgetimizde hazır olarak artık kullanmaya başlayabilirsiniz.

Bir sonraki eklentimizi hazırlamaya başlayalım : )

Not: Tasarım konusunda her türlü değişiklikleri yapabilirsiniz. Ben yaptığım eklentileri tasarım tarafında bakmıyorum dolayısı ile klasik blogengine görünümü ile bırakıyorum.

Genelde blog kullanıcılarının birçok widget’ları vardır ve daha da eklemeyi düşünürler.  Fakat düşündüm ki ben de çok widget ürettim bununla birlikte widget listem bu şekilde uzamaya devam ettikçe, görsellikten ve etkili olmaktan çıkıyor. Başka kimin böyle bir sorunu vardır diye araştırırken Chris’in blog’unda ve onun harika çözümünü, portatif widget’ları (“Collasible Widgets”) bulduk.

Fikir gerçekten hoş ama diğer taraftan görünüm tipini direkt olarak hiç göstermemeye veya blok halinde göstermeye ayarlamak, keskin ve kaba geçişlere sebep olmaktadır.  Animasyonlu div geçişleri için çok miktarda js kodları olduğu için, animasyon ile daraltacak veya genişletecek bir çözüm aramaya karar verdim. Hızlı bir arama sonucu  DynamicDrive’da hazır bir animasyon bulduk. Gerek görsel açıdan, gerek kullanışlılık olarak çok verimli bir çözüm gibi duruyor.  

Artık kalan iş sadece bu js dosyalarını doğru bir şekilde BlogEngine’e koymak ve js dosyasını yapılandırmaktır. Bunu yapmak için, ilk olarak js dosyasını web uygulamanızın kök dizinindeki js klasörünün içine ekleyiniz. ( Eğer böyle bir klasörünüz yoksa kök dizinde js adında yeni bir klasör oluşturun)

 Sonra,  bu js dosyalarını çalışma zamanında oluşturulmuş sayfalara koymanız gereklidir. Bu noktada, BloeEngine iyi bir sayfa yapılandırmasına sahiptir. Bu yüzden çok kolay bir şekilde AddJavaScriptInclude fonksiyonu ile js dosyalarını BlogEngine.Core/ Web /Controls/ BlogBasePage.cs dosyasına ekleyebilirsiniz. Aşağıdaki kodları BlogBasePage.cs içinde 89. Satıra ekleyiniz.

   1:  // Animasyonlu Panel için JS dosyalarını ekleyin

   2:  AddJavaScriptInclude(Utils.RelativeWebRoot + "js/jquery-1.2.2.pack.js");

   3:  AddJavaScriptInclude(Utils.RelativeWebRoot + "js/animatedcollapse.js");

   4:   

   5:  //Ve orjinal kod ile devam edin

   6:  AddJavaScriptInclude(Utils.RelativeWebRoot + "blog.js");

   7:  if (User.IsInRole(BlogSettings.Instance.AdministratorRole))

Sonra,  gerektiğinde daralacak ve genişleyecek portatif widget geçişleri için widget’lari kendi aralarında yapılandırılması gerekmektedir. App_Code/ Controls/ WidgetBase.cs’i aşağıdaki düzenlemeniz değişiklikleri tamamlamanız için yetecektir.

   1:  if (ShowTitle)

   2:     // Daralır ve genişleyebilir geçişli yapı için başlık metnini aktif bir link olarak değiştiriniz

   3:     sb.Append("<a href=\"javascript:animatedcollapse.toggle('widgetContent" + WidgetID + "')\"><h4>" + Title + "</h4></a>");

   4:          

   5:     // eski başlık

   6:     //sb.Append("<h4>" + baslik + "</h4>");

   7:  else

   8:     sb.Append("<br />");

   9:   

  10:     // contentDiv i değiştirin ve widgetContent ile başlayan bir id veriniz.

  11:     sb.Append("<div  id=\"widgetContent" + WidgetID + "\" class=\"content\">");

  12:   

  13:  writer.Write(sb.ToString());

  14:  base.Render(writer);

  15:  writer.Write("</div>");

  16:  writer.Write("</div>");

  17:   

  18:  // Widget için Animasyonlu Portatif panelinizi başlatın.

  19:  writer.Write("<script type=\"text/javascript\"> animatedcollapse.addDiv('widgetContent" + WidgetID + "', 'fade=1'); animatedcollapse.init();</script>");

Hepsi bu kadar, bunun bir örneğini http://www.kvnc.net/ adresinde widgetların başlıklarına tıklayarak görebilirsiniz. Web sayfanızda pürüzsüz geçişlere ve animasyonlu ögelere sahip olmak kötü bir şey olmasa gerek .

Kodları indirebileceğiniz adres: AnimatedWidgets-BlogEngine.NET.rar (21.97 kb) 

Not: Bu makale Kıvanç Özüölmez'in sitesinden alınarak Türkçe'ye çevrilmiştir. Orjinali için bu bağlantıyı ziyaret edebilirsiniz.

Saygılarımla,

Cemil UZUN