ΠΣε προηγούμενη ανάρτηση σας πρότεινα πώς να βάλετε widgets αναρτήσεων με μικρογραφίες κάτω απο τα άρθρα σας μέσω το Linkwithin ή του Outbrain.
Σε αυτή την ανάρτηση θα σας δείξω πώς μπορούμε να τοποθετήσουμε related posts widget με thumbnails απευθείας απο το blog σας .Το οποίο θα είναι κάπως έτσι
Τα βήματα είναι τα εξής:
Blogger ►Σχεδίαση►Επεξεργασία HTML►Τσεκάρετε την Επέκταση προτύπων γραφικών στοιχείων
ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ
ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!
Σε αυτή την ανάρτηση θα σας δείξω πώς μπορούμε να τοποθετήσουμε related posts widget με thumbnails απευθείας απο το blog σας .Το οποίο θα είναι κάπως έτσι
Τα βήματα είναι τα εξής:
Blogger ►Σχεδίαση►Επεξεργασία HTML►Τσεκάρετε την Επέκταση προτύπων γραφικών στοιχείων
- Με το Ctrl-f ψάχνουμε το...
</head>
- ...Αντιγράψτε και επικολλήστε το παρακάτω τμήμα κωδικού αμέσως μετά απο το </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh_YWvB_Rlobe5s6DvVjnmjG2gHaBDb4rm1TjcbObvqyDtbsBGKaqAM3UYJm5v18F_em6f1LvmrLN9ly4f2Af891LiNywPj0_zo1CohAfAwq_GRIF9FEXXNEOn-bE32dptadEbW_WUfJfc/s1600/noimage.png";
var relatedpoststitle="Related Posts";
</script>
<script src='https://gj37765.googlecode.com/svn/bloggerwidget/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh_YWvB_Rlobe5s6DvVjnmjG2gHaBDb4rm1TjcbObvqyDtbsBGKaqAM3UYJm5v18F_em6f1LvmrLN9ly4f2Af891LiNywPj0_zo1CohAfAwq_GRIF9FEXXNEOn-bE32dptadEbW_WUfJfc/s1600/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";var relatedpoststitle="Related Posts";
</script>
<script src='https://gj37765.googlecode.com/svn/bloggerwidget/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
- Για να αυξήσετε τον αριθμό των thumbnails που θα εμφανίζονται τότε αλλάξτε τον αριθμό που είναι στο πορτοκαλί χρώμα
- Στην συνέχεια βρείτε το ακόλουθο τμήμα...
<div class='post-footer-line post-footer-line-1'>
- ..Ατιγραφή και επικόλληση αμέσως μετά τον παραπάνω κωδικό τον ακόλουθο κωδικό
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<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>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://gj37765.blogspot.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkaf5sURyLaAT2qnZ8PXyUVF-52MXMvyIB00vbi-YURdZPEtKgCLFBKt3xW6jSD9D2Ju5r9VQsaVi8jaBgLsn2gYnUkeSrTluVBAoM9sHC0af11FAtRA0bNLKqOz09HIfnVzlhhOrFzPwr/s1600/best%252Bblogger%252Btips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<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>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://gj37765.blogspot.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkaf5sURyLaAT2qnZ8PXyUVF-52MXMvyIB00vbi-YURdZPEtKgCLFBKt3xW6jSD9D2Ju5r9VQsaVi8jaBgLsn2gYnUkeSrTluVBAoM9sHC0af11FAtRA0bNLKqOz09HIfnVzlhhOrFzPwr/s1600/best%252Bblogger%252Btips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!
0 σχόλια: