Show Post Snippets or Post Description in Blogger

Google Search Engine generates the Rich Snippets automatically by using variety of signals, including the content of a page as well as references to it. Therefore, you will see the different snippets for the same page in different span of times even the contents from the bottom of your webpage might be shown as rich snippet.

However, if you add Structured Data or Meta Description Tag for your blog or site then it helps search engine to show the content summary in a better way. If the blog post description shall be visible to your live visitors then it helps users to understand about the contents of that post very well.

Additionally, the Meta Description of your blog post will not only appears in the search results but also help social media such as Google+ and Facebook to display your webpage contents summary.

How to enable Search Description in Blogger

All blogs which are hosted on Blogger.com irrespective of using custom domain may enable the Search Description option which remain disabled by default. To set the blog’s search description, follow these steps:

Step-1: Login to your blogger account and go to your blog Dashboard.

Step-2: Click on Settings tab and then Search preferences.

Step-3: Now, click on Edit next to “Description” under Meta tags heading and select radio button Yes to enable the search description for your blog.

Step-4: Finally, you may now write a brief description for your Blogger blog but remind one thing that it should not be more than 150 characters.

How to make the Search Description visible for readers of your blog post

To show custom blog post snippets for your each blog posts follow the following steps:

Step-1:

First of all Enable Search Description in Blogger as discussed above. Because, it will include a meta description tag in your blog HTML source <meta content=’…..’ name=’description’/>

Step-2:

Now, you will see a “Search Description” option in each and every Post Settings panel as shown below.

In search description box you may write your post contents summary/snippet which will help search engine and social media. Further, we make it visible to the readers as well. Note that the summary or excerpt for each individual post should not exceed 150 Characters (including spaces).

If you write more than 150 characters long individual post snippet then it may not be displayed in search results. However, the same will be shown as post summary without any error just above post contents.

Step-3:

Add the following CSS codes to your blog template.

.swt-snippet {/* Post snippet by TechnicalPunk*/
clear: both;
float: none;
margin: 10px;
padding: 5px;
text-align:center;
background: #F3F1E6;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-top: 1px solid #bbb;
border-left: 1px solid #bbb;
-moz-box-shadow: 0 1px 2px #f2f2f2;
-webkit-box-shadow: 0 1px 2px #f2f2f2;}
#p468, #p468 a{
font-size: 110%;
text-decoration: none;
display: inline;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
}
span.swtSummary {
color: #575757;
font: italic 13px/21px Georgia, "Times New Roman", sans-serif;
}
#p468::after {
content: ": ";color: #140709;font-weight:bold;letter-spacing: .0625em;
/* Tutorial at: http://www.technicalpunk.com */}

Step-4:

Go to the template editor of your blog and search for <data:post.body/> and just above it paste the following codes. You will see the same in two places, the first one is for mobile templates and another is for desktop visitors. Therefore, you may insert the following codes before these two or one of them.

However, in some customized templates you may see three <data:post.body/> and therefore insert the codes before each of them. Actually, the first <data:post.body/> is for your mobile template and third is for desktop template. However, the second is for displaying the default settings to use the post body as the schema.org description, for good G+/FB/Twitter and other social medial snippeting.

<b:if cond='data:blog.pageType == "item"'>
<!--
START SWT Post snippet by TechnicalPunk --><div class='swt-snippet'><a
href="http://technicalpunk.com/?p=468" rel="help" id="p468" target="_blank">Summary
</a><span class='swtSummary'>
 <data:blog.metaDescription/></span><!--
Tutorial at: http://www.technicalpunk.com
--></div><!--
END SWT Post snippet by TechnicalPunk --></b:if>

Finally, save your template and enjoy!

Add Breadcrumbs in Blogger (Blogger SEO Specials)

Search engine optimization is quite easy as it may appear, SEO it basically can be defined in general term as guidance system for search engine. This small piece of code helps the Google crawlers to identify the data in more efficient manner as it does without it. This SEO can also be implemented on breadcrumbs so the respective breadcrumbs of that particular article also appear on Google search result.

How to Remove 'Showing Posts with Label' Default Message in Blogger

In any default Blogger layout, the "Showing posts with label" like a default message shows up above the posts every time you click on a label link. Sometimes it looks so useless and annoying, a lot of people like to have it removed. If you also want to do that, just follow the tutorial below:

Removing "Showing post with label...show all posts"

Step 1. Go to Dashboard - Template - Edit HTML (if necessary, click on Proceed button)

Step 2. Click anywhere inside the template code, then search - using CTRL+F - this code:

<b:includable id='status-message'>

After you found it, click on the sideways arrow next to it, to expand the rest of the code.

Step 3. Below is this code that you need to remove - along with the first one, as well:

     <b:includable id='status-message'>
      <b:if cond='data:navMessage'>
      <div class='status-msg-wrap'>
        <div class='status-msg-body'>
          <data:navMessage/>
        </div>
        <div class='status-msg-border'>
          <div class='status-msg-bg'>
            <div class='status-msg-hidden'><data:navMessage/></div>
          </div>
        </div>
      </div>
      <div style='clear: both;'/>
      </b:if>
    </b:includable>

 Step 4. Replace it with this one:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Step 5. Save the template. That's it! Now check out your blog and click on any of the label....there should be no annoying message like that anymore.

Divide or Split Blogger Header Section into two different Parts

Now a days, blogger has became one of the top choice for every blogger, as it is completely free, and Google Hosted. And unlike other blogging platforms, you can easily turn it into robust website with just few simple tweaks.
This tutorial will tell you 'How to Divide or Split Blogger Header Section into two different Parts'.

First of all, know it a bit better. Usually a header consist of the company logo, but now a days, it is used as one of the important place, where people use to put there advertisement, important site links, address, contact details, etc. Some of the Blogger templates has this feature. Commonly it is a simple container which can contain 2 widgets at one time one after the other side by side normally it consist of your logo and advertisement or etc.

Follow these Simple Steps To Split Header in Two Different Parts:

1.Go to blogger.com >> Your Blog >> Design >> Edit Html / Template

2.Backup your template in case some thing went wrong. If you don't know how to backup template simple visit the tutorial how you can backup your template in blogger.

3.Uncheck the "Expand the Widget'' if it is checked 

4.Search for the following code in the template                                                                           

#header-wrapper {
  width:960px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }
#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}
#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}
#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}
#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }
#header a:hover {
  color:$pagetitlecolor;
  }
#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
}
#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}

Important: Due to different template coding the code above might be different. For example : #header might be .header so look for the related code.

5.Now after finding the code, replace the entire code with the following code:

/*------Header-----*/
#header-wrapper{
    width: 960px;
    color: #000;
    margin: 30px auto 0;
    padding: 0px;
    overflow: hidden;
}
#header-inner {
    background-position: left;
    background-repeat: no;
}
.headerleft h1, .headerleft h1 a,.headerleft h1 a:hover,.headerleft h1 a:visited {
    color: #BF0100;
    font-size: 36px;
    font-family: 'Ultra', serif, Arial;
    font-weight: bold;
    margin: 0;
    padding: 0px 0 5px 0;
    text-decoration: none;
      text-shadow: 6px 6px 4px #ccc;
       line-height:1.2em;
}
.headerleft h3 {
    font-family: arial, tahoma,  Sans-Serif;
    font-weight: normal;
    margin: 0;
    padding: 0;
}
.headerleft .description {
        color:  #3B3B3B;
    font:bold 12px Helvetica, arial,  sans-serif;
    margin: 0px;
    padding: 0 0 20px 0;
        text-shadow: 4px 4px 6px #ccc;
}
.headerleft {
         width: 450px;
         float: left;
         margin: 0;
         padding: 0;
         height:80px;
}
.headerright {
         width: 468px;
         height:80px;
         float: right;
         margin: 0px;
         padding:1px 0 0 0;

}

6.After Replacing the code search for the following code,if you could not find the code then look for the similar code which should include div section of your header.

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' My Header  (Header)' type='Header'/>
</b:section>

Rememeber: the code must contain <b:section and </b:section> tags to make the whole process work.

7. After you find the code above or similar code replace the entire code with the following code                                                                   

<div id='header-wrapper'>
<div class='headerleft'>
      <b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Header (Header)' type='Header'/>
</b:section>
</div>
<div class='headerright'>
<b:section class='headerright' id='headerright' maxwidgets='1' showaddelement='yes'>
</b:section>
</div></div>

8.Now press the Save Now button and to save the whole process and then visit layout page to see the difference.

Customizing your header design:

To change the width of you header simply replace 960px; 

To Change the colour of the title simply replace #BF0100; To Change the colour of the header description replace #3B3B3B;

How to Remove 'Powered by Blogger' Attribution in Blogger

The Attribution gadget is the gadget in the footer that says "Powered By Blogger". If you have tried to remove this then you may of noticed this gadget is locked into you blog. To unlock it, follow the next steps:

Step 1. Log in to your Dashboard, go to Template > Edit HTML

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

Step 3. Type or paste the following tag inside the search box then hit Enter to find it:

</head>

Step 4. Just above </head> add this code:

<style>
#Attribution1 {
display: none;
}
</style>

Step 5. Click on the Save Template button to save the changes.

That was all !

Key Toggling Trick In NotePad : Good for pranking your friends!

With the help of the following codes, you can frustrate your friends, and boggle thier Brains (may be they'll go mad on YOU!)
It's simple to impliment, just follow these steps:
Write the following code in the Notepad & save it as “NAMEANY.vbs” & send it to your friends.

Set wshShell =wscript.CreateObject(“WScript.Shell”)
do
wscript.sleep 100
wshshell.sendkeys “{CAPSLOCK}”
loop

When you'll double click on the file, this will toggle the Caps Lock button. Thus your friend won't be able to type anything properly.
Similarly, you can do this with Enter button or the Backspace button too. The following is the code for it.

For “Enter“

Set wshShell = wscript.CreateObject(“WScript.Shell”)
do
wscript.sleep 100
wshshell.sendkeys “~(enter)”
loop

For “Backspace“

Set wshShell = wscript.CreateObject(“WScript.Shell”)
do
wscript.sleep 100
wshshell.sendkeys “{bs}”
loop
 

You can stop these scripts by going to the Task Manager, then Process & end the “wscript.exe”

NOTE — THESE TRICKS MAY DAMAGE YOUR SYSTEM (Just Joking!)

How to Remove 'Subscribe To:Posts (Atom) or Blogger Attribution

In many Blogger templates there is a "Subscribe to: Posts (Atom)" link, so that the blog visitors can subscribe to the Atom feeds. Considering the fact that many readers use RSS for their blog feeds, many of you could find this link pretty useless. Moreover it occupies space at the bottom of the template and it doesn't look nice at all. In this case you might want to remove it.

How to remove subscribe to: Posts (Atom) link?

Step 1. Go to your Dashboard > Template > Edit HTML

Step 2. Click anywhere inside the code area, then press the CTRL + F keys to open Blogger' search box

Step 3. Find (CTRL + F) this line:

<b:include data='feedLinks' name='feedLinksBody'/>

Step 4. Remove it and click on the Save Template button to save the changes. That's it!

This should remove subscribe to: posts (atom) link.

5 Simple Ways to Boost SEO & Get More Traffic

Boost traffic & increase SERP visibility with SEO

A blogger needs to know at least the minimum on SEO. For it, you don't need to be an SEO expert but you need to know the minimum so that your posts are well indexed in the search engines.

The phrase "content is king" is one of the widest spread Internet memes being used by so many bloggers, with the idea that you should focus on having quality content, while the rest don't matter much. This is not true. Quality content is important, but it shouldn't be the only concern of a blogger today. In addition to producing quality content, your text needs to be optimized for the search engines.

5 easy ways to improve the SEO of a blog

Now, let's see what would be the basics that any blogger needs to learn about SEO and other simple SEO knowledge. Below are 5 easy tips to improve the SEO of your blog:

1. Define the keyword

When you write a post, it is recommended to choose the keyword (or term) suitable for your text. What you want is that this keyword - or term - to be searched on Google, and then get your post among the top. For this, you need to use this keyword a few times in the text.

For example, here the keyword could be SEO, but this term is too generic and I could hardly get in the top for this search. Then I'll work with a phrase or a long tail keyword, so that this post will rank for the term "easy ways to improve the SEO of a blog". I will use this phrase a few times, but without overdoing it.

2. Use the keyword in the post title

Now that I have defined the keyword, I will use it in the post title. This step is very important, and certainly will help you to get a better rank in search engines. As you can see, what I have in the title is the easy ways to improve the SEO of a blog keyword, along with other words to form an attractive and optimized title for SEO.

3. Use the keyword in the H2 tags

You must also use heading tags (h2, h3) in your posts. Here, I am using the keyword "easy ways to improve the SEO of a blog" in a H2 heading. Do this always, because it also helps to become well positioned in the search results. If you don't know or don't understand what are the heading tags, I would suggest to do a further research on this subject.

4. Use the keyword in the text

Make use of your chosen keywords throughout the text. Especially in the first paragraph (please note that I have repeated the title in italics in the first sentence). But be careful when doing this, there is a maximum and minimum limit for that. A good keyword density is between 1.5% to 4.5% for best results. Less than that will have no effect and more than that can alert the search engines and your text might be considered spam.

5. Publish Posts with 300 words or more

Posts under 300 words have little chance to be among the top results in search engines. Of course, you will be able to rank for multiple keywords that are less popular with less than 300 words, but for the most competitive keywords that have the potential to bring a greater number of visits, it will be nearly impossible.

Thus, it is recommended to write posts with more than 300 words. It's not hard when you really understand the topic you're talking about.

Conclusion

As you can see, with some simple SEO techniques you can improve the traffic coming to your blog from the search engines. I hope you enjoyed these 5 easy ways to improve the SEO of a blog!

Facebook Introduces 'Work' : A New Social Tool for Businesses

If you get bored sitting around the office all day without being able to socialize, Facebook has a new hobby for you. Facebook has just announced a new social tool called "Work" (we called it 'Facebook for Work' before), which will revolve around your professional life, and how employees in a Business communicate with each other.
Now, you won't have to go through the hassle of getting around a firewall in order to access Facebook, or hiding it from your boss for that matter.
Simply titled ‘Work’ (as opposed to 'Facebook for Work' as was rumored before), the new product will reportedly allow businesses to create self-contained social networks exclusively for employees. Sounds kind of like an Intranet, with the exception that it would be accessible outside of work.

How Is it Different from Normal facebook?

The social networks created in Work would mirror Facebook in design and user experience. Users can join using their existing Facebook account, or can create their own ID just for use in Work.
So, why use Work when everyone you work with is already on Facebook? For starters there are no advertisements or data tracking. So you won’t be inundated with ads or have to worry about lack of confidentiality.
Secondly, the company is touting the usefulness of its Groups feature and how it is being integrated in Work. It’s apparently so useful, in fact, that Facebook believes it could replace workplace email the way that other companies like Slack and Yammer have set out to do.

Lars Rasmussen, the engineering director at Facebook, says that the company is currently using Work for its communication, and is using feedback gained by its employees over the years to refine the product before releasing it in an already crowded marketplace.
It sounds like Facebook has recognized the significant growth of workplace communication apps as of late, and is now in reaction mode trying to produce a solution of its own. Perhaps Facebook is banking on the fact that the users’ familiarity with the network will keep them from seeking the services offered by competitive apps.
How Work compares to similar offerings already on the market will remain to be seen as Work is still in the testing phase, having only been released to a select group of partners.

Watch Windows 10 Event Live!

Microsoft is getting ready for one the biggest update to its Windows operating system in many years. The new OS, called Windows 10, was released as a developer preview last year, with reports that the release would come on early in 2015. Microsoft will be holding an event today to discuss the future of its new platform. Unlike the last one, this event will be about much more than the desktop.

What's New?

The new Operating System features a host of improvements over the older Windows 8.1. These included some UI tweak such as a smart Start menu, snap-able apps, an improved command prompt interface, and other visual enhancements.

Though we saw glimpses of the long awaited Windows 10 at a business-focused preview event in September, many other details - such as the user interface improvements for touch devices and the mechanics of its Continuum feature - have remained under wraps until now.

Windows 10 isn't for desktops only. The latest version of the Operating System will also be integrated into Windows Phone and Xbox.

How to Watch Event Live?

The event will start today at 12:00 p.m Eastern Time (ET), or 5 p.m GMT. For Pakistan/India, it will start at 10/10:30 pm respectively. The event is expected to go on for at least one hour. Microsoft's CEO, Satya Nadella, along with other top executives is expected to speak at the event.

If you want to catch the event, you can tune into Microsoft's live-stream from the link given below. If you are unable to tune in live, or have missed it, don't worry. Follow the same link, where the video of the event will be posted.

Livestream: Microsoft live-stream of the event
Liveblog: Mashable's live-blog link

If you cannot watch the video, you can catch the live-blog link above from Mashable, where they'll provide text and image updates from the event.

Let's see what Microsoft has in store for us (:

The SuperSecure Password : Really Possible?

The recent Sony hack has everybody on edge, especially since it turns out that the files leaked also contained the passwords to a bunch of Sony emails, social media accounts and web server accounts. While, yes, it looks like so super powerful, pro-level hackers were hired to do the job, that doesn't negate the fact that Sony has some top notch security. And if Sony’s security can be breached to such a deep Wiki-leaks level, what does that mean for the rest of us whose security profiles are decidedly less intense?

As someone who makes a living with music online, keeping your information and intellectual property safe is literally the key to your livelihood. Imagine what would happen if someone got access to your backing tracks or demos or somehow took your systems hostage. It’s scary, right? So what do you do? How do you keep your information and property safe?

Most of the time, as simplistic as it sounds, keeping your intellectual property and account information safe is a matter of choosing the right username and password combination. A lot of people, in spite of the multitude of warnings against this, stick with a single username and password combination for every login they have. This is the worst thing you can do! Yes, keeping track of literally a dozen (or more) different username and password combinations is difficult, but it is not impossible.

Stop Using One Login Code

Even the people who do create a variety of username and password combinations aren't keeping those combinations very safe. Most of them are still doing things like keeping usernames and passwords on post-its on their monitors or are writing them down in other very easy to find places. Worse still, people are creating text files in which all of their username and password combinations are kept. Talk about giving away the keys to the kingdom! 

If you are worried about keeping those details safe but aren't confident in your ability to remember them, spend some time hunting down the best password manager you can find to protect them against hackers and other threats. The security software company Trend Micro says a password management system secures your browser and uses keystroke encryption to protect your passwords.

Pass Phrases Are Better

Most companies, when you are creating your passwords, require you to use upper and lowercase letters, numbers, spaces, special symbols and the coordinates of your underground bunker. Believe it or not, that random assortment of letters, numbers and pound signs isn’t the super safe password that most believe it is. This is because most people still choose a single word and then “l33t speak” it to include the numbers, special characters, etc.  A single word, even “l33t”ed out, is still relatively easy to hack.

A much better approach, writes Null-Bytes, is to create a passphrase. This is where you string together a few words to create a really long password and then include all of the upper, lower, numbers, symbols, etc required by the server. The longer the password, the harder it is for a hacker to break and if you use a phrase, it’ll be easier for you to remember. 

Suspicion is Your Friend

Most people know, when that monthly email from PayPal turns up, screaming about account breaches, etc, that it’s a phishing scam. They know to go directly to PayPal using their web browser and not to click on anything within the email. Phishers, though, they’re getting more sophisticated. Phishers recently used text messaging to dupe Wells Fargo customers out of their social security numbers. GoDaddy account holders have also seen a spike in phishing attempts.

Remember the rule: never click on anything in an email or a text that references one of your accounts. Never give out information over the phone or through the mail. Whenever you are contacted regarding an account, the best thing to do is to then contact the account holding company directly and talk to someone there. 

You can be safe online. You can protect your information. You just have to be careful and smart. The most successful data breaches aren’t huge like Heartbleed. They’re small and seemingly innocuous. Always keep your guard up!

What are your views on creating a bulletproof password and ensuring 100% security of your online assets? Was your data ever compromised? Do share your precious views by posting your experiences. Peace and blessings! 

Alone In The Cave - The Game

Download the Amazing Game Now! Alone In the Cave is a high-end Classic Game

© Designed by Jairaj Prasad.

Game Instructions :
It's not any Tragic Game. You just have to Wander in the Cave and Find the Vertex (Portal). This Game needs Unity Player that is Pre-Installed in some Andrid Devices.
A Very Simple but full of attractive Graphic Emulation Game.

Making the Matrix Effect on Notepad

In this tutorial, You're going to learn 'How to Create an amazing Matrix Effect on your desktop just by using your Notepad.' It's just simle Tut, and needs only your Notepad & a little Notepad Operational Ideas, and you're on.

Here, you'll have to create a simple 'Batch Format Program (.bat) in Notepad which will act as matrix effect that you might have seen in Movies. Matrix effect is basically number flashes in Green Color.

Open the Notepad and Copy the below code :

    1. Open Notepad and copy below code into it.

@echo off
color 02
:start
echo %random% %random% %random% %random% %random% %random% %random% %random% %random% %random%
goto start

    2. Now save this file as Matrix.bat (name can be anything but .bat is must)

    3. Open your saved file and you will have matrix effect on your screen.

How To Make A Bootable USB

Most of the Laptops & Mini Computers, come without CD-Drive. It makes it handy but creates complication for a user to boot his/her device, with a System CD. This tutorial will solve out your problem, we mean you can use alternate method to boot up your system. This tutorial will guide you through, how to make your own bootable USB, without any software.

Note : This article will explain you how to make your USB (PenDrive) Bootable. So, that you could easily use it to Boot Up your Computer easily & without System Disk. We highly recommend you to backup your system before trying this.

Open the Command prompt with admin rights

At the command prompt, type cd :

c:\windows\system32

to change the directory to the Windows system32 directory.

Plug in your USB, and type : Disk PART in command prompt.

Then type : 

LIST DISK

and press Enter.

Next, Select disk 1

Type in the following commands, one by one, pressing Enter after each command.

CLEAN[Enter]
CREATE PARTITION PRIMARY[Enter]
SELECT PARTITION 1[Enter]
ACTIVE[Enter]
FORMAT FS=NTFS  (may take a couple minutes, depending on the USB drive size)
[Enter]
ASSIGN[Enter]
EXIT[Enter]

Keep the command prompt window open, but you can minimize it for a little bit.

You will now need your Windows Vista or 7 Installation DVD. Put the DVD in your computer’s DVD drive. Open up My Computer and note which drive letter is assigned to your DVD Drive and your USB flash drive.

Go back to the command prompt window and type in D: CD BOOT (substitute your DVD drive letter for “D:” if necessary) and press Enter. Type : CD BOOT again and press Enter. Lastly, type BOOTSECT.EXE /NT60 H: (substitute your USB flash drive letter for “H:” if necessary) and press Enter.

The last step is to copy the entire contents of the Windows DVD to your USB flash drive.

Your USB flash drive is now set up to be a bootable USB drive for Windows Vista or 7.