Kivanc Ozuolmez

We, as you the others on the globe, like blogging a lot in Turkey. Some of my friends write in English but most of the blog-writers have Turkish blogs. So it is wise to have a Turkish blog script to publish your Turkish contents. Indeed we have many scripts in Turkish, it is nice to have the BlogEngine.NET in Turkish.  Check the official site,   

Thanks guys,

As you see on the right side I’ve many widgets and planning to add some more. But I think having so many widgets, especially if they are tall, is not visually so nice and effective. I searched for anyone who had the same problem and found Chris’s blog and his a brilliant solution,  “Collapsible Widgets”.

The idea is really nice but on the other hand, setting the display style directly to none or block causes sharp and graceless transition. Hence there are many js codes for animated div transitions; I decided to go for another solution to collapse/expand the widgets with animation. After a quick search I found a handy animation on DynamicDrive.

The rest of work is just to place these js files correctly into BlogEngine and configure it. To do this, fist; add these two js files into js folder (create a new folder named as js in the webroot ) in your webapplication’s root.

Then we need to add these js files into the generated pages on runtime. BlogEngine has a nice page structure and so easy to add js files with the AddJavaScriptInclude function in BlogEngine.Core/ Web /Controls/ BlogBasePage.cs file. Add the following lines to the BlogBasePage.cs in line 89.

   1:  //add JS files for animatedPanel

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

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

   4:   

   5:  //and the original code goes on

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

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

Then, we need to configure widgets to toggle theirselfs to collapse/expand. Editing App_Code/ Controls/ WidgetBase.cs as following will be enough to complate our changes.

   1:  if (ShowTitle)

   2:     //Change the title text to an active link to toggle collapse/expand toggle

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

   4:          

   5:     //old title

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

   7:  else

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

   9:   

  10:     //Change the contentDiv and give the id starts with widgetContent

  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:  //Initialize animatedcollapsepanel for widget.

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

That’s all, you can see the result on my widgets by clicking their titles.

I think having smooth UI transitions and animated stuff in your webpage is not bad :)

Download the codes : AnimatedWidgets-BlogEngine.NET.rar (21.97 kb) 


 

• BlogML import/export
• Extension model
• Code syntax highlighting
• ASP.NET SiteMap provider for static pages
• Support for a static page to be the front page
• Full comment RSS/ATOM feed
• Intelligent error 404 page
• E-mail notifications for future comments
• Role provider
• Extended in-site search capabilities
• SLUG – the URL doesn’t change with the title
• User control injection
• Attachments on the contact page
• Comment moderation
• Much better Mono support

So I downloaded and give it a try to import my old data from dasDlog. Here are my steps that resulted %100 successful:

1. Setup BlogEngine on my local pc, just an easy pointing from IIS to the folder.
   
2. Export dasBlog data to BlogML, hence dasBlog doesn’t have a BlogML export utility and has its own data model, I was planning to write some code for that conversion. But –for sure- it was already written by Paul and downloadable on this link.
   With this nice tool it was so easy to convert my dasBlog content to BlogML.
   
3. My images from old posts were in content/binary/ folder in the dasBlog. I left them as they were on the server. So I didn’t change any links or mapping in my posts.
   
4. I had some improvements and additions on widgets and comment mail sender extender, I will post these changes soon.
   
5. I did all configuration, styling, tracking scripts and all other settings locally.
   
6. I deleted everything except content\binary folder on my hosting server and uploaded my new BlogEngine codes and contents.
   
7. After a small setup on permissions (write permission to App_Data folder) my new blog was up and running.