By Gamesnet Friday, May 2, 2014 0 comments

Grid View with Thumbnails is a script for self-hosted Blogger blogs which will display blog posts as a thumbnail grid of images in homepage and archive pages. Instead of sending your blog visitors to a page that displays all the posts in full length with a large image which takes up too much space and requires too much scrolling, now you could have a clean page that displays a gallery grid, with thumbnails and post titles, linking back to the source post for that thumbnail. Let's take a look at what it could look like in this demo blog.


If you have a wallpaper or photo blog that would benefit from displaying a thumbnail grid style layout, look no further. Here's how you can add Grid (gallery) View to Blogger posts.

Adding Grid (Gallery) View to Blogger Posts

Step 1. Log in to your Blogger account and go to Template > click on the Edit HTML button


Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box


Step 3. Type </head> inside the search box and hit Enter to find it.

Step 4. Just above the </head> tag, add the following script and style:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[

$(document).ready(function() {

    var width         = 200;
    var height        = 170;
    var placeholder    = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZoG8cC4I17Os2wcpjTdHOhKH-tCkfeEYWRzpKmt4TmTMlbP_ZQ6Pn7X2kijDinNGCXBlczrGybyjp0jGJVjPHFcjL4K2b9Buk9DANEkNaldReKu4WmUBtpChhUbwQvXltAxfS9cYhonU/s1600/no-thumb.png';
    var margins     = "0px 0px 10px 10px";
    var fitThumb                 = 1;
    var titleTopPadding            = 5;
    var titleBottomPadding        = 8;
    var titleLeftRightPadding    = 5;   

    var titlePadding = titleTopPadding + 'px ' + titleLeftRightPadding + 'px ' + titleBottomPadding + 'px ' + titleLeftRightPadding + 'px';
    $('.post-body').each(function(n, wrapper){
        var wrapper         = $(wrapper);
        var image         = $(wrapper).find('img').first();
        var link         = wrapper.parent().find('h3 a');
        var linkURL         = link.attr('href');
        var linkTitle        = link.text();

        $(link).remove();
        wrapper.empty();

        if (image.attr('src')) {
            var thumbHeight = image.attr('height');
            var thumbWidth = image.attr('width');   
            var thumbParent = $(image).parent();

            wrapper.append(thumbParent);

            if (fitThumb) {
                image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + width + '-c')});
                image.attr('width',width).attr('height',height);
            } else {
                image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + width)});
                image.attr('width',width);
                var changeHeight = (thumbHeight/thumbWidth * width).toFixed(0);
                image.attr('height',changeHeight);
            }
           
        } else {
            var image = $('<img>').attr('src',placeholder).attr('height',height).attr('width',width);
            var thumbParent = $('<a>').append(image).appendTo(wrapper);
        }

        thumbParent.attr('href',linkURL).css('clear','none').css('margin-left','0').css('margin-right','0').addClass('postThumbnail');
       
        var thumbTitle = $('<div>').prepend(linkTitle).css('padding',titlePadding).css('opacity','0.9').css('filter','alpha(opacity=0.9)').css('width',width).appendTo(thumbParent); 
        var ptitleHeight = thumbTitle.height();
        var summary = parseInt(ptitleHeight) + parseInt(titleTopPadding) + parseInt(titleBottomPadding);
        thumbTitle.css('margin-top','-'+summary+'px');            wrapper.css('float','left').css('height',height).css('width',width).css('margin',margins).css('overflow','hidden');
    });
    $('#blog-pager').css('clear','both');
});

function hideLightbox() {
    var images = document.getElementsByTagName('img');
    for (var i = 0 ; i < images.length ; ++i) {
        images[i].onmouseover=function() {
            var html = this.parentNode.innerHTML;
            this.parentNode.innerHTML = html;
            this.onmouseover = null;
        };
    }
}

if (window.addEventListener) {
    window.addEventListener('load',hideLightbox,undefined);
} else {
    window.attachEvent('onload',hideLightbox);
}
//]]></script>
<style>
.post {
border-bottom: 0 dotted #E6E6E6;
margin-bottom: 0;
padding-bottom: 0;
}
h2,.post-footer {
display:none;
}
a.postThumbnail div {
text-decoration: none; color: #fff;
font-size: 12px;
font-weight: bold;
text-transform: capitalize;
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -o-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -ms-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#7d7e7d&#39;, endColorstr=&#39;#0e0e0e&#39;,GradientType=0 );
}
a.postThumbnail:hover div {
display: block;
}
.post-body img {
background-color: transparent;
border: 1px solid transparent;
padding: 0px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.post-body img:hover {
-ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=70)&quot;;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
</style>
</b:if>

Note:
- If you want to make the post thumbnails larger, modify the 200 (width) and 170 (height) values in blue
- To change the default thumbnail for when there are no images, replace the URL in red with your own.

Step 5. Click on the Save template button to save the changes and View your blog. Now you should have a nice grid view on your Blogger posts. Enjoy!

By Gamesnet Monday, March 10, 2014 0 comments

Each time we visit a website, cookies can be stored to 'remember' things that we do while browsing a page. This may happen, for example, when we visit a page where we have to login with an username and a password. In this case, after verifying that the login is correct, usually a cookie is recorded on our computer.

An example would be the popular page of Google. This search engine allows users to choose how many search results they want to see on each page. Thanks to a cookie, this configuration remains unchanged for each computer, even after rebooting several sessions. Despite this, it is good to remove them from time to time because, although, some will expire being erased automatically after a while, some of them will never do so.

Like many other things, cookies may suffer a poor use and hence their bad reputation. For instance, some websites can store and study the browsing habits of a user without their knowledge. This is why most browsers already include a system to filter them and can decide if they will provide some privacy or not.

If you want to see a live example of how a cookie works, please visit this page and refresh it a few times. You should get an alert window telling you about how many times you visited the page.
(script source: javascriptkit.com)

There could be other ways to use cookies but a server could do this with JavaScript. Below we have a simple script that can be used as many times we want, even for different purposes. Basically, what the following script does is to create three functions: the first one is to set a cookie, the second one is to read it, and the last one is to erase it. We can apply it in Blogger by accessing the template HTML and add it just before the </head> tag:

<script type='text/javascript'>
//<![CDATA[

// Set cookie
function setCookie(name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape(value) +
((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
((secure == null) ? "" : "; secure");
}

// Read cookie
function getCookie(name){
var cname = name + "=";
var dc = document.cookie;
if (dc.length > 0) {
begin = dc.indexOf(cname);
if (begin != -1) {
begin += cname.length;
end = dc.indexOf(";", begin);
if (end == -1) end = dc.length;
return unescape(dc.substring(begin, end));
}
}
return null;
}

//delete cookie
function eraseCookie (name,path,domain) {
if (getCookie(name)) {
document.cookie = name + "=" +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}

//]]>
</script>

Once done, in order to set a cookie, we only need to put the name and the value in quotes when we call the function. Additionally, we will set the expiry date by getting the current Time (in milliseconds) and add the required number of minutes (in milliseconds):

var expiration = new Date();
expiration.setTime(expiration.getTime() + 10000); //Expire after 10 seconds
setCookie("cookiename","hello",expiration);
}

The above code sets a cookie called cookiename, with the hello value and set its expiry date to 10 seconds after it has been set (10000 milliseconds = 10 seconds). If we want to restore the value of this cookie, then we should use the second function with the cookie name:

var checkCookie = getCookie("cookiename");

By adding this code below <body>, we created a cookie with the value 'hello' which can be shown on the screen if we want to. The cookie will disappear after 10 seconds:

<script type='text/javascript'>
var expiration = new Date();
expiration.setTime(expiration.getTime() + 10000);
setCookie("cookiename","hello",expiration);
var checkCookie = getCookie("cookiename");
document.write(checkCookie);
</script>

The erase function is used in the same way as the one for reading just by clicking on the name of the cookie. The setCookie values for 'domain' and 'secure' are not utilized. Use 'domain' on the Javascript cookie if you are using it on a subdomain, where the cookie is set on the widgets subdomain, but you need it to be accessible over the whole yoursite.com domain.

The combination of these three functions will allow us to handle cookies for specific purposes, as we will see in the near future.

By Gamesnet Monday, February 3, 2014 0 comments

When we add a widget on Blogger, the thumbnails will keep a default size of 72 x 72px which might not look good if we try to make them bigger using only CSS. However, with a bit of JavaScript we'll be able to replace the thumbnail with the same image of higher resolution and this way, larger images will no longer appear blurry.

In this tutorial we will see how we can replace the default thumbnail size of the popular posts widget but we can apply this trick on any of the blog widgets.

Changing the Thumbnail Size for the Popular Posts Widget

Step 1. First, let's add the Popular posts gadget by going to Layout > click on the Add a gadget link and select Popular Posts from the popup window.

Step 2. Go to Template > click on the Edit HTML button > click anywhere inside the code area and press CTRL + F keys to open the Blogger search box. Step 3. Type or paste the </head> tag inside the search box then hit Enter to find it. After you found the </head> tag, add this CSS above it:

<style type='text/css'>
.PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: 130px;
margin: 0 0px 5px;
overflow: hidden;
width: 210px;
border: 2px solid #EEEEEE;
border-radius: 20px;
}
.PopularPosts .item-thumbnail img {
position: relative;
top: -30px;
transition:all .2s linear;
 -o-transition:all .5s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}
.PopularPosts .item-thumbnail img:hover{
opacity:.6;
filter:alpha(opacity=60)
}
.PopularPosts .widget-content ul li {
background: #F9F9F9;
border: 2px solid #EEEEEE;
border-radius: 10px;
box-shadow: 0 4px 10px #EEEEEE;
color: #555555;
padding: 10px;
margin-bottom: 5px;
}
.PopularPosts .item-title {
font: 14px Cambria,Georgia, sans-serif;
color: #2288BB;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
.PopularPosts .item-snippet {
display: none;
}
.widget .widget-item-control a img {
height: 18px;
width: 18px;
}
</style>

Step 4. Search for the </body> tag and just above it, add this script:

<script type='text/javascript'>                  
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("PopularPosts1",210);                  
</script>

What I highlighted in red is the widget ID for the Popular Posts gadget - to change the thumbnails size for any of your blog widgets, first you need to find the gadget/widge ID and then add a line below this part:

changeThumbSize("PopularPosts1",210);
changeThumbSize("widget-ID-HERE",210);

 ... and replace widget-ID-HERE text with the ID of that widget/gadget.

Note: you'll not be able to see the changes if the widget has a class selector - for this you will need to change class with id and replace the dot "." symbol with "#" within the CSS...

Step 5. Finally, Save the Template. 

If you need more help, please leave a comment below.

By Gamesnet Sunday, December 22, 2013 0 comments

Sometimes, when using scripts, we must write special characters like accents by using a special set of codes called character entities, however these don't always look good or we get a question mark or other strange symbols. Usually, this is solved if the character encoding is done right but the logic may not always work.

In Blogger, special characters most of the time appear correctly, but when it is about other services, like external files, things can get complicated.

For example, this usually looks good and when you click on this link, you should see the letters in the right way:

alert(" á é í ó ú  ☺ ✛ ❤ ");

If we are trying to use other method and we want to use this type of characters, sometimes we need to write them in a special format called escape sequence which is nothing but a backslash followed by a letter and a number in hexadecimal format. In the case of common characters or accents, it would be \x followed by two hex digits:

\xe1 is the letter á
\xe9 is the letter é
\xed is the letter í
\xf3 is the letter ó
\xfa is the letter ú

Other combinations generate special characters:

\n is a line break
\t is the tab character
\' is single quote
\" is double quote
\\ is a back slash

Or we can use \u followed by the Unicode character code expressed as four hexadecimal digits:

\u00e1 is the letter á
\u00e9 is the letter é
\u00ed is the letter í
\u00f3 is the letter ó
\u00fa is the letter ú

this will allow us to see correctly what we couldn't before if we were using some other services:

alert(" \u263a \u2764 \u271b ");

On this page you can find a comprehensive list of all the characters, both symbols and different alphabets.
Although rare characters are not often used in the CSS, there is a case when they are necessary as well, like when using the content property with the :after and :before pseudo-elements.

The same criteria applies there, but we only need to add a backslash followed by the four-digit hexadecimal code. For example:

content: ":\24d1\24d4\24d5\24de\24e1\24d4";

content: ":after  \263a  \2724  \2602";

Remember that IE doesn't understand the :before pseudoclass with content, and you would have to set the list-style-type property as none, or you would get 2 bullets in CSS compliant browsers.

By Gamesnet Thursday, April 4, 2013 0 comments

If you want to add translator tool. Use Google Translate to translating all languages.
Follow this:

1. Login to your blogger

2. Go to Layout >> Add a gadget >> Click on HTML/JavaScript

Copy this code

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

3. Save and you're done!

I hope this tutorial useful for you, if you have any question for these tutorial. Please feel free to comments.

By Gamesnet Wednesday, April 3, 2013 0 comments

Hello everybody, How are you  today. Nice to meet you this week.
Now, I will post how to add google translate to blog (blogspot).
It easy...


Just follow me,

1. Login to your blogger
2. Open in new tab and go to Google Translate
3. Click on "Add to your website now"
4. Enter the URL of your blog and select language of your blog. And then click Next. Like this,

5. Set the options as you like,
Note:
Translation languages: All languages = show all languages that google translate to your blog
                                  Specific languages = show only translation you want
Display mode: Select display that you want
Advanced: Option
If you want tracking translation, click on "Track translation traffic using Google Analytics" and fill with your Google Analytics ID

6. Click on "Get Code"
7. Copy the code to your blog
8. Save and you're done...

Oke Finish... I hope you enjoyed.
If you wish to add all languages to Google Tanslate. Read this article, Add Google Translate With All Languages

By Gamesnet Thursday, January 24, 2013 0 comments

By Gamesnet 0 comments

By Gamesnet Monday, January 21, 2013 0 comments

After posting an article about How To Adjust Picture Position. Visitors usually want printing our pages. They use Ctrl+P to printing.
But, here I would like to make it easy by one button to print.
By adding a print button, you allows the reader to print your article. And it's very helpful for readers on your blog.

Maybe your blog visitors are students who are looking for material to learn. Give convenience to the reader by giving the print button on each of your posts.



1. Login to your blog
2. Go to Template > Edit HTML
3. Find this code with Ctrl+F <div class='post-header-line-1'/>
4. Copy paste below code after above code,

<div style='float:left;padding-left:10px;'>
<a href='javascript:window.print()'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Rj-GmpdeNvbKhhVRdVpU8DIKpDb1I6nqdoLiWCOGaswcx0LbG_fllxNjHFr_1xACyI_cVjJc67OB8HZiCXcPASy-GChBz5JeIfxoyuG9QaPF53GdYrgngH0teBMKviqd2xYablAvnlfu/s1600/printbutton.png'/></a></div>

It will look like,

<div class='post-header-line-1'/>
<div style="float: left; padding-left: 10px;">
<a href="javascript:window.print()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Rj-GmpdeNvbKhhVRdVpU8DIKpDb1I6nqdoLiWCOGaswcx0LbG_fllxNjHFr_1xACyI_cVjJc67OB8HZiCXcPASy-GChBz5JeIfxoyuG9QaPF53GdYrgngH0teBMKviqd2xYablAvnlfu/s1600/printbutton.png" /></a></div>

5. Save and Enjoy

But, if the code doesn't work... You can put the code (number 4) in other place as you like.
Look at this sample. Press the print button.

Hopefully this article can help you add a print button on the blog.
Still confused? Please feel free to comment.
Do you want read How To Make Dofollow Blog?

By Gamesnet 0 comments

I think this is easy tips.
Maybe just some people doesn't know it.
If you do not know about HTML, and wanted to change the position / location of image, text, or element of your blog.
This paper will explain a bit how to adjust the position / location of the picture for those of you who do not know about HTML.
Actually very difficult to learn HTML. Because in HTML, a lot of the code that you see and you must to know. But all of it will be easy if we continue to learn HTML.

Okay now I will explain how to adjust or change the position of the image. Please refer to my article.
But I will show to you how to adjust a picture position (left, right and center)

Example:
I want social media icon move to center,











Open the HTML code of your picture/icon,
add this bellow code just before your picture/icon

<div align="center">

----> Your Picture HTML code <----

</div>


It will look like,











 It's easy, isn't it?
Change "center"  with left or right position as you like.

I hope this article can help you understand HTML slowly. Keep learning.
If anyone wants to ask please comment
Good Luck!
Do you want read How To Add Print Button To Blog?