Articles by "Beginners Guide"
Showing posts with label Beginners Guide. Show all posts

at 0

Easy Ways to Reduce Bounce Rate Percentage Website/Blog:-

Percentage calculations are based on the amount of bounce rate of visitors who opened your blog through search engines but do not open the page more posts. The greater visitors who exit without opening another page in the blog, the greater the percentage obtained bounce rate of your blog, or less so about what it means to bounce it. Right or not open the other links on the blog that we manage are fully belongs to the readers/visitors blog, therefore we can not blame anyone and anything unilaterally. However, it is not impossible that this has nothing to attempt and another way to lower the bounce rate is the percentage rate.

In fact, that makes visitors are not interested in reading another article treats on our blog most likely due to the navigation and layout templates that do not make the reader uncomfortable and irregular.However, on the other hand we have to understand that it is not forever High bounce rate is not good for the website.

There are several types of websites that do not need to be worrying high level and low bounce rate percentage value, such as for website marketing that has only one page view prospects. In contrast to the website/blog that presents reviews, tutorials and information continuity, certainly strive so that the smaller bounce rate is something that needs to be done. In order to appear more good quality blog by the search engines and visitors/visitor of the blog.

Easy Ways to Reduce Bounce Rate Percentage Website/Blog:

1.Use simple blog template design, responsive and mobile friendly:

Template mess with the view that semeraut obviously will not make readers uncomfortable. The thing to do is pay attention to the appearance of the template from an inconspicuous color selection, font type, structure and seo valid template, and make becoming responsive and do not forget optimization as soon as possible into a mobile friendly. With a view template but elegant as it is, it is guaranteed to be a visitor will feel at home last read other posts on your blog.

2.Optimize loading blog to all devices:

Performance heavy blog will obviously be difficult to compete from all sorts of desires that we expect to blog. Not only about the problem bounce rate, even more than that, a blog that loading time will make visitors run and reluctant to return to the blog.By optimizing the blog loading to a minimum, both for the desktop and mobile, then visitors to the blog will be easier and comfortable open dish the next article, and swelling percentage of bounce rate can be avoided.

3.Use anchor text that is relevant and not excessive:

Anchor text is one of the seo techniques that should be applied each time to post an article. However, use with neat, relevant and not excessive. By using anchor text with the neat, relevant and not excessive, will arouse the interest of the reader to click on the link anchor text. By doing so, the blog was saved from an increase in the percentage of bounce rate.

4. Use the navigation widget to another article:

The use of widgets also need to be applied for the purpose of lowering the percentage of bounce rate. Widget is a widget installed seo and user friendly, easy in the navigation widget by readers of the blog,widget in question is related post and recent post has been modified such that the zoom be user friendly.

5. Avoid the use of pop-up ads:

Who is not annoyed with pop-up ads?
Instead of pop-up ads, even there are some visitors who are not very happy with the display ad from a blog / website (for just a few). You should avoid using pop-up ads is that, if you want visitors to feel comfortable to surf on your blog also good for the quality of the blog because of the declining percentage of bounce rate. If it is pressed for vobia see the blog on their own without the ads, try switching to another alternative without pop-up ads.

From Author!

Hopefully by doing all of the above 5 bounce your website/blog increasingly slim.Thanks for reading!
Continue reading

at 0
Dear Reader! First of all Eid Mubarak To You!
After great event of Eid,lets enjoy the blogging techniques.On this occasion I will discuss Some SEO (Search Engine Optimization) Techniques White Hat SEO and Black Hat SEO which can mate to apply for consideration for your future blog.

Editors Choice
Search Engine Optimization Beginners Guide To SEO,The Only Do It YourSelf Guide.

White Hat SEO Techniques:

White hat SEO is SEO optimization efforts are good and true and does not violate the TOS that has been set by the search engines.To all the bloggers who want to obtain good results in the SERP pages are advised to apply SEO techniques this one.White hat SEO main goal is to raise the page rank blogs to page one in the search engines.Indeed, this technique takes longer, but safer and friend can put their trust in Search Engines. Is not it great if your blog or site mate frequently visited by the Search Engines?

In addition, visitors Blog stable mate will be crowded and if my friend managed to optimize a page on the Search Engines. Techniques in use by a White hat SEO is very simple as long as diligent and have a desire to update the posting every day (not like this blog).

Stringing words or writing on a blog is not easy as my friend imagined, but the search engine is very pleased with the original content. Here are some white hat SEO techniques, including: Content Optimization Blog Improving the quality of blogs by always presenting quality content and original.

Here are some white hat SEO techniques, including:

Content Optimization:

Improve the quality of your blog content by always presenting quality content and original.It means that you should always publish well research posts that you have in your own mind,don't copy others content.

Keyword Optimization:

Perform various keyword optimization correctly without manipulating the color and font size with the keyword density of the content is not more than 3.5% or 5% in ratio.Now,you may called them ideal keywords for your next blog post.

Optimization Blog URL:

Do not make a specific url redirect to another page when a visitor opens the link and it certainly strengthens seo optimization by entering keywords into the blog url.Its awesome to fix a custom 404 error page to your blog.In this way you are able to lessen this fault.

Doing Link Building:

Doing link bulding correct and not out of the path of white hat link building seo like building naturally and not by way of buying quality backlinks from blogs which have a high PageRank.

Choose Of Template:

In choosing a template or the display also includes one White hat seo techniques that can be done, so choose the template that is SEO friendly and do not forget to set the CSS to streamline so be fast loading blog. Blog lightweight highly favored by search engines.

Meta Tags Optimization:

Install Meta Tag this is very helpful especially the title and description to note is the robot and the exact title under head tracker so that the content clearly read all the markup code. To place the white hat seo titles as keywords and descriptions, it is better placed in the following elements;
  1. Title Blog
  2. Meta Description
  3. Meta keywords
  4. Heading to the element h1-h6
  5. Alt tags that can be optimized in the picture
  6. Title Tag
  7. Links containing keywords
  8. Directional information
Creating content that is relevant and shows relevant information as well, that is if you want to sell a product then sportive not make another keyword which is inserted into the content so that visitors also know the intent and purpose of the blog with the appropriate product.

Good Backlinks:

Look for good backlinks from sites that had high PageRank or have PA (Page Authority) and DA (Domain Authority) high, also submit to directories and search DoFollow backlink sites are one way / in accordance with the content of your blog.

Ping Regularly:

It is advisable to perform regular Ping techniques well as publish a new post. But do not do too often because the Ping will be considered spam. If my friend made many posts in a day, just do it once Ping.

Blog Post Socializing:

Do it by relying on Facebook and Twitter or other social networks, which need to be noticed when linking link must have the appropriate title with a discussion on the blog.

Black Hat SEO Techniques:

Black Hat SEO with black hat logo mascot is an optimization technique a blog to get the first position in the search engines, but by way of Illegal and fraudulent.

Indeed, the effect of Black hat SEO is very fast can be seen the result but not the least affected blogs google sandbox or even getting banned for wearing a black hat techniques this.So its my suggestion to you leave it and focus on white hat seo techniques.

But for those my friends who are still intrested,lets begin :-D

These techniques attempt to try to trick the search engines.Can be used by means of the use of hidden text, keyword charging, the fake page, and others. Their goal is the same as White Hat SEO, namely to get the first rank in search engine results, but only for a short time.

Therefore, Black Hat SEO is not a good technique to be practiced. If my friend running a business in the blog, I recommend not to use this technique, because it will cause loseless effect in site's ranking and seriously search engine decreases it dramatically.

Here are a few black hat SEO techniques, including;

Link Farming Techniques:

Techniques Black Hat SEO Link Farming is a technique of collecting links on one page of a blog or website. That is on one page only lists links are huge numbers can be up to hundreds or even thousands of links.

Stuffing Keywords Engineering:

Techniques Black Hat SEO keyword stuffing is the application of excessive keyword, where a blog page that contains a word that is repeated or unnatural.

Invisible Text Techniques:

For Text Techniques Not Seen is a technique to hide keywords in the blog that words will not be visible by naked eye. You do this by matching the color of the background paper template.

For example if white background template we then create the text color becomes white. Posts that are not visible can be seen by way of blocks all pages by way of ctrl + a point to select all the text is hidden. Another way is to look at the page source of the page.But these annoying google rebot to not index your content.

Title Repetition Techniques:

Repetition of title techniques Black Hat SEO techniques meant looping contents where title only contains a repetition of the title. Easy to do, for posting such title techniques  SEO  and then there was only a repetition of the title of the post and there was no need to add other texts again, it's just been enough. Usually such technique is applicable to new keywords in google or emerging at google.

A few reviews regarding the Technique White Hat SEO and Black Hat SEO,may broaden bloggers. Thank you for being here.

From Author:

These are few tricks that actually are trchniques,using these techniques you can achieve your future gaol.Still you have any dout releted to any query then please share it with me,I shall tried my best to encounter it.

Thank You!
Continue reading

at 0

Responsive Blogger Template and Benefits:

Along with the times, everything must come to adjust. If you do not want to say outdated.

Likewise, the world's website, with the development of technology, features and blog content should also start to follow suit. In this regard, an important role template to customize it. Especially at this time, the development of the world in accessing the Internet is already fairly advanced. Not only through a PC or laptop, some Internet users can access their favorite websites via smartphones equipped with supporting features for comfortable surfing the internet.

Little Know About Responsive Template:

Template already know responsive yet?

Yes, I'm sure at least have heard about it. For the uninitiated, responsive template is a template that can automatically adjust the width of the display according to the device used.

For example, if we go to a website / blog via smartphone, then the display will not be widened or should be 'pinched' used to make it more clear. Usually a website if accessed via smartphone has a large display, so it must be pinched (if you use the touchscreen features) or clarified. While a blog that has a responsive template, able to adjust the zoom on the smartphone of any kind. Looks more or less the same as the desktop version, but my friend does not need to pinch the screen because it has been designed in such a way to customize the smartphone screen.

Nowadays, the designer / developer template already spend a lot of works are responsive blogger template. Coupled with a variety of features that are attractive and pleasing to the eye. Some of the responsive template has much to my friend get free. Well, immediately the spirit if there is word free, hehe ... but you really are. Do not believe it, just search directly. Many sites or blogs that it has been prepared with a variety of designs and features, in accordance with the needs of the bloggers.

Benefits Of Responsive Template:

Benefits of responsive template,yes .. it was, as I said above smartphone users will not bother to pan left or right 'pinch' the screen because it looks too wide when displayed on a smartphone. Because the template is able to adjust automatically and also looks even more neat and attractive. The advantages and disadvantages of wearing a responsive template There are advantages, there are also drawbacks.

Because to make the necessary additions responsive template code from the default template, the automatic speed of access to any blog to be rather slow. That shortage of template responsive. Want neatly in mobile display, definitely have to add a specific code to be able to adjust. Do visitors will be growing? Maybe so, maybe not. Because in addition to SEO (Search Engine Optimization) , content too much influence on whether or not visitors. Ever heard the term content is king ? Yes it is because no matter how good the look of your blog, if less interesting blog content and are not search engine friendly, it will reduce the credibility and will certainly be devoid of visitors.

For that try to make an article useful, interesting to read and although quality blog UrduBloggingHub is still yet fully comply with these requirements. 
Continue reading

at 0
Its my believe that a awesome design post attract reader to your blog! and in a case study I also observe that a designing post attract most reader as compared to such post that lake this.

 So,in my previous article when I'm writing on optimizing blog images, I feel that a alert message should be present that reader could understand easily.And that highlights the main object of our gaol.

 Many of skilled writer used these term while they write a post and it lool like  as ''Attention!,Please Note!,You have successfully.....! etc'' and then provide us a solid reason behind that happening.

 So,to avoid this job and to modified your post I have some shortcodes that lessen this problem.So if you are using that bullshit or any other,then I would highly recommend you to shift to Alert Messages right now and decrease your page view.

 Lets try how would you insert such shortcodes to your blogger blog posts.Follow my few instructions!


  • DEMO

    • Instruction to follow:

    1. Go to Blogger Dashboard?Your Blog
    2. Click Template?Click Edit HTML tab
    3. Find anywhere inside template </style> or ]]></b:skin>
    Now,copy the above CSS code and put it above ]]></b:skin>

    CSS Code:

    /* CSS Shortcodes By UrduBloggingHub */
    .button{float:left;list-style:none;text-align:center;width:95%;margin:10px;
    padding:2px;font-size:14px;clear:both;}
    .button ul {margin:0;padding:0}
    .button li{display:inline;margin:5px;padding:0;list-style:none;}
    .demo,.download {padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:&#39;Open Sans&#39;,sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;transition:all 0.3s ease-out;}
    .demo {background-color:#444;}
    .download {background-color:#f53b3b;}
    .demo:hover {background-color:#f53b3b;color:#fff;}
    .download:hover {background-color:#444;color:#fff;}
    .demo:before {content:&#39;\f135&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
    .download:before {content:&#39;\f019&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
    .first-letter{float:left;color:#f77c6a;font-size:75px;line-height:60px;padding-top:4px;padding-right:8px;padding-left:3px;font-family:Georgia}
    .widget .post-body ul,.widget .post-body ol{line-height:1.5;font-weight:400}
    .widget .post-body li{padding:0;line-height:1.5}
    .alert-message{position:relative;display:block;background-color:#f7f8fa;padding:20px;margin:20px 0;border-radius:2px;color:#39484d;}
    .alert-message p{margin:0!important;padding:0;line-height:22px;font-size:13px;color:#39484d}
    .alert-message span{font-size:14px!important}
    .alert-message i{font-size:22px;text-align:left;display:inline-block;
    position:absolute;right:0;top:0;padding:20px;opacity:0.8;}
    .alert-message.success{background-color:#00acd6;color:#fff}
    .alert-message.success a,.alert-message.success span{color:#fff}
    .alert-message.alert{background-color:#0073b7;color:#fff}
    .alert-message.alert a,.alert-message.alert span{color:#fff}
    .alert-message.warning{background-color:#efa666;color:#fff}
    .alert-message.warning a,.alert-message.warning span{color:#fff}
    .alert-message.error{background-color:#f56c7e;color:#fff}
    .alert-message.error a,.alert-message.error span{color:#fff}
    .fa-check-circle:before{content:&quot;\f058&quot;}
    .fa-info-circle:before{content:&quot;\f05a&quot;}
    .fa-exclamation-triangle:before{content:&quot;\f071&quot;}
    .fa-exclamation-circle:before{content:&quot;\f06a&quot;}
    #flippy {text-align:center;}
    #flippy button {margin:10px auto;cursor:pointer;font-weight:700;font-size:14px;font-family:&#39;Open Sans&#39;,sans-serif;background-color:#444;color:#fff!important;padding:8px 12px!important;text-transform:uppercase;border:none;border-radius:2px;transition:all 0.3s ease-out;}
    #flippy button:hover, #flippy button:focus {outline:none;background-color:#f53b3b;color:#fff;}
    #flippanel {padding:1px;text-align:left;background:#fafafa;border:1px solid #e9e9e9;}
    #flippanel {padding:24px;display:none;}
    #flippanel img {background:#f5f5f5;margin:10px auto;}

    • Now,Save your template.
    Almost you have done,but one more thing after installing this to your blog you should using fontawesome,if your not using any of fontawesome then put it to your blog.You can insert it as fallows;
    1. Go to Blogger Dashboard?Your Blog
    2. Template?Edit HTML
    3. Find anywhere </head>
    Put below code just before it.

    Code:

    <link  href= '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'  rel= "stylesheet"/>
    Now,Save your template.
    Now,whenever you want to add such alert messages to your posts put one of code according to your need in blogger POST HTML EDITOR!
    <div class="alert-message success">success message : You successfully read this important message.<i class="fa fa-check-circle"></i></div><br />
    <div class="alert-message alert">Alert message : This alert needs your attention.<i class="fa fa-info-circle"></i></div><br />
    <div class="alert-message warning">Warning message : Warning! Best check yo self.<i class="fa fa-exclamation-triangle"></i></div><br />

    <div class="alert-message error">Error message : Oh snap! Change a few things up.<i class="fa fa-exclamation-circle"></i></div><br />
    Success message : You successfully Inserted this plugin to your blogger blog!

    Need Help:

    We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help via comment section below or make a tweet to @MrAbdullahMalik. Peace and blessings buddies. :)
    Continue reading

    at 0

    Having an attractive site is important for making a good first impression on your visitors. This is why it�s crucial that you use great looking images to accompany your site copy and to communicate the overall ''personality'' of your company.

     However, it�s also important that you optimize your images for indexing by the search engines and optimize them so that they will load quickly. This article will provide you with specific instructions on how to optimize your site images using Alt tags and other tools.

    Alert message: How Your Images �Look� to the Search Engines?

    Search engines send out automated programs called �spiders� that crawl your site and search for what type of content it contains. Although spiders aren�t able to ''see'' images, they are able to read the text which is associated with those images. With this information, and the information gathered from your content and your meta data, the search engines determine the theme of your site. There are three types of text that the search engine spiders ''see'' when they look at your images:


    1. Image Alt tags: accessible (by means of programs which dictate text) also to web users who are vision impaired.
    2. Image file name: this is the actual name of your image file. For example: ''ocean landscape.jpeg''
    3. Image captions: the text which is found directly beside, over, or underneath your images.

    Optimizing each of these types of text enhances the SEO of your site and  assists you in further communicating your site�s theme to the search engines.

    How to Optimize Your Blog/Website Images:


    1.''Optimize Your Alt Tags'':

    Every time you put a new image into your site, you�ll be asked to input what�s called an ''alt tag'' to describe the image. Below is an example of what your image alt tag will look like in your HTML code:

    <img src="filename.jpeg" alt="image alt description">

    The place where it says image alt description above is where you�ll want to use the keywords which you�re optimizing that specific page for. For example, if your page is being optimized for the primary keyword ''healthy weight loss plan'' and you have a before and after image of someone, your alt tag might look like this:

    <img src="healthy weight loss plan-before and after.jpeg" alt="healthy weight loss plan-woman before and after">

    Notice here that the primary keywords are used in the beginning of the alt tag, but that the image description is also included to make sure that vision impaired visitors here an accurate description.

    2.''Your Image File Names":

    When you create and save the images for your site, it�s a good idea to use your keywords in the image file name as well. For example, let�s look at HTML code for the image for ''healthy weight loss before and after'' again:

    <img src="healthy weight loss plan-before and after.jpeg" alt="healthy weight loss plan-woman before and after">

    Notice here that the image file name includes the keywords just as the image alt tag includes the keywords. Just be sure that you still have a way to distinguish the images on your site from one another.

    3."Image Captions'':

    As an additional measure of optimizing your images, use you keywords in the captions above or below your images as well. For example, if you have an image of a before and after shot (as in the examples above), you might use the following caption:

    ''Muhammad! says the healthy weight loss plan helped her go from a size 14 to a size 6!''

    As always, just be sure that the use of your keyword within your captions looks natural and that it adds value to the visitors who are viewing the site.

    4.''Optimizing Links to Your Images'':

    If you have any links (either on your site or off) which are leading to your images, be sure to use the keywords within the anchor text of that link. For example, if you�re linking back the image in the above examples, your html code for the link might look like this:

    <a href=''http://www.yoursite/images/healthy weight loss plan-before and after.jpeg''>results of a healthy weight loss plan</a>

    In this example, the words ''results of a healthy weight loss plan'' would appear as a hyper link that visitors could click and to find the ''healthy weight loss plan-before and after.jpeg'' image.
    Check Your Images with Google Images

    As a final step, you can check to see if your images have been indexed in Google images. To do this, just go to Google images and type ''site:yoursite.com'' into the search bar. For example, if your site name is http://www.mysite.com, you type ''site:mysite.com'' into the image search bar.

    Once you do this, you�ll see a page displaying the images on your site as they have been indexed by Google images.

    From The Editor�s Desk

    Optimizing your images can do more than just increase the SEO of your site, it will also help you get traffic from Google images. If you feel that the image data on your site needs to be optimized according to the guidelines in this article and don�t have the time to do it yourself, you can always hire the job out.  This is a job which can be completed in about one hour�s time for every ten pages of your site which include images.
    Continue reading

    at 0
    Highlighting code is quite necessary for me since I always add some reference to my codes I provide. This highlighter helps me to explain my code to my readers much effectively, since they highlight the keywords in the code.

    I have seen many renowned blogger using this plugin to highlight their code. Prism syntax is very different from any other syntax highlighter out there because of it features it provide. I need to highlight code which includes HTML, CSS and JavaScript mainly. If I need any other code to highlight I could simply download that plugin and add to the core code that is already present in that particular page.

    That means my plugin by default will only highlight HTML CSS and JavaScript codes. If required some other code language to highlight I can simply add that plugin in that particular page. This methods lead decrease in the size code which is for me 8KB to 9KB including CSS code which is quite low compared to prettify.


    So if you are using prettify or any other syntax highlighter I would highly recommend you to shift to Prism right now and decrease your page view.

    Instructions to follow:

    1. Go to Blogger Dashboard?Your Blog
    2. Click Template?Click Edit HTML tab
    3. Find anywhere inside template </style> or ]]></b:skin>

    CSS Code:

    / * CSS Prism Syntax Highlighter * /
    pre {
        padding: 50px 10px 10px 10px;
        margin: .5em 0;
        white-space: pre;
        word-wrap: break-word;
        overflow: auto;
        background-color: # 2c323c;
        position: relative;
        border-radius: 4px;
        max-height: 500px;
    }
    pre :: before {
        font-size: 16px;
        content: attr (title);
        position: absolute;
        top: 0;
        background-color: # eee;
        padding: 10px;
        left: 0;
        right: 0;
        color: # fff;
        text-transform: uppercase;
        display: block;
        margin: 0 0 15px 0;
        font-weight: bold;
    }
    pre :: after {
        content: 'Double click to selection';
        padding: 2px 10px;
        width: auto;
        height: auto;
        position: absolute;
        right: 8px;
        top: 8px;
        color: # fff;
        line-height: 20px;
        transition: all 0.3s ease-in-out;
    }
    pre: hover :: after {
        opacity: 0;
        top: -8px;
        visibility: visible;
    }
    code {
        font-family: Consolas, Monaco, '
        Andale Mono ',' Courier New ', Courier, Monospace;
        line-height: 16px;
        color: # 88a9ad;
        background-color: transparent;
        padding: 1px 2px;
        font-size: 12px;
    }
    pre code {
        display: block;
        background: none;
        border: none;
        color: # e9e9e9;
        direction: ltr;
        text-align: left;
        word-spacing: normal;
        padding: 0 0;
        font-weight: bold;
    }
    .token.punctuation code {
        color: #ccc;
    }
    pre code .token.punctuation {
        color: #fafafa;
    }
    .token.comment code, code .token.prolog, .token.doctype code, code .token.cdata {
        color: # 777;
    }
    .namespace code {
        opacity: .8;
    }
    .token.property code, code .token.tag, .token.boolean code, code .token.number {
        color: # e5dc56;
    }
    .token.selector code, .token.attr code-name, code .token.string {
        color: # 88a9ad;
    }
    .token.selector pre code, pre .token.attr code-name {
        color: #fafafa;
    }
    pre code .token.string {
        color: # 40ee46;
    }
    .token.entity code, code .token.url, pre-css .language .token.string, pre .style .token.string {
        color: #ccc;
    }
    .token.operator code {
        color: # 1887dd;
    }
    .token.atrule code, code .token.attr-value {
        color: # 009 999;
    }
    .token.atrule pre code, pre code .token.attr-value {
        color: # 1baeb0;
    }
    .token.keyword code {
        color: # e13200;
        font-style: italic;
    }
    .token.comment code {
        font-style: italic;
    }
    .token.regex code {
        color: #ccc;
    }
    .token.important code {
        font-weight: bold;
    }
    .token.entity code {
        cursor: help;
    }
    pre marks {
        background-color: # ea4f4e! important;
        color: # fff! important;
        padding: 2px;
        border-radius: 2px;
    }
    code mark {
        background-color: # ea4f4e! important;
        color: # fff! important;
        padding: 2px;
        border-radius: 2px;
    }
    pre code mark {
        background-color: # ea4f4e! important;
        color: # fff! important;
        padding: 2px;
        border-radius: 2px;
    }
    .comments pre {
        padding: 10px 10px 15px 10px;
        background: # 2c323c;
    }
    .comments pre :: before {
        content: 'Code';
        font-size: 13px;
        position: relative;
        top: 0;
        background-color: # f56954;
        padding: 3px 10px;
        left: 0;
        right: 0;
        color: # fff;
        text-transform: uppercase;
        display: inline-block;
        margin: 0 0 10px 0;
        font-weight: bold;
        border-radius: 4px;
        border: none;
    }
    .comments pre :: after {
        font-size: 11px;
    }
    .comments pre code {
        color: # eee;
    }
    .comments pre.line-numbers {
        padding-left: 10px;
    }
    pre.line-numbers {
        position: relative;
        padding-left: 3.0em;
        counter-reset: linenumber;
    }
    pre.line-numbers> code {
        position: relative;
    }
    .line-numbers-numbers .line-rows {
        height: 100%;
        position: absolute;
        pointer-events: none;
        top: 0;
        font-size: 100%;
        left: -3.5em;
        width: 3em;
        -webkit-user-select: none;
        -moz-user-select: none;
        -MS-user-select: none;
        padding: 0;
    }
    .line-numbers-rows> span {
        pointer-events: none;
        display: block;
        counter-increment: linenumber;
    }
    .line-numbers-rows> span: before {
        content: counter (linenumber);
        color: # 999;
        display: block;
        padding-right: 0.8em;
        text-align: right;
        transition: 350ms;
    }
    pre [Data-codetype = 'CSSku']: before {
        background-color: # 00a1d6;
    }
    pre [Data-codetype = 'HTMLku']: before {
        background-color: # 3cc888;
    }
    pre [Data-codetype = 'JavaScriptku']: before {
        background-color: # 75d6d0;
    }
    pre [Data-codetype = 'JQueryku']: before {
        background-color: # e5b460;
    }

    Step 2:

    After that save 2 below code just before the </body> or </head>

    <Script>
    $ ('Pre'). Attr ('class', 'line-numbers');
    Prism.hooks.add ("after-highlight", function (e) {var n = 1 + e.code.split ("\ n"). length; var r; lines = new "+ (ParseInt (t.getAttribute (" data-start "), 10) -1)} e.element.appendChild (r)})
    </ Script>

    <Script type = 'text / javascript'>
    var pres = document.getElementsByTagName (& quot; pre & quot;);
    for (var i = 0; i & lt; pres.length; i ++) {
      pres [i] .addEventListener (& quot; & quot ;, DblClick function () {
        var selection = getSelection ();
        var range = document.createRange ();
        range.selectNodeContents (this);
        selection.removeAllRanges ();
        selection.addRange (range);
      }, False);
    }
    </ Script>

    • Save template.You have successfully inserted this plugin.
    When you create a new post, apply the code below caller on the post HTML Tab

    Code for Post:

    <pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>
    <pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre>
    <pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>
    <pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>

    Need Help:

    We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help via comment section below or make a tweet to @MrAbdullahMalik. Peace and blessings buddies. :)
    Continue reading

    at 0
    Are you struggling to bring more visitors to your website? Well, you�re not alone. In fact, it seems everyone is trying to find the magic solution to boost their organic traffic and make their site appear on the first page of Google�s search results. Search engine optimization is no longer a basic set of rules, but rather requires making your entire website a well-oiled machine. By following a few best practices, you can improve your SEO efforts and take steps toward a higher ranking.There are many tips and tricks to enhance your websites SEO performance.

    Here are Our 8 Untold SEO Tips To Drive Tons Of Traffic:

    1.Content:

    Remember you are creating content for humans, not search engines. It�s important to include keywords on your pages, however your content should most importantly be informative and meaningful.

    NOTE: Search engines love fresh and relevant content. Often times, website content remains the same, which is why it�s important for websites to include a blog. Your blog should be filled with new information weekly. By blogging you will build relationships with your visitors, position yourself as a thought leader, and provide new content for Google to index.

    2.Page title:

    According to Hubspot, your page title should be under 70 characters and should contain no more than 3 long tail keywords. Make sure your page title is unique and descriptive of the content that follows.

    3.Heading tags:

    Your page should have 1-2 H1 heading tags that include keywords describing the content on the page. Be sure to stay clear of keyword-stuffing - make sure while including keywords you are remaining conversational. Below the H1 heading tag, be sure to include a few H2 heading tags as a way to break up the content. Google will recognize these heading tags as indicators of what the page contains.

    4.Meta description:-

    In case you haven�t heard of the term, a meta-description is the bit of information below the link of a search result. It�s purpose is to describe the content of your website to the user. It should be no longer than 150 characters and incorporate at least two of the keywords being used in the page�s title. The meta description is a chance for you to convey why someone should click-through and visit your website.

    5.URL:

    Begin by putting the most important keywords (often the page title) at the beginning of the URL. Always use hyphens to separate words - Google considers hyphens to be word separators but have not yet programed their search bots to recognize underscores equally.

    EXAMPLE: the URL for this blog post first contains where the page is located, then is followed by the keyword-rich title is separated by hyphens. e.g. www.urdublogginghub.blogspot.com/8-untold-seo-tips-drive-tons-of-traffic-to-your-blog.html

    6.Images:

    All images used on the page should have keywords including in the file name. Similar to the URL structure, each word should be separated by hyphens. Be sure to also include alt-text, a word or phrase used to describe the image. The alt-text is inserted as an attribute in HTML and is readable by search engines.

    7.Internal links:

    Create two or three internal links on the page related to other pages. This is your opportunity to direct visitors to other relevant content you have to offer and keep them moving through your website.

    8.Meta keywords:

    Although meta keywords are no longer part of search engines algorithm, it�s still important to add 3-5 keywords on your page to optimize your content. Smaller search engines may still use them to index your website.

    From The Author!

    What other SEO tips would you add to our list? What has been your biggest success for increasing organic traffic?  Let us know in the comments section below!
    Continue reading

    at 0
    Fixing Thumbnail Image Not Appear in Blogger - Recently I checked some demos blog template blog one demo for a premium template.After I made a new post in the blog, I noticed there were irregularities in the thumbnail view different homepages posts from previous postings.

    The difference was seen in the high post thumbnail that is not in accordance with the arrangement template and thumbnail image does not appear on the display slides recent post widget.

    After my review and try to compare a new post with a long post, it turns out there is a small difference that lies in the URL protocol drawing.To picture the old post using http and to post new images using https.
    Take a look at below shoot which I observe,

    (Click On the image to zoom it)
    Well if you are experiencing the same thing, how to handle it quite easily.You only need to replace the image URL protocol from https to http (HTML tab).Then click Update and see the results.
    I hope this tutorial will help,or it may be useful.#HappyBlogging.
    Continue reading

    at 0
    Most of the templates provided by a third party was no longer include the attribution blogger.However, if we are still using the default template of blogger then the template will automatically be installed attribution bloggers who can not be removed manually.

    Problems arise when there are bloggers who still want to use the default template blogger but also want to remove the attribution blogger template for several reasons.

    It Look Like As:

    Although not able to be removed manually, but we still can remove the attribution blogger default template by adding widget code to hide this attribution directly edit HTML templates. To hide the writing is powered by Blogger with CSS code is easy enough,Just follow my instructions which I mentioned below.

    Instructions To follow:

    1. Go to Blogger Dashboard?Your Blog
    2. Click Template Tab?Edit HTML
    3. Find inside template ]]></b:skin> (Press CTRL+F to find)
    4. Copy below CSS code and insert it before ]]></b:skin>

    CSS Code:


    # Attribution1 {
    height: 0px;
    visibility: hidden;
    display: none
    }
    • Save template,You have successfully done.Happy Blogging Buddy :)
    Continue reading

    at 0
    Alhamdulilah,we are Muslims and with my heart seriously proud to be a Muslim.So,this time I share with you a awesome and amazing widget that is Bismillah,you can add it in your blogger posts.

    Almost every Muslim would know the phrase bismallah and thank God.Short sentence full of meaning is typically used when an activity will begin and after doing the activity.

    Because reading is short, many underestimate the sentence bismallah and thank God.It is not surprising that the Prophets, Apostles, and successful people always say Bismallah whenever they start something and end by saying thank God as an expression of gratitude.

    Well enough for introduction, following its application ways to insert it to your posts.

    Instructions To follow:

    1. Go to Blogger Dashboard?Your Blog
    2. Click Template Tab?Edit HTML
    3. Find inside template <data:post.body/>
    4. Copy below code and apply it before <data:post.body/>

    CODE:


    <Div style = "text-align: center;"> <span style = 'font-size: medium; "> <span class =' ??messageBody 'Data-ft =' {& quot; type & quot;: 3}"> <span dir = 'rtl'> ? & # 1616; ? & # 1618; & # 1616 ?; ????? & # 1616; ??? & # 1614; & # 1617; ? & # 1618; & # 1614 ?; ? & # 1616; ??? & # 1614; & # 1617; ? & # 1616; ?? </ span> </ span> </ span> </ div> <br/>

    • Alhamdulillah code to add at the end of the posting, apply it after the <data: post.body />

    CODE:



    <Div align = 'center'> <span style = 'font-size: medium; "> ?? & # 1618; ? & # 1614; & # 1618 ?; ? & # 1615; ? & # 1616; ? & # 1614; & # 1617; & # 1616 ?; ? & # 1614; ? & # 1616; & # 1617;
    ?? & # 1618; ? & # 1614; & # 1648; ? & # 1614; & # 1616 ?; ?? </ span> </ div>

    • You have successfully inserted this blessing hack to your blog.

    Need Help?

    We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help via comment section below or make a tweet to @MrAbdullahMalik. Peace and blessings buddies. :)

    Continue reading

    at 0
    Installing Percentage In scrollbars - Postings further provided for setting up the percentage of the scrollbar functionality blog,maybe you've seen this percentage function on other blogs.

     The actual percentage of the scrollbar is not an important feature for a blog.But it never hurts to try, even then depending on individual taste. By adding this percentage not only as decoration but merely blog visitors will be able to see what percentage of pages that She scroll, if it has reached the bottom of the page then the percentage would be 100%. Was fairly easy way of application, please follow the following simple steps,

    Instructions To Follow:

    1. Go to Blogger Dashboard,Select Your Blog
    2. Click TEMPLATE tab now click on EDIT TEMPLATE
    3. Find ]]></b:skin> or </Style> and paste below code before it.

    CSS Code:

    #scroll {
      display: none;
      position: fixed;
      top: 0;
      right: 15px;
      z-index: 500;
      padding: 3px 8px;
      background-color: # 369fcf;
      color: # fff;
      border-radius: 3px;
      font-size: 14px;
    }
    #scroll: after {
      content: "";
      position: absolute;
      top: 50%;
      right: -10px;
      height: 0;
      width: 0;
      margin-top: -6px;
      border: solid 6px transparent;
      border-left-color: # 369fcf;
    }

    Now,Save template,After this again search for </head>,now insert below code 

    HTML Code:

    <Div id = 'scroll'> </ div>

    Now save template and search again for </body>

    JQuery Code:

    <Script type = 'text / javascript'>
    // <! [CDATA [
    scrollTimer var = null;
    $ (Window) .scroll (function () {
       viewportHeight var = $ (this) .height (),
           scrollbarHeight = viewportHeight / $ (document) .height () * viewportHeight,
           progress = $ (this) .scrollTop () / ($ (document) .height () - viewportHeight),
           distance = progress (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $ ('# scroll'). height () / 2;
        $ ('# Scroll')
            .css ('top', distance)
            .text ('(' + Math.round (progress * 100) + '%)')
            .fadeIn (600);
        if (scrollTimer! == null) {
            clearTimeout (scrollTimer);
        }
        scrollTimer = setTimeout (function () {
            $ ('# Scroll'). FadeOut (600);
        }, 1000);
    });
    //]]>
    </ Script>

    You have successfully done your widget.Now,click on VIEW blog to see awesomness.

    DEMO, LIVE IT HERE:

    See the Pen Persentase Pada Scrollbar by Abdullah Malik (@UrduBloggingHub) on CodePen.



    Need Help?


    We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help via comment section below or make a tweet to @MrAbdullahMalik. Peace and blessings buddies. :)


    Continue reading

    at 0

    On this occasion I would share the tutorial about to install sliding demo and download buttons to blogger blog! and such hack is really awesome.

    This tutorial have an awesome and amazing animation effect,you may name it mouse hover slide effect,Okay lets start how you enjoy this widget in your blog.
    First of all you have to put a CSS code in your blogger blog,follow the instruction below;

    Instruction To Follow:


    Step 1: Open your blogger dashboard select your blog.
    Step 2: Select Template option and Click on Edit HTML option.
    Step 3: In the template code find ]]></b:skin> or </style>oo

    CSS Code:


    #wrap {
        margin: 20px auto;
        text-align: center;
    }
    #wrap br {
        display: none;
    }
    .btn-slide, .btn-slide2 {
        position: relative;
        display: inline-block;
        height: 50px;
        width: 200px;
        line-height: 50px;
        padding: 0;
        border-radius: 50px;
        background: #fdfdfd;
        border: 2px solid # 0099cc;
        margin: 10px;
        transition: .5s;
    }
    .btn-slide2 {
        border: 2px solid # efa666;
    }
    .btn-slide: hover {
        background-color: # 0099cc;
    }
    .btn-slide2: hover {
        background-color: # efa666;
    }
    .btn-slide: hover span.circle, .btn-slide2: hover {span.circle2
        left: 100%;
        margin-left: -45px;
        background-color: #fdfdfd;
        color: # 0099cc;
    }
    .btn-slide2: hover {span.circle2
        color: # efa666;
    }
    .btn-slide: hover span.title, .btn-slide2: hover {span.title2
        left: 40px;
        opacity: 0;
    }
    .btn-slide: hover span.title-hover, .btn-slide2: hover {span.title-hover2
        opacity: 1;
        left: 40px;
    }
    .btn-slide span.circle, .btn-slide2 span.circle2 {
        display: block;
        background-color: # 0099cc;
        color: # fff;
        position: absolute;
        float: left;
        margin: 5px;
        line-height: 42px;
        height: 40px;
        width: 40px;
        top: 0;
        left: 0;
        transition: .5s;
        border-radius: 50%;
    }
    .btn-slide2 span.circle2 {
        background-color: # efa666;
    }
    .btn-slide span.title,
      .btn-slide span.title-hover, .btn-slide2 span.title2,
      .btn-slide2 span.title-hover2 {
        position: absolute;
        left: 90px;
        text-align: center;
        margin: 0 auto;
        font-size: 16px;
        font-weight: bold;
        color: # 30abd5;
        transition: .5s;
    }
    .btn-slide2 span.title2,
      .btn-slide2 span.title-hover2 {
        color: # efa666;
        left: 80px;
    }
    .btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
        left: 80px;
        opacity: 0;
    }
    .btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
        color: # fff;
    }


    Save the template. 

    Now,follow this Step, for the calling code please apply to Post HTML tab. 

    So that it looks neat when inserting HTML code into the post, you should use the  Press "Enter" for a new line  on the menu "Options" as shown below.

    Now,at this you have to insert below piece of code to your new blog post but keep in mind you have to insert below code in POST HTML section.

    HTML Code:

    <Div id = "wrap">
    <a href="#" class="btn-slide" target="_blank">
      <Span class = "circle"> <i class = "fa fa-rocket"> </ i> </ span>
      <Span class = "title"> Demo </ span>
      <Span class = "title-hover"> Click here </ span>
    </a>
    <a href="#" class="btn-slide2" target="_blank">
      <Span class = "circle2"> <i class = "fa fa-download"> </ i> </ span>
      <Span class = "title2"> Download </ span>
      <Span class = "title-hover2"> Click here </ span>
    </a>
    </ Div>
    You have successfully done.


    Demo display:
    See the Pen mJyEJQ by Abdullah Malik (@UrduBloggingHub) on CodePen.

    Good luck and hopefully useful.

    Need Help:

    We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help via comment section below or make a tweet to @MrAbdullahMalik. Peace and blessings buddies. :)
    Continue reading

    at 0
    Each and every blogger is thinking about getting high reputation from both search engines as well as site visitors and so focusing on providing quality content. We all know content is king when it comes to SEO. In addition to that internal linking is one of the main elements to be carried out in your SEO strategy. To drive traffic and to contribute equal value to your other pages you must use internal linking as part of your SEO strategy. Here we will discuss about internal links and the benefits of internal linking in SEO.

    Introduction To Internal Linking:

    An internal link is a type of hyperlink on a webpage to another page or resource, such as an image or document, on the same website or domain. Hyperlinks are considered either "external" or "internal" depending on their target or destination. Generally, a link to a page outside the same domain or website is considered external, whereas one that points at another section of the same webpage or to another page of the same website or domain is considered internal.

    Both internal and external links allow users of the website to navigate to another web page or resource. This is the basis or founding idea or principal behind the internet. That users can navigate from one resource to another by clicking on hyperlinks. Inernal links help users navigate the same website, whereas external links generally take users to a different website.

    Both internal and external links help users surf the internet as well as having Search engine optimization value. Intenral linking allows for good website nagivation and structure and allows search engines to crawl or spider websites.

    This is the basic structure of Internal Linking In  SEO.

    Benefits Of Internal Linking In SEO:

    After reading these 6 benefits of internal linking in SEO you will probably start internal linking as part of your SEO campaign.

    Editors's Choice: Search Engine Optimization Beginners Rapid Guide

    1. Internal links are more user friendly � Anchor texts:

    Internal linking and benefits of internal linking in SEOInternal linking helps users to easily navigate within your site. By using proper anchor texts in your content you can show and send them to the most relevant pages that they are interested in. So if you�re writing an article about money making you can point your user from there to related categories and tags by using internal links.

    2. Internal links pass the link juice:

    Both internal and external links should be equally given importance in SEO. External links are off page factor (backlinks) which gets you an authority from external source. While internal links helps in passing the link juice equally to other pages within your site. For example let�s say this page has 100 backlinks, so all the links in this page also will get some link juice.

    3.Internal links increases page views:

    Internal linking and benefits of internal linking in SEOAs it�s already mentioned above using proper anchor texts helps user to find more useful and related content in your site. This helps in increasing your site conversion rate. New visitors find it useful and can easily know your site structure and site links. More the people follow through your links increases in page views which help your site to boost your Alexa rank.

    4. Internal links helps in increasing PageRank:

    Internal linking and benefits of internal linking in SEODepending upon quality backlinks Google gives you PageRank for a page. A page with higher PageRank passes the link juice to other pages which are internally linked. Other pages will get better ranked in search engines due to the flow of link from the page that has higher PageRank. This in turn helps you to get organic search traffic.

    5. Internal links reduces bounce rate:

    Advantages of internal linking in SEOThe percentage of visitors to your site who spending less time, that is just viewing one page and leaving your website immediately is known as bounce rate. Lower the bounce rate is the number of people staying so long by surfing within your site. So if you are linking to related posts then users will stay in your site for a long period of time which in turn reduces your sites bounce rate.

    You can find out your websites bounce rate in Google analytics. Also see Google and Bing webmaster tools.

    6. Better crawling and indexing:

    Benefits of internal linking in SEOCrawlers are smarter and designed in a way user thinks. These crawlers visit your site and pass through all the links and the pages get easily indexed. By internal linking they know you are pointing to other related content within your site that gives a bump to other pages.

    FROM THE EDITOR�S DESK:

    Hope this article helped you with internal linking and the benefits of internal linking in SEO. So what are you waiting for? Go on start building internal links and remember to use internal links only to related content using rich anchor text.
    Continue reading
    Subscribe to: Posts (Atom)