Herhangi bir web sitesinde Yazıcı Dostu Görünüm elde etmek ile ilgili olarak, Yazıcı Dostu Görünüm - Printer Friendly Version adı altında bir şeyler yazmıştım.
Şimdi de bu tarz bir uygulamayı Blogsa için nasıl yapabileceğimiz konusunda bir şeyler yazayım. Sıfırdan başlayacağım ki üstte belirttiğim yazıyı okumanıza gerek kalmasın. Tabii okunursa da bir işe yarar herhalde.
Öncelikle olayın mantığını açıklamak gerekli. Blogsa'nın temalarında kendi Css dosyaları mevcuttur. Yapacağımız şey, başka bir Css dosyası oluşturup, bu Css'i, javascript kodları ile açtıracağımız yeni bir pop up pencerede kullanmak. Bu pop up pencere içerisinde, normal tasarımımızda olan gereksiz renklerden, sağ veya soldaki sütunlardan, alt ve üstteki divlerden kurtulmuş olacağız. Sadece yazının başlığı, tarihi, içeriği ve yazanın adı olacak.
O zaman öncelikle yeni Css dosyamızı oluşturalım.
/* CSS Document */
.ptitle
{
font-size:20px;
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
}
.ptarih
{
text-align:right;
font-size:11px;
font-family:Georgia, "Times New Roman", Times, serif;
}
.pentry
{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
Bu kodları pf.css adı ile kaydediyoruz. Siz istediğiniz ismi verebilirsiniz.
Daha önce söylediğimiz pop up pencerenin kodları da aşağıdaki şekilde.
<script language="javascript">
function Clickheretoprint()
{
var disp_setting="toolbar=no,location=no,directories=no,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
var content_vlue = document.getElementById("entry").innerHTML;
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('<html><head><title><%#Post.Title %></title><link rel="stylesheet" type="text/css" href="<%#Blogsa.Settings["blog_url"] %>Themes/Classic/pf.css" />');
docprint.document.write('</head><body onLoad="self.print()">');
docprint.document.write('<div class="ptarih"><%#Post.Date.Day +" "+Post.Date.ToString("MMMMMMM")+" "+Post.Date.Year%> </div><br />');
docprint.document.write('<div class="ptitle"><%#Post.Title %></div> <br /><div class="pentry"');
docprint.document.write(content_vlue);
docprint.document.write('</div><div class="ptarih"><%#Post.UserName%></div>');
docprint.document.write('</body></html>');
docprint.document.close();
docprint.focus();
}
</script>
Yukarıdaki kodu, kullandığınız Blogsa temasının içerisinde bulabileceğiniz PostTemplate.ascx dosyasının içerisine kopyalayacağız. Kopyalayacağımız yer; PostTemplate.ascx dosyasının 1. satırının hemen altı. Bu kod, Blogsa'nın Classic temasına göre yazılmıştır. Bunun dışındaki temalarda, Themes/Tema dizininde PostTemplate.ascx dosyası mevcutsa sorun olmadan kullanılabilir. Sadece yukarıdaki kodda, aşağıdaki satırda kendi temanızın yolunu belirtmeniz gerekir.
docprint.document.write('<html><head><title><%#Post.Title %></title><link rel="stylesheet" type="text/css" href="<%#Blogsa.Settings["blog_url"] %>Themes/Classic/pf.css" />');
Basic Template ya da Default temalarında PostTemplate.ascx dosyası olmadığından, bu uygulamayı kullanabilmek için başka bir yöntem gerekiyor. O yönde bir istek olursa yapmaya çalışırım.
Pop up penceresinin açılması için tıklanacak linki belirtmek gerekiyor. Bunun için aşağıdaki kodu,
<span><a href="javascript:Clickheretoprint()">Yazıcı Dostu Görünüm</a></span>
PostTemplate.ascx dosyasına ekliyoruz. Eklenecek yer olarak en sondaki iki adet </div> taginin önünü belirliyoruz.
Son olarak, en başta oluşturduğumuz pf.css dosyasını da Themes klasörü altında kullandığınız temanın klasörünün altına koyuyoruz. Böylelikle en üstteki görüntüyü elde etmiş oluyoruz.