Monday, June 19, 2017

Inviting All Friends to Facebook Page at Once JavaScript Snippet

Post written by Deepak Kamat

Facebook is a great tool for connecting with the World but one of the problem is that the population on Facebook is very big and so sometimes we feel the need of a "do all" function in most places such as inviting your friends on your new page.

It can be a hefty job clicking on thousands of "Invite" buttons one after one since Facebook doesn't give you an "Invite all" button. Same used to be true for Group requests but fortunately it now does, but as for Facebook page invites you still have to do the manual way.

In this tutorial we will be learning how to invite all friends to page on Facebook automatically. In the past on our blog we posted some similar codes for Facebook but as you know Facebook changes it design and structure so not all the old codes may still work.

This one is latest and is working (created in June 2017).

We will keep this short, there's only two step mainly, copy the code and paste it, but to perform it successfully we have to do more than just that.

Copy the JavaScript Code

var btns = document.querySelectorAll("button");
var i = 0;

setInterval(function(){
    if ( btns[i].textContent == "Invite" ) {
        btns[i].click();
        console.log( i + " buttons clicked." );
    }
    i++;
}, 200);

Open Facebook on Desktop in Chrome / Mozilla Firefox or Safari

After you've open the Facebook website, navigate to your page and you will see the section where you can invite your friends from.

Click on "See All Friends" to make sure all your friends are loaded in the invite section so that when we run the code it invites all of them.

In the browser open JavaScript Console and Paste the Code

Browsers have a JavaScript console where you can run JavaScript code from on the page, to open it on different browsers see the instructions :

Google Chrome: CTRL+Shift+J (CMD for Mac) OR Right click on page > Inspect > Console tab
Safari: Safari > Preferences, click Advanced, then select “Show Develop menu in menu bar.”. Now in the Safari Develop menu select "Show JavaScript Console"
Firefox: CTRL+Shift+J (or CMD+Shift+J on a Mac) ORselect "Browser Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on OS X)

Paste the code in the input area in the Console section and then hit enter.

That's it, the code will start running and will automatically invite all the friends to your Facebook page in no time.

Does it have a limit?

There's no limit set by the code, it can invite any numbers of people in very less time but Facebook has a limit on how many friends you can invite to a page daily. Once it exceeds you won't be able to invite friends on the same day.

We respect that and everyone should, Facebook knows that spamming would be a lot easier for people if it doesn't put such restrictions.

Please do not use the code for spamming purposes, this tutorial is meant for the people who are genuinely inviting their friends on their page. There's no risk of getting blocked by using this method but we cannot be sure if it is abused, the system will detect.

Why shouldn't I use an extension?

There are many extensions and add-on in browsers that lets you do the same but our recommendation is that you do not use those and the simple reasons are

You never know what the extension might be running in the background
Such extensions are known to go rogue and show pop-up ads in the future
Do you really need to install a forever running extension for a small task ?

Using the codes you know what you are running on your Facebook pages, because running scripts is very sensitive in browsers, scripts can be used to do a lot of harmful stuffs, so always double-check before running any extensions or scripts in your browser.

I see an error

Don't worry, it happens, even a small typo can lead to an error. If you see any error commend down below with a screenshot so we can jump in to help you in that regard.

Full Sized Background Image on Blogger with Blur Effect

Post written by Deepak Kamat

In this short tutorial you will learn how to add an image as the background of your blog that stretches to all edges thus fills your entire blog's background portion.

Looking to add a nice effect to your blog by using beautiful pictures as background images? It is a great way to personalize a blog, depending on the color scheme of your blog and the feel that you want the blog to have can all be improved by using an image as the full background.

This tutorial will be guiding you through the process of setting a custom full size image on your Blogger blog with a few lines of CSS as well as showing a way to give it a blurred glass effect.

Here's a quick demo of what you are going to have on your blog by following the steps to add the CSS to your blog: Full Page Background Image Blurred Effect using CSS

Uploading the image

Whatever image you are going to use you have to upload it somewhere in its full size first. The best place to upload it is Blogger itself, it gives unlimited photo storage as well as fast servers from Google wouldn't ever slow your blog down.

Open a draft post in your Blogger dashboard
Upload the image
When the image appears in the post area, right click on it and "Copy image address" or "Copy link address", the option might be different on different browsers.
Paste the copied URL that is the image's address in a Notepad / Textedit app. We may get something like this

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyrajfadQBUo8BooKtb2RHwsSG3DsiDCrVtBHEkAVqP6zcdTmtcmXJ3XQiBo1B0WO6AaeyLOljOpRaaaabRAbD4Y0jnfBmq6pY9TZrb9z0v7pIaWucvuvajBbg2KiWedjLR5pDoqAC9xy2/s1600/photo-1434394673726-e8232a5903b4.jpg
Keep it with yourself, we will need this in the next step.

The CSS Snippet

CSS is what makes it possible for us to add designs to our websites and blog. This one does the job for adding a full screen background.

html, body {
    background: url('IMAGE-URL-HERE') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Copy the CSS code and paste it in another Notepad / Textedit window.

In this code, replace IMAGE-URL-HERE with the image URL we got in the last step.

html, body {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyrajfadQBUo8BooKtb2RHwsSG3DsiDCrVtBHEkAVqP6zcdTmtcmXJ3XQiBo1B0WO6AaeyLOljOpRaaaabRAbD4Y0jnfBmq6pY9TZrb9z0v7pIaWucvuvajBbg2KiWedjLR5pDoqAC9xy2/s1600/photo-1434394673726-e8232a5903b4.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

I've done it, what now? Now that you have placed your image's URL in the code we are ready to make it appear on the blog. but before that please do take a backup of your existing blog theme.

Log-into your Blogger Dashboard
Go to the Theme section
Click on "Customize"
In the Theme Designer go to Advanced > Add CSS
Paste the CSS snippet into the text area on the theme designer page and click on Apply to Blog on the top right

Open your blog to see the updated background image. Right now you wouldn't see the blur effect, we will see how to do that in the next step.

Let's give it a blurred effect

We assume you are still in the Advanced > Add CSS page in the Theme designer from the last step. A small change in the URL of the image is required to get the blurred effect - that is to reduce the size of the image. Yes, the smaller the image the more blurry it will be. So that's our general idea, instead of using a photo editor app to make the original image blurry we use a small version of the original image.

Let's suppose your code is this, the URL of your image is of course different than the one in the following one.

html, body {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyrajfadQBUo8BooKtb2RHwsSG3DsiDCrVtBHEkAVqP6zcdTmtcmXJ3XQiBo1B0WO6AaeyLOljOpRaaaabRAbD4Y0jnfBmq6pY9TZrb9z0v7pIaWucvuvajBbg2KiWedjLR5pDoqAC9xy2/s1600/photo-1434394673726-e8232a5903b4.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

In the URL of your image, which may look something similar to this:

https://3.bp.blogspot.com/..............ynOTNfQCKgB/s1600/photo-1434394673726-e8232a5903b4.jpg

Change the number with the s prefixed to it to something smaller.

https://3.bp.blogspot.com/..............ynOTNfQCKgB/s32/photo-1434394673726-e8232a5903b4.jpg

s32 means the CSS code will load a version of the image that is only 32 pixels wide, so when a small image stretches from edge to edge on a screen it becomes blurry and gives the perfect effect we want.

You can change the value to whatever you like to adjust the level of blurriness of your background image. Change that small part in the code and again click on Apply to Blog to update the CSS code and make it go live on your blog.

Help Needed?

On some third-party themes and even the original themes provided by Blogger the code may not work properly due to some other CSS setting that may be overriding it. If you are unable to get it working then please share your blog URL in the comments down below along with the code that you are using as it is. We would be glad to jump in to help.

Friday, June 16, 2017

Full Blog Posts on Notable Theme's Homepage in Blogger Blogs

Post written by Deepak Kamat

In the new themes the page break in post editor is just for the name as the themes auto-truncates the posts and shows snippets and a preview thumbnails only on the homepage. Page break / Jump break is good only for feeds now.

There is no setting to make the theme show full posts on the home, index and archive pages and that is why we feel the need of writing this tutorial.

Previously on StramaXon we published a tutorial to show how it was done on Contempo theme, this tutorial will guide you through the steps to achieve the same with Notable theme, so if you are a Notable Theme user in Blogger then follow the steps given below to get your blog posts to show up as full.

Important: As with all of our tutorials where we are supposed to touch the theme code it is highly recommended that you take a backup of your current Blogger theme.

Video walk-through.

We've prepared a video tutorial of the same so you can watch it and follow the steps with more ease.

Link to the video tutorial.

Editing the XML / HTML Code in Theme

Open a new tab in the browser and Log-into your Blogger Dashboard
Go to the Theme section
Click on "Edit HTML"
When the Theme code editor opens, focus into the code editor and hit CTRL + F / CMD + F to open the in-page search

Look for the following line of code|

<b:include cond='data:this.postDisplay.showSnippet ?: true' data='post' name='postBodySnippet'/>

Upon searching you will get the result like this,

Copy the following HTML / XML markup

<b:if cond='data:widget.type != &quot;PopularPosts&quot;'>
  <div class='post-body-container'>
  <b:include data='post' name='postBody'/>
  <div class='post-sidebar invisible'>
    <b:with value='data:widget.instanceId + &quot;-normalpostsidebar-&quot; + data:post.id' var='sharingId'>
      <b:include cond='data:post.shareUrl' data='{ shareButtonClass: &quot;post-share-buttons-top&quot;, overridden: true }' name='maybeAddShareButtons'/>
    </b:with>
    <b:if cond='data:post.labels and !data:post.labels.empty and data:this.allBylineItems.labels'>
      <div class='post-labels-sidebar'>
        <h3><data:messages.labels/></h3>
        <b:include data='post' name='postLabels'/>
      </div>
    </b:if>
  </div>
</div>
  <b:else/>
 <b:include cond='data:this.postDisplay.showSnippet ?: true' data='post' name='postBodySnippet'/>
</b:if>

Go back to the theme editor where we previously found the line of code from step 5. Replace that line of code with the code you just copied. This is what it the XML code should look like when you have replaced it.
Now click on "Save theme" to save the changes and go to your blog to see the change. The posts should now appear full on all the pages.

You may have noticed that the "Read More" button is still there even though the post shows up full, it's because the Jump link is added by another code that we didn't touch yet and it isn't even necessary, we will be using CSS to simply hide the links.

CSS to hide the Jump Link

This CSS snippet should hide the "Read more" links from the posts on home, archive and index pages.

.widget.Blog .jump-link {
    display: none;
}

Here's a complete guide with screenshots on adding CSS in Blogger blogs

Log-into your Blogger Dashboard
Go to the Theme section
Click on "Customize"
In the Theme Designer go to Advanced > Add CSS
Paste the CSS snippet into the text area on the theme designer page and click on "Apply to Blog" on the top right

Refresh your blog to see the changes live on your blog.

Showing full blog posts on other new themes

The same can be done on other themes and here are the links for the tutorial to do it on other new Blogger theme(s)

Show Full Blog Posts in Homepage of Contempo Theme in Blogger

Thursday, June 15, 2017

Semi-Transparent Header on Blogger's Notable Theme

Post written by Deepak Kamat

The header on the Notable theme in Blogger sticks to the top when you are scrolling down, that's a neat design and good thing for mobile users who may otherwise find it difficult to scroll all the way up to access the navigation menu.

In this post we will use a small CSS snippet that let's you make the header semi-transparent or in simple words a see-through navigation menu. You can set the opacity yourself to fit your needs since you may want it to be less or more opaque.

Our posts are known to stretch a little bit too much so we are going to keep this short because there's not even much to it. There's a CSS snippet that you add to your blog's theme, that's all.

The CSS we will need. Note that this is for the Notable Blogger Theme, this may or may not work with other themes.

header.centered-top-container.sticky {
    opacity: 0.8 !important;
}

The value 0.8 is the opacity of the header, it can be anywhere from 0 to 1.0, setting it 0 will cause the header to be completely transparent so we do not want that. You may change the value to your needs and then add it to your blogger.

How to add the CSS code?

Here's a complete guide with screenshots on adding CSS in Blogger blogs.

Log-into your Blogger Dashboard
Go to the Theme section
Click on "Customize"
In the Theme Designer go to Advanced > Add CSS
Paste the CSS snippet into the text area on the theme designer page and click on "Apply to Blog" on the top right

That's done. Now refresh your blog to see the changes.

If you have request for tutorials for other Blogger themes then please do comment below.