Blogger Yazı İçerisinde Web Sayfası Görüntüleme

Blog yazıları içerisinde wes sayfası / blog önizleme - Yazılarınız içerisinde paylaşmış olduğunuzun blog yada web sitelerinin bağlantılarına verilerına görsel olarak önizleme efekti ekleme ipuçlarını paylaşacağız. Bu uygulamaya Türkçe'de başparmak uygulması da denilmekte, fakat pek kullanılmamaktadır.

Bu bize yazılarımız içerisinde bulunan bağlantıların ne olduğu ve bağlantıyı yeni sekmede açmadan okuyuculara bilgi verilmesini sağlayarak blog kullanımını daha da etkinleştirmekte.

Blogger Thumb Basit Önizleme Nasıl Uygulanır?

1. Aşağıdaki komut dosyalarını blogunuzun Şablon HTML kodları arasına ekleyerek uygulamayı entegre etmelisiniz. Blogger hesabnıza giriş yapın ve blogunuzu seçin. Seçmiş olduğunuz blogun arayüzünde bulunan Şablon > HTML'i Düzenle > CTRL+F yardımıyla </body>  yada </head>  kodunu bulun ve aşağıdaki jQuery kodunu </body>  yada </head>  kodunun bir satır üstüne ekleyin.

<script src="https://googledrive.com/host/0BwDz8flINeefOFZKc3BVTWg2Z0U" type="text/javascript"></script>

2. Aşağıdaki CSS kodlarını ]]></b:skin> yada </style> kodunun bir satır üstüne ekleyin.

.break {text-align: center;}
.link-preview-wrapper {-moz-box-sizing: content-box;box-sizing: content-box;position: absolute;overflow: hidden;z-index: -1;opacity: 0;margin-top: -4px;border: 1px solid #222;box-shadow: 0 4px 6px -2px rgba(0,0,0,0.3);transition: z-index steps(1) .3s, opacity .3s, margin-top .3s;}
a:hover .link-preview-wrapper {z-index: 2;opacity: 1;margin-top: 6px;transition: opacity .3s, margin-top .3s;}
.link-preview-loading, .link-preview-cover {position: absolute;top: 0;bottom: 0;right: 0;left: 0;}
.link-preview-loading {display: table;height: 100%;width: 100%;font-size: 15px;text-align: center;color: #999;background-color: #dcd8d8;}
.link-preview-loading::before {content: 'Yükleniyor...';display: table-cell;text-align: center;vertical-align: middle;}
.link-preview-cover {background-color: rgba(0,0,0,0);}
.link-preview-frame {border: none;
-webkit-transform-origin: 0 0;transform-origin: 0 0;}

Ve şablonu kaydedin.

3. Bu uygulamada istenilen önizlemeleri elde etmek için id="p1", id="p2" ve id="p3" ID kodlarını kullanacağız. Örnek uygulamaya aşağıdaki DEMO bağlantısından ulaşabilirsiniz.

<p id="p1">Yazılarınızı örnek olarak bu şekile yazmanızı ve gördüğünüz gibi yazı içerisinde paylaşmak istediğiniz wen sayfası yada blogun bağlantısını oluşturmak için örnek blog URL'si de gösterilmiştir. Bu URL'de yazılaınızda sadece blogun yada web sitesinin adı görünecektir.<a href="http://cizgifilmhikayeleri.blogspot.com">Çizgi Film Hikayeleri</a></p>

Açıklamalar;

id="p1" = Önizleme linklerini vurgulu gösterme.
id="p2" = Önizlemede hover efektini uygulamama.
id="p3" = Önizlemelere hover efetini uygulayarak hover ile aynı anda önizlemenin sağlanması.

DEMO launch