Cisco Router

Cisco Router
On this occasion I will introduce some of the terminology and basic descriptions about the voice, vidio, and fax in relation to cisco.
Well hopefully about Cisco can be useful for the visitors ..

Understanding Dial Peers
The first thing we need to understand about voice technology is what's called a dial peer Dial Peers. Dial peer-entity explains entities to or from which a call ( "cell") is formed.

All voice technology will use a dial-peer in order to put the characteristics associated with the characteristics of the so-called call leg, YAGNI Distrit segment of a call connection that exists between the two connection points. On a line call end-to-end would diliatkan four cell namely:

- Dial cell perspectives leg of these sources (Source route)
- Dial cell leg of these perspectives destination (destination)

Learning Cisco Packet Tracer For Beginners

Cisco Packet Tracer is an e-learning program that will simulate artificial Cisco computer network previously designed and configured by the user. Simulation workstations, servers, routers and other network devices made very similar to the original. So that we can learn through simulated computer networks this program alone, do not need to cost a fortune to buy a computer that many engineering practices that we want. Of course this is very cost-effective. In addition, with Cisco Packet Tracer, we can learn the ins and outs of network standards, but very deep. Even the contents of the PDU in a packet at certain time intervals we can see and learn, it is difficult to do using native network device though.

 
On this occasion, I will share a few thoughts when I am using Cisco's Packet Tracer. All I had made in the form of tutorials and bundled into a single PDF file to try practice. The assumption is that you already have the software Cisco Packet Tracer her and has been installed properly in your PC. Target readers in PDF files are beginners who are happy with the Computer Network (Network), know the basics of operating a Cisco Packet Tracer her, but still not so familiar with the panels on the program

 

Oh yes, it is highly recommended for dear readers ... to read also my post before this, in order to understand the basics of computer networks and systematics. Tapi with little promotion hehehe ...

 

• Computer Networking (Fundamental Edition)
• Computer Networking (TCP/IP Edition)
• Computer Networking (Topology Edition)
• Computer Networking (Security Edition)

the PDF file
Form: PDF
Uncompressed: ZIP
File name: ebook_CPT
Size: 900.1 KB

Make Android-Based Learning Media (part 2)

The development of increasingly rapid teknomogi gadget brings about changes in instructional media. Computer-based learning media previously used to bloom now turning to mobile based learning media in a variety of platforms, ranging from android, windows phone, iPhone, flash lite, java, and so forth. Various software for developing Eclipse, Android Studio, Adobe Flash CS6, Construct 2 and so on.

Creating Media-Based Learning Android with Construct 2
This tutorial is a continuation of the previous tutorial on how to create media-based learning android with Construct 2. We will use the return of software maker HTML5-based games or applications that are specific to this 2D platform. Software developed by Scirra is different from the Adobe Flash CS 6, for Construct 2 is not a specific programming language, because all of the commands used in the game is set in EvenSheet consisting of the Event and Action. Thus, to develop games or applications with Construct 2 we do not need to master the difficult programming language. Project of Construct 2 can also be run on a computer or laptop via the browser before export to APK.

In the same way rename the event sheet. Each layout is always paired with eventsheet we make the same name.

The steps for creating instructional media android using Construct 2 is as follows:

The steps for creating instructional media android using Construct 2 is as follows: First, open the program Construct 2 and then click New Project or File> New and then select New empty project

The initial view of Construct 2

Second, click on the layout shown and then set the properties available on the left of the layout. Some things that need to be regulated in these properties is the Layout Size, Margins, Window Size, and Preview browser. Set Layout Size, Margins, and Window Size respectively by entering the numbers 480, 800. Then determine Preview Borwser which will, for example, Chrome, Firefox, Opera, or another. Preview browser is used to display the application or media that we create in the browser.

 

Layout settings and Margin

Creating Media-Based Learning Android with Construct 2

The development of communication technology (IT), which grew rapidly bring a paradigm shift in the world of education. The paradigm change the visible one in the way the learning media. One simple example we can see a shift from the media for the presentation of learning, from the board into OHP (Over Head Projector) and is currently using the LCD Projector.
Gadgets increasingly rapid development also brings about changes in instructional media. Computer-based learning media previously used to bloom now turning to mobile based learning media in a variety of platforms, ranging from android, windows phone, iPhone, flash lite, java, and so forth. Various media or software to develop mobile-based applications between laib Eclipse, Android Studio, Adobe Flash CS6, Construct 2 and so on. Media developed can be accessed by students via mobile phones owned

4 Different Styles For the Popular Posts Widget

Blogger allows us to easily add a "Popular Posts" widget, that we select from its list of gadgets, and we can do that by going to the "Layout" of our Blog.

This gadget, as the name implies, shows which are the most visited blog posts, and you can set it to display the info you want in four possible combinations: (1) only the title of the post, (2) a thumbnail of the image and the post title, (3) post title with a summary, and (4) post title with a thumbnail and a post snippet.

This is an element that you shouldn't miss in your blog because it encourages your visitors to navigate through your content and that can result in higher income if you're monetizing your blog because it would generate an increase in the number of pages visited, and in turn, can attract the users' interest to subscribe to the blog and to read interesting content.

Preliminary steps: Add the gadget, if you haven't done it yet.

1. Select the "Layout" tab and add the "Popular Posts" gadget in that part of your blog you want to appear, such as in your sidebar, by clicking on "Add a Gadget".

2. Configure the widget to show only the post titles. You can do this by clicking on the "image thumbnail" and "snippet" checkboxes, as shown in the following image.

3. After configuring the widget, save the changes by clicking on Save, and then Save arrangement.

Customizing Numbered Lists in Posts + 3 Examples

From the Compose tab of a Blogger post, we can create numbered lists using the "Numbered List" tool.

A numbered list is achieved through the HTML code of a "ordered list". You don't have to worry about adding the HTML, because the editor does it for you by using this tool. If you go to the HTML tab, you'll see that the list you created appears something like this:

   <ol>
<li>The content of the 1st. element</li>
<li>The content of the 2nd. element</li>
<li>The content of the 3rd. element</li>
<li>The content of the 4th. element</li>
    etc...
  </ol>

This tool will automatically number each element of the list taking an "order", hence the name "ordered lists in HTML". In each element a number is successively generated (from 1 onwards), though you can not see this in the HTML code.

Customize the scroll bar (scrollbar) with JScrollPane

JScrollPane is a jQuery script that allows you to change the blog' scroll bar, ie the browser scrollbar.

Although we can use CSS to change it, the problem is that is not standardized, because with CSS we can make it work only in Chrome and Safari; and in the case of Internet Explorer it also has its own code but obviously it only works in that browser (I don't know which versions). So what we will do then is to give a new look to the scrollbar but by using jQuery, so the change will be visible in all browsers.

Demo

Page peel effect using jQuery

Page Peel is a popular page flip effect that when your cursor is passing over it, will show "what's behind" as if it would be a book. There are many ways to do this, many of them use flash files which makes it less customizable, however, the one that we will see in this post is made with jQuery.

Usually, the content that is "behind", is an image for subscribing to feed, but you can put any image and link to any page.

Demo

You can see an example in this demo blog.

On-Page SEO Tips for Blogger

We know that SEO Off Page refers to the search engine optimization techniques that can be done outside of your website, such as link wheels, reviews, social bookmarking, social media (references and followers), sidebar links, among other techniques. However, without a proper on-page seo optimization, all would sum up to a non-optimized webpage without quality, which will not reach the traffic expected to have. This is mostly because search engines (especially Google) pay much attention to the alt and title tags (for images), meta tags, internal links, robots and so on, in order to display the content of your web page to the user who made a specific query in the search.

To never fall in this depression of search engine optimization, you can choose a good and reliable blog platform like Blogger. If you are working only on Blogger, here are some on-page optimization tips that might help you to become successful in the blogging world and increase the daily traffic to your blog.

How to Increase Alexa Ranking of your Blog

The Alexa Rank in its time may have been pretty important for the SEO, however, these days is already losing its importance due to the changes in the algorithm that Google applies from time to time.

The company displays information about visitors of a website, which in turn, classifies this in a ranking, generating estimated statistics about visitor traffic and links pointing to the website. In a few words, the Alexa Rank does not directly affect SEO, but rather serves as a reference for measuring the traffic type, popularity by country and other metrics.

If you would like to enrich or have a good Alexa Rank of your website, here some ways to do it, with short-term results.

5 Ways to Increase the Alexa Rank

Daily Content: Try to publish at least 2 articles per day and within a month you may start to see some changes in the Alexa ranking.

How to Add Google Analytics to Blogger

Google Analytics is a platform created with the purpose of helping us to track the number of visits and page views on our blog, which also uses several filters to check exactly from where the visitors are coming via standard or custom reports.

Google Analytics is the leading free tool that has a good relationship with the internet marketing and offers suggestions and improvements or benefits for our website.

As Analytics is part of the variety of Google tools like Blogger, many bloggers still don't know if it is possible to add the tracking code in Blogger. Implementing analytics in Blogger is very quick and easy, so you don't need to be experts or web developers. Here's a small guide for placing the Google Analytics tracking ID on our blog.

Implementing Google Analytics on Blogger

1. Do you have a Google Analytics account? Then it's perfect. If you don't have one, please Register.

2. Within the account, we'll go to Admin and in the Property column, click the menu, then click Create new property, where we enter the information from the website.

3. Click on "Get Tracking ID" and it will provide a box with a code, select and copy the code (CTRL + C).

4. Now let's go to our Blogger account.

5. Look for your blog and click on it, then go to Template > click the Edit HTML button and paste the code previously generated in Analytics before the </head> tag (CTRL + F in order to find it).

And this would be the entire procedure. Within about 24 hours, we shall see the first statistics of our blog in Google Analytics, otherwise check the following:

- Double check that the code has no spaces or characters.

- Doesn't have errors in the configuration

- There are no poor implementation of the filters.

- The Flash plugin is working or javascript is enabled.

- You will have minor issues if you are receiving visits from China (this conflict is not yet solved, according to Google).

4 Alternatives to Google AdWords

Many think that Google AdWords is the only tool dedicated and available to perform a study such as a keyword search, but it isn't so, today I refute this idea by collecting some alternatives that, although are not equal to Google AdWords, at least encourage us to make good keyword analysis for the SEO of our website.

Going back a bit, for those unfamiliar with the main features and tools of Google AdWords, we can find a very simple interface yet complete in every sense.

- AdWords appearance has changed, however there is a chance of returning to the old design;

- allows you to place a phrase or keyword, a web site and use the categories;

- for a better keywords search, you can apply filters such as location, language and add custom fields (competition, local or global monthly searches, CPC, Ad share, etc.);

- displays keyword ideas in columns with the amount of local and global monthly searches and approximate CPC;

- you can download keyword ideas, search results in a format to open with Excel.

Having recalled and refreshed the memory a little with the characteristics of AdWords, now it is time to learn about other options both free and paid.

Redirect Blogger 404 Error (Page Not Found) To Homepage

A 404 error page tells you and search engines that a page is not found by displaying a text similar to it "Sorry, the page you were looking for in this blog does not exist.". This may happen because you have changed your URLs over time, either removed a few pages when you overhauled your design or a visitor may have accidentally misspelled an URL inexistent in your blog, so it automatically redirects to the 404 error page (page not found).

And probably this will not make a good impression on the greatest potential users of our blog. Before the user clicks the back button or close the window/browser's tab, thus leaving our site forever, we may want to redirect 404 error in Blogger to a page, where are chances that the visitor will continue reading our blog.

One of the most used methods is the "meta refresh" but the problem with this method is that it breaks navigation (doesn't allow to return back). In this case, the best method is by using Javascript about which I will go in detail below.

Top Commentators Widget with Avatars for Blogger

The commentators are a fundamental part of any blog, since they are the ones that give life to the blog, opening and replying to discussions which leads to more activity in the posts.

It is therefore very important to know which are the most active users of your blog, the users who leave more comments, and for this reason, today I present a great method to display a list with the top commentators.

The gadget will look something like this:

This Top Commentators gadget comes with user's avatar and is done with JavaScript.

How to Add the Top Commenters Gadget to Blogger

Add a forum on your Blogger blog with Nabble

Forum is a platform where visitors can interact with each other and discuss different hot topics. There you can add desired topics for getting comments and diverse suggestions on them. If you have a good traffic, then you can place questions on daily basis for the potential visitors to answer, thus your forum simultaneously converts itself into a huge frequently asked quesions section "FAQ". Forums will provide your visitors an open social atmosphere to express their useful ideas and share other's ideas.

In this brief tutorial, I have explained simple steps to add a forum to your Blogger or blogspot blog. So let's get started!

How to Create a Forum With Nabble

How to Add an Admin Control Panel in Blogger

A while ago I've posted some tutorials on how you can remove the Blogger Navbar or add a Peek A Boo Effect so that it would show only when we mouse over on top of our page.

How to Add a Recent Forum Topics Widget to Blogger

If you are using the Nabble forum in your blog is very likely that this gadget will interest you because, as the title suggests, it will display the lastest topics that have been published in your forum in a very similar manner to the recent comments gadget that works with the blog's feed.

If you want to add a list with the Recent Forum Topics then follow the steps below:

How to do natural SEO on Blogger

Although many insist that blogs hosted on free servers, such as Blogger, are not ideal for getting your blog well-ranked, the truth is that a blog hosted by Blogger can be really fast and well positioned on the Internet if you are using the right SEO tools.

Now, given the latest updates from Google, the best would be hiring a specialized person. However, if you don't have the resources or you want to learn doing this job alone, you can choose to begin with the natural SEO.

Here are some tips to do natural SEO (Search Engine Optimization).

Top three qualities of a successful blogger

The qualities of a blogger should be attended at all times in order to become someone popular on the internet. A blogger should have plenty of ideas for creative writing, along with a truckload of motivation. The results sought will not come overnight and there's no guarantee that this will be easy.

These are the two things that you need in order to fulfill your dream of running a successful blog: a lot of exclusive content and readers' loyalty. In each case, time is required to develop the success. This is a process and not a short-term event.

Related: How to Write SEO Optimized Blog Posts

Top Qualities To Become a Successful Blogger

Here are three qualities of a blogger who as a site administrator will need to have, if your goal is to manage a successful blog.

Before/After Photo Effect with jQuery

If you have a design or makeup blog, or if you are using before and after image comparison, this script will surely be very useful for you. In this tutorial, you will see how to add the Before/After plugin, a script that works with jQuery to display two pictures dynamically for comparing them at the same time.

To see it in action, please click on the demo link from below - by dragging sideways the small bar, you'll see both images that are being compared:

Before & After Demo

Implementing this script is really easy. We just need jQuery, the Before/After script, and the two images to compare.

Spacegallery: image gallery/slideshow made with jQuery

There are many types of galleries for images that can be found on the internet, but we rarely find one displaying images so differently like this one. Those using Mac OS X will surely notice a lot of similarity with Time Machine and those who don't, I'm sure will enjoy this type of effect for viewing images.

SpaceGallery is a JQuery based slideshow / image gallery that performs overlaying in a visually appealing manner and provides a smooth fade out effect to images. This 3D image gallery lets you float through your pictures easily by enlarging them with an Apple-like animation.

To see the SpaceGallery slideshow in action, please visit this demo blog and click on the first image:

Add Keyboard Keys Effect To Your Text in Blogger with CSS

For many of us the design and the template are the most important, making our readers be more interested and coming back to our blog. There's an HTML element meant for marking up keyboard keys named <kbd> which can be styled with CSS, so why not use it to make those elements look the keyboard keys?

Thus, in this tutorial, I am going to show you how to create a keyboard keys effect with CSS. It doesn't require images so your blog will load faster.

How to Add Keyboard Keys to Blogger

Mengganti background dan warna pada Start Screen di Windows 8.1

Untuk tulisan kali ini, saya akan memberikan informasi tentang bagaimana cara mengganti background dan warna pada Start Screen di Windows 8/8.1.

Langkah pertama, pilihlah gambar yang ingin dijadikan background di desktop anda, kemudian klik kanan pada mouse, pilih set as desktop background.

Langkah kedua, arahkan mouse anda pada pojok kanan atas atau bawah, nantinya akan muncul Charm, kemudian pilih Search. Masukkan kata “change” nantinya akan muncul beberapa pilihan hasil pencarian. Pilih “Change the background and colors on Start“.

Mengganti background dan warna pada Start Screen di Windows 8

Search “Change background and colors on Start”

Langkah ketiga, setelah anda pilih, nantinya sistem akan memunculkan Personalize yang di dalamnya ada 20 pilihan mengganti desktop pada Start,Background color, dan Accent color.

Mengganti background dan warna pada Start Screen di Windows 8.1

                                                                Kostumisasi perubahan

Untuk mengganti background yang tadi sudah kita pilih di awal, pilih background di bagian pojok kanan bawah (saya lingkari), pilih warna background dan accent yang sesuai dengan selera. Anda akan melihat perubahan yang terjadi pada background, accent, warna di Start Screen anda.

Selamat mencoba dan semoga bermanfaat

Turn off the lights with jQuery

For those who enjoy watching videos on the internet, this is a very useful script made with jQuery by Janko. And what this script does? It will turn off the lights for you, so that everything on the page will be fading to dark, except the video, and everything around the video will be less visible, in a way that nothing will distract you while watching it.

You can test it on the following demo blog - click the link that says "Turn off the lights" and the page will be darkened. To make the page elements active again, just click the "Turn on the lights" link:

Turn Off the Lights DEMO

How to add the "Turn off the Lights" Feature to Blogger/Blogspot 

How to Write SEO Optimized Blog Posts

I'm not a SEO Expert, nor what you will read further is a top secret, but this is about the basic optimization that everyone should apply in order to write seo optimized blog posts. And with these techniques, effort, and a bit of patience, you can occupy the best places in the search results of different search engines.

Obviously, not all scenarios are the same, neither all blogs are positioned in the same manner, some might have greater competition than others depending on how popular is the topic that they handle; therefore, when it comes to web ranking, there's no specific time that applies for all. Having said this, let's get into the subject.

Scriptaculous image slider/carousel for Blogger

Image galleries, sliders and slideshows have become increasingly popular within web pages and more and more developers have been creating these amazing powerful, versatile and sleek galleries. In this tutorial, you will see how to display the relevant content in an attractive and usable manner, by adding this beautiful carousel slideshow that will display a gallery of images with a cool sliding effect.

If you need to see this carousel in action, please visit the demo blog.

Recent Rotating Post Gadget with Excerpt For Blogger

This JavaScript code will display the latest posts of any feed, the difference being that it has two parts which can be used individually or combined. The top of this widget will show a single post along with the title (link), author, date and a brief summary of its content. In addition, this post will rotate automatically within a list whose number of elements will be decided by us. At the bottom, we'll find a full list with the chosen posts that on mouse over will replace the post above, thus breaking the automatic cycle.

Before installing anything, let's see it in action to decide if it does what we want.

How to Add a Tiny jQuery Circleslider to Blogger

Tiny Circleslider is a small jQuery plugin generating a circular carousel of images that we can slide infinitely (circular). When clicking on the red dot, the main picture moves to the left and another set of images will slide out. There is nothing complicated about using this type of carousel, however when it's about customizing it, we need to use a bit of arithmetic. All these details can be found in the author's homepage, so I'll just limit myself to show you the basics.

To see it in action, please visit the below demo blog and just drag the red dot:

Tiny jQuery Circleslider Demo

How To Add Snow In The Background of Your Blog Using CSS

Today we’re going to go over a super simple CSS technique that you can use to make it snow on your Blogger blog. It seems particularly attractive since it doesn't require scripts, only CSS and three small images.

An advantage of this method is that by not using scripts doesn't overload the blog, the disadvantage is that users with not so modern browsers, will not be able to see it (in Internet Explorer works for version 10 and up).

The snow will fall in the background of the blog, which, in addition, prevent interfering with links or content (because the flakes are images), also prevent blocking the visibility of the content of the blog.

You can see the demo in this test blog.

Filter out your visits to your blog from Google Analytics traffic statistics

The results of daily visits in the web hit counters always have a margin of error. In most of them, this margin is very high, therefore the statistics shown are not even a bit closer to the actual visits we have. Google Analytics has a very short margin of error, which makes it more reliable, so that we have a better idea of how many people visit us.

Using JQuery + EasyDrag to Move Elements or Images by Clicking on Them

This is a simple and easy-to-use jQuery plugin which enables drag and drop functionality to make your site more interactive so that readers can "play" with certain elements on the page by dragging them from one side to another - for example, they can drag the images with a script to move them on any part of the blog just with a mouse click.

Drag and Drop Elements or Images on click with jQuery & EasyDrag

To see how this works, please visit the demo blog and click on any item, then move it anywhere on the screen:

How to Create a Sitemap or Table of Contents in Blogger

One of the limitations of a blog is that it doesn't have an index or sitemap of the site that could make it easier for readers to find content that they are searching for.

While the blog archive and labels have all the information about the published post, these do not appear on a single page completely, so searching for more posts is not always easy.

Luckily, this gadget will help you to add a table of contents or sitemap on Blogger showing the index of all posts separated by categories that have been published. It will also show the latest posts with a text saying New!

Demo: You can see it working by clicking here.

How to Create Magazine Style with Post Summaries and Thumbnails on Blogger

The magazine or newspaper style templates are those that display the posts summaries in the homepage by stacking the columns on top of each other. This kind of templates is very popular nowadays, and whether it is a news or technology blog, everyone needs a fresh magazine style layout for their blogs.

There are several ways to make posts appear this way. An option would be to use the Read more script to display a summary of the posts and add a conditional tag and a different style to the first post so that it will have a larger width than the older posts. So, this tutorial will show you how to create a magazine style for a Blogger Template. By following this tutorial, you can transform your boring and simple Blogger template to have an attractive and stylish magazine style layout.

To see how it looks like, please visit this demo blog.

Adding the Magazine/Newspaper style to a Blogger Template

Step 1. Before anything please make a backup of your current template to make sure that you won't lose anything important - just log in on your Blogger Dashboard and go to Template, then click on the Backup/Restore button. After you've got a copy of the xml template, click on the Edit HTML button:

Step 2. Click anywhere inside the code area and search by using CTRL + F keys for this line:

<data:post.body/>

Note: You'll find it more than once, but stop to the second one in order to see the changes.

How to create click events using CSS

An event is something that happens when we do something. In CSS, the most common is the hover selector which helps us to select elements when we mouse over them and then an event is executed automatically. There is one way to avoid this since in modern browsers there is a property called pointer-events which allows us to disable them. For instance, if we have a link and we set the pointer-events property value to none, it would simply not work:

<a href="page-url" style="pointer-events: none;">Click here</a>

Many use :target to make it work, however, this is not always the best choice if we consider its jumping behavior - click on the link below to see what happens:

Link with target

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu cursus dui, ac fermentum eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce elementum sapien et augue fringilla aliquam. Ut a viverra libero, eget commodo nisi. Maecenas ultrices facilisis dignissim.

<style>
#linktarget {display: none;}
#linktarget:target {display: block;}
</style>
<a href="#linktarget">Link with target</a>
<div id="linktarget">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu cursus dui, ac fermentum eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce elementum sapien et augue fringilla aliquam. Ut a viverra libero, eget commodo nisi. Maecenas ultrices facilisis dignissim.
</div>

Another option is to use the :focus selector which will make the hidden content to expand on mouse click.

The advantage of this selector is that the page stays still, however, we have to click anywhere "outside" to close the expanded content and besides this, the hidden content should be immediately after, with no intermediate tags:

How to Add Adsense Ads In the Middle or Anywhere inside Blogger Posts

In a previous post we saw how and where we can place Adsense ads on our blog; however, these methods would only work when we place the ads on predetermined and fixed locations. For posts area, the most common places are below the title, at the beginning of the post or at the end of the post.

But what if we want to display an AdSense ad in the middle of a post?

We can manipulate the location of the ads to be displayed by adding a script inside the template and using a tag inside our post to where we want the AdSense ad to appear. Once added, we can place the ads anywhere, be it between paragraphs or in the middle of the content etc.

Manually inserting Adsense ads in the middle of posts in Blogger is pretty simple, just follow these steps below:

Before proceeding, it is recommended do backup your template (go to Template > click on the Backup/restore button)

Step 1. First thing we need to do is to "parse" the AdSense code, in other words, convert it to plain text. Then go to Template, click on the Edit HTML button, click anywhere inside the code area and look for this tag (CTRL + F):

<data:post.body/>

Note: you may find it several times, but we need to stop at the second one or if you can't see any changes, test the third one

Screenshot

Step 2. Replace the <data:post.body/> tag with this code:

<div expr:id='"adsmiddle1" + data:post.id'></div>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style="clear:both; margin:10px 0">
<!-- Add here the code of your ad -->
</div>
</b:if>
</b:if>
<div expr:id='"adsmiddle2" + data:post.id'>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("adsmiddle1<data:post.id/>");
var obj1=document.getElementById("adsmiddle2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

Step 3. Put the converted Adsense code to where you see the <!-- Add here the code of your ad --> annotation, then save the changes by clicking on the Save template button.

Note: For centering ads, add the center tag before and after the AdSense code, like this:

<div style="clear:both; margin:10px 0">
<center>
<!-- Add here the code of your ad -->
</center>
</div>

Step 4. When you create a New Post, add this tag inside the HTML section to where you want the Google AdSense ads to appear:

<!-- adsense -->

For example:

<div>This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text.</div>
<!-- adsense --><div>This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text.</div>

Screenshot

Note: If you don't add the label to bring up the ad, then the ad will appear below the title by default.

And you don't have to worry about violating the Google's Terms of Service because applying this method we are not changing the structure of the ad.