Blogger Resmi Yazdır Butonu Oluşturma

Web sitelerinde bazı zamanlar resimleri kolayca yazdırmak isteyebiliriz. Özellikle de bir öğretmen, bir anne babaysanız kesinlikle webdeki içerikleri yazdırmak zorunda kalabiliyoruz. Önce resmi bilgisayara indirip sonra yazdır demek vakit kaybettirici ve bu içerikleri her zaman bilgisayarımızda depolamak istemeyebiliyoruz. Birçok kaliteli sitede gördüğümüz resmi yazdır butonunu sizde kendi blogger sitenize ekleyebilirsiniz. Sitenize blogger resmi yazdır butonu eklemek için tek yapmanız gereken birkaç satır kod eklemek.

Baştan söylemek istiyorum bunun otomatik bir yolu yok. Varsa da ben bulamadım. Başka bir yol varsa siz yorumlara yazarsanız çok sevinirim. Ben ve benim gibi arkadaşlar da faydalanmış olur.

Bunun için sizlere iki kod vereceğim. Bunlardan birinci kodu her defasında yazılarınıza koymuş olduğunuz içeriğin (resmin) altına koyacaksınız. Diğer kodu ise bloggerda temalar kısmında temanın html dosyasının içerisinde style kısmının içerisine koyacağız.

Resmi Yazdır Butonu Kodları

Kısaca birkaç resim ile sizlere bunu göstermek ve anlatmaya çalışmak istiyorum. Öncelikle blogger kontrol panelimizi açıyoruz ve deneme amaçlı yeni yayın kısmına tıklayıp yayın başlatıyoruz ve içerisine bir tane resim koyuyoruz. Deneme resmimizi koyduktan sonra sol üstte aşağıdaki resimde gösterdiğimiz yere tıklayıp ”HTML GÖRÜNÜMÜ” kısmına tıklayarak bu kısma geçiyoruz.

Blogger RESMİ YAZDIR butonu

HTML GÖRÜNÜMÜ butonuna tıkladığınızda karşınıza bu yayının html sayfası gelecek. İşte tam şunun gibi:

Blogger RESMİ YAZDIR butonu

Yukarıdaki bu resimde altını yeşil ile çizdiğim kısım az önce eklediğimiz resmimizin bulunduğu yol. Bu adres birazdan işimize çok yarayacak.

Şimdi yukarıdaki resimde gördüğünüz HTML GÖRÜNÜM deki kodların altına tıklayıp birkaç kez ENTER tuşuna basarak aşağılara iniyoruz ve vermiş olduğum şu kodu yapıştırıyoruz. 

<script type="text/javascript">
function printImg(url) {
  var win = window.open('');
  win.document.write('<img onload="window.print();window.close()" src="https://1.bp.blogspot.com/-1TScoNQTWIs/X5mOdS0sBaI/AAAAAAAA974/LkwbShgCWkY7YIqPtyOcStS9k8eh8YbIACPcBGAYYCw/w488-h640/23504812ad32764.jpg" />');
  win.focus();
}
</script>

<button class="button" onclick="printImg('http://i.stack.imgur.com/hCYTd.jpg')">Resmi Yazdır</button>

Kodu yapıştırdığınızda yukarıdaki gibi görünecek. Kaç satır aşağı indiğinizin bir önemi yok.

Bu kodda görmüş olduğunuz —–> https://1.bp.blogspot.com/… —–<diye başlayan linkli kısım benim resmimin yüklü olduğu adrestir. Siz bu uzantıyı, yukarıda söylediğim yeşil yerden kendi resminizin uzantısını alıp bununla yer değiştiriyorsunuz. Artık resmi yazdır butonunuz gönderinizin içinde bulunuyor. Aynı aşağıdaki resimde olduğu gibi.

Blogger RESMİ YAZDIR butonu

Butonunuzu güzelleştirmek istiyorsanız

Ancak biz bu butonun şeklinin biraz daha güzel olmasını istiyoruz. Bu yüzden bloggerda kullandığımız temamızın HTML dosyasının içerisine buton ile alakalı birkaç renk, şekil ve hangi pozisyonda durması gerektiğini söyleyen kodları koymalıyız. Bunun içinde aşağıdaki adımları izleyeceğiz.

Öncelikle blogger yönetim panelimizde sol kısımdan TEMA butonuna tıklayıp açılan sayfada turuncu renk ÖZELLEŞTİR butonunun yanındaki oka tıklıyoruz ve açılan sekmede HTML’yi düzenle kısmına tıklıyoruz. Aşağıdaki resimde olduğu gibi:

Blogger RESMİ YAZDIR butonu

Karşınıza temanızın HTML dosyasını düzenleme penceresi gelecek. Burada önce kodların arasında bir noktaya tıklıyoruz ve kodların içerisinde arama yapabilmek için CTRL+F tuşlarına basıyoruz. Karşımıza aşağıdaki resimdeki 1 numaraları pencere gelecek. Buraya Blogger Template Style yazıp ENTER tuşuna basıp aratıyoruz. Bu genelde HTML dosyasının içerisindeki STYLE yani stil kodlarının başlangıcına yazılan bir açıklama. Eğer bunu bulamazsanızda endişelenmeyin çünkü her tema yapıcısı bunu yazmayabilir. Aramaya style diye yazarsanız da stil dosyalarının olduğu yeri bulabilirsiniz. Bilmeyenler için söylüyorum stil dosyaları kodlarda en üstlerde olur ve aşağıdaki resimdeki 3 numaralı alanda olan kodlar gibi olmaktadır.

Temanızın style kısmını bulduktan sonra yine herhangi bir satıra aşağıdaki kodu yapıştırıyoruz ve sağ üstten kaydet butonuna tıklıyoruz. 

.button {
  background-color: #f44336; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  position: relative;
  left: 40%;
  cursor: pointer;
}

Yukarıdaki kodların arasındaki #f44336 kodu butonumuzun renk kodudur. Bu kodu kendi istediğiniz renk kodu ile değiştirebilirsiniz. Bunun için bu kodu Google’a yazın ve karşınıza çıkan alanda istediğiniz rengi seçip kodunu alıp bu alana yapıştırınız. Aşağıdaki gördüğünüz gibi:

Ayrıca yukarıdaki css kodlarının arasındaki left: 40%; kodu butonun soldan sağa doğru ne kadar gelecek onu belirtir. Yani normalde kod sola yaslı durur ancak ben %40 sağa gelsin diyerek sitede yazının altında tam ortada durmasını sağladım. Sizde kendi sitenize göre bunu ayarlayabilirsiniz.

Her şeyi tamamladıktan sonra sağ üstten “KAYDET” butonunuza tıklayın ve artık tamam. İşte sizde blogunuzdaki resimleri yazdırmak için bir butona sahipsiniz. Aşağıda gördüğünüz gibi :

Unutmayın! Yazının içerisine eklediğimiz bu kodu, eğer içerisinde yazdırmak istediğiniz bir resimli sayfa olursa her defasında HTML kısmına eklemek zorundayız. Blogger resmi yazdır butonu eklemek için yapmanız gerekenler bu kadar.

Bir Cevap Yazın