Pada Desember saya menerbitkan posting menunjukkan kepada Anda yang besar Posting terkait dengan gadget thumbnail . Itu gadget ditampilkan sejumlah dipilih posting terkait dihasilkan dengan menggunakan label, tulisan ditampilkan menggunakan thumbnail dengan judul posting below.That pos telah menjadi salah satu yang paling populer tentang Spice Up Blog Anda selama beberapa bulan terakhir dan hari ini saya punya lain Related Posts Dengan Gadget Thumbnail tetapi dengan fitur yang sangat keren.
saya menemukan gadget ini di template saya diterbitkan pada Template Blog sayaBestBloggerTemplates.Net dan tahu akan popular.This Posting terkait gadget tidak menampilkan judul posting di bawah Miniatur melainkan memiliki Efek Hover untuk menampilkan title.So posting di bawah posting Anda akan hanya gambar kecil tetapi ketika Anda membawa kursor anda ke atas mereka thumbnail diganti dengan judul. Hmmm tidak mudah untuk menjelaskan dalam teks sehingga kita lihat di screenshot dan demo hidup di bawah ini.
Screenshot - Normal: Screenshot Hover - Anda dapat melihat judul ditampilkan ketika kursor melayang di: Live Demo - Saya menggunakan gadget ini pada saya Site Icon Sosial(Gulir Untuk Akhir Dari Setiap Posting)
Tambah Gadget Posting terkait Untuk Blog Anda
. Langkah 1 Di dashboard Blogger Anda klik Desain> Edit Html> Centang Expand Widget kotak template. Langkah 2. Cari potongan kode berikut di blog Anda Html: (Klik Ctrl dan F untuk bar pencarian untuk membantu menemukan kode - Lebih Info )
]]> </ B: skin>
Langkah 3. Salin dan sisipkan kode berikut Langsung Di atas / Sebelum ]]> </ b: skin>
<!--start related posts css Info : http://www.spiceupyourblog.com-->
ul#related-posts{
font-family:"Droid Sans",Helvetica,Arial,sans-serif;
font-size:10px;
list-style: none;
margin: 20px 0;
padding: 0;
text-transform: none;
}
ul#related-posts li{
float: left;
height: auto;
margin:0 5px;
padding: 2px 1px 2px;
list-style-type:none;
}
*html ul.rp#related-posts li{
margin:0 13px;
}
ul#related-posts li a {
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border: 2px solid #FFFFFF;
display: block;
height: 72px;
position: relative;
width: 72px;
}
ul#related-posts li a {
color: #474C51;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}
ul#related-posts li .overlay {
height: 66px;
line-height: 16px;
padding:6px 0 0 6px;
position: absolute;
width: 66px;
z-index: 10;
}
ul#related-posts li .overlay {
}
ul#related-posts li a:hover .overlay {
background: #fff;
display: block !important;
opacity:0.9;
}
ul#related-posts li img {
bottom: 0;
padding:0px !important;
}
ul#related-posts li a:hover {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
<!--end related posts css.Info : http://www.spiceupyourblog.com-->
Langkah 4 Cari potongan kode berikut di blog Anda Html: (Klik Ctrl dan F untuk bar pencarian untuk membantu menemukan kode - More Info )
<div class='post-footer'>
Langkah 5. Salin dan sisipkan kode berikut Langsung bawah <div class='post-footer'>
<!--start related posts code Info : http://www.spiceupyourblog.com-->Perubahan Opsional
<b:if cond='data:blog.pageType == "item"'>
<h3>Related Posts</h3>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV-UtuTuqsjYADTD8eL2wY7zgAyE4yqfwEQl4kc2jP6KcfwWKgTvFnw2gu3i6xpp1qomkWOaf3fdTlEOe-MKkIlKhYwKQUSRDbXlmRXzPGFUwyNHaASBFypdlNRKjClfcwxf5LAiR71vw/s1600/no-image.gif";
var maxresults=6;
</script>
<script src='http://suyb.googlecode.com/files/rph.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</b:if>
<div style='clear:both'/>
<br/><br/>
<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9LQM_c08zoLr8YO8SBB3SJzII73HSG1xPLZmDKY0zStq2YzUmYjOKUFkfYF1d9lCnFoZZOkC4JEZFfARudiTSSCKPx3icO2AApiNGIr5aJozFornG1S4rQZCDhm8BNnf6RfJybqNlMUE/s1600/best+blogger+tips.png'/></a>
<!--end related posts code Info : http://www.spiceupyourblog.com-->
-Anda dapat mengubah judul di atas gadget dari Related Posts (Dalam Above Blue). -Anda dapat mengubah jumlah posting yang ditampilkan dari 6 (In Red Di atas) -Gadget diatur untuk hanya muncul di halaman posting, jika Anda ingin displayd di halaman rumah juga menghapus kode disorot di Green atas. Langkah 6. Simpan template Anda. Lihat lebih kami Gadget Blogdan Feature Posts . Itu Hover Tulisan Efek Terkait Anda Dengan Thumbnail, saya ingin memberikan kredit untuk BloggerPlugins untuk naskah asli dan BloggerzBible menciptakan template di mana saya menemukan gadget bersama dengan membuat beberapa perubahan dengan aslinya. Masukkan Komentar Anda, Views Dan Pertanyaan Berikut.
Tidak ada komentar:
Posting Komentar