Build A Blogger Website: 2013

Wednesday, July 3, 2013

How to remove the blogger attribution link

Edit the HTML template and search for the words "attribution".

Then change the locked attribute to "false" and then maker the showaddelement='no'

Then, goto back to the layout editor and then click on attribution widget edit icon and then click not he remove button.

Wednesday, June 26, 2013

How to modify the comments section appearance

My client had ugly dark color for the comments section. We wanted to lighten up the color, and also put a nice border around the comment section.

All that is needed is to modify the .css file. I commented out the section that also changes the default pen that is shown as author icon. But if you want to change it you can:

/* Addded to change the comment section colors */

.comment-block {
background:#bbbbbb; /* Background Color */
border: 1px solid #f1f1f1; /* Border style */
margin-bottom:20px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.comments .comment-thread.inline-thread {
background-color: #EEEEEE; /* Background color behind the replies */
}

.comment-content {
padding:2px 10px 10px 10px;
color:#000000; /* Font Color in Comments */
}

.datetime a {
font-style:italic;
font-size:9px;
margin-left: 2px;
}

.comments .comments-content .user a{
color:#1982D1; /* Author's name color */
font-size: 12px; /* Author's name size */
padding-left: 10px;
font-weight:bold;
text-decoration:none;
}

.comments .comment .comment-actions a,.comments .comment .continue a{
display:inline-block;
margin:0 0 10px 10px;
padding:0 15px;
color:#B4B4B7;
text-align:center;
text-decoration:none;
background:#F8F8FB;
border:1px solid #C2C2C5;
border-radius:4px;
height:20px;
line-height:20px;
font-weight:normal;
cursor:pointer;
}

.comments .continue {
border-top: 0px solid $(widget.alternate.text.color);
}

/*
.comments .comments-content .icon.blog-author {
background-image: none;
margin-left: -10px;
}

.comments .avatar-image-container{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 40px;
max-height: 40px;
border: 1px solid #F2F2F2;
padding: 1px;
}

.comments .avatar-image-container img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 40px;
height: 40px;
}
*/

How to add a rotating advertising banner (3 easy steps)

My client wanted to show a top banner with an image and a link. However, instead of just 1 image, he wanted a 2nd advertiser image to appear 50 percent of the time also.

I immediately thought a flash-based solution, but then realized it wouldn't work on iPhones.

So, I created a simple BLogger solutions using 2 HTML widgets.

on the 1st widget, create the actually banner code to display the images. Note, the images are both hidden using the div attributes:

Step1:

<div id="tom_hide" style="display: none"; align="center"><a href="http://www.blessyourheart.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBtSzOku-S7ZQRH8vqsnBZhEwgBj1v4e694L1mjY2S51mQY4pJfRzvhilsDgoaf1Dnw4ztGbtPG05n9UpEaSb005AthydTNlHSMCGU_lRfovOwdPNoDNxi4O-dwi0nvyQJt4FD-YNpu6I-/s1600/DFWSportatorium+-+Top+Banner+-+HMS.jpg"/></a></div><div id="tom_hide2" style="display: none"; align="center"><a href="http://www.vandergriffhonda.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Ldo1cm7EkNVe3l3BO-VGEUDlaD-M0lzZVj083B_fGB0iXRK3PEvOe4r-Hys4F_5URGg-FaGnZ8juAH9-4kGnV8NqfhLZEmQETqlb7k0oRD_1tYCcndwZ7oAdpCwGcuXqyk0TmrQAHyt3/s1600/DFWSportatorium+-+Top+Banner+-+Vandy.jpg" /></a></div>

Then, you just need to create another HTML widget under it, and this time we will create javascript code that will select (show) either the 1st or the 2nd div tag:

Step 2:

if (randomnumber < 5) {

document.getElementById('tom_hide').style.display = "none"; document.getElementById('tom_hide2').style.display = "none";

document.getElementById('tom_hide').style.display = "block";

}

else {

document.getElementById('tom_hide').style.display = "none";

document.getElementById('tom_hide2').style.display = "none"; document.getElementById('tom_hide2').style.display = "block";

}

</script>

Step 3:

Now, the last step is to call the javascript function when the webpage first loads. You just need to go and edit the HTML template (back it up first) and add onload="Randoms()" function to the body. Here is the example:

Another method is to use Jquery with picture slider (or fader, etc).

How to resize image for the mobile phones

Using the .mobile maxwidth in the CSS

You just need to make sure you include the DIV id of the image. In this example below, the DIV ID is HTML4. Just replace it with your own.

This .mobile section is only used when mobile device is being used. It will make the max size (width) of an image to be 320. The height will be auto adjusted and aspect ratio is held in tact.

.mobile #HTML4 img {
max-width: 320px;
margin-top: 10px;
height: auto !important;
width: expression(this.width > 320 ? 320: true);
}

However, this is not required if you have the image width=100% attribute set. Therefore, don't use barcoded pixel values for the width and height (if you can get by with it). Also, put things in a table and inside the table attribute just use width=100%

How to break a blogger post into multiple pages

Blogger tool does support a "jump break', or a "read more" link, however, it only allows 1 of them. What happens if you want to write about a 10 page story. I developed the following code using basic HTML <div> elements with the show or hide attribute, and also added JQuery for some special affects.:

Here is example website with the behavior:

Here is the example HTML code (paste directly into your post). I created a tool called Blogger PageBreak if you would like to use it.

============ Here is the code (directly from post) =========

  <br />

   Hate LeBron James.<br />

   In fact, I'll never forgive him for mocking Dirk Nowitzki's flu cough in the 2011 NBA Finals. But these days, in the wake of Miami's Finals' triumph over the Spurs, I can't deny how damn good of a basketball player he's become.<br />

   Last week he accomplished being only the third player in NBA history to win MVPs of both regular season and The Finals in back-to-back seasons. The other two? Bill Russell and Michael Jordan. Yeah, wow.<br />

   Facing elimination in Games 6 and 7 against San Antonio James produced two epic performances totaling 69 points, 23 rebounds and 14 assists.<br />

   Like him or not, you can't deny that greatness.<br />

   Stubborn as I am, I can no longer keep LeBron off my list of the NBA's greatest all-time players, an elite collection that doesn't include the winningest player (Bill Russell), most dominant physical specimen (Wilt Chamberlain) or 2nd all-time leading scorer (Karl Malone). I can only take solace that LeBron's 11-1 in playoff series as a member of the Heat.<br />

   And all us Mavs' fans gleefully know who gave him the one defeat. Right?<br />

   My Top 10 Players in NBA History ...<br />

<br />

Pages:    1    <a href="#" class="button_2_171">   2    </a><a href="#" class="button_3_171">   3    </a></div>

<hr />

</div>

<small><i>(continued from page 1)</i></small><br /><br />

<br />

   <b>10. Allen Iverson -</b> Pound-for-pound he's the best player ever. I've stood next to him during an interview. Dude is about 1-inch taller and 10 pounds lighter than me. Stand next to the behemoth LeBron and you'll realize how daunting The Answer's task was. Four-time scoring champ, three-time steals leader and '01 MVP was amazing.<br />

   <b>9. Shaquille O'Neal - </b>More powerful than polished, he bulled his way to four championships and 15 All-Star teams. Guys like Hakeem Olajuwon were more talented, but not more accomplished. Or dominant.<br />

<b>   8. </b><b>Tim Duncan -</b> The Big Boring white-breaded us to death via four championships, two MVPs and 13 straight seasons on the All-Defensive Team. Also set an unofficial record for whines after foul calls.<br />

   <b>7. Oscar Robertson -</b> Yeah, I know he's only got the one ring and just one MVP, but in 1961 the combo guard - get this - averaged a triple-double to the tune of 30.8 points, 12.5 rebounds and 11.8 assists.<br />

   <b>6. </b><b>LeBron James -</b> With a consistent shooting touch out to 3-point land added to his brute force finishing around the rim, he's muting critics with two championships, two Finals MVPs and four MVPs. Scary thing? He's still only 28.<br />

<br />

Pages: <a href="#" class="button_1_171">   1    </a>   2    <a href="#" class="button_3_171">   3    </a></div>

<hr />

</div>

<small><i>(continued from page 2)</i></small><br /><br />

<br />

   <b>5. Larry Bird -</b> Simply the most-competitive, best-shooting player to ever bounce a basketball. His three titles and three MVPs don't begin to tell his fiery story.<br />

   <b>4. </b><b>Kobe Bryant -</b> His drama is loathed, but his play can't be anything but loved. Five championships, two Finals MVPs, two scoring titles and nine All-Defensive teams just can't be dismissed.<br />

<div>

   <b>3. </b><b>Kareem Abdul-Jabbar -</b> Six titles. Six MVPs. But most importantly, a record 38,387 points behind the most lethal, unstoppable shot in NBA history: The Sky Hook.</div>

<div>

   <b>2. Magic Johnson -</b> Along with five championships and three MVPs, he made the NBA cool and popular with his stylish passing and Showtime smile.</div>

   <b>1. Michael Jordan -</b> His Airness introduced the NBA to a game played above the rim and beyond known standards. His legacy includes six championships, five MVPs, 10 scoring titles and countless corporations benefiting from his brand.<br />

Pages: <a href="#" class="button_1_171">   1   </a><a href="#" class="button_2_171">   2   </a>   3    </div>

<hr />

</div>

</script>

jQuery(document).ready(function(){

jQuery('.button_1_171').click(function(){

jQuery('.content_1_171').show('slow');

jQuery('.content_2_171').hide('slow');

jQuery('.content_3_171').hide('slow');

$('html, body').animate({ scrollTop: $('.blogtop_171').offset().top - 35}, 500);

return false;

});

jQuery('.button_2_171').click(function(){

jQuery('.content_1_171').hide('slow');

jQuery('.content_2_171').show('slow');

jQuery('.content_3_171').hide('slow');

$('html, body').animate({ scrollTop: $('.blogtop_171').offset().top - 35}, 500);

return false;

});

jQuery('.button_3_171').click(function(){

jQuery('.content_1_171').hide('slow');

jQuery('.content_2_171').hide('slow');

jQuery('.content_3_171').show('slow');

$('html, body').animate({ scrollTop: $('.blogtop_171').offset().top - 35}, 500);

return false;

});

</script>

Wednesday, June 12, 2013

Play YouTube Video with javascript and detect end of video

My client wanted to make a video ad where he spoke about potential advertiser's product and when the video was over Blogger needed to automatically redirect the browser to another website.

To play a video was straight forward using the YouTube Blogger icon, however, it didn't work with iPhone because iPhone doesn't support Flash. Therefore, you need to use the embed YouTube link (with <iframe> tag) in order to get the video to work on iPhones.

Secondly, in order to determine when the video is finished playing, you need to use the javascript onPlayerState event callback. This was a pain in the ass to figure out. However, here is the completed code that works both on iPhone and desktops. This is code that was directly put on a Blogger Page:
================

<script>
var isShowing = false;
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '320',
width: '180',
videoId: 'ENQ2_ZMAp5A',
playerVars: { 'controls': 0,'showinfo': 0, 'modestbranding': 1, 'autohide': 1, 'rel': 0, 'start': 0, 'autoplay': 1 },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}

function onPlayerReady(event) {
if( isShowing )
player.playVideo();
}

function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
location.href = "http://www.blessyourheart.com";
}
}

function playVideo() {
isShowing = true;
player.playVideo();
}
</script>

<div align="center">
<div id="player"></div>
</div>

Thursday, May 30, 2013

Play YouTube video with SWF object