TGSBD: Blogging

April 5, 2017

It is called Page Jumps or Anchor Tags. The ability to jump within the current open page. Theory is you have to create a "link" to a specific part of the page you want to jump-in. Have you ever visited websites with "Top" beside the article, this is usually how "Move to Top" works. This is also very useful if you have a very long article. Here let me show you. By the way photos used within the article is from the amazing and generous FancyCrave - they offer free stock photos.

Introducing Google Album Archive

I was tinkering on the blog's design just recently, I noticed that I haven't change the blogger's header for more years already then I decided to change it. Unfortunately I'm at the office hence I don't have with me my vast selection of header images I can choose from. Good thing I remember that - during the time where Picasa Web Album was still active, but not now anymore - Google automatically saves all uploaded header images, so I thought of just using the older header that I used previously. But Picasa is no longer available how am I supposed to recover my old previously uploaded images? Picasa Archive or Google Album Archive is the answer. Here lies all of your previously saved photos from all Google services such as Google Plus, Blogger and Youtube Channel Art. You will not be able to upload any photos here but instead you might want to use Google Photos if you want to upload photos.

April 2, 2017

7 Simple Image Hover Effects You Can Use using CSS

Effect #1. Grow

HTML Codes
<div class="grow pic">
<img src="http://lorempixel.com/400/400/people/9" alt="portrait">
</div>

CSS Codes
.grow img {
height: 300px;
width: 300px;

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.grow img:hover {
width: 400px;
height: 400px;
}

August 3, 2016

How to Remove Blogger Picture's Shadow and Border

I still remember the days when I actually like the idea of having shadows on images on my posts but as time goes by it seems that my taste had changed. I don't like it anymore. Haha. So guys right now I'll be sharing to you on how to remove shadows and border on images within a post. This hack won't affect the images outside our post. we'll create a separate post for that. Anyway let's get started.

How to Add Static / Sticky Footer in Blogger

Back in June I re-posted one of my post How to Add Static Bar on Top in Blogger but how about we tweak it a bit then instead of bar on top let's make it bar below just like the footer floating. It's actually pretty simple we will be using the same base code the only things we change is the top and left tag.

How to Hide / Remove Page Title Once It Is Open

Hello Guys ! By default when you open a Page the page title is also displayed. For whatever your reason and want to hide / remove the page title if the page is open then you're on the right page. I'll be showing to you guys on how to remove Page title once it is open. It is quite simple we will be using the the display:none again on the page title tag and that's it. So let's get started.

Open Blogger Posts on a New Tab

Ohayou! [Good Morning in Japanese] ! By default when you click a post title the post will be automatically loaded on the current tab. That's actually not a good or a bad thing depending on your preferences. But just in case you wanna play how it works you can always tweak it out. Below you'll get to know on how to open the post on a new tab. And by the way guys I'm applying this tutorial on this website which is using the Simple Template by Josh Peterson.

July 26, 2016

How to Hide Widgets on a Specific Page / Posts

2 Days ago I posted on how to remove all sidebars on a specific page which actually works on blogger post as well. Today my dear friends we will be doing similar tweak but instead of the whole sidebar widgets we will only be hiding specific widgets on specific pages or specific posts. On this tutorial we will be hiding the Label Widget whenever we open the this post. It is actually pretty simple so let's get started.

Show Date for Each Blogger Post Version 2.0

How to show date for each blogger posts - This tutorial will help you on how you can tweak your template to show date for each of your Blogger posts. By default, post that are published on the same day will be on the same date folder. Luckily this tweak will display both Date and Time stamp on each blog post. It's really simple so let us start. I actually have two versions for this tutorial just in case the other one works. I'm pretty sure one of these options will work on your template. You can check out the first version on the link provided below. I really hope this will help you guys.

Version 1 - June 13, 2016
Version 2 - July 26, 2016

July 25, 2016

How to Identify Widget's ID

Yesterday I posted on how to hide specific widget on a specific posts or pages - this tutorial requires you to identify the Widget's ID. Just in case you didn't know this quick hack well that ends now since I'll be sharing to you guys the quickest way to identify Widget's ID. It's very simple and quick.

July 24, 2016

How To Remove Blogger Sidebar on Selected Page and Selected Blog Post

I actually came across this tutorial while I was looking for removal of blogger sidebar on a blog post not on a page but I think I having this kind of tutorial applied to pages is also helpful. That's I'm gonna be sharing to you guys right now. This tutorial is from Southern Speaker, you can check out the original post by clicking this link. Hope this helps. It is actually pretty simple, we just had to instruct our website to hide the sidebars once we open a specific page.

July 17, 2016

Hi guys as noted on one of my tutorial [How to Add Related Post Widget for Below Each Post in Blogger Version 2.0] I have notice that sadly it was not working anymore. Freaking out to make sure it will work again I searched almost every corner of google but could not find the resolution as to what could be the reason behind for it not to be working. What I have in mind is that possibly looking into the details of the codes the JavaScript is actually imported rather than embedded - assuming that it is indeed the key factor for it not to be working I had to extract the full JavaScript code then implement it to my HTML blog. Crossing my finger that by re-coding the widget it will work already but unfortunately it didn't. I have no JavaScript background that's why maybe Haha. But by continuously re-coding it I unexpectedly made it work again. I'm so amaze of myself. Haha.

So finally after all the hours I spent I'm so happy to share to you guys a new code for the Related Post Widget for Each Post. Take note guys that this is not a substitute but rather an alternative option just in case the Version 2.0 didn't work for you. The visual output of this version and version 2.0 are just the same.

Same thing this widget will only display recommended articles below each post with the same labels/tag. And this does not appear on your homepage. If you want to have a separate widget similar to this then you might want to read this : How To Add Related Post Widget(Gadget) In Blogger.

Update as of July 17, 2016 - Version 3.0 is out just in case Version 2 and 1 didn't work
Update as of July 17, 2016 - JavaScript Changed.
Update as of June 15, 2016 - CSS Codes tweaked.
Update as of October 6, 2014 - Fixed / Changed the JavaScript source.

July 15, 2016

How to Create Simple GIF using Photoshop

Hello pips ! Ohayou ! Just few hours ago I changed my Blog's header from a static photo to an animated GIF and I could say I love it. I thought creating GIF picture is a bit hard and you know confusing but I was all wrong it indeed the opposite it's perfectly simple and we are gonna only be using 1 tool - Photoshop CS6. I haven't used CS5 or other Photoshop version but I guess it'll work if you're using different version. So let's get started.

June 25, 2016

How to Create Rollover Image Effect

This is very simple guys. I'll be teaching you on how to add "effect" when you mouse-over your mouse of course to a pic. This one will overlap the first photo by the second photo. Go ahead check out the simple demo below.

If I have more time I'll be sharing to you guys different mouse-over effect.

And oh lastly don't forget to like the Facebook fan page. Thank you again guys.

Thank you so much for the visit, please don't forget to like the blog on Facebook - a single like gives me motivation :P . For any concerns please relay it to me via comment with the detailed concern. Happy blogging!

June 24, 2016

How to Submit Sitemap to Blogger

For you to be successful in our blogging career one of the key factors is to generate a traffic. Have you tried searching for your blog but google doesn't seem to recognize or enlist your website on the first or at least second page? that means to say that there is or there are issue with your Search Engine Optimization. One way to help out is to create a sitemap.

According to Wikipedia A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for Web design, or a Web page that lists the pages on a Web site, typically organized in hierarchical fashion.Sitemaps make relationships between pages and other content components. It shows shape of information space in overview. Sitemaps can demonstrate organization, navigation, and labeling system.

June 16, 2016

How to Make the Blogger Header and Footer Full Width

Hello guys ! Just recently I've been updating and revising my posts simply to make sure that they are you know updated. I'm just so thankful that even though I've been gone for the blogger community for almost a year the website is still getting enough traffics - that's a good news for me. Haha. Well anyway so much for that, today I will be sharing to you guys on how to make the blogger header and footer part full width. So let's get started.

March 5, 2017 - Added alternative option for Step 2.3 just in case code cannot be found.

June 15, 2016

How to Add Simple Random Posts Widget in Blogger (Version 2.0)

One of the many ways available to drive more users unto our website is to use related post widget. We can also adapt a Random Post Widget into our blog to fully engage more users, by this we won't be displaying post limited only thru posts with the same tags or labels but we will be displaying entirely random posts not limited to tags. that is why I will be sharing to you guys on how to add simple random posts widget in Google's blogger platform.

June 15, 2016 - Codes were tweaked a bit.