Blogger Tutorial: How to Put Related Posts at the Bottom of the Post in Blogger

9:11:00 PM Viv Beck 0 Comments

Putting Related Posts With Thumbnails at the Bottom of Your Posts Keeps Reader's Interest

By putting related posts with thumbnails at the bottom of your post, you're doing more than making your blog look cool. Putting related blog posts at the bottom of your blogger posts actually increase your SEO. This is because you create internal links within your site. This is a good thing. You're telling the spiders that cruise through your site that you are thoughtful about the content, that it's all related. SEO ranking, or link juice, that gets traffic, likes this stuff. this internal linking also increases the reality of your site for visitors. Putting related posts with thumbnails at  the bottom of your post is a simple process. Even if you know nothing about HTML you can do it. Just follow the direction below and you're blogger site will have related posts with thumbnails in just a few minutes. All you're going to to is open your HTML code of your blogger site and post the code I give you in the specific place I tell you paste it. There are two piece of code you need and they're given to you below. See, I told you, no coding skills necessary. All you need it to find the location of where to paste this code. First... Step 1 You need to go to the HTML of your blogger site. Click in the HTML window anywhere in the code. Bring up the HTML search bar in the upper right hand corner of the HTML text box. You do this by hitting COMMAND F on a mac and Control F on a PC. Notice, you see a small search bar that reveals itself in the upper right hand corner.
 
This is where you place specific code to help you locate it. The location of the code I'm about to give you is important. You MUST paste the code you copied in the correct location in the provided code or it won't work. Step 2 Copy this very short code: 
</head>
Go over to the search bar you just pulled up on your site. Paste the very short code into the search bar in the upper right hand corner and press enter. This will find the code you put in the search bar and highlight it in yellow. Now you found the proper location within the code. Put your cursor to the left of the highlighted code and press return a couple of times. This is giving you the space to paste the next bundle of code you'll be putting in. Creating this space does not change the code of your site. The only thing this does is make room for the code you're about to paste in this space.
 
Come back to this post. Step 3 Add Style to the Related Post Be sure to copy the exact code, with no extra spaces included. COPY THIS NOW: 
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts { 
    float:left;
    width:auto; 
}
#related-posts h2 { 
    margin-top: 10px;
    background:none;padding:3px; 
}
#related-posts .related_img { 
    margin:5px;
    border:4px solid #f2f2f2;
    width:105px;height:105px;
    transition:all 300ms ease-in-out;
    -webkit-transition:all 300ms ease-in-out;
    -moz-transition:all 300ms ease-in-out;
    -o-transition:all 300ms ease-in-out;
    -ms-transition:all 300ms ease-in-out; 
}
#related-title {
    color: #222;
    line-height: 16px;
    padding: 0 10px;
    text-align: center;
    text-shadow: 0 2px 2px #fff;
    width: 100px;
}
#related-posts .related_img:hover{ 
    opacity:.7;
    filter:alpha(opacity=70);
    -moz-opacity:.7;
    -khtml-opacity:.7
}
#related-title:hover { 
    text-decoration: underline; 
}
</style>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGY1w3WIAPqpBlM-4WZ55eNJAuQoambnh70jx1yA53Ok3HkL8oNJXnoKNR8Ag7_hk6CUheIs8GARq_1DMfDbw6Xa8kongOyMHXh9XNT_WCfkQHQ76TJv0Lj2i3rxgem59UjMHbNsqjRhC0/s1600/no-thumbnail.png";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=20;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){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)}}s=s.join("");s=s.substring(0,chop-1);return s}
  function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGY1w3WIAPqpBlM-4WZ55eNJAuQoambnh70jx1yA53Ok3HkL8oNJXnoKNR8Ag7_hk6CUheIs8GARq_1DMfDbw6Xa8kongOyMHXh9XNT_WCfkQHQ76TJv0Lj2i3rxgem59UjMHbNsqjRhC0/s1600/no-thumbnail.png'}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Paste this code in the space you created in the code in the previous step. This is what it will look like: Before Pasting the Code:
After Pasting the Code:
 
Step 4 Add the Thumbnail to the Related Post Copy the code below. Paste it into your finder and press return, just like you did for the previous step. 
<div class='comments' id='comments'>
Once you press return, the finder reveals the location of where you want to place the next piece of code you will need to enter. Notice, the yellow highlight.
Again, you're going to create a space for the code you are about to enter by putting the cursor before the yellow highlighted code and press the return key a couple of times. Notice the space above the highlighted code.
 
Copy the code below. This is what you will paste in the space you just created in your site's HTML code. paste it before the code you just found in your HTML finder. 
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
        <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast != &quot;true&quot;'>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
        <script type='text/javascript'>
            var currentposturl=&quot;<data:post.url/>&quot;;
            var maxresults=6;
            var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
            removeRelatedDuplicates_thumbs();
            printRelatedLabels_thumbs();
        </script>
    </div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Then click "save template"
You now have related posts with thumbnails at the bottom of your blogger post! Congratulation!!!

How to Add a Twitter Button to the Sidebar of Your Blogger Website

9:09:00 PM Viv Beck 0 Comments

Add a Twitter Button on Blogger

This will only take you a couple of seconds, I swear!
how to get twitter on the sidebar of blogger site
Adding a Twitter button on the side bar is VERY simple. If you already know how to add a widget to your blogger template you're half way there. You'll need two things to add twitter to your blog.  
  1. Your Twitter Handle
  2. The HTML code
You have your handle and I have the code for you. This is going to be a snap! I Promise. Follow the steps below to add Twitter to your blogger site

Step 1

Go to your blogger platform and click on template.
 
In your side bar click "Add Gadget".
The selection of wide comes up in a separate window. Select "HTML code"
 

Next...

Copy the code below. After you paste the code in the HTML widget, replace YOUR BLOGGER HANDLE in the code with your specific handle. 
<!-- Twitter follow button start -->
<a class="twitter-follow-button" href="http://twitter.com/YOUR BLOGGER HANDLE" data-show-screen-name="false" data-size="large">Follow @YOUR BLOGGER HANDLE</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!-- Twitter follow button end -->
 
Press save and view your website. YOU'RE DONE! If You're more of a visual learner here's a video showing you how to move through these steps. I told you adding a Twitter button to your site was going to be easy! If you thought this was helpful, please share it with someone who would benefit! Let me know if you have any questions. I'm here to help you every step of the way!

4 Things to Consider Before Differentiating for your Students

9:05:00 PM Viv Beck 0 Comments

In professional conversations with educators across grade levels, I've heard some interesting conversations. One focused on student performance and the implementation of differentiation. It seems some teachers are concerned that differentiation has done little to help students. As one teacher said this:
"We're differentiating to the point where the very standards that used to be the anchor of teaching and learning are being adapted and modified to the point where they carry little weight and compromise what achievement looks like!"
This teacher when on to say that differentiation was in her words, "used and abused" to the point where young people have less academic challenges than they did just decades before.
This is a serious concern for all educators with a classroom of varying abilities. We adapt and modify process and products to the point where it seems what used to be grade level standards are now manipulated.
But, let's consider the changes in the world along with the changes in teaching and learning. Inclusion is now common place. It's not unusual to have students varying in ability that spans 8 - 9 year.
The class population is often made up of a combination of English language learners, OHI, special education, 504, and the list goes on.
Release the guilt of believing you are responsible to make every child reach the exact same expectation at the same time within a standards driven instructional environment.
Each student, as proven by current research, develops at their own pace. You can only guide students and support them, help them make a way for their potential.

3 Tips to Differentiate with Integrity

High Expectations, Flexible Boundaries

Neurologically, there are commonalities across populations of students, but then consider those factors unique to each. Learning styles, environment, health, socio-economic conditions, etc.
With these in mind, it's difficult to imagine conformity to teaching methods and time lines based on stringent parameters. If all minds and bodies were forced to learn skills using one method and one time frame, teachers' efforts would surely be wasted.

Get Messy Sometimes

Let go of the limiting belief that you have failed as an educator if a student doesn't learn what you have taught on your projected time frame. Let go of the belief that students must reach mastery at the same time as their peers.
Let go of expecting to meet every child's needs the first go round.
Finds comfort in being driven by the standards while differentiating for need. Begin embracing the glorious mess that is learning in a classroom of varied abilities.

Become a Keen Observer

And finally, look for ways to gain insight to your students through the use of observation, data collection, and flexibility.  You deserve to give yourself credit for the positive impact you make on students every day without judging yourself against the impossible dream of uniformity.
Remain focused on the standards, and open to diversity. Seek support of your professional peers, and be open to new methodologies and management skills to find balance. Make strides towards differentiation and welcome the growing pains that are part of the journey.

Differentiation is Not a Compromise

On the way to developing a standards based grading, differentiation is not the road to compromise. In this every changing world, fair is not always equal, and in light of this, it is up to us to help all students flourish and rise to their potential and all its beautiful uniqueness.
But, don't forget to nourish yourself along the way because you are a student, too my friend, and your achievements and growth as a professional deserves the same flexibility and support as you offer your students.

Turn Content into a Slideshow in Less Than 5 Minutes

8:59:00 PM Viv Beck 0 Comments

3 Minute Blogging Tutorials for Teachers

You can repurpose any classroom content into a new presentation that helps you prepare instruction for a wide variety of learning styles. By this I mean, taking previously created informational or instructional resources  and turning it into a new style of presentation. For instance, you can take a blog post or a word document into a video to students for the sake of instruction and generate a slideshow. Sticking to my goal of creating 3 Minute Blogging Tutorials, my goal is to make this fast and painless.  

How to Turn any Blog Post Into a Slideshow in Under 10 Minutes

Step 1 Copy the text out of your blog post or word document and paste it into a .txt document. Step 2 Press enter after each sentence. Each time the enter key in hit, you're telling the system to create another slide. So, Delete any space between sentences or you'll have a blank slide between each sentence. Step 3 Copy the .txt document and open PowerPoint (PC) or Keynote (Mac). in a new document open the outline view. Right click on the first slide of the outline and past the .txt document in the outline slide. BAM!!! You're done! You just created a slideshow from your blog post in under 5 minutes! Now you just need to formate the slides. This is the great first step to a screen-cast, and screen-cast can be an incredible teaching tool.

8:57:00 PM Viv Beck 0 Comments

2 Simple Tech Tools that Make Teaching Easier

In my classroom I use a lot of video. Unfortunately, our school doesn't allow access to YouTube in many other video And audio sites. In order to access YouTube whether it was a self-created video on my YouTube channel or accessing a tutorial created by someone else, I would have to use my iPhone as a hot spot throughout the day. Needless to say I ran through my data, And it cost me a great deal of money by the end of the year. I search for a way to solve this problem and when I came up with we're two tools that gives me great flexibility using video in the classroom. No, many of the videos I use are my own. I have a YouTube channel and upload instructional videos. This isn't a new concept I any means. But the issue was my students couldn't access these videos while at school. This sent me on a search and what I came up with was a tool that quickly downloads videos to my computer. The good news is there are no extensions that are downloaded. I've had no problem with anything extra being secretly installed in my hard drive like I have in the past with other tools. The tools I came across were video Gravier.com and listen to YouTube.com. Both of these tools have a specific function. Video grabby.com is used to download entire videos. Where as listen to YouTube.com is he used to download MP3s period Here's a word of caution though video grabby.com does have a explicit advertisements on the lower half of the page. And, these advertisements are above the fold. So if you're going to use video grabby.com be certain that you're not in school and use it with discretion when you're at home. Click on each of the links below. They're self-explanatory, and they're very fast. What you do with them once you download them is open to your creativity.

VideoGrabby

This resource downloads the entire video to your hard drive. You can access them off line. If you want to create your bank of videos and organize them for your own use, they upload nicely to Google Drive. Just be warned, there are some explicit advertisements that pop up on the lower half of the screen, above the fold. So, if you have kids in the house, you may want to precede with caution.

ListenToYouTube

This downloads the MP3 of the video. It's great for music and even better for audio books. Take it to the next level and download the recordings to your iPhone to take them anywhere. I haven't had any issues with extensions downloaded to my computer. But, I use a Mac. It may be different for a PC. Hope you like my 2 simple tech tools to help you bring YouTube into your classroom. If you found these tools helpful let me know how you use them in your classroom. SaveSave



Subscribe to: Posts (Atom)