Blogger sitelerinizde oluşturduğunuz yayınlara Google Drive PDF dosyalarını nasıl eklendiğini ve PDF dosyalarının mobil cihazlar üzerinde de görüntü ve şekil bozukluğunun giderilerek kullanışlı hale getireceğiz.
Yapmanız gereken öncelikle bir PDF dosyasını Google Drive'a yüklemeniz gerekir. Eğer PDF dosyalarınızı sabit bir yerden alıyorsanız, bu PDF dosyalarını da mobil uyumlu yapabilirsiniz.
Google Drive PDF Dosyası Yükleme ve Paylaşma
1. Google gmail hesabınız ile Google'da oturum açın ardından drive.google.com adresine gidin ve sol üst köşede bulunan YENİ butonuna tıklayın. Açılan pencerede Dosya yükleme sekmesine tıklayın. Yüklemek istediğiniz PDF dosyasını bilgisayarınızdan seçin ve yükleyin.2. Yüklediğiniz PDF dosyasını paylaşın. Yüklediğiniz dosya üzerine sağ tıklayın ve Paylaş... sekmesine tıklayın. Açılan pencerede sağ alt köşede bulunan Gelişmiş seçeneğine tıklayın. Yeni açılan pencerede Değiştir sekmesini tıklayın. Açılan pencerede Açık - Bağlantıya sahip olan herkes seçeneğini tıklayın ve kaydedin. Kaydet butonuna tıkladığınızda aşağıdaki gibi bir kod görünecektir.
https://drive.google.com/file/d/0B25x-zf4MlGwUlEySjlvTlR5QkU/view?usp=sharing3. Yukarıdaki kodda küçük bir değişiklik yaparak blogger sitelerinde kullanılmak üzere hazır hale getiriyoruz. Yukarıdaki kodda bulunan
view?usp=sharing yerine preview yazıyoruz. Kod kullanıma hazır hale geldi.
https://drive.google.com/file/d/0B25x-zf4MlGwUlEySjlvTlR5QkU/previewŞimdi de Blogger sitelerinde Google Drive PDF dosyalarını paylaşmak için blog sitenizde yapmanız gereken değişikliklere inceleyelim.
Blogger Sitelerinde Google Drive PDF Dosyası Ekleme ve Paylaşma
1. Blogger hesabınızda oturum açarak blogunuzun Şablon sekmesine tıklayın. Açılan sayfada HTML'yi Düzenle tıklayın. Şablon kodlarınızın bulunduğu sayfada CTRL+F yardımıyla </body> kodunu bulun ve aşağıdaki javaScript kodunu </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin. Bu kod PDF dosyalarınızın mobil cihazlar üzerinde düzenin bozulmamasını sağlayacaktır.<b:if cond='data:blog.pageType == "item"'>
<script>
//<![CDATA[
$(document).ready(function() {
$('iframe[src*="drive.google.com"]').wrap('<div style="position:relative;padding-bottom:100%;height:0;overflow:hidden;margin:0 auto;width:100%"></div>');
$('iframe[src*="drive.google.com"]').css({
"position": "absolute",
"top": "0",
"left": "0",
"width": "100%",
"height": "100%",
"border": "0"
});
$('iframe[src*="youtube.com"]').each(function() {
$(this).attr("data-src", $(this).attr("src"));
$(this).attr("src", "")
});
});
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i = 0; i < vidDefer.length; i++) {
if (vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src', vidDefer[i].getAttribute('data-src'));
}
}
}
window.onload = init;
//]]>
</script>
</b:if>NOT: Eğer PDF dosyalarınızı farklı bir siteden veya sağlayıcıdan alıyorsanız; pdf.document.com aşağıdaki javaScript kod içerisinde bulunan drive.google.com adresi ile değiştirmeniz yeterli olacaktır.
2. Blogger sitenize PDF dosyasını ekleme: Yukarıda kullanıma hazır hale getirdiğiniz Google Drive PDF kodunu aşağıdaki kod içerisine ekleyerek blog sitelerinizde kullanabilirsiniz.
a- Blogger PDF Dosyası Ekleme Kodu
<div style="position:relative;padding-bottom:100%;height:0;overflow:hidden;margin:0 auto;width:100%">
<iframe width="640" height="480" src="..." frameborder="0" allowfullscreen="" data-src="..." style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 0px;"></iframe>
</div>
<div style="position:relative;padding-bottom:100%;height:0;overflow:hidden;margin:0 auto;width:100%">
<iframe width="640" height="480" src="https://drive.google.com/file/d/0B25x-zf4MlGwamxneVZneVptS0k/preview" frameborder="0" allowfullscreen="" data-src="https://drive.google.com/file/d/0B25x-zf4MlGwamxneVZneVptS0k/preview" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 0px;"></iframe>
</div>
Blogger sitelerine PDF dosyası ekleme ve PDF dosyalarını mobil uyumlu yapma ile ilgili yayınımız hakkında görüşleriniz için aşağıdaki yorum sitemini kullanabilirsiniz.
