ΑΡΧΙΚΗ ΚΑΤΑΣΚΕΥΗ Bloggs ΚΩΔΙΚΑΣ html JavaScript ΕΙΣΑΓΩΓΗ ManiacΑΝΑΛΥΣΗ Site ΕΙΔΗΣΕΩΝ GadgetManiac ΓΕΝΙΚΑ

Σάββατο, 13 Οκτωβρίου 2012

ΑΥΤΟΜΑΤΟ Read More ΣΤΙΣ ΑΝΑΡΤΗΣΕΙΣ ΜΟΥ

   
    Αυτόματο  Read More  στις Αναρτήσεις

   Με τέσσερα απλά βήματα μπορούμε να ρυθμίσουμε τον όγκο της ανάρτησης μας, το κείμενο δηλαδή που θα εμφανίζεται στην αρχή της ανάρτησης μας, που έχουν ως εξής:   
Α. Σύνδεση>Blogger> πρότυπο> Επεξεργασία html> Επέκταση προτύπων γραφικών στοιχείων
Β. Με τη βοήθεια του ctrl+F,  βρίσκετε το </head> και πριν από αυτό τοποθετούμε τον κώδικα
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>


              summary_noimg = 430; το ύψος της ανάρτησης χωρις  εικόνα
                  summary_img = 340; το ύψος της ανάρτησης με  εικόνα
            img_thumb_height = 100; το ύψος της εικόνας
             img_thumb_width = 120; το πλάτος της εικόνας


Γ. Τώρα βρείτε το <data:post.body/> και αντικαταστήστε τον με αυτόν τον κώδικα :
    
 <b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>
    Το read more μπορείτε να το αλλάξετε φυσικά.
   "<data:post.title/>"  διαγράψτε το για να μην φαίνεται ξανά o τίτλος.

ΠΡΟΣΟΧΗ αν εμφανιστουν πολλα επιλεξτε το πρωτο????

Δ. Προεπισκόπηση, Αποθήκευση.


     Σε περίπτωση που θέλουμε να βάλουμε εικόνα κάνουμε το εξής:
 αντικαθιστάτε το  read more  με τον παρακάτω κωδικό:
 
<img src="url_of_image" border="0" />  
όπου "url_of_image"      η διεύθυνση της εικόνας που θέλουμε να βάλουμε


    Σε κάποια άλλη ανάρτηση θα δούμε πως μπορούμε να φτιάξουμε ΚΟΥΜΠΙΑ  read more  η περισσότερα, της αρεσκείας μας  με την βοήθεια του Paint.NET,ενός εργαλείου επεξεργασίας εικόνας, ισοδύναμο του photoshop.






Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.