Go Widget

Solution Can not Setting Redirect non www to www After Install HTTPS Blogger

2018-01-20T04:14:00.004-08:00

Once we enable HTTPS Blogger, we must make sure all blog urls are accessible so as not to reduce the amount of blog traffic.

Please check all your blog url to make sure blog can be accessed via http://, http://www, https://, and https://www.

If the blog can be accessed with the four urls, then do not worry our blog traffic will be reduced.

There are some blogger friends who complain after HTTPS plug in blogger, traffic dropped dramatically. Apparently after checked, the blog can not be accessed without the www either http or https.

This is because the non www redirect setting to www can not be checked or can be checked but can not be saved.

This happens after the HTTPS plug and the non www to www redirect setting is not enabled.

And the solution happened I found accidentally yesterday before blogger friends complain can not redirect non www to www after setting HTTPS.

After setting HTTPS, I tried idle to disable non www to www redirect, but when it will be reactivated, its setting can not be saved. Of course this could make me upset to open the DNS domain settings to make sure nothing has changed.

But finally the solution non www to www this can not be setting after HTTPS pairs I found by accident also after the head spinning ria hehehe ...

So if by chance you are experiencing the same thing, please do something like the following:

• Please disconnect or remove the custom domain first, so will return to the blogspot domain and custom HTTPS domain settings will be off again. After that please refresh his dashboard page.

• Then please install more custom domainnya by click Setup a 3rd party URL for your blog then input your domain with www and tick redirect non www to www then save settings.

• Then please setting HTTPS back to custom domain.

Apparently this domain redirect DNS settings conflict with HTTPS settings. With the first release of custom domain then setting HTTPS to custom domainnya be off again so that the process of domain redirects can be done.

Well how easy is not it? Hope this helps.

How to Fixed Mixed Content After HTTPS Setting

2018-01-20T04:01:00.002-08:00

If you have enabled HTTPS settings on blogs, on some blogs there will be mixed content. In case of mixed content, the HTTPS will be gray with exclamation mark instead of green with green padlock.

Mixed content occurs because the source within the blog that the browser should download is still using HTTP, such as for js files, images, and videos.

The source of this mixed content can be in blog templates, inside widgets, or in posts.

Luckily for users of AMP HTML template, because from the beginning it is required to use HTTPS source, then there will be no mixed content.

How to fix mixed content after setting HTTPS is actually quite easy, just need accuracy.

Actually mixed content of each blog will be different, but how to fix it just the same way by looking at the source mixed content and then convert it into HTTPS.

For example, I took a screenshot of a blog that still contained mixed content. Please inspect your HTTPS blog page element in gray.

Then in the top right corner of the box inspect element there will be a number for the yellow warning and the number for the red error, please click the number that will appear a new box in the inspect element that shows what are the warning and error on the blog.

After that please find the cause of its mixed content, if you have met please how the url code in the edit HTML, as follows.

How easy is not it?

May be useful....

Alternative Widget of Facebook Like Box for Blog AMP

2018-01-20T03:49:00.001-08:00

Here is a solution for those of you who use blogs with AMP HTML who want to install Facebook Fan Page Like widget for your blog but still problem with "this and that".

This widget I have applied in my blog Jurus Anak Elektro with AMP Production Company template. Hopefully this article can help you to install custom widget of Facebook Fan Page Like for your AMP blog.

AMP .JS

amp-facebook-like.js

Put the following amp-facebook-like.js code above </'head'>. This AMP js which is the key of this alternative Widget Facebook Like Box, with this widget we can display widgets like and share facebook. You can also replace the "Like" button with the "Recommended" Button.

amp-animation.js and amp-position-observer

AMP. Js serves to create a slide-up effect on your facebook cover to make it look more beautiful. Put it on top

code </head>

CSS

Put the following CSS code for the Facebook Like Box widget on your AMP blog page.

#fb-box-like{width:300px;position:relative;height:110px}
.parallax-image-window {overflow: hidden;height:110px;border-radius:2px}
.parallax-image-window amp-img {margin-bottom: -30%;}
.likebutton{position:absolute;left:7px;bottom:12px;height:20px}
.fb-link{position:absolute;top:25px;left:70px;}
.fb-link a{text-decoration:none;color:#fff}
.fb-link a:hover{text-decoration:underline}
.profilthumb amp-img{position:absolute;top:10px;left:7px;}

HTML

Put the following HTML code by adding the HTML widget

<div id='fb-box-like'>
<div class="parallax-image-window">
<amp-position-observer on="scroll:parallaxTransition.seekTo(percent=event.percent)"
    intersection-ratios="1"
    layout="nodisplay">
</amp-position-observer>
<amp-img id="parallaxImage"
    width="300"
    height="170"
    src="https://scontent.fsub2-1.fna.fbcdn.net/v/t1.0-9/25299387_957696964377969_984156055346347699_n.jpg?_nc_eui2=v1%3AAeHpJbu2t8WrlO0DQKgC3EkNGv1j0bofH9t-OdHWVSAeKqqHhf5v7P8kCcspn2sPpE6iyiqJzU48Ch_qhNYpCIsKw_QaX8FITB-lF26Uv-Fvxw&oh=e112ad04314140d557528536388fbb5b&oe=5AF89F74"
    alt="Jurus Anak Elektro Timeline"></amp-img>
</div>
<div class='profilthumb'><amp-img src='https://scontent.fsub2-1.fna.fbcdn.net/v/t1.0-9/25443320_957696381044694_6120096655469337286_n.png?_nc_eui2=v1%3AAeFmzrvS6EofVO3L1X4YFpK0gKdXgON7lS77Shd1nPWpP6tAK_Tqt0eGmCVAikhPow1s8FW5VZDUG20pEqTqo0rnlBT_6APexi5fbT47DFUGVA&oh=82244c04f45a2d0dd6da887dc7b95903&oe=5AFDF64E' width='54' height='54'></amp-img>
</div>
<div class='fb-link'><a href='https://www.facebook.com/juruselektro/' target='_blank' rel='nofollow' title='Fans Page Jurus Anak Elektro'>Jurus Anak Elektro</a>
</div>
<div class='likebutton'>
<amp-facebook-like width='300' height='20'
    layout="fixed"
    data-share="true"
    data-layout="button_count"
    data-href="https://www.facebook.com/juruselektro/">
</amp-facebook-like>
</div></div>

Note:

Cover

Replace the following url with the cover url of your facebook page.

src="https://scontent.fsub2-1.fna.fbcdn.net/v/t1.0-9/25299387_957696964377969_984156055346347699_n.jpg?_nc_eui2=v1%3AAeHpJbu2t8WrlO0DQKgC3EkNGv1j0bofH9t-OdHWVSAeKqqHhf5v7P8kCcspn2sPpE6iyiqJzU48Ch_qhNYpCIsKw_QaX8FITB-lF26Uv-Fvxw&oh=e112ad04314140d557528536388fbb5b&oe=5AF89F74"

Profile

Replace the following url with the profile url of your facebook page.

src='https://scontent.fsub2-1.fna.fbcdn.net/v/t1.0-9/25443320_957696381044694_6120096655469337286_n.png?_nc_eui2=v1%3AAeFmzrvS6EofVO3L1X4YFpK0gKdXgON7lS77Shd1nPWpP6tAK_Tqt0eGmCVAikhPow1s8FW5VZDUG20pEqTqo0rnlBT_6APexi5fbT47DFUGVA&oh=82244c04f45a2d0dd6da887dc7b95903&oe=5AFDF64E

Link Facebook

Replace juruselektro with your own Facebook ID and Jurus Anak Elektro with the name of your Facebook page

Some of this article Hopefully Helpful ....

Disqus Comment Becomes Untitled After Switching To HTTPS, Here's The Solution

2018-01-20T03:17:00.000-08:00

What I mean Disqus comments to be untitled is like the picture above. That is a notification that goes into email if anyone commented on the post. With Untitled then all email notifications from all posts become one.

It happens after the blog switches to HTTPS and occurs in published posts after switching to HTTPS. It should be there post title, so the notification of comments from each post not mixed into one.

Previously I did not think this, I thought maybe this is because the new switch to HTTPS and Disqus has not detected the blog URL changes. But after I read, Disqus will automatically detect the new URL.

But after publishing some new post after switching to HTTPS, Untitled Notifications still occur. Though the Disqus code has nothing changed and before switching to HTTPS does not happen Untitled notifications like this.

Finally I found the solution, if something like this happens, we need to tell Disqus for the post title with this.page.title code.

1. Blog AMP HTML

If you are using a blog with AMP HTML and Disqus comments become Untitled after switching to HTTPS, please replace your blog Disqus comment code with the code below.

<amp-iframe expr:src='"https://cdn.rawgit.com/KompiAjaib/kompi-html/master/ampdisqus_blogger4.html?shortname=Your-Disqus-ID&fontBodyFamily=sans-serif&fontLinkColor=e8554e&canonicalurl=" + data:blog.canonicalUrl + "&title=" + data:blog.pageName' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' width='600'>

<div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'/>

</amp-iframe>

Please replace your-disquaID with your blog Disqus shortname, adjust sans-serif with your blog typeface, and e8554e please adjust to the color of your blog link.

2. Blog Non AMP HTML

If you use the Non AMP HTML blog and Disqus comments become Untitled after switching to HTTPS, please replace your blog Disqus comment code with the code below.

<div id="disqus_thread"></div>

<script>

    /**

     * RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.

     * LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables

     */

    var disqus_shortname = "shortname";

    var disqus_config = function () {

        this.page.url = "<data:blog.canonicalUrl/>";

        this.page.identifier = "";

        this.page.title = "<data:blog.pageName/>";

    };

    (function() { // REQUIRED CONFIGURATION VARIABLE: EDIT THE SHORTNAME BELOW

        var d = document, s = d.createElement("script");

        s.src = "//"+disqus_shortname+".disqus.com/embed.js"; // IMPORTANT: Replace EXAMPLE with your forum shortname!

        s.setAttribute("data-timestamp", +new Date());

        (d.head || d.body).appendChild(s);

    })();

</script>

Please replace shortname with your blog Disqus shortname.

The changes will be visible in the new post published after replacing the Disqus comment code. Disqus email notification will return to the post title.

Hope this helps.

Problem Solve Adsense Ads Does Not Appear On Blogger Homepage

2018-01-20T03:05:00.000-08:00

Some time ago a friend of mine complained. He said Adsense ads do not appear on the homepage, whereas Adsense ads appear on other pages. Could there be something wrong with the template? Though the blog demo itself Adsense ads appear normally. Of course I can not answer it because I myself have never experienced it.

Then a week ago I created a self hosted wordpress blog. As usual after filled several posts, I put also Google Adsense ads. And the ads appear normally, appear on the front page and post.

But a few days later, Adsense ads on my wordpress blog also experienced the same thing with my friend earlier that the ad does not appear on the front page or homepage. Hmmm ... finally I experienced also hehehe ... Then I recall what I have done before. What is clear, before the Adsense ads disappeared I fiddled with blog templates to customize the appearance to suit my desires.

Then I tried removing Adsense on the blog homepage, and 2 days later reread it. However Adsense ads still do not appear as well.

Then I googling and finding clues. Nothing wrong if I try, if it turns out to be true means the instructions. According to the instructions, we must create a privacy policy page. And indeed I have not created a privacy policy page on the wp blog that I just created it. Hmmm ... maybe this is why Adsense ads do not appear on the front page of the blog.

And it turned out to be true, after I created the privacy policy page and remove Adsense on the front page for a while and display it again after two days later, finally Adsense ads on my wp blog re-appear on the front page. Horeee .... hehehe ....

So in conclusion, if you want to install Adsense ads, it must be ensured in advance that we have created a privacy policy page and display it in blog navigation. To create a privacy policy page, you can easily create it, please try to create it at http://www.privacypolicyonline.com

Well if you are experiencing the same thing as I've experienced before, please try with this trick. Good luck....

Troubleshoot Adsense Ads Not Appearing In New Published Posts

2018-01-20T02:52:00.002-08:00

Lately the Adsense publishers complained much that Adsense ads often do not show up or Adsense ads are blank, especially for newly published posts. Of course this makes the Adsense publisher gloomy, the article of income to decline because the ads often do not appear or blank.

Many speculations are popping up, among which Google is probably doing an update on all products, one of them Adsense.

And in fact, Google continues to update its products. For example Page Speed Insight that now has changed for the results of measuring, and reportedly layout or design Google Search Console will also soon be updated and is now included in the Beta version.

Similarly with Adsense, Google has changed the way ad serving on the website. Now Adsense will not automatically memonitize web or blog if the web or blog or a page of the web or blog is not yet or can not be accessed Adsense bot. That way allows Adsense to more easily monitor all posts made to fit the adsense policy.

This change is clearly visible when we publish a new post. All Adsense ads do not appear or blank in newly published posts.

This of course makes sense, because the new post is probably not yet accessible to Google's bot. Adsense Ads will appear after the page is accessed by Google bot.

For that, make sure Google bot can crawl our blog, as well as Adsense bot. Make sure we enable robots.txt and grant access to the crawler robots.

Oh yes, now also appears a warning in Google Search Console if we do not enable robots.txt on the blog. It says that the Google robot could not crawl the blog because it did not find the robots.txt file for bot access rights.

So for these issues, please do the following:

• Make sure you have already created a property in Google Search Console, then verify ownership of the site or blog with meta code or with other methods, and do not forget to submit your sitemap blog with sitemap.xml.

• Enable robots.txt on blogs, if you're still using robots.txt like the following:

User-agent: Mediapartners-Google

Disallow:

User-agent: *

Disallow: /search

Allow: /

Sitemap: http://your-blognamre/feeds/posts/default?orderby=UPDATED

Please replace with robots.txt below, robots.txt above will actually block Adsense bots to crawl the blog. Be careful with the seo friendly robots.txt setting tutorial that will actually block the Adsense bot. Please use robots.txt below.

User-agent: *

Disallow: /search

Allow: /

Sitemap: http://your-blogname/sitemap.xml

Please adjust the sitemap URL with the URL of your Canonical blog. If using SSL, then use HTTPS, and keep in mind for Blogger domains always use the www salam except those using sub domains.

• After publishing a post, please submit the new post at https://www.google.com/webmasters/tools/submit-url to speed up the process of crawling Google bot on the post.

Now that I feel Adsense ads have started normal though sometimes there is a blank slot.

Jquery No Follow All External Links

2016-11-14T11:40:00.000-08:00

Nofollow is the value for the rel attribute in an HTML element that aims to instruct search engines to not explore the link so it does not affect the ranking in the search engine index. Usually rel = "nofollow" added to the external links or links that lead to the outside of the website or blog.

To make it easier to add rel = "nofollow" on external links automatically, we could use jquery. It is useful to overcome the external links were added outside of our control such as in a forum that allows members to create posts. Thus, although members of the forum made a post by applying an external link, then the link will automatically add rel = "nofolow".

To use an external jquery this nofollow link rel Please copy the code below and save the above code </ body> and make sure we've put that script library jquery his work. In addition to adding rel = "nofollow", this script also add target = "_ blank" so that external links open in a new tab when a link is clicked.

//<![CDATA[

$("a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');

//]]>

</script>

Good luck....

New Tool For AMP content HTML Of Search Console

2016-11-14T10:22:00.002-08:00

Accelerated Mobile Page HTML AMP now beginning lively on the internet. The publisher and webmaster begins to use HTML AMP on its website. It is now starting to feel the effects of using HTML AMP. From some friends Company has tried to use template AMP, besides blogs have loading is very light also has a 2-fold pageview of blogs that do not use HTML AMP.

Surely this is a very good thing for the publisher, but unfortunately still have not found a shortcut to use HTML AMP on blogs that already have a lot of stuff that does not need to edit posts one by one.

Google has recently been making more of a tool to check the validation AMP page through Webmaster Tools. In this one tool is also equipped with a preview of the search results for blogs that have been using HTML AMP.

Are you already using the blog template AMP? If yes, please check the validation of AMP and display in search results on the button below.

AMP validation check page

Add WhatsApp Button On AMP Social Share Show Hide

2016-11-14T09:48:00.001-08:00

I want to share how to modify the amp-social-share be fixed amp-social-share with show hide and animation with a button linkedin, pinterest, facebook, google + and twitter. And now I'll add a share button WhatsApp.

Generally, a blog with HTML AMP made for easy access to mobile users. While Whatsapp application widely used by mobile users. Then share articles blog through the app Whatsapp is one way to increase page views the blog of mobile users.

To that end, the blog owner should provide social media sharing buttons for Whatsapp application is to allow visitors to share articles mobile blog.

If you use blog AMP and want to try using social amp with fixed share and animation show hide this, please follow the steps below.

1. First Steps Make sure your own blog AMP both js below.

2. Step Two . Add HTML code below

<b:includable id='share-tool' var='post'>

<amp-accordion class='shares'>

</h4>

<b:if cond='data:blog.isMobileRequest == "true"'>

<amp-social-share data-share-endpoint='whatsapp://send' expr:data-param-text='"Ada yang keren lho, nyesel kalo ga buka.. kunjungi: " + data:blog.url' layout='container' type='whatsapp'>

<amp-img alt='Share via Whatsapp' height='35' layout='fixed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH7LPdezcaP-NHVRPKWODZnrPxng1ZhgB1GHavB8d9ryxDRGQEIIUVYFqwumLDNrG_gJBagCc3vZ1j3dCvuJ_3QQMjUEEpN7zCm0Mr-Sga9c3KQ2Ak8wITFgwQBggik1ds-wuMa21o1aFP/s1600/wa.png' width='35'/>

</amp-social-share>

</li>

</b:if>

</ul>

</div>

</section>

</amp-accordion>

</b:includable>

And save it under the code </ b: includable> in the following code

<b:includable id='postQuickEdit' var='post'>

...............

</b:includable>

3.Third Step. Save the code below

<b:if cond='data:blog.pageType == "item"'>

<b:include data='post' name='share-tool'/>

</b:if>

Under the posting or under like or similar code as below.

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>

<data:post.body/>

</b:if>

</div>

4. Step Four. Please save the CSS code below in style amp-custom to post (either desktop or mobile if separated).

amp-accordion.shares{position:fixed;bottom:70px;right:30px;z-index:9999}

amp-social-share{border-radius:100%;box-shadow: 0 6px 12px rgba(0,0,0,.2);background-size:30px}

h4.show-share{background:none;border:none;margin:0;padding:20px}

.show-share .show-less,.show-share .show-more{color:#fff;font-size:24px;width:50px;height:50px;line-height:50px;padding:0;margin:0;text-align:center;border-radius:100%;background:#2196f3;border:none;box-shadow: 0 6px 12px rgba(0,0,0,.2);position:fixed;bottom:30px;right:30px;z-index:10000}

amp-accordion.shares section:not([expanded]) .show-less,amp-accordion.shares section[expanded] .show-more{display:none}

amp-accordion.shares ul,amp-accordion.shares li{list-style-type:none}

amp-accordion.shares li{margin-bottom:5px}

amp-accordion.shares li:last-child{margin-bottom:0}

amp-accordion.shares .share-icon{padding:0;position:absolute;top:100%}

amp-accordion.shares li.wa amp-social-share{background:#38bd4c;overflow:hidden;width:50px;height:50px;line-height:50px;text-align:center}

amp-accordion.shares li.wa amp-social-share amp-img{vertical-align:middle}

.slideInUp1,.slideInUp2{-webkit-animation-name:slideInUp;-webkit-animation-fill-mode:both}

.slideInUp1{animation-name:slideInUp;-webkit-animation-duration:3s;animation-duration:3s;animation-fill-mode:both}

.slideInUp2{animation-name:slideInUp;-webkit-animation-duration:2.5s;animation-duration:2.5s;animation-fill-mode:both}

.slideInUp3,.slideInUp4{-webkit-animation-name:slideInUp;-webkit-animation-fill-mode:both}

.slideInUp3{animation-name:slideInUp;-webkit-animation-duration:2s;animation-duration:2s;animation-fill-mode:both}

.slideInUp4{animation-name:slideInUp;-webkit-animation-duration:1.5s;animation-duration:1.5s;animation-fill-mode:both}

.slideInUp,.slideInUp5{-webkit-animation-name:slideInUp;animation-name:slideInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}

@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}

100%{-webkit-transform:translateY(0);transform:translateY(0)}}

@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}

100%{-webkit-transform:translateY(0);transform:translateY(0)}}

.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}

@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}

100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}

@keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}

100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}

5. Fifth Step. Because no key is using the material icon, so make sure you have installed fonts Material Icon.

Done ... good luck ....

How to Use SVG Icons For Icons Blog

2016-11-14T08:57:00.001-08:00

SVG or Scalable Vector Graphics is a markup language to describe two-dimensional graphics applications and image is a W3C recommendation and is supported by all modern browsers for desktops and mobile phones.

SVG has a small file size and compressed well and still look good on retina displays as well as safe for the zoom. For that, why do not we use it for our use SVG on the icons on the blog. That way our blog will be lighter because they do not need to call the css style library as well as the font icon.

How to use SVG icons on your blog ?

To use SVG icons on the icons on the blog, please do as below.

We can easily get the icons of material-based SVG icons for web design in https://materialdesignicons.com. There are hundreds of icons, including icons of social media for the purposes of the icons on the blog.

Then please click on the icon you selected. Select the toggle code </> and select view SVG it will show a box with code like the following as an example.

</svg>

Please save SVG code above in the edit HTML. For example we will use the icon "account" on our profile link as below

<b:if cond='data:post.authorProfileUrl'>

</a>

</span>

<b:else/>

</b:if>

</span>

It will look like below

<b:if cond='data:post.authorProfileUrl'>

</svg>

</a>

</span>

<b:else/>

</b:if>

SVG images that have better presence in the blog, then we move her style inline style = "width: 24px; height: 24px" CSS style to be like this blog

.post-author svg {width:24px;height:24px;}

With the CSS code above we also can easily adjust the size of the icon size.

And if we want to change the color on her icon, we use the following css.

.post-author svg path {fill: white;}

And if you want to use SVG directly on CSS (such as background-image) do like below (using base64).

.post-author {background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:white' d='M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-repeat:no-repeat;background-size:24px 24px;background-position:top left;background-color:transparent;}

If you want to use another icon, just change Viewbox = '0 0 24 24' (if different) and also replace d = '16,8A4,4 M12,4A4,4 0 0.1 0 0 0.1 12,12A4,4 8,8A4,4 0.1 0 0.1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z 'and the color of the icon style =' fill: white '

How easy is not it? Good luck....

How to Adding Functionality Google Custom Search On Search Box Blog

2016-10-31T06:25:00.002-07:00

How to Adding Functionality Google Custom Search On Search Box Blog

It is my experience over the world know the blogger. After fro looking for an explanation on how to add the functionality of Google Custom Search search box on the blog. Finally I got it from his own experience after the try and error. Understandably I was not smart and do not quite understand about HTML code.

Why do I want to add functionality to the Google Custom Search blog search box? Because in my opinion, with the added functionality of Google Custom Search search box on the blog we do not change the look of the search box that provided the template creator that does not change from the look of the blog itself. Search box that has been provided by the template creator must have been adapted in such a way with the feel of the template, which I think is very dear to replace it with the default search box on the Google Search Engine. But most just add the template creator of default blogger search function that I think less than optimal in the search for articles or postings on our blog. So I change the default search function blogger with Google Custom Search but does not change the look of search boxnya.

There are several ways of working Google Custom Search, but I'll take one any way that I think is pretty good, so even though we are not a professional, but the search results is quite professional and relevant to the content of our blog. I took the workings of Google Custom Search, the search results displayed in the posting area. To demo to add functionality to the Google Custom Search blog search box you can try a search box on my blog.

OK ... Now we start to add the functionality of Google Custom Search search box on the blog of course we have to create a Google Search Engine blog of our own first.

1. Please enter HERE if you have not registered yet, please register first.

2. Then press the Create a Custom Search Engine.

3. Please fill in the name for the name of your blog Custom Search Engine, Description to describe your blog, select the language, then enter the URL of your blog on a column Site to Search. Check the small box on the I have read and agree to the Terms of Service. Then Next.

4. Then enter in a new window, leave the default view style, and then click Next.

5. At this point you already have a Google Custom Search blog of your own.

6. Look down a bit, look for the words Change the look and feel. click on it, then it will go to the window like below.

7. Select Results Only the layout. Click Save & Get Code. Then copy the HTML code provided on the notepad on your desktop.

8. Then look at the left panel of Google Search Custom page again, click on the Basic menu. It was dated in your unique ID code we were given the Google Search Engine, copy it to notepad. scroll down a bit and make sure the Search engine encoding on West European Latin-1 (ISO-8859-1), then Save Change.

9. Then please login to your blog. Create a new post, or if your blog template support please create a static page static page posts. Please give it a Title eg Search Result or Search Results. Now copy and paste the HTML code that had been obtained from the Google search engine on the post HTML (not on Compose). then publish your post it. And note the URL posting the Search Result.

10. Now go to Template >> Edit HTML >> Procces check Expand Widget Templates. But it would be nice Backup first blog template as a precaution in case of editing errors.

11. Please find the HTML code of the Search Box. Here I demonstrated my blog from Search Box, originally code like this:

</form>

Now replace the words red with code like the following:

Posting URL Search Results please replace the URL of the post search results that had been made previously (step no. 9).

Then writing RED replace it with code like the following:

Please replace the code that blocked RED with Search engine unique ID that we can from the Google Search Custom (step no. 8).

So overall the code will be as follows:

</form>

12. Now Save your template.

Well up here you've finished adding the functionality of Google Custom Search search box on the blog. Something like that, hopefully useful.

UPDATE 2016

For how to add Google Search Engine is the blog search box in accordance with a new look in 2016 on Google Search Engine page, please go to his tutorial update: How to Add Google Custom Search Engine InBlog Update

How to Add Google Custom Search Engine ( CSE ) In Blog (Update)

2016-10-31T05:48:00.001-07:00

Actually I've never made a tutorial how to add the functionality of Google Search Engine or Google Custom Search blog. However, because at that time the tutorial was made in 2015, then of course the steps of manufacture is not in accordance with the GSE see today.

For now I've made the update tutorial, to avoid confusion for those who want to try adding a GSE in the search box that already exists in your blog.

The first step

Please you enter HERE and please log in with your Google account.

Step two

Please click the "Add" to start making Google Search Engine for your blog.

Third step

Then on pages available please add your blog URL without the "http" as written in the example. Then choose a name for your blog Search Engine in the box below, then please click on the button "Create".

Step four

Then on the next page, please click the "Control Panel"

Fifth step

On the next page on the "Setup" please click the button "Search engine ID" and please copy your blog search engine ID to the notepad. After that please click the "Advanced" and select "West European Latin-1 (ISO-8859-1)" the option "Search engines encoding".

Step six

Please click menu "Look And Feel" at the top left and the option "Layout" please select the "Results only" then click the "Save & Get Code"

Step seven

On the next page please copy the code provided and simply create a new post on Page Static (Static pages) of your blog and paste the code in the HTML editor, please give the title of the page, for example "Your Blog Search Results" and then publish the post and note the URL static posts.

Step eight

In this step we will embed the Google search engine in the search box that already exists in our blog. As an example I will use a search box that resembles a Google search box on the tutorial ago.

HTML code of the search box that looks like this

</button>

</form>

</div>

Note the code below

Please replace the code above to be like below

Please replace the URL posting STATIC IN STEP SEVEN with a static page URL to Search Results that you created in step seven earlier.

Then add the following code after the code before

Please replace the CODE SEARCH ENGINE OF STEP FIVE ID code search engine ID that you get from the fifth step above.

Then complete after changes and additions, the appearance of the HTML code of the search box at the top would be like below.

</button>

</form>

</div>

Done ... until here we are already embedded Google Search Engine search box on the blog.

You could also try some of the themes to see search results that you can select the menu "Look And Feel" as in the sixth step. Selahkan select a theme and then "Save". To see the themes we choose please look on our blog search results. Please do searching on our blog to get its search results. If you want to try other themes simply choose again on the "Look And Feel" in the Google search engine page and then "Save" then please refresh the search results page to see the changes. Do it like that to try other themes. You can also customize the search results to see her on the option "Customize" in the "Look And Feel"

After making some changes in the menu "Look And Feel", you only need to "Save" does not have to do a "Save And Get Code" and then refresh the search results page to see the changes.

Here too there is often a case of see results percariannya into squares with a border. That's because there is the CSS code for a table with a border in your HTML template. Please set the conditional tag for the results page percariannya by eliminating border on the table like the following example to example conditionalnya tag:

<b:if cond='data:blog.url == "STATIC posting URL TO SEARCH RESULTS"'>

table {border:0}

</style>

</b:if>

In the conditional tag above you also can make CSS to widen the search results page to full page by eliminating some other elements eg a static page width sidebar if your blog is not full pages.

Just a suggestion for you

If you have an Adsense account, then you can integrate your adsense on Google Custom Search Engine on your blog menu Setup >> Making Money, please start your homework adsense how to connect you with your Search Engine blog on the link provided there. Or just read the post I link Adsense with the Google Custom Search blog HERE.

How to Connect Adsense With Google Custom Search Blog

2016-10-31T04:57:00.001-07:00

Some time ago I have discussed about how to create a Google Custom Search in the search box on our blog. By using the custom search will facilitate the lawyer's index in the search for blog posts that match the query used by a visitor or Searcher in our blog.

In addition, to better facilitate the search with custom search our blog can also activate the feature sorting by relevance in the Google Custom Search as I have discussed earlier on the link below.

Aside from that, if we membunyai Adsense account or a blog we have been associated with Adsense, to increase the coffers of dollars we can link your AdSense account with Google Custom Search. When there are visitors who use the search box to search for blog posts, it will show also the Google ads on search results that have been connected with our Adsense account. Usually, Google ads will appear on the right side of search results.

How to connect your Adsense account with Google Custom Search is fairly easy, but it should be noted that your blog has been associated with Adsense account and blog we've been using Google Custom Search in its search box.

Please open your Google Custom Search blog HERE. Then please go to the Make Money tab and enable Search Engine Monetization like in the image below. Then the custom search will automatically associate the Adsense blog with a custom search.

That way we can increase the coffers of dollars of custom search in our blog. Good luck...

Set the Layout of Adsense Ads Between Posts Homepage Blogspot

2016-10-31T04:23:00.000-07:00

Set the Layout of Adsense Ads Between Posts Homepage Blogspot

Actually, to set the adsense ads between posts on the front page (homepage) blogspot is provided by Blogger. Through edit gadget blog posts in the layout (layout), we can arrange for your ad to appear in the post on the main page and how many ads were shown.

But in my opinion, to see ads in a way was sometimes disturbing to see the front page of the blog that we have procedures in such a way. And we can not set up under the posts to how ads are displayed.

Now with conditional tags like that we also can adjust the adsense ads on the front page blogspot without damaging the front page display.

Usually to regulate the form of posts on the front page either list or grid form, good background and other post will use the class post (.post). Now with class post that also we will use to place an ad so that it looks the same as the display of posts.

To display ads between posts on the main page of the blog, we'll keep it in the <b: includable id = 'main' var = 'top'> that would normally be visible or as below.

<b:includable id='main' var='top'>

<b:if cond='!data:mobile'>

<b:include data='top' name='status-message'/>

<data:defaultAdStart/>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.isDateStart and not data:post.isFirstPost'>

</div></div>

</b:if

<b:if cond='data:post.isDateStart'>

</b:if>

<b:if cond='data:post.dateHeader'>

</b:if>

<b:if cond='data:post.isDateStart'>

</b:if>

<b:include data='post' name='post'/>

<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>

</div>

<b:if cond='data:post.includeAd'>

<b:if cond='data:post.isFirstPost'>

<data:defaultAdEnd/>

<b:else/>

<data:adEnd/>

</b:if>

<data:adCode/>

</div>

<data:adStart/>

</b:if>

</b:loop>

<b:if cond='data:numPosts != 0'>

</div></div>

</b:if>

<data:adEnd/>

</div>

<b:include name='nextprev'/>

<b:include name='feedLinks'/>

<b:else/>

<b:include name='mobile-main'/>

</b:if>

<b:if cond='data:top.showDummy'>

<data:top.dummyBootstrap/>

</b:if>

</b:includable>

To display ads, please use the code below

<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item"'>

<span class='title-ads'>Advertisement</span>

ADS code here…!

</div>

</b:if>

1. Ads at the beginning or at the top post.

Please save the code to display their ads just below the code

<b:include data='top' name='status-message'/>

2. Advertising in the end or the bottom of posts

Please save the code to display their ads just below the code

<b:if cond='data:numPosts != 0'>

</div></div>

</b:if>

<data:adEnd/>

3. Advertising in between posts

To display ads between posts, please add the code index = 'x' in the code below

<b:loop values='data:posts' var='post'>

So it becomes like below

<b:loop values='data:posts' var='post' index='x'>

And please use the following code

<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item"'>

<b:if cond='data:x==1'>

<span class='title-ads'>Advertisement</span>

ADS code here…

</div>

</b:if>

<b:if cond='data:x==3'>

<span class='title-ads'>Advertisement</span>

ADS code here…

</div>

</b:if>

Number 1 means that the ads displayed under the posts, and the number 3 means the ad is displayed under the four posts. So please adjust these figures to set the ads between posts.

Then save the code right below the following code

<b:include data='post' name='post'/>

<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>

</div>

And add this CSS to set the word "Advertisement ", if not quite fit please adjust.

.post span.title-ads{font-size:16px;font-weight:bold;display:block;margin:10px 0}

So the complete appearance will be as below

<b:includable id='main' var='top'>

<b:if cond='!data:mobile'>

<b:include data='top' name='status-message'/>

<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item"'>

<span class='title-ads'>Advertisement</span>

ADS code here…

</div>

</b:if>

<data:defaultAdStart/>

<b:loop values='data:posts' var='post' index='x'>

<b:if cond='data:post.isDateStart and not data:post.isFirstPost'>

</div></div>

</b:if>

<b:if cond='data:post.isDateStart'>

</b:if>

<b:if cond='data:post.dateHeader'>

</b:if>

<b:if cond='data:post.isDateStart'>

</b:if>

<b:include data='post' name='post'/>

<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>

</div>

<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item"'>

<b:if cond='data:x==1'>

<span class='title-ads'>Advertisement</span>

ADS code here…

</div>

</b:if>

<b:if cond='data:x==9'>

<span class='title-ads'>Advertisement</span>

ADS code here…

</div>

</b:if>

<b:if cond='data:post.includeAd'>

<b:if cond='data:post.isFirstPost'>

<data:defaultAdEnd/>

<b:else/>

<data:adEnd/>

</b:if>

<data:adCode/>

</div>

<data:adStart/>

</b:if>

</b:loop>

<b:if cond='data:numPosts != 0'>

</div></div>

</b:if>

<data:adEnd/>

<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item"'>

<span class='title-ads'>Advertisement</span>

ADS code here…

</div>

</b:if>

</div>

<b:include name='nextprev'/>

<b:include name='feedLinks'/>

<b:else/>

<b:include name='mobile-main'/>

</b:if>

<b:if cond='data:top.showDummy'>

<data:top.dummyBootstrap/>

</b:if>

</b:includable>

May be useful…

Add Author Box Looks Like G + Badge in Blogger

2016-09-25T05:29:00.002-07:00

Add Author Box looks like G + Badge in Blogger

Usually author box shown below the post, now many times we save the author of this box in the sidebar of the blog for author box below the post is already too mainstream. Author of this box I created something like the Google+ badge that then I add the social media profile button, a button to follow Blogger and subscribe button or you can add other buttons.

If you are interested in trying author ala G + Badge box in the sidebar of this blog, please follow the steps below.

1. First Steps

Because auhtor this box using the Font Awesome to display the social media buttons, so make sure you've added Font Awesome on your blog, I encourage you to use the latest Font Awesome.

2. Step Two

Please save this CSS code above the </ head>

.sosmed-author,a.authorname,h2.author-title,a.authorname-url{display:block;text-align:center}

.authorbox{width:300px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_8ls_at2nz8R0pFCNUn0cnthfR6Vez6UQRjf83-zIcSyLSOHo-PrcggQWhiUshP_8XserPadVQpDMZkhzaCh1OWsBMzyOwQ-zsM0Gs7Xax4a2V2tvKRuM_YyBHYxtO6isJLYKHHO71q8/s300-fcrop64=1/,00001ad4fffff235) top center no-repeat #fff;border:1px solid #dedede;border-radius:3px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding:16px 0 0;margin:0 auto;}

h2.author-title{font-weight:bold;text-decoration:none;margin:0 auto 10px;font-size:22px;color:#fff!important}

.authorbox img{margin:55px auto 0;border-radius:100%;display:block}

a.authorname{margin:10px auto;font-weight:400;font-size:20px!important;text-decoration:none;}

a.authorname-url{margin:0 auto 10px;font-weight:400;font-size:16px!important;text-decoration:none;}

.sosmed-author li,.sosmed-author ul{list-style:none}

.sosmed-author ul{margin:0!important;padding:0!important}

.sosmed-author{margin:0 auto!important;padding:10px 0;background:#dfdfdf;border-top:1px solid #dedede}

.sosmed-author li{display:inline-block;margin-right:10px}

.sosmed-author li:last-child{margin-right:0}

.sosmed-author li a,a.authorname,a.authorname-url{color:#555!important;transition:all .4s ease-out}

.sosmed-author li a:hover,a.authorname:hover,a.authorname-url:hover{color:#111!important}

a.button-author{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff!important;font-weight:bold;font-size:16px!important;margin:10px 10px 0;padding:5px;text-align:center;border-radius:3px;transition:all .4s ease-out;text-decoration:none}

a.button-author:hover{background:#357ae8;border:1px solid #2f5bb7}

</style>

To change the background image I marked above with background G + profile you, please you go to page G + profile you then right click on the background G + profile and Copy image address and then change the URL of the image I marked above with the URL of the background image G + profiles just now your copy.

3. Third Step

Please save the HTML code below in the sidebar gadget HTML / JavaScript in the Layout.

Author

</h2>

<a class="authorname" href="https://plus.google.com/+ProfilUnikAnda" rel="author" target="_blank" title="Nama Profil G+ Anda">Nama Profil G+ Anda</a>

<a class="authorname-url" href="https://plus.google.com/+ProfilUnikAnda" rel="author" target="_blank" title="google.com/+ProfilUnikAnda">google.com/+ProfilUnikAnda</a>

<ul>

</ul>

<a class="button-author" href="URL HALAMAN STATIS UNTUK FOLLOWER BLOG" target="_blank" title="Follow This Blog">Follow This Blog</a>

<a class="button-author" href="URL FEEDBURNER BLOG ANDA" rel="nofollow" target="_blank" title="Subscribe This Blog">Subscribe This Blog <i aria-hidden="true" class="fa fa-paper-plane"></i></a>

</div>

Customization:

• To replace the photo that I've circled above with a photo G + profile you, please you go to page G + profile you right click on a photo G + profile and Copy image address and then change the URL of photo I marked above with the URL of photo G + profiles just now your copy.

• Please adjust for profile name and url G + profile and other social media profile URL.

4. Step Four

Please keep the following javascript code above the </ body>. This code to download the profile photo defer, if in your existing blog this code, the following code does not need to be added again.

//<![CDATA[

var imgDefer = document.getElementsByTagName("img");

for (var i = 0; i < imgDefer.length; i++) {

if (imgDefer[i].getAttribute("data-src")) {

imgDefer[i].setAttribute("src", imgDefer[i].getAttribute("data-src"));

}

//]]>

</script>

Done ... good luck.

Jquery for External Link Rel Nofollow And Open New Tab

2016-09-25T05:02:00.003-07:00

Jquery for External Link Rel Nofollow And Open New Tab

Nofollow is the value for the rel attribute in an HTML element that aims to instruct search engines to not explore the link so it does not affect the ranking in the search engine index. Usually rel = "nofollow" added to the external links or links that lead to the outside of the website or blog.

To make it easier to add rel = "nofollow" on external links automatically, we could use jquery. It is useful to overcome the external links were added outside of our control such as in a forum that allows members to create posts. Thus, although members of the forum made a post by applying an external link, then the link will automatically add rel = "nofolow".

To use an external jquery this nofollow link rel Please copy the code below and save the above code </ body> and make sure we've put that script library jquery his work. In addition to adding rel = "nofollow", this script also add target = "_ blank" so that external links open in a new tab when a link is clicked.

//<![CDATA[

$("a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');

//]]>

</script>

Good luck....

Add Responsive PopUp Google Custom Search on Blogger

2016-09-24T21:51:00.003-07:00

Add Responsive PopUp Search Result Google Custom Search on Blogger

Actually, to create a search result or search results Google Custom Search floated already provided by Google with the appearance or layout overlay. But I was intrigued by Blogger search box that displays search results hovering below the search box (actually a Blogger search box is pretty cool, but I think its news search results of the search are not as accurate as the Blogger Google Custom Search). For that I am interested in trying to make a Google search box that looks like it.

Then I look for the adjustment of the layout provided by Google Custom Search, then I modified to get the look cool like the search box to see Blogger in general.

DEMO

How, keen to give it a try? Please follow the steps below.

1. Please go to Google Custom Search and simply create a search box to your blog by entering the URL of your blog as shown below.

2. After you click the Create button, a new page will appear and click on the Control Panel to modify the zoom.

3. On the menu on the left select the Look and Feel with the Layout tab above and select Two Column view and then save the changes.

4. Then switch on the Theme tab above and select the Defaults view and save the changes.

5. Please click the Setup menu on the left side with the Basics tab at the top and click the Search Engine ID to get ID Google Custom Search blog and record his or her ID. If your Adsense publisher, please connect Google Custom Search with Adsense Make Money tab and simply follow the instructions.

6. Next we turn to our blog to start installing the Google Custom Search blog, please use the code below to display the search box. Please save the code where you want to display the search box to replace the previous search box on the Edit HTML. Can also be saved in the sidebar gadget HTML / JavaScript on the layout.

</div>

7. Copy the CSS code below and save the above code </ head>

#search-box{width:100%;padding:0;margin:0 auto}

.gsc-results-wrapper-visible{background:#fff;padding:0 0 10px!important;-webkit-box-shadow:0 3px 5px rgba(0,0,0,.2);-moz-box-shadow:0 3px 5px rgba(0,0,0,.2);box-shadow:0 3px 5px rgba(0,0,0,.2);border:1px solid #ddd!important;width:400px;height:auto;max-height:500px;position:absolute!important;top:100%;right:0;z-index:10000;margin:10px 0 0;overflow:auto}

.gsc-search-box-tools .gsc-search-box .gsc-input{padding-right:5px!important;}

.cse .gsc-search-button input.gsc-search-button-v2,input.gsc-search-button-v2{padding:6px!important}

input.gsc-search-button{margin-top:3px!important;margin-left:0!important}

.cse .gsc-control-cse,.gsc-control-cse{background-color:#fff;border:none!important;padding:0!important}

#gs_cb50,#gs_st50,.gsib_b{vertical-align:middle}

a.gsst_a{line-height:1}

.gsc-result .gs-title{height:auto!important;word-wrap:break-word}

.gsc-results-wrapper-visible table.gsc-search-box{position:relative}

.gsc-results-wrapper-visible table{border-collapse:collapse;border-spacing:0}

.gsc-results-wrapper-visible table.gsc-search-box{border-style:none;border-width:0;border-spacing:0 0;width:100%;margin-bottom:0!important}

.gsc-results-wrapper-visible table.gsc-search-box td.gsc-input{padding-right:5px!important}

.gs-web-image-box-landscape img.gs-image,.gs-web-image-box-portrait img.gs-image{margin-left:7px;max-width:60px!important;max-height:60px!important}

.gs-image-box.gs-web-image-box.gs-web-image-box-portrait{width:80px!important}

.gs-webResult.gs-result a.gs-title:link{padding-left:0!important}

.gs-promotion div.gs-visibleUrl-long,.gs-promotion div.gs-visibleUrl-short,.gs-result .gs-title:hover,.gs-result .gs-title:hover *,.gs-webResult div.gs-visibleUrl-long,.gs-webResult div.gs-visibleUrl-short{color:#e8554e!important;transition:all .4s ease-in-out}

.gs-result .gs-title,.gs-result .gs-title *{color:#333!important;text-decoration:none!important}

.gs-result .gs-snippet{font-weight:400;word-wrap:break-word}

.gsc-control-cse .gsc-table-result b,.gsc-control-cse b{color:000!important;transition:all .4s ease-in-out}

.gsc-orderby-container{padding-right:10px!important;}

@media screen and (max-width:414px){.gsc-results-wrapper-visible{width:100%!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}}

</style>

To set the width of the search box please adjust the width at the css code # search-box

8. Then please copy the javascript code below and save the above code </ body> or you can also download the javascript code defer this.

//<![CDATA[

var gcseDiv=document.getElementById("gcsengine");gcseDiv.innerHTML="<gcse:searchbox></gcse:searchbox>",function(){var e="006106396690849460:uexjrtd0osq",t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=("https:"==document.location.protocol?"https:":"http:")+"//www.google.com/cse/cse.js?cx="+e;var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(t,c)}();

function myFunction() {

document.getElementById("gcsresults").innerHTML = "<gcse:searchresults></gcse:searchresults>";

}myFunction();

//]]>

</script>

So please replace the code that I've circled above with Search Engine ID blog you obtained in step 5. Done ....

In addition to this search box to generate search results hovering below the search box, the search box is also valid HTML5. We know that the Google Custom Search search box is not valid HTML5.

If you previously had to use boxes or percarian Google Custom Search, you only need to perform the steps starting from step 3 above.

How to Install Popup Search Box Google Custom Search in Blogger

2016-09-24T19:00:00.004-07:00

How to Install Popup Search Box Google Custom Search in Blogger

This time I will make a popup search box with the Google Custom Search search button can be placed anywhere, for example, placed in the header or other menu. When the search button is clicked, the Google Custom Search search box will appear and the search results will appear below the search box.

If you want to try it, please follow the steps below.

1. Please keep the following code to display the search icon, for example in your blog header menu.

2. Please save the CSS code below the above code </ head>

.searchbutton{text-decoration:none}

.searchbutton:after{content:"\f002";font-family:FontAwesome;font-style:normal;font-weight:700;text-decoration:none;position:relative;}

.search-box{position:fixed;top:10%;left:20%;right:20%;max-width:879px;background:rgba(255,255,255,1);color:rgba(0,0,0,.6);box-shadow:0 2px 7px rgba(0,0,0,.2);display:none;visibility:hidden;padding-top:54px;}

.search-box.active{display:block;visibility:visible;margin:auto;z-index:1002;-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}

@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}

50%{opacity:1}}

@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}

50%{opacity:1}}

.search-box .inputpoint {background:#333;margin:0 auto;padding:10px 12px 6px;position:absolute;top:0;left:0;right:0}

#searchbox-layer{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.5);display:none;z-index:1001}

.search-box .close-searchbox{cursor:pointer;position:absolute;top:-20px;right:-20px;width:20px;height:20px;padding:0;margin:0;border:0;outline:0;border-radius:100%;font-weight:bold;color:#555;background:#fff;font-size:24px;font-family: Arial;text-align:center;line-height:20px;transition:all .3s;z-index:999}

.search-box .close-searchbox:hover {color:red;}

.search-result .gsc-results-wrapper-visible{max-height: calc(100vh - 200px);overflow-y:auto;margin-bottom:10px}

.gsc-input-box{border-radius:2px}

.gsc-input-box-focus,.gsc-search-box .gsc-input>input:focus{border:1px solid #b9b9b9!important;border-top-color:#a0a0a0!important;-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1)!important;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.1)!important;outline:0!important}

.gsc-results-wrapper-visible{background:#fff;padding:0 10px!important;border:none;width:100%;height:100%;margin:10px 0 0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}

.gsc-search-box-tools .gsc-search-box .gsc-input{padding-right:5px!important;font-family:Roboto,Arial,sans-serif!important;font-size:14px!important;font-weight:500!important;}

.cse .gsc-search-button input.gsc-search-button-v2,input.gsc-search-button-v2{padding:6px!important}

input.gsc-search-button{margin-top:3px!important;margin-left:0!important}

.cse .gsc-control-cse,.gsc-control-cse{background-color:#fff;border:none!important;padding:0!important}

#gs_cb50,#gs_st50,.gsib_b{vertical-align:middle}

a.gsst_a{line-height:1}

.gsc-result .gs-title{height:auto!important;word-wrap:break-word}

table.gsc-table-result{border-collapse:collapse;border-spacing:0}

table.gsc-search-box{border-style:none;border-width:0;border-spacing:0 0;width:100%;margin-bottom:0!important}

table.gsc-search-box td.gsc-input{padding-right:5px!important}

.gs-web-image-box-landscape img.gs-image,.gs-web-image-box-portrait img.gs-image{margin-left:7px;max-width:60px!important;max-height:60px!important}

.gs-image-box.gs-web-image-box.gs-web-image-box-landscape,.gs-image-box.gs-web-image-box.gs-web-image-box-portrait{width:70px!important}

.gs-webResult.gs-result a.gs-title:link{padding-left:0!important}

.gs-result .gs-title,.gs-result .gs-title *{color:#333!important;text-decoration:none!important}

.gsc-control-cse,.gsc-control-cse .gsc-table-result{font-family:Roboto,Arial,sans-serif!important;font-size:13px}

.gs-result .gs-snippet{font-weight:300;word-wrap:break-word;padding-left:10px!important}

.gsc-control-cse .gsc-table-result b,.gsc-control-cse b{font-weight:900!important;color:000!important;transition:all .4s ease-in-out}

.gsst_a .gscb_a{font-family:Roboto,Arial,sans-serif!important;font-size:18px!important;font-weight:900!important;color:#555!important}

.gsst_a:focus .gscb_a,.gsst_a:hover .gscb_a{color:#333!important}

.gsc-control-wrapper-cse{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

</style>

Because the search icon using the Font Awesome, so make sure you have installed Font Awesome on your blog.

3. Then please keep the following code above the </ body>

//<![CDATA[

(function() {

var cx = '006106396690849460662:6ebjomhf_kq';

var gcse = document.createElement('script');

gcse.type = 'text/javascript';

gcse.async = true;

gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(gcse, s);

})();

//]]>

</script>

<gcse:searchbox></gcse:searchbox>

</div>

<gcse:searchresults></gcse:searchresults>

</div>

</div>

//<![CDATA[

function openSearchbox(){document.getElementById("search_box").classList.toggle("active");document.getElementById("searchbox-layer").style.display = "block";}

function hidesearchbox(){document.getElementById("search_box").classList.toggle("active");document.getElementById("searchbox-layer").style.display = "none";}

//]]>

</script>

Please replace the code 006106396690849460662: 6ebjomhf_kq with Search Engine ID of your blog, Search Engine To get the ID blog, please follow the tutorial on the post below.

Add Disqus Recent Comments Widget For Blogger

2016-09-24T18:37:00.000-07:00

Add Disqus Recent Comments Widget For Blogger

Actually I am more lazy to Blogger Widget modification, but it feels bored otherwise tamper coding. Finally I tried to modify a widget for recent comments Disqus comments that it seems now already widely used Blogger.

I took a recent script Disqus comment to this Blogger and modify it a little zoom and adding rel = "nofollow" and target = "_ blank" in its external link automatically with jquery in order to become more seo friendly.

In order not to have to go to the Edit HTML template so that no error will actually make headaches hehehe .... At the moment you can directly add widgets recent Disqus comment directly on the gadget HTML / JavaScript in the Layout. But if Blogger is no error, for its style css advised to be stored in the edit HTML. And I made this widget is also responsive.

And make sure you have saved jquery library (any version) in order to edit your blog's HTML script to add rel = "nofollow" and target = "_ blank" in its external link could walk.

Please add the script below the gadget HTML / JavaScript sidebar in Layout.

#RecentComments{display:block;width:100%;margin:0 auto;padding:0 10px;border:1px solid #ddd;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:500px;overflow:auto}

.dsq-widget ul.dsq-widget-list{padding:0;margin:0;text-align:left}

img.dsq-widget-avatar{margin:3px 10px 7px 0!important;width:58px!important;height:58px!important;padding:0!important;float:left;border-radius:3px!important}

p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px!important}

p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}

li.dsq-widget-item{margin:0!important;padding:6px 0 4px!important;list-style-type:none;clear:both;border-bottom:1px solid #ddd}

li.dsq-widget-item:last-child{border-bottom:none}

a.dsq-widget-user{font-weight:700;display:block!important;margin-bottom:5px}

</style>

//<![CDATA[

document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://USERDISQUS.disqus.com/recent_comments_widget.js?num_items=20&hide_mods=1&hide_avatars=0&avatar_size=32&excerpt_length=80\"></scr" + "ipt>");

//]]>

</script>

//<![CDATA[

$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');

//]]>

</script>

</div>

Customization :

1. To set the widget height height: 500px on css #RecentComments

2. Replace the code USERDISQUS by Disqus username of your blog

3. The number of comments NUM_ITEMS = 20

With this will allow you to see and reply to comments coming Disqus. May be useful....

How to Install Disqus Comment Valid HTML5

2016-09-24T18:17:00.002-07:00

How to Install Disqus Comment Valid HTML5

After considering for some time, I finally returned after a previous migration to Disqus Disqus I tinggalakan. Among the main consideration is to minimize the spam into comment, but it certainly still many other advantages.

Back to the title, How to Easily Add Comment Disqus Valid HTML5, is actually the easiest way to install Disqus comment that is by installing the widget, click the logo with bloggers Disqus. Actually, this is how I wrote 4 years back (Read: Installing Disqus Comments in Blogger / Blogspot), but of course these tutorials undergone some cosmetic changes in Disqus, making it less suitable even if essentially the same.

Currently, I'll explain the easiest way beyond installing the widget. In addition to adding loading, certainly not Valid HTML5. OK .. immediately to my tutorial :

Copy this code, replace the code that is marked by USERNAME blog. Save the code above the </ body>:

var disqus_shortname = 'USERNAME-BLOG-ANDA';

var disqus_blogger_current_url = "<data:blog.canonicalUrl/>";

if (!disqus_blogger_current_url.length) {

disqus_blogger_current_url = "<data:blog.url/>";

}

var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>";

var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>";

</script>

<b:if cond='data:blog.pageType == "item"'>

(function() {

var bloggerjs = document.createElement('script');

bloggerjs.type = 'text/javascript';

bloggerjs.async = true;

bloggerjs.src = '//'+disqus_shortname+'.disqus.com/blogger_item.js';

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);

})();

</script>

</b:if>

(function() {

var bloggerjs = document.createElement('script');

bloggerjs.type = 'text/javascript';

bloggerjs.async = true;

bloggerjs.src = '//'+disqus_shortname+'.disqus.com/blogger_index.js';

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);

})();

</script>

Save the template. Actually in this way is sufficient, however Comments blogger usually appears first, then tertututp by Disqus Comments. In order not appear bloggernya comment, add code display: none; on #comments, for example:

#comments {display: none;} //,,,,,,,,, ........................ other code, existing ,

To do placements or Disqus Comments Counter displays the number of Disqus comments, I will post separately.

May be useful...

How to Add Disqus Comments at Static Pages in Blogger

2016-09-24T17:59:00.000-07:00

How to Add Disqus Comments at Static Pages in Blogger

Add Disqus to Blogger Static Pages - By default DISQUS only display comments on the post pages only. Sometimes we want to put komenar in all the static pages or static pages specified.

Static pages are pages that aloof and did not go to the archives. As an example:

http://name-yourblog.blogspot.com/p/example-halaman.html

Showing comments DISQUS at all static pages

Log in to Edit Template, to facilitate the search of code that will be edited, find the code disqus_blogger_canonical_homepage_url. Look under that code, that we will edit. There are two alternative ways to show you comment on this static page:

First alternative: by removing the conditional tag. The trick, remove the code marked in red, as in the screenshot.

Alternative two: Disable the code to provide comment tag is <! - ...... ->, As in the image below

this.

Displaying DISQUS Comments on Specific Pages

That is, the comments will appear on Page Posts and Pages Specific alone. For the other pages remain komentad DISQUS is not in the show.

The way we have to insert a <: b: else /> then add a question PAGE URL. Examples of additional code in the mark blocks:

<b:if cond='data:blog.pageType == "item"'>

script comment disqus

<b:else/>

<b:if cond='data:blog.url == "URL- PAGE-SPECIFIC "'>

script comment disqus

</b:if>

The results are as follows (additional pages like in the picture, which is marked in red).

May be useful....

Download FIRMWARE Lenovo Yoga Tab 3 8 inch 850F

2016-09-24T07:10:00.003-07:00

FIRMWARE Lenovo Yoga Tab 3 8 inch 850F

Download

How to Remove Virus on Android Without Anti virus

2016-09-23T08:17:00.004-07:00

How to Remove Virus on Android. Without Anti virus

Android is notoriously prone to virus attacks or malware inserted on the application. This is not only due to the support of the ease in making the application, but also no strict requirements and selection of applications on the Google Play Store itself. Using Antivirus could be a solution, but what if it turns out the virus is pinned on the Antivirus application? Well, I'll give you a way to eliminate the virus in your Android without Antivirus.

Should install antivirus applications on Android? You can sort out their own answers. But, if you're that much curiosity with the presence or absence of the virus in your smartphone, you can use my way.

How to remove Virus on Android Without Anti Virus

Do a factory reset is always referred to as an effective way to eliminate the virus in your Android. But, the risk is you lost all your data and installed on your Android. It could be installed again, but what you can guarantee that the application does not carry the virus?

1. Log into Safe Mode

Sign in to your Android Safe Mode will allow you to operate lighter because only run core applications that came with the system. While in Safe Mode, all the applications that you install will be lost. But still, the application is not lost forever, only temporarily while in Safe Mode only. So, when in Safe Mode you can freely switch between applications without the constraints of the system, allows you also to check or clean up the files is not important, such as the file cache.

How to get into Safe Mode every Android device is different. However, the average is to use a combination of the Power button and Volume during the boot process. If you're still confused, please Googling the keyword "Safe Mode (type Android)".

2. Check the Application in Safe Mode

While in Safe Mode, please check the installed applications. Do I go to Settings - Apps, and then select the Downloaded tab. The system will eliminate all the list of third-party applications in Safe Mode, but because the virus included in the system, the virus will be seen as a third party application but can perform the function of the system. If your Android infected with the virus, it would appear the foreign application that you have never installed on your Android.

3. Remove Suspicious Applications

If you find a suspicious application, you click on the app and select Uninstall. In one case, you may find the foreign application can not be uninstalled, the application because it has given administrator access.

4. Remove foreign application administrator access

When you find a foreign application that gives administrators access to himself, your job is to remove the administrator access. How, out of the Application Settings, then go to Settings - Security - Device Administrator. Remove the suspicious application administrator access. Next, go back to Application Settings and check suspicious applications before, you should now be able to remove.

5. Exit Safe Mode

After the suspicious application removal process is complete, then you stay out of Safe Mode. How to make the restart as usual.

Well, easy is not the way menghilangkang virus on your Android? Without Antivirus else you can remove viruses that slow down the performance of your Android. I recommend to always make a back up of data and applications that you think are important after the inspection and removal of viruses as a precaution.

How to Switch Mode Android with One Finger

2016-09-23T07:58:00.006-07:00

How to Switch Mode Android with one finger

Surely many of you are already familiar with Android, especially now booming Android smartphone with a large screen size but thinner. It is very convenient when used with two hands, but different again a different story if your one hand. Smartphone you might just fall for display on smartphones support yet to use one hand.

Therefore, today many developed Android features that can facilitate you when you're using Android with one hand. One Hand mode is a mode of one hand with the features that serve to minimize the screen for easy use with one hand. There are several Android already support this feature, and most are already in default OS.

How to Switch Mode One Hand to ASUS, Xiaomi and Android Other

To enable this feature, there are several different ways in each of his device. Therefore, here Jaka give two examples of device and how to activate it.

One Hand Mode ASUS

ASUS already spend a lot of Android with a large size, for example Zenfone 6 (6 inches), Zenfone 2 (5.5 inches), Zenfone 2 laser (5.5 inches), and many more. Because of the wide size, sometimes difficult to use with one hand. Therefore, there are several Android output ASUS already equipped with One Hand Mode ASUS. Here's how to enable it:

1. The first thing to do is open the Options or Settings menu. Then you find the ASUS Customized settings.

2. Then in One Hand Mode, check the Quick Trigger.

3. Return to the start menu, press the Home button twice smartphone you're already using the One Hand Mode ASUS.

One Hand Mode Xiaomi

No less than other smartphones, Xiaomi also show off by installing features in OS Mode One Hand luggage (One Hand Mode Xiaomi). MIUI version that is equipped with One Hand Mode is MIUI 6 and above or Android Lollipop upwards. How to activate it somewhat different from ASUS, you have to shift from the Home menu to Back or Home to Menu. Follow the steps below:

1. As always used to open the Options menu and open the Additional Options or More Settings.

2. Then select the One Hand Mode.

3. Make sure that this feature is active.

4. Once you are sure that this feature is active, you can activate a number of ways such as holding the Home button and then slide it to the right or the back button.

5. Can also be done from the home button to the left or the menu button.

However, sometimes there are also other ways such as pressing the back button twice.

Swipe Lazy and Omni Swipe

Then there is the Lazy Swipe app. What's Lazy Swipe? Lazy Swipe is an application One Hand Mode additional functions, enables you to operate Android when you're lazy to open the Android as a whole. His name alone is lazy shifts, so the application of One Hand This mode is suitable for Android that does not have the features of One Hand Mode.

Download an Install Lazy Swipe New Version

Examples of applications similar to that Omni Swipe Lazy Swipe. Here are some interesting features Omni-owned Swipe:

1. Ensure that the application is one Hand mode is active.

2. You can set the theme.

3. Then set notifications you want to display.

4. Then slide the Trigger area postion.

5. Finally, you just set the other settings. Done!

How, easy right way? How to activate the mode of one hand on the ASUS smartphones, Xiaomi, and other Android this would be very helpful especially for you bikers. Now you can use one-handed mode and no more hassles when using your smartphone. Good luck!

Creating Responsive Tables with CSS and HTML in Blogger Blog

2016-09-23T07:19:00.002-07:00

Creating Responsive Tables with CSS and HTML in Blogger Blog

You've made a table in HTML? If so, this article is for you. To that end, continue reading my article. Because of the topics presented today is quite interesting, namely: Creating Responsive Tables with CSS and HTML in Blogger Blog. Blog here aimed at creating a blog with blogger plaform, to HTML offlinenya next time. Of this title may appear to be responsive question why? Starting from the widespread use of gadgets, starting from smartphone to tablet. Display webiste website / blog must follow mobile phone screen size is flexible, because so many of its people are using gadgets to carry out its activities in surfing the internet. Apart from on the table was that we knew so many potential uses, like it or not / should even make the table responsive. Ya..kalau not want to be left directly by visitors. hehe

Maybe if you go on your laptop / PC table will be normal. But, try to be opened in the gadget smartphone screen size is quite narrow, the table does not follow the screen or even sideways, beyond the side of the screen.

Creation of tables for the web using HTML code, but there should be supporting her in order to be responsive ie tables with CSS code. Because here I am not going to review what it's more about the CSS. Back to the topic we now discuss, let's just practice.

Create Table Standard

Create a new post on the blog

To the HTML tab, you typed the code below

<tr>

<th>Spesifikasi</th>

<th>Minimum</th>

</tr>

<tr>

<td>Processor</td>

</tr>

<tr>

<td>256 MB(512 MB up recomended</td>

</tr>

</table>

Please Post, When you see the results up here, the tables have not been responsive and zoom still mediocre. So let us go to the next stage

Creating CSS

√ Towards Template menu

√ Then Edit HTML

√ box appears where the HTML code

√ Instant search code </ head> (quick way: CTRL + F and typing </ head>)

√ Type the following code, the above code </ head>

/* CSS Post Table by GoWidget*/

.post-body table th, .post-body table td, .post-body table caption{border:1px solid #d8dde1;padding:.2em .5em;text-align:left;vertical-align:top;}

.post-body table.tr-caption-container {border:1px solid #d8dde1;}

.post-body th{font-weight:700;}

.post-body table caption{border:none;font-style:italic;}

.post-body table{}

.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #d8dde1;}

.post-body th{background:#109C02;color:#fff;}

.post-body table.tr-caption-container td {border:none;padding:8px;}

.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}

.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}

img {max-width:100%;height:auto;border:none;}

table {max-width:100%;width:100%;margin:1.5em auto;}

table.section-columns td.first.columns-cell{border-left:none}

table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}

table.columns-2 td.columns-cell{width:50%}

table.columns-3 td.columns-cell{width:33.33%}

table.columns-4 td.columns-cell{width:25%}

table.section-columns td.columns-cell{vertical-align:top}

table.tr-caption-container{padding:4px;margin-bottom:.5em}

td.tr-caption{font-size:80%}

√ Then you try to save and see the result

√ Congratulations table was already responsive mobile

The result is more or less like this:

Table standard (read: lots used) if the Issuer does not really need a lot of the head of the table structure. As the above example only create Specifications and Minimum alone. There is another form of tables that require the head of his table many, such as those used for table specification of mobile phones, motors, and others.

Create Table form second (specification mobile phones, motors, etc.)

√ Create a new post on the blog

√ Go to the HTML tab, then typing the code below

<tr>

<th width=35%>Peluncuran</th>

<td>Januari 2016</td>

</tr>

<tr>

<th width=35%>Kartu SIM</th>

<td>Dual SIM (Nano-SIM/ Micro-SIM, dual stand-by)</td>

</tr>

</table>

√ Recently Publish and see the results

The result is more or less like this:

Like that article tutorial on Creating Tables Responsive HTML with CSS in Blog, by creating a table that is responsive to spoil and make visitors feel at home which is open to use gadgets. good luck

Specific Marking Label with Tag Post Conditional for Blogger

2016-09-17T00:26:00.001-07:00

Specific Marking Label with Tag Post Conditional

Specific Marking Label with Tag Post Conditional As we know now Blogger to update the latest features that we can use that activity of blogging becomes more interesting. One new feature is a feature that can shorten the LambdaExpression penuisan markup on certain conditional tags so that it will be more simple and saves writing code.

For example the blog tutorial this time I will take advantage of these features in the post label on the index page. Here we can add icons, images or text. In this example I will give a post label with font awesome icon as shown below.

Not only added to the label, you can also add some specific label and distinguish zoom with ease.

How to make ?

Below is the code used to bring up the icon if you specify a specific label on the post. code below you can save before closing the code head.

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

//<![CDATA[

//Post Label

function label_pilihan(e){labelku=new Array,labelku[1]="<div class='badge badge1'><div class='badge-img'><i class='fa fa-star'></i></div></div>",labelku[2]="<div class='badge badge2'><div class='badge-img'><i class='fa fa-video-camera'></i></div></div>",labelku[3]="<div class='badge badge3'><div class='badge-img'><i class='fa fa-camera'></i></div></div>",labelku[4]="<div class='badge badge4'><div class='badge-img'><i class='fa fa-music'></i></div></div>",labelku[5]="<div class='badge badge5'><div class='badge-img'><i class='fa fa-paint-brush'></i></div></div>","Hot"==e&&document.write(labelku[1]),"Video"==e&&document.write(labelku[2]),"Gambar"==e&&document.write(labelku[3]),"Musik"==e&&document.write(labelku[4]),"Lukisan"==e&&document.write(labelku[5])}

//]]>

</script>

</b:if>

Code marked the names of the specified label and the code that you can change it later with his own creations.

Code caller

<b:loop values='data:post.labels' var='label'>

</b:loop>

For callers code you can store in the markup post.

<b:includable id='post' var='post'>...</b:includable>

Or it could also be stored in this markup

<b:includable id='main' var='top'>...</b:includable>

CSS

In order to make it look more attractive, you can add CSS as below:

/* GoWidget Post Label */

.badge{background:#95a5a6;color:#fff;position:absolute;font-weight:normal;line-height:1;bottom:0;right:0;left:0;display:block;text-align:center;width:100%;height:50px;line-height:50px;font-size:18px;z-index:1;transition:all .3s}

.badge1{background:#e89c0f;opacity:.98}

.badge2{background:#40d47e;opacity:.98}

.badge3{background:#3498db;opacity:.98}

.badge4{background:#1abc9c;opacity:.98}

.badge5{background:#95a5a6;opacity:.98}

.post:hover .badge{color:rgba(255,255,255,.6);font-size:44px;height:100%;line-height:100%}

.post:hover .badge-img{margin:85px 0 0 0}

The workings of the code above is if you give it a label on a particular post, it will automatically bring up the icon that has been modified as shown below.

DEMO

Hopefully, with the example of Mark Post Label with Tag Specific Conditional I've shared will be an inspiration to you all. thanks.

How to Install Google Play Store in Remix OS for PC

2016-09-16T07:34:00.004-07:00

How to Install Play Store in Remix OS for PC

After a long circulated in the realm of smartphones and tablets, Android could eventually be used in PC. Full PC tablets, no longer have to use the emulator like Bluestacks and his friends. Yes, now we can use the Remix OS Android on PC.

You can read the article How to Install Remix OS To Use Android on PC for how to use them. Unfortunately, it was not accompanied Remix OS Google Play. Well, here ya how to install the Google Play Store at Remix OS.

How to Install Play Store in Remix OS?

For information, Remix OS developed by Jide. Currently Jide does not include Google Play Service, including the Play Store in Remix OS. But in the future will try to include Googe Jide Play Service in Remix OS. Although it does not accompanied by the Google Play Store, you can still install the apk file extension as usual on Remix OS.

If you wish to have the Play Store in Remix OS, here's how to install the Play Store in Remix OS.

How to Install Play Store in Remix OS for PC

To use Google Play Store in Remix OS, you only need a small-sized apk. Although small, this will make the apk Remix OS on your PC more fun. Download the first GMSInstallerapk for Remix OS. Let easy, downlod apk Remix GMSInstaller for this OS directly use the browser in OS Remix!

1. If you have downloaded. Open the file manager in Remix OS, then find apk file GMSInstaller that had been downloaded. Save the file.

2. If the installation was blocked, as usual, used to activate the option Unknown Source. Such as the use of Android in general, right?

3. Then install as usual. Wait for the installation to complete GMSInstaller apk.

4. When finished, not GSMInstaller were successfully installed earlier. Then click One Click to install Google Services. Wait for the download and installation is complete. And you'll find Google Settings and Google Play Store installed on Remix OS.

5. Do not always opened its Google Play Store, but you go to Settings - Apps. Please search Google Play Service and the Google Services Framework, and then Clear Data both.

6. When you have finished making Data Clear Google Play Services and Google Service Framework, you can directly log in using your Google account on the Play Store as usual.

7 Done. And now you can use the Google Play Store at Remix OS that is installed on your PC. You can easily install the application on Remix OS, without having to download the apk its separately from outside.

Note: Perform this process on the mode of Resident Remix OS, so that all the data and applications that you install is not lost and can be used at a later time.

Good luck!

Download, Latest 9 HD Wallpaper Android 6.0 Marshmallow

2016-09-16T07:09:00.004-07:00

Download, Latest 9 HD Wallpaper Android 6.0 Marshmallow

More recently, Google has officially announced the latest Android 6.0 operating system, the Android Marshmallow. Marshmallow Android 6.0 will process API level 23, the final version of Android 6.0.

With the Android operating system, Google would also present some new wallpapers that are only on Android 6.0 Marshmallow. Here JalanTikus already encapsulates a wide range of the latest Android 6.0 hd wallpapers Marshmallow that you can use on your Android.

Wallpaper HD Android 6.0 Marshmallow

To save the picture, you just need to Right Click> Save Image As .. If you want to store the entire image at once, you can download the following zip: DownloadAndroid 6.0 Marshmallow Wallpaper HD

Wallpaper HD

Much more....

How to Install Remix OS To Use Android on PC

2016-09-16T06:35:00.002-07:00

How to Install Remix OS To Use Android on PC

Due to popular Android, there is always a new Android smartphone that comes offers a variety of new features. Not just smartphones, new applications continue to emerge to facilitate any Android user. Unfortunately, little PCs that use the Android operating system.

You can just try the experience of using Android on PC with the help of an emulator like Bluestacks, but the weight is fixed. Well, this time I will share how to use Android on a PC without the emulator. Want?

Remix OS, a New Way to Use Android on PC

Have you ever thought to use Android as the primary operating system on your PC? Could have bought Chromebooks, but it is costly. Well, mending cobain Remix OS installed on your PC. Remix Android OS is an operating system that is optimized to provide ease of use in the PC, so it is completely integrated with the mouse and keyboard installed on your PC. It looks even a bit like Windows 10, it's just that this is the Android operating system. Want?

How to Install Remix OS on PC

To be able to use Remix OS, there are some things you should know and what you need. While these Remix OS can only be used as the operating system can be installed via USB, not the operating system that can be directly installed in the Disk. So when USB is revoked, the Remix OS will disappear.

As required in order to install Remix OS is:

>> File Remix OS for PCs. Remix OS for PC you can download it directly from the official website Jidehere.

>> USB 3.0 with a minimum capacity of 8 GB. Please note, you must use a USB 3.0 yes. Because Remix OS requires a USB which has a speed of at least 20Mb / s. As a result when I use USB 2.0, the result is stuck in the flash screen Remix OS.

>> PC with an x86 architecture (since Remix OS is a variant of Android x86).

>> The ability of the PC to boot from USB.

When all is ready, the next step that you need is to create a bootable USB that contains Remix OS. The trick is as follows:

>> Plug USB 3.0 have you prepared earlier to the PC, and then extract the folder Remix OS you've previously downloaded.

>> Run USB Tool.exe RemixOS file, then the ISO tab RemixOS.iso please locate the file that you extracted earlier.

>> Next in the USB Disk tab, please select the directory to which you connect the USB 3.0 earlier. Then click OK.

The process of making a bootable USB takes a few moments. Wait until the process is complete. Once completed, you can directly use it to install the USB bootable Remix OS on your PC.

How do I install Remix bootable OS on a PC? If you have a PC capable of booting from USB, you just connect it to the USB bootable PC, then reboot and select to boot from USB. How can the entry via BIOS or by pressing the Del key + F2 during boot, this depends on the type of PC you use.

As a result, you will be faced with two choices. What will boot in Guest Mode or Resident Mode. If the entry Guest Mode, all the Android apps that are installed will be lost when you remove its USB bootable. Whereas if you choose the Resident Mode, all applications and data will be stored in the USB, and can be used in the future.

How, what you're interested in trying Remix OS on a PC? Good luck!

Save Your Android from New Virus: Quad Rooter Exploit Before It's Too Late

2016-09-12T08:05:00.002-07:00

Save Your Android from New Virus: Quad Rooter Exploit Before It's Too Late

Surely many of you are wondering whether Quad Rooter virus Exploit it? This latest Android smartphone viruses really crowded loh discussed for Google to intervene. Quad Rooter Exploit Virus is a virus new Android smartphone to date this article was written is a virus that resides in the smartphone with Qualcomm Snapdragon chipset. To the layman, the brand smartphone that uses Qualcomm's Snapdragon chipset among them Samsung, Sony, Xiaomi, and ASUS, as well as several other brands.

The danger posed by the virus Exploit Quadrooter is very detrimental, one of which related to money! Virus Quad Rooter is touted banking transactions can expose data to hackers to steal data banking transactions you do with your Android. So, arguably Quad Exploit Rooter is a toll road for cybercriminals.

Not only that, the virus Exploit Quad Rooter also makes Android agan vulnerable to keylogging and even someone whose bad intentions could track your GPS data. Some experts also believe that the Quad Rooter Exploit allows cybercriminals to tap your conversations or take videos without your knowledge by accessing the camera in Android.

There are also many risks. So how do I get rid of the virus Android Quad Rooter Exploit this? I had to do it. Check out more of this article!

Rescue Rooter Quad Android from Exploit Virus Before It's Too Late

Install Quad Rooter Scanner

The first step in how to get rid of the virus in Android smartphone is to check whether smartphonemu already infected. Use Quad Rooter Scanner that you can download in PlayStore.

Quad Rooter Launch Application Scanner

After install, run the application. Make the process of scanning and wait for it to finish. If the scanning results showed a picture of a checklist with a green circle, means you can breathe a sigh of relief because it means your Android smartphone safe from virus threats Quadrooter.

But, if the scanning results showed Biohazard image with the red circle as shown below, you should be wary but do not overdo it.

How to Delete Virus Quad Rooter Exploit

Now you already know smartphonemu Quad Rooter infected with the virus or not. If infected, the only way to cope is to update the Android OS is infected.

Precautions Quad Rooter Virus Exploit

If you are not infected smartphone Quad Rooter, the precautions that you can do to prevent the virus from infiltrating Exploit Quad Rooter namely:

1. Do not install applications from outside PlayStore.

2. If you can not clear the existing email its attachment, do not open or download attachments.

3. If a rooted Android, it is advisable to unroot again, because sometimes the applications that are used to rooting already infiltrated viruses.

4. If you want to download the system log file, please download via smartphone, preferably via a PC.

A few tips from me about how to remove the virus Quad Rooter Exploit, may be useful!

Pokemon Go Players Block by Niantic on Rooted Android Smartphone or Jailbreak

2016-09-12T07:39:00.001-07:00

Pokemon Go Players Block by Niantic on rooted Android Smartphone or Jailbreak

The bad news for the players Pokemon GO is using an Android device or iOS jailbreak diroot. Recent Niantic will formally terminate access to GO Pokemon game for players who use the smartphone 'modification' is.

Termination of this new access will be done when the Pokemon GO latest updates later, that version 0.37.0 for Android and for iOS 1.7.0. GO Pokemon was blocked access to root and jailbreak the device, of course, a lot of players who can no longer play their GO Pokemon, Pokemon GO Not Be Accessed in Smartphone Root or Jailbreak

In addition to informing blocking, Niantic also tells some of the current features of Pokemon GO update version 0.37.0 and 1.7.0. Some new features include:

1. Buddy Pokemon

2. Simplify choose small Pokemon

3. Fixed issue when hatch

4. Improved performance

5. Pokemon GO Plus support

6. and a few other minor improvements.

May be useful....

How To Know If Your WhatsApp Blocked by others

2016-09-12T07:11:00.006-07:00

How To Know If Your WhatsApp Blocked by others

Never experienced it feels blocked your friend or your girlfriend in WhatsApp, must hurt really yes. Moreover, while if you do not know if you actually have been blocked in WhatsApp. It is not fully known, but through some of the features of this WhatsApp you can find out if absolutely blocked or not.

How to Know If Your WhatsApp Blocked

1. Check Time Last Seen

Last Seen a feature of WhatsApp to inform the user that wants to send a message that this person is online or when they were last online. Of course, to see this last seen each user must activate the feature.

There are two possibilities if you can not see the last seen her, maybe she did not activate or indeed you are already blocked by him. If you can see WhatsApp last seen her then you are not blocked by him.

2. Check Blue Ticks

Blue tick this could be phenomenal in WhatsApp for end users can determine whether their chat has been read or not. To find the two men would have to turn the feature read each other's status in his WhatsApp.

Of course this has two possible too, between him not to activate or indeed you are already blocked. If you send a message and check the blue, it means you are not blocked WhatsApp.

3. Through Phone WhatsApp

Well maybe this way a little bit difficult because it must be ready topic of conversation when he picked up the phone. If you can not call, there may be no signal, locker number, or hp gebetan being damaged. But if it is proven 3 mark, it seems likely indeed you are already blocked.

Yes, if three of the above are already using and you still can not contact him, try to see him if you know his or her campus or usual place gebetan hang out and ask directly. If you have another way to determine whether WhatsApp is blocked, please comment below.

How to Use 2 Users WhatsApp In an Android device

2016-09-12T06:52:00.002-07:00

How to Use 2 Users WhatsApp In an Android device

WhatsApp is increasingly popular. In addition to light and has covered a lot of platforms, services became more complete. Not only to text, images, and sounds, and even now WhatsApp can be used to make voice calls. In order to use WhatsApp is getting better, I want to share how to use two numbers WhatsApp in an Android smartphone.

By using 2 WhatsApp in 1 Android smartphone, so you can divide where WhatsApp specifically for families is also a friend, and where to affairs work without having to carry a lot of smartphones. Do not be left alone by WhatsApp work on during the holidays, let tasty holiday. Especially ahead of a long holiday end of the year.

How to Install 2 Number WhatsApp In an Android Device

Many of the applications you can use to create 2 WhatsApp in 1 device, like OGWhatsApp or WhatsApp Plus. But usually these applications have limitations that make it unusable. But in a way that I will give, guaranteed you can use it.

Problems When Using 2 Number WhatsApp In an Android device

Arguably apk apk WhatsApp Plus and OGWhatsApp is a popular application that can be used to install 2 WhatsApp on an Android device .. Just because WhatsApp high security, making these applications always run into problems. The problem that cliché is usually the expiration of the WhatsApp application is used, because as you know that WhatsApp annual charge. Or, failing when installed as application installed WhatsApp primary.

How to Install 2 WhatsApp In an Android device using DISA App

Because other applications are always accompanied with complicated problems and how to install it, I had no other way to install ya 2 WhatsApp on an Android device. An application called Disa, will make you able to install 2 WhatsApp account in an Android smartphone. Download Disa to your Android from the link I provide.

Download DISA latest version

Disa that can be used to combine a variety of incoming messages in one place, as well as support functions to use WhatsApp account in the first 2 Android smartphone. As for how to install 2 WhatsApp in one account using Disa is as follows.

1. Once installed, open the Disa. Do a swipe continue to skip the tutorial section, and agree to its Terms of Service.

2. Select the Add Service. Then in the Plugin Manager select WhatsApp.

3. Wait for the installation to complete plugin. Usually only 2-3 seconds. then Restart application Disa.

4. After the restart, you will see WhatsApp Setting Needed. Please click on it, then when it says WhatsApp Skip Setup Wizard. These we can ignore because it will use another number for WhatsApp account both.

5. Please enter your name and number, and select Next. Just ignore the numbers 510 and 010 parts of it. Please confirm your number, then wait for incoming SMS verification. Done.

6. Done. You can start using WhatsApp two numbers in an Android device.

7. You can perform advanced settings on your WhatsApp account by selecting the Settings button, and then select the three points next to WhatsApp plugin to make any other changes you want.

Alternatively, you can click on the name of WhatsApp Plugin if you want to arrange Profile WhatsApp. You can also block numbers Disa use these tablets.

How, is not using 2 WhatsApp in 1 HP uses this Disa? No need to fear the license runs out as when using OGWhatsApp or other applications that have always failed to install. More simply, and officially available through the Google Play Store. Good luck!

How to Read Messages WhatsApp Without Unknown Sender and Without Eliminating Blue Tick

2016-09-12T06:20:00.003-07:00

How to Read Messages WhatsApp Without Unknown Sender and Without Eliminating Blue Tick

After the acquisition of Facebook, WhatsApp reached amazing success as the best messaging app in the world. Up to now, WhatsApp has used as many as 990 million users worldwide. Great is not it? Not surprisingly, then when opening WhatsApp, WhatsApp contacts you will continue to grow each day.

Although growing, WhatsApp apparently did not stop rolling the new features. The new feature is still warm rolled WhatsApp WhatsApp Web and status message has been delivered in the form of a blue tick mark.

How to Hide WhatsApp Status Legible in

For those of you who frequently use WhatsApp, it might never feel annoyed because of privacy you to ignore the message someone so threatened. Imagine, now people can know you've read the message or not. In the end, so did not enjoy it if want to ignore him, too? Well, I'm no way to hide the status nih read messages on WhatsApp.

1. Viewed from the Quick Settings

There WhatsApp incoming messages from people who are you avoiding? Can the former or even the sale. To avoid the appearance of a blue mark on the messages you read, you can read the message that the inclusion of the Quick Settings only. WhatsApp messages were read through the Quick Settings or Notification Bar will not bring up a blue tick mark sender.

2. Using the Widget

In addition to enhance the look of your Android smartphone homescreen, WhatsApp Widget has another function, which can be used to read WhatsApp messages without the sender is known. As long as you just read the incoming message in the widget, then a blue tick mark on the sender will not appear. But, once you get back, blue check mark will appear.

3. Airplane Mode Method

You alone was definitely not upset if the message has been read, but not rewarded? Yes definitely going to feel ignored. Well, so you ignore the message those measures do not hurt her feelings, you can use a simple way without the aid application. To read WhatsApp messages without giving a blue tick on the sender, you can enter Airplane Mode when messages arrive. Then read the message. Once read, you can go out Airplane Mode again. As a result, chat on the sender will not turn into a blue tick. Easy right? But this only applies to users of the iPhone, while Android does not apply.

4. Privacy on WhatsApp settings

If hard must enter Airplane Mode each incoming chats, you can use other means provided by WhatsApp. Namely by going into the settings WhatsApp, and select Account. Upon entry Account settings, select Privacy, then change your selection Nobody Last seen into, and remove the tick in the Read receipts.

Later each chat that you read will not turn into a blue tick mark in the recipient. Unfortunately, this will make you also can not know whether you've read the message recipient or not.

5. Use WhatsApp Web

Having launched the end of 2015 and then, WhatsApp Web is already supporting many web browsers. One is Mozilla Firefox. Well, by using the Mozilla browser, you can hide the blue sign in the chat you read in WhatsApp. How, install the Add-on ShutApp the Mozilla browser you use. Download ShutApp here. And this can only be used in the Mozilla browser.

To use it, click the icon WhatsApp which is on the toolbar to activate ShutApp when you're using WhatsApp Web. Once clicked, you will go directly to WhatsApp Privacy Mode. Click again to end the session if you do not want to hide the status reads in the sender WhatsApp.

6. Using WhatsApp Plus

As the name implies, WhatsApp Plus equipped with a myriad of advantages over WhatsApp Official. One of the interesting features of the flyer WhatsApp Plus is the ability to hide your online status, blue tick when messages have been read, tick the two when the message is read, and more. So, with WhatsApp Plus you can hide status easily legible on WhatsApp

Keep in mind, as the suggestions do not hide two status checklist. Since I never experienced the incoming message so slow. Download apk WhatsApp Plus at the link I provided yes. Then install WhatsApp Plus apk as usual.

Well, now you're in the privacy of WhatsApp to be more awake, right? You can ignore the message WhatsApp so your friends without having to worry about hurting his feelings.

How Adding Auto Readmore by Default Thumbnail Blogger.

2016-08-30T09:28:00.000-07:00

How Adding auto readmore by default thumbnail Blogger.

In the first post, I've explained how where I make Auto Read More with thumbnails. But the shortcomings of this script will not display thumbnails on posts that are not accompanied by pictures.

When this script has been enhanced by using the default thumbnail, either with pictures 'no image' or whatever image you like. Screen shoot like this:

Auto Readmore with Default Thumbnail

To make Auto readmore by default thumbnail, you need to perform two easy steps

1. Add javasript

2. Add HTML

Adding JavaScript

Before doing anything, I suggest backup your template to avoid unwanted things.

To menambahkakan javasript code below, save the following code before the </head>

// Replace the numbers below to set the number of characters

summary_noimg = 350;

summary_img = 280;

// Replace the numbers below to resize thumbnail

img_thumb_height = 200;

img_thumb_width = 200;

// Replace the image according to your taste

img_thumb_nosrc = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR1mMWq1iX0Ywes_PlRqFBySs6wMDpF80sb0OMnfNjB5qHLA4AJaeRtm_1Tg1vjFZrUL4w60RHTZv7BPChltDZiZvjJ_ALJm4xpCrAaP2gfj5HBqiX3fFrZpy6RwXN28cm_H-3DUWOSucw/s1600/default.png";

</script>

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

// this block of code is used to add default thumbnail to post without images

if(img.length<=1) {

imgtag = '<div style="clear:both; margin:0 10px 10px 0px;float:left;"><img src="'+img_thumb_nosrc+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';

summ = summary_noimg;

}

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

Adding HTML Code

Find <data: post.body /> and replace it with the code below

<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:blog.pageType != "item"'>

createSummaryAndThumb("summary<data:post.id/>");

</script>

</a>

</span>

<b:else/>

<data:post.body/>

</b:if>

<b:else/>

<data:post.body/>

</b:if>

Save your template, and congratulations .... You have successfully added auto readmore by default thumbnail.

FAQ

I'm already using auto Radmore first, how to change the default auto readmore with thumbnails? If you are using Auto Readmore with old Thumbnail (V.1) simply replace JavaScript in step 1.

May be useful....

Solution to the problem: H1: Zero, that is Really Bad in Chkme.com

2016-08-30T09:03:00.002-07:00

Solution to the problem: H1: Zero, that is Really Bad in Chkme.com

Solution to the problem H1 tags that are not found in Chkme.com. For those of you who like Optimization SEO certainly is not strange to Chkme.com, where we can to check whether our template SEO friendly or not. Actually, I still lay about SEO optimization, hundreds and even thousands of articles on SEO optimization and sometimes there are differences in the end, so I let it be.

Today I tried to check my SEO template Gallery template www.gallerybloggertemplates.com, and the result is not very satisfactory :( Turns H1 tag was not found. H1: Zero, that is Really Bad, and the result is only 53%. Please see screenshoot below:

After I learned, was occasionally blogs that use the logo image (logo image) is not detected by Search Engines. If you are experiencing the same thing, ie get a warning H1: Zero, that is Really Bad and Warning: Make sure you have at least one H1 tag: It represent the headline of your content / website, or Warning: Make sure you have at least one tag H1: It represents the title of your content / website, most likely, you are using the logo image on your template.

Solution to the problem H1: Zero, that is Really Bad in Chkme.com

1. Login to Blogger

2. Click Template > Edit HTML > Proceed

3. Check Expand Widget Templates

4. Find the code below

</a>

5. Add a <h1> <img ... ..... /> </ h1> to become

<h1><a expr:href='data:blog.homepageUrl' style='display: block'>

</a></h1>

6. Or you could put it like this

<h1><img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/></h1>
</a>

7. Save your Template

If there is a change in the position of the image, please edit margin or padding on img header.

Now, I check again and the results:

If there are corrections on how to resolve the h1 tag of the master SEO, please wait comments ...

May be useful...

How To Add Breadcrumbs / Navigation in the top post in Blogger

2016-08-30T08:43:00.004-07:00

How To Add Breadcrumbs / Navigation in the top post in Blogger

How to Make SEO Friendly Breadcrumbs. Many tutorials explaining how to make breadcrumbs on Blogspot / Blogger. This time I will explain how to create SEO friendly breadcrumbs and all labels indexed by Search Engines.

Breadcrumbs are a navigation menu that is above the post title like the one on my blog. This structure is different from WordPress, which could make the child category. Structures in the blogger only Home then Label. Where has several labels, it would read like this:

Home> Label1> Label2> Labels3

How to Make SEO Friendly Breadcrumbs

1. Log into Blogger

2. Click Template > Edit HTML > Proceed

3. Check Expand Widget Templates

4. Find the code ]]> </ b: skin> and save this code on it:

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

5. Find the code <b: includable id = 'main' var = 'top'>, replace with:

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:if cond='data:blog.pageType == "static_page"'>

<b:else/>

<b:if cond='data:blog.pageType == "item"'>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>

</b:loop>

» <span><data:post.title/></span>

</div>

<b:else/>

<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>

</b:if>

</b:loop>

<b:else/>

<b:if cond='data:blog.pageType == "archive"'>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>

</div>

<b:else/>

<b:if cond='data:blog.pageType == "index"'>

<b:if cond='data:blog.pageName == ""'>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>

<b:else/>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>

</b:if>

</div>

</b:if>

</b:includable>

<b:includable id='main' var='top'>

<b:include data='posts' name='breadcrumb'/>

6. Save your template.

To check please visi t: http://www.google.com/webmasters/tools/richsnippets

To test that appear several labels, copies of your posts that have the label is more than 1. and click Preview. If it successfully means breadcrumbs installed properly.

How to Hide Root Status in Android Smartphone

2016-08-20T08:33:00.004-07:00

How to Hide Root Status in Android Smartphone

ROOT is a must do if you want to open access and attractive features in Android, such as Lucky Patcher, Titanium Backup, and a few custom applications / like Root Explorer also requires root access. However, there are applications or games that are not rooted Android devices allow users to open or play. Just say it

* Kritika * .Game very interesting detects the user with access

* Xigncode * root through his or application TCASH.

Many Android users are willing to sacrifice for the sake of root and unroot their favorite apps or games. There is also among those who actually leave their apps or games to maintain the status of the root in his mobile phone. However, do not worry this time I will give you tips on how to hide the root status and how to hide the root status from being detected.

How to Hide Root Status in Android Smartphone

1. Make sure you have installed Xposed Installer ( Recent updates ) for RootCloak is xposed module.

2. Open xposed and download module RootCloak.

3. Check RootCloak in xposed module and restart the smartphone.

4. Open the application RootCloak, then choose Manage App.Customize-Apps

5. You can add applications that you want to hide the root status by selecting the plus button in the top right corner atas.Add-an-App.

6. Especially for you who want to use it for gaming Kritika, you are also obliged to add a keyword to open the Manage menu Keyword. Then add Xigncode.Customize-keywords

Restart Android smartphones and Kritika or TCASH Telkomsel and application of your choice can be opened.

It was her way of hiding root status from being detected application of popular applications such as MyTelkomsel, TCASH Telkomsel, Kritika, and much more. Good luck..

Easy Ways Android Unroot with One Click

2016-08-20T07:47:00.000-07:00

Easy Ways Android Unroot with One-Click

Root Android is a necessity for everyone, especially those who like to learn new things in Android. Many ways you can do to make Android Root in one way * How to Root All Android KingoApp * and * How to Root Android Without All PC *

With root, you can do a lot of things can not be done by Android that has not been at the root of such Greenify adding RAM, removing default applications (bloatware),

calibrating the battery Android and many more.

How Unroot Android Easy

For most smartphones, by doing root will cause the warranty of the smartphone is lost. You do not need to worry, if you are already root Android, but you do not know how to restore it as before, you can use the following ways to do * Unroot Android *.

How Unroot Android with SuperSU

Open SuperSU already installed on your Android.

Then look for the * option * Full Unroot.

Confirmation notification will appear. If you are sure, select * Continue *.

Wait a minute until the entire process is completed. If Unroot successful, Android smartphone will not restart by itself.

How Unroot Android with KingRoot

Open Kingroot

Select Menu " Uninstall KingRoot ".

If you are sure you want to delete the root, click * Continue *.

Good luck,,,,,,,,,,,

7 Ways To open Android Smartphone Lost Password Without Factory Reset

2016-08-20T07:17:00.006-07:00

7 Ways To open Android Smartphone Lost Password Without Factory Reset

Locking the smartphone is a must to secure your smartphone from the hands of the ignorant. In the Android smartphone, a password that is available can be a pattern, a combination of numbers and letters (password), PIN, or fingerprint sensor. Unfortunately, somehow the story is not rare smartphone users then forget the password you specified earlier. As a result, any Android device so it can not be accessed. I have 7 opening the Android smartphone forgotten

password without a factory reset.

How to Open Android Smartphone Lost Password Most Powerful So Far

1. Using Android Device Manager

How to open HP forgot password the first is by using the Android Device Manager. You can use the browser in Android smartphone your friend or use the computer to access the service. Make sure you sign in with the same Google account and a smartphone connected to the Internet.

Now open the link Android Device Manager, there are three options namely * Ring *, * Key *, or * Remove *. Then you select * Lock * or * Lock *. If Android Device Manager are having trouble finding your device, click the browser refresh button several times.

After clicking the Lock button or Lock, you will be prompted to enter a new password, which will replace a pattern, PIN, or password that you long to forget. Type a new password twice to confirm your selection, then click the Lock button. From here, wait at least 5 minutes. Well, now you should have been able to open smartphone

locked up with a new password.

2. Use Samsung's Find My Mobile

If the above is not successful and you happen to use a device * Samsung *. You can try out services similar to Android Device Manager specifically from Samsung namely * Find My Mobile * .. How to open the link Find My Mobile browser, then log in to your Samsung. If you have never set up a Samsung account, this method will not work.

After you log in to a Samsung account, click the button * Lock my screen * in the left panel. From here, enter a new PIN and click the button * Lock *. Within one or two minutes, lockscreen password should be changed to the new PIN that you enter and you used to unlock the device.

3. Use Features Forgot pattern

If your device is running Android 4.4 KitKat or lower, you can still use features * Forgot pattern *. After five failed attempts, you will see a message that says "Try again in 30 seconds". From there, you select the Forgot pattern, which is located at the bottom of the screen.

Usually there are two methods available, ie answering security questions or sign in with your Google account. If you choose the latter, Google will send you an email with an unlock pattern or you can change it on the spot.

4. Use the ADB for Removing Password

How to open HP forgot password or next pattern, it will only work if you have previously enabled USB Debugging and you have a computer you've ever connect with a smartphone via ADB. If you've been rooting or custom install ROM would have been not familiar with this process.

Start by connecting your smartphone to a computer with a data cable, then open a command prompt window in the installation directory of your ADB. From here, type the following command, and then press the * Enter *.

adb shell rm /data/system/gesture.key

Next, reboot your smartphone and the password should at lockscreen you are already there. But this is only temporary, so make sure you set the new password before the next reboot.

5. Use Safe Mode

As you know, there are loads of security applications on the lockscreen Android.Beberapa of them are very impressive because it can change the password in accordance with a combination of hours and minutes, date, until the status of the battery. However, sometimes there are bugs and suddenly you have not entered your smartphone.

if the problem comes from third-party applications, you can trying to do boot to * Safe Mode *. The trick vary, depending on the type and brand of your smartphone. You can browse to find a suitable combination to enter Safe Mode smarpthone you.

Having managed to get into Safe Mode, the screen lock of the third party applications will be disabled temporarily. From here, you can directly uninstall the application and then reboot your smartphone to get out of Safe Mode.

6. Create Crash Lockscreen

These methods exploit bug on smartphones running Android 5.0-5.1.1 Lollipop. Apart from that, this method will not work. First, press * Emergency * that appear on the lock screen. Then use interface dialer and enter 10 asterisks.

Then tap twice to highlight the text you enter and select copy. Repeat again and then paste it in there so that the number of characters starred doubled. Repeat the process, copy and paste to add more characters to the limit.

Next, go back to the screen lock and unlock the camera shortcut. From here, drag the notification window and tap icons * Settings *, you will be prompted to enter a password. Long press in the input field and select paste. Then repeat this process several times so that the key the screen will crash and allow you to access all smartphone interface.

7. Perform Factory Reset

If all of the open Android Smartphone forgot password at the top you've done and can not work as well. The last way is to do * Factory Reset *. That means you must give up all data stored in the internal memory of you. Factory Reset is how open Android Smartphone forgot password or the most potent pattern.

To login to the * Recovery Mode * This varies depending on the type and brand of your smartphone. It's easy, you just browsing. But usually begins by turning off the smartphone and turn it on, when the screen goes black, press the power button and hold volume down simultaneously to enter the "Recovery mode".

From here, use the volume keys to highlight an option * Wipe Factory Data Reset *, and then press the power button to select it. When the process is complete, select Reboot system now * and your smartphone back in new condition again.

That's 7 how to unlock the HP forgot password most powerful so far. Since there are many types and brands of Android, Indeed no method is completely standard to be applied. If you know of any other way, you can share the info in the comments below

How to Create Fake Location in Instagram

2016-08-19T09:18:00.007-07:00

Almost all users of social media today are very aware that he was still seen to exist whenever and wherever. Examples can update the news or current location in the Path or Instagram.

Well, this time there are unique tricks that you can use to be more visible to exist, namely by falsifying your current location. For example, now you're in Jakarta, but this way you can look as if it were in France or America.

How to Make Fake Location in Path or Instagram

The first thing you must understand is that this method only works on Android smartphones, and can not be implemented in the iPhone or PC. If you have not got Path or Instagram, maybe you can directly download Path for Android 5.1.0 from Google play store.

Following his Tutorial

1. Download Fake GPS 4.3.3 ( from the Play store ) and install on your Android.

2. Then open the "Settings" , then select "Developer Options ".

3. Search and * Check the choice "Allow Mock Location" .

4. After that, activate GPS (Location) on your Android Smartphone

5. Ok, if it is, now open the app Fake GPS that had been you install. Click the button "Search" which is below, and write country destination city name that you want to target, if it clicks * "Set Location" *.

6. Now try to open one of the applications, such as Path or Instagram, and see locations listed there.

7. You can also follow exist to check in at a particular location, for example like this:

8. Now you're in Singapore, although the body and soul you are still in your country

Good luck....

How to Use Multiple Instagram Accounts Easy

2016-08-19T08:42:00.005-07:00

Instagram is now not only a place to upload photos and apply dozens of filters interesting. But now many people make Instagram as a medium for expression, socializing, looking inpirasi, even to do business. No wonder the Instagram users continues to grow.

In fact, no secret, if one person can have more than one account Instagram. So separated between personal accounts, family, and business. For those of you who have more than one account Instagram. I have to use 6 in 1 smartphone Instagram account.

Multiple Accounts Instagram on Android

Because it has a lot of accounts, it seems complicated yes if should alternate logout and login will replace every account. For that you are having a lot of Instagram account shall nih read how to use a lot of Instagram accounts in one smartphone.

1. Use Instagram Recent

For those of you who have limited smartphone memory but would like to use a lot of Instagram account, you can using this method. One of the new features brought Instagram is * Multiple Accounts *. Multiple Accounts with Instagram's features, you can easily use multiple accounts without having complicated login and logout. Earlier this feature is only available for smartphone users who followed the beta phase, but now it has started to be available globally.

How to use Multiple Accounts Instagram? You only need to use the latest version of Instagram is available in Google Play Store then go to the tab * Profile *, and select * Settings *. Then look for the menu * Add Account * and add other accounts. Oh yeah, you can only add up to 5 accounts only.

To switch between accounts with each other, you can just go to the tab * Profile *, and * Click and hold * to bring * Multiple Accounts * Your Instagram. Or by selecting the account you want to use in the top left corner. You can also add a new account more easily via this menu. Easy, right?

2. Use OGInsta +

If you have more than one account Instagram, as well as having lots of leftovers smartphone memory, it helps you try to use OGInsta +. This is a MOD app Instagram is very well known, because it looks Instagram-like official, but is equipped with a variety of features download photos and videos from Instagram By installing OGInsta +, not only can download Instagram photos and videos with ease, but you can also add one other Instagram account.

With the ability to Multiple Accounts feature in Instagram to accommodate 5 accounts in one app, plus one new account in the application OGInsta +, then you can use 6 Instagram accounts at once in one smartphone. Good luck!

How To Download Instagram Photos and Videos Stories

2016-08-19T08:18:00.000-07:00

Since its introduction, Stories Instagram directly reap a lot of attention. How not, in addition to providing fresh air for Instagram users, its a similar Snapchat lot of controversy because it is considered mimic Snapchat

For you who else loves to scroll left and right on Instagram to from points Stories of people, I have a cool Instagram tips, namely: Download Instagram Stories, want?

He cried Play Instagram Stories!

In contrast to photos and videos that usually meets Instagram feed you, Stories kept on display Instagram will not make Instagram feed looks chaotic. To see Stories of others, you just click the circle Storiesnya, and will immediately begin the story.

Well, do not you ever come across an interesting Stories on Instagram? So pull you really want to download it. Unfortunately Instagram itself limit Stories will be visible for 24 hours. But not if you save it.

How to Save Photo and Video on Instagram Stories

By storing photos and videos shared through Instagram Stories person, you can have an exclusive video only valid for 24 hours. Once you download, you

can watch whenever and shared anywhere. The trick is:

You use the Google Chrome on your computer, and then add the Chrome extension IG Story

By adding Chrome IG Story in Google Chrome, you can see Stories of your friends directly via computer.

So not only can you see Stories of people who follow you can also view and save videos or photos from their Stories.

How to save Instagram Stories is to right click on the photo or video his Instagram Stories. Next select Save image as or Save video as .

Done. Easy huh how to download Stories were shared on Instagram? So for you who loves to point people in Stories, now you can save the photo or video them for viewing at a later time.

Solve the Problem "H1 Zero that is Really Bad in CHKME"

2016-07-22T09:06:00.000-07:00

For those of you who change the title and description of the blog with a picture or logo in the header, will certainly experience H1 Zero that is Really Bad when you check in chkme.com blog and it will reduce the value of SEO of your blog in the eyes of search engines. Error on this header will reduce the value of SEO upto 22%

How to Fix H1 Zero that is Really Bad in Chkme for blogger blog

Actually, this trick has a lot to share in another blog, but there is no harm if I shared back on this blog.

Here * How to Overcome H1 Zero that is Really Bad in Chkme *:

1. Log in to Blogger >> Templates >> Edit HTML >> Find the code below:

HTML - Go Widget

Add markup h1 tag <h1> <a ... /> </ h1> then the result will be like this:

HTML - Go Widget

Or you can also add the tag <h1> <img ... /> </ h1> and the result will be like this:

HTML - Go Widget

2. Save the template and check back in chkme.com whether your blog is resolved. If the application is correct then your blog will be back to normal.

Additional :

For validation HTML5 please delete the code marked on the markup below:

HTML - Go Widget

Enough about how Overcoming H1 Zero that is Really Bad in Chkme "Hopefully useful for all bloggers friends.

How To Convert Your Blog Into Dofollow Blog

2016-07-22T08:58:00.001-07:00

GoWidget : For some reason you want to change all the links on DoFollow blogs be, for it please follow this simple trick.

1. Login to your Blogger account, and then click Template >> Edit HTML

Please search (Press CTRL + F to facilitate Search Code) the following code:

<a expr:href='data:backlink.url' rel='nofollow'>

Next you remove all the attribute rel = 'nofollow' in the markup below:

<a expr:href='data:backlink.url' rel='nofollow'>

So if the code is removed, then the code would be like this

<a expr:href='data:backlink.url'>

Then click Save Template, finished

Well, that's * How To Convert Your Blog Into Dofollow Blog *, although quite simple. Hopefully can be useful for you all, thank you.

How to Install Breadcrumbs SEO Friendly

2016-07-22T08:12:00.002-07:00

Breadcrumbs are a navigation menu that is usually located above the title of posting a blog or website. It contained a link to the home or main page, followed by the label and then the title of the post is opened. Breadcrumbs is quite important as a contributing factor in the SEO of your blog, because with breadcrumbs we can inform visitors about the category of the article is in the blog.

Breadcrumbs which I will share it has the advantages of SEO Friendly. However, these breadcrumbs already I see for yourself that this is already SEO Friendly breadcrumbs, all labels indexed by Search Engines and most important is Valid HTML5.

How to Install Breadcrumbs SEO Friendly

1. Go to Blogger >> Save Template >> Edit HTML >> Then add the CSS code below before ]]> </ b: skin> or </ style>

/* Breadcrumbs */

.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}

.breadcrumbs a,.post-info a {color:#19abea;}

.breadcrumbs a:hover,.post-info a:hover {color:#454545;}

2. The next step, find HTML code like this post

<b:includable id='main' var='top'>...</b:includable>

3. Then add the breadcrumbs HTML code just below the code above

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:if cond='data:blog.pageType == "static_page"'>

<b:else/>

<b:if cond='data:blog.pageType == "item"'>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

Anda di sini : <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>

<b:loop values='data:post.labels' var='label'>

/ <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + "?max-results=5"' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>

</b:loop>

/ <span><data:post.title/></span>

</div>

<b:else/>

<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>

</b:if>

</b:loop>

<b:else/>

<b:if cond='data:blog.pageType == "archive"'>

<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived For <data:blog.pageName/></span>

</div>

<b:else/>

<b:if cond='data:blog.pageType == "index"'>

<b:if cond='data:blog.pageName == ""'>

<b:else/>

</b:if>

</div>

</b:if>

</b:includable>

4. Save the template.

To determine the breadcrumbs are installed properly on the blog, you can check here Google testing tool. Thus tutorial How to Add SEO Friendly Breadcrumb may be useful.

How to install Recent Post by Label with Function Tab

2016-07-22T07:41:00.001-07:00

This time GoWidget will give a tutorial how to create a widget recent post by label with a form of tabs that can be easily mounted on a blog.

Installing Recent Post by Label with Function Tab

Immediately, please follow the following tutorial :

1. Login to blogger account, open the template editor, then add the CSS code below just before ]]> </ b: skin> or </ style>

/* Recent Post Label */

.recent-labpost{margin:20px;}

.rctab-button > span{padding:15px 20px;cursor:pointer;position:relative;color:#222;display:inline-block;font-size:120%;font-weight:700;}

.rctab-button > span.active{color:#222;background:rgba(0,0,0,0.05)}

.rctab-button > span.active:before{content:'';top:0;opacity:1}

.rctab-content{padding:15px;background:rgba(0,0,0,0.05);position:relative;min-height:100px;overflow:auto}

.rctab-item{float:left;width:48%;margin:10px 1%;background:#fff;border:1px solid rgba(0,0,0,0);transition:all .3s;}

.rctab-item:hover{border:1px solid rgba(0,0,0,0.1);}

.rctab-item-inner{padding:10px}

.rctab-item img{float:left;width:120px;height:auto;}

.rctab-item h3{float:right;width:calc(100% - 130px);height:20px;margin:10px 0;font-size:120%}

.rctab-item h3 a{color:#222}.rctab-item h3 a:hover{color:#e74c3c}

.loader{position:absolute;left:50%;top:50%;margin-left:-27.5px;margin-top:-27.5px;transition:all .3s linear}

.hide-load .loader{opacity:0}

.squarin{background:#374140;width:15px;height:15px;float:left;top:-10px;margin-right:5px;margin-top:5px;position:relative;opacity:0;-webkit-animation:enter 6s infinite;animation:enter 6s infinite}

.enter{top:0;opacity:1}

.squarin:nth-child(1){-webkit-animation-delay:1.8s;-moz-animation-delay:1.8s;animation-delay:1.8s}

.squarin:nth-child(2){-webkit-animation-delay:2.1s;-moz-animation-delay:2.1s;animation-delay:2.1s}

.squarin:nth-child(3){-webkit-animation-delay:2.4s;-moz-animation-delay:2.4s;animation-delay:2.4s;background:#09c}

.squarin:nth-child(4){-webkit-animation-delay:0.9s;-moz-animation-delay:0.9s;animation-delay:0.9s}

.squarin:nth-child(5){-webkit-animation-delay:1.2s;-moz-animation-delay:1.2s;animation-delay:1.2s}

.squarin:nth-child(6){-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;animation-delay:1.5s}

.squarin:nth-child(8){-webkit-animation-delay:0.3s;-moz-animation-delay:0.3s;animation-delay:0.3s}

.squarin:nth-child(9){-webkit-animation-delay:0.6s;-moz-animation-delay:0.6s;animation-delay:0.6s}

@media screen and (max-width:768px) {

.rctab-item{float:left;width:100%;}

.rctab-item {margin:10px auto;}}

2. Next add the code below before the </ head>

//<![CDATA[

//]]>

</script>

//<![CDATA[

//]]>

</script>

Note: Edit the marked code to determine the number of posts to be displayed

3. Add the calling code is freely between the opening tag <body> and closing </ body>

Replace * LABEL NAME * above the name label on your blog.

4. Finally, save the template and see DEMO

Thus tutorial * Make Recent Post by Label with Tab function, may be useful.

How to Install Demo and Download Button Flat UI

2016-07-04T11:38:00.000-07:00

In today's tutorial * GoWidget * will share the tutorial How to Make Button Demo and Download Flat UI with additional icon Font Awesome. For the friend who had given something via blog both share a template, software, movies, and anything else that canshared will certainly require a button and download the demo.

Display button and download the demo that I share this very interesting, because there are Font Awesome icon on the button: Okay without the need for long, just follow the steps pal below this.

How to Install Button Demo and Download Flat UI

This widget uses Font Awesome , so please add a link CSS following the above </ head>

The following key demos Demos and Downloads which I made with 2 style choice

* Style 1 *

* Style 2 *

1. Go to Blogger >> Template >> Edit HTML

2. Make sure there is a script in your blog caller font style css awesome like this which is located above the </ head>. If no, please Put caller CSS style script font awesome in

Below the above code </ head>.

3. Place the CSS code below the above code]]> </ b: skin> or </ style>

* Style 1 *

/* CSS Button Style 1 */

.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}

.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}

.button li a.download{background:#3498db}

.button li a.demo:hover,.button li a.download:hover{background:#666}

.button li a.demo:active,.button li a.download:active{cursor:pointer}

.button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}

.button li a.download:after{content:'\f019'}

* Style 2 *

/* CSS Button Style 2 */

.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}

.button2 ul{margin:0;padding:0}

.button2 li{display:inline;margin:5px;padding:0;list-style:none}

.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}

.button2 li a.download{background:#3498db}

.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}

.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}

.button2 li a.demo:after,.button2 li a.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}

.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}

@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}

@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

4. Save the template.

5. To use, please use the following code when making post / (Add in the HTML tab)

* Style 1 *

<li><a class="download" href="http://www. yourblog-name.com" target="_blank">Download</a></li>

</ul>

</div>

* Style 2 *

<li><a class="download" href="http://www. yourblog-name.com" target="_blank">Download Link</a></li>

</ul>

</div>

Change * http: //www. yourblog-name.com* with links of interest

Thus tutorial How to Install Demo and Download Button Flat UI. Hopefully this tutorial helpful.

How to Add Blogger Specific Marking Label with Tag Post Conditional

2016-07-04T10:26:00.000-07:00

Specific Marking Label with Tag Post Conditional As we know now Blogger to update the latest features that we can use that blogging is becoming increasingly Interesting. One new feature is a feature Lambda Expression which could shorten penuisan markup on certain conditional tags so it will be more simple and saves writing code.

For example the blog tutorial this time I will take advantage of features The label on a post on the index page. Here we can add icons, images or text. In the example I will give a post labeled with icons such fontawesome picture below.

DEMO

Not only added to the label, you can add some specific label and distinguish zoom with ease.

How to make?

Below is the code used to bring up the icon if pal determine specific label on the post. the code below could You save before closing the code head.

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

//<![CDATA[

//Post Label

//]]>

</script>

</b:if>

Code marked the names of the specified label and code you can replace later with his own creations.

* Code caller *

<b:loop values='data:post.labels' var='label'>

</b:loop>

For callers code you can store in the markup post.

<b:includable id='post' var='post'>...</b:includable>

Or it could also be stored in this markup

<b:includable id='main' var='top'>...</b:includable>

In order to make it look more attractive, you can add CSS as follows :

/* CSS Label Post */

.badge1{background:#e89c0f;opacity:.98}

.badge2{background:#40d47e;opacity:.98}

.badge3{background:#3498db;opacity:.98}

.badge4{background:#1abc9c;opacity:.98}

.badge5{background:#95a5a6;opacity:.98}

.post:hover .badge{color:rgba(255,255,255,.6);font-size:44px;height:100%;line-height:100%}

.post:hover .badge-img{margin:85px 0 0 0}

The workings of the code above is if you give it a label on a particular post, it will automatically bring up the icon that has been modified as shown below.

Hopefully with examples * Specific Marking Label Post by Tag Conditional I've shared will be an inspiration to you all. Many thanks.

How to Upload Files JavaScript and CSS in Github.com

2016-07-02T21:00:00.003-07:00

On this time Gowidget will share how to save files JavaScript and CSS on Github. For users of web / blog or those who like the brain tweaking certainly need a blog template file storage such as JavaScript and CSS to shorten or summarize the file.

After some time ago Google has announced that Google Code will be disabled, and they recommend to use one of the best hosting service provider that GitHub to store external file.

How to Save Files JavaScript in Github

Please you follow the tutorial below:

1. Please list and Create an account in Github.com

2. Complete list please login with your Github account.

3. Select the "New Repository" on the Tab Menu section on the website, please look and see pictures and you choose "New Repository".

3. You will then be posted on the project, here you will create a folder where the files belong to you (you already uploaded). Follow the steps as shown below:

4. Then click the Plus (Create A New File Here) as shown below:

5. If so, please enter your upload JavaScript you want to save here. Give the name of the project is up to you and must use an extension in accordance with the type of file you want to upload, for example, if you insert JavaScript then the file name must be file.js or file.css

6. Then click Commit to save the new file that you created the project.

7. Next you will go back to the page previously, right click on the file and copy the link address.

8. Go to page Rawgit.com Paste link (your project from github) look at the example in the figure below, and copy the link in the box as shown below. Select only the links that I put a red box as shown below.

So please use the links that you get, for example in the blog template, widgets and so forth. Example:

<script src = 'https: //cdn.rawgit.com/gowidget051/gowidget/master/examplecode.js'>
</ script>

So how to upload files CSS to Github, may be useful

How to Install Blogger Subscription Box Above Credit Footer

2016-06-22T08:33:00.000-07:00

Tutorial blog I will share this time is a widget box subscription / subscription box that you can put on your blog. For the demo to see subscription box like * Blog GoWidget * (today) you can see in the image below.

This tutorial I created at the request of blogger friends who want to install the Subscription Box like in this blog. Actually, for those who are already familiar with coding blogs may not be difficult to find the code in a blog page, because all of the desired code would be very easy to copy and paste in passing Inspect Elements or Page Source of the blog page. However I would still share this tutorial so that you can add it easily.

How to Make Subscription Box as GoWidget above credit footer

Right away, here you just need to follow the simple steps below.

1. Go to Blogger >> Template >> Edit HTML

2. Add the following code above the code ]]></b:skin> or </ style>

/* Subscribe Box */

#subscribe-css{position:relative;padding:20px 0;background:#374760;overflow:hidden;border-top:4px solid #eee;}

.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}

.subscribe-form{clear:both;display:block;overflow:hidden}

form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}

.subscribe-css-email-field{background:#415471;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}

.subscribe-css-email-button{background:#3cc091;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}

.subscribe-css-email-button:hover{background:#37b185;}

#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}

#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}

#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}

#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}

#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}

#subscribe-css:hover p.subscribe-note span:before{width:100%;}

For color and so you can edit back to taste

3. Then add the following markup between the opening tag free

<body> and closing </ body>. For example like this blog I add in the Footer-wrapper

<p class='subscribe-note'><span>SUBSCRIBE</span> <span class='itatu'>TO</span> OUR NEWSLETTER</p>

</div>

Replace all of the code that are marked * GoWdget * with your id Feedburner

4. After that save the template and see the results.

Similarly tutorial about How to Install Subscription Box on credit footer to Blogger

Thank you and may be helpful.

How to Make All Links Open in New Tab

2016-05-19T08:40:00.005-07:00

Link on a blog a very important point, namely that the reader will still have access to the referral page where he found a new link for the click. In addition, for the blog owner it is also advantageous because visitors do not leave the blog page for their The new tab should be opened.

Here I share 2 How to Make All Links Open in New Tab.

Method 1#

The first way is by adding a script on a widget:

Note: Replace the code that is marked with the url of your blog

Save the widget.

Method 2#

The second way is by adding a target command blank on template markup:

Go to Template > Edit HTML > Copy and save the following code before </ head>

Save the template and see the results.

So on How to Make All Links Open in New Tab. Good luck.

How to Delete IFrame On Blogger Blogs

2016-05-19T08:19:00.001-07:00

What is the use of anti IFrame this script ?

Script anti IFrame is pointless to break the iframe function itself. A simple analogy like this, I have an image that has been indexed by Google Image, when other people want to see pictures or images are usually Google Image search results will display a picture of the front dilatar and sites where such images exist dilatar behind. In other words, normally we would not be brought directly to the site of the picture.

Well if you have installed anti iframe script on your blog template when the picture was clicked it will automatically redirect to the URL directly in your blog. By doing so we will also get additional traffic from image search results on the Google Image.

Okay, just go ahead. How the application was fairly easy, copy and paste the code below the above code </ head>

<b:if cond='data:blog.pageType == "item"'>

if (top.location != self.location) {

top.location = self.location

}

</script>

</b:if>

With a little extra conditional tag, anti iframe script above will only work on the blog post page. Therefore, the latest blogger dashboard will not experience an error. Because the blogger dashboard page only shows the index / homepage only.

May be useful

How to Redirect Page Not Found to Another Page

2016-05-19T08:05:00.000-07:00

When pages indexed in Google SERP, then the page is deleted. People who go to the page will see a message Page Not Found, most people will close the page not found it, so that the person is interested, we should just redirect the page not found page to other, more interesting.

How to Redirect Page Not Found Blogger to Another Page

Go directly to the tutorial yes. First, copy the following code.

yukita_redirect = setTimeout(function() {

window.location.href = 'http://YOUR-URLPAGE';

}, 10);

</script>

“ Change “ YOR-URLPAGE accordance with the url of the page you want, for instance I want to redirect the page not found page to contact the blog, then the code so like this

yukita_redirect= setTimeout(function() {

window.location.href = 'http://yourhomepageURL/p/contact.html';

}, 10);

</script>

After that, go to blogger > search preferences > message on the page is not found> edit, then paste the code in it and save your changes.

Try searching for a non-existent page on your blog, if successful then as soon as the page not found appears, the browser will open the page in the above settings.

May be useful.

How to Install Facebook Auto Like in Blog 2016

2016-05-19T07:06:00.001-07:00

Today users * Facebook * the discount fanpage increasing, but often the number of like / dislike towards fanpage we have far lower than the number of friends we have.

In addition to using the manual method with menginvite Fanpage friends that liked that we had there also is lacking more practical to install the auto script like fanpage. Requirement You must have a blog or portal to place the script autolike * this * facebook fanpage. Let us follow these steps:

How the scripts work Auto Newest Like 2016

* If there is a blog visitors in conditions facebook login, it will automatically me like only he malakukan click anywhere in your blog.

* If the blog visitors are not in a condition facebook login, when those visitors to click anywhere in your blog, it will display popup facebook login page.

How to Install Facebook Auto Like in Blog

1. Login to Blogger > Open Template > Edit HTML > Save the below code just above the </ body>

//<![CDATA[

// Auto like Facebook by GoWidget

//]]>

</script>

2. Replace the code that I mark with your fanspage address. Then save the template.

Thus a simple tutorial How to Install Facebook Auto Like in Blog. May be useful for you all.

Installing Slide Out Button Follow on Blogger Blog

2016-05-19T06:44:00.000-07:00

This time Go-Widget will provide a widget tutorial how to set up "follow this blog" that is already provided by bloggers, but here I will share the "follow this blog" effect slide out with a floating position beneath the blog you can post.

This button will be easily seen by visitors. Moreover, if the visitor interested in the articles read, did not rule out the visitor will immediately join and follow our blog via the "follow this blog" that we put on the bottom of the blog so that this button is functioning and beneficial.

How to Install Slide Out Button Follow on Your Blog

1. How to add it is very easy, just go to Blogger > Layout > Add Gadget and then add the code below:

/*<![CDATA[*/

#gowidgetfollowSubscribe{background-color:#464646;width:220px;color:#fff;position:fixed;z-index:999;right:10px;bottom:0}

.gowidgetfollowButton{background:#464646;color:#fff;font-size:13px;line-height:28px;padding:0 10px;text-decoration:none;position:absolute;top:-28px;right:0;display:block;border-radius:2px 2px 0 0;height:28px;font-weight:700}

.gowidgetfollowButton span{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ2wFwaiiKCjxzw2jzinYVvlTbpZ7L47WXyvlsDr30S0AmMQ0uJl2_h5qk5b22wDuznssZjWiO0nmFjnUDKliFiB_Gu3LeuObygMWQnSd_QgQbe1lY9Z6e7ITMcKNxwA6fmjCaryzBFt8m/s1600/follow-blogger.png") no-repeat scroll 0 3px transparent;padding-left:15px}

.gowidgetfollowButton:hover,.gowidgetfollowButton:focus,.followActive,.followActive:hover{color:#fff}

.gowidgetfollowButton:hover span,.followActive span{background-position:0 -37px!important}

.followactive{background-color:#333}

.gowidgetfollowForm{padding:15px;margin:auto;text-align:center;font-size:12px}

.gowidgetfollowForm p{margin:10px 0}

.gowidgetFollowFooter{text-align:center;font-size:11px;padding:7px 0;margin:0 0 -15px;border-top:1px solid #3c3c3c}

.gowidgetFollowFooter a{color:#aaa;background:none;text-decoration:none}

.gowidgetFollowFooter a:hover{color:#fff;background:none}

/*]]>*/

</style>

/*<![CDATA[*/

/*]]>*/

</script>

<a class="gowidgetfollowButton" href="#" title="Follow"><b>+ Follow</b></a>

<br />

<br />

<p>with Google Friend Connect</p>

</div>

Replace the code that is marked by the code * blog ID * pal. Blog ID code usually you can see on the blog dashboard browser's search bar as shown below

2. Save widget.

Thus tutorial blog Follow Add Slide Out Button in Blogger blog may be useful.

How to Add Widget Recent Post by Label in Blogger Blog

2016-04-13T12:15:00.000-07:00

This time I shared a tutorial How to Install Widget Recent Post by Labels in Blogger Blog. I share this tutorial to meet the request of visitors blogger blog GoWidget. The function of this widget is not much different from the widget recent post as generally displaying a list of the latest posts on the blog, but in this widget we can determine the article to be displayed based on the specified Label.

How to Install Widget Recent Post by Label Blog

For those who want to install the widget recent post on his blog by this label, please follow the following tutorial:

1. Go to Blogger >> Open template editor >> Save the code below before the </ head>

CSS - GoWidget

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

/* Recent Post by Label */

.bloggingpasuruanlabel1 ul,.bloggingpasuruanlabel2 ul{list-style:none;margin:0;padding:0}

.bloggingpasuruanlabel1 li,.bloggingpasuruanlabel2 li{margin:0;padding:0;}

.bloggingpasuruanlabel1 .widget,.bloggingpasuruanlabel2 .widget{margin:0;padding:0}

.bloggingpasuruanlabel1 .widget-content,.bloggingpasuruanlabel2 .widget-content{border:1px solid #e9e9e9;padding:20px;margin:0;word-wrap:break-word;overflow:hidden}

.bloggingpasuruanlabel1 h2,.bloggingpasuruanlabel2 h2,.bloggingpasuruanlabel3 h2{position:relative;margin:0;padding:15px 20px;font-size:16px;font-weight:700;text-transform:uppercase;color:#333;border:1px solid #e9e9e9;border-bottom:0}

.bloggingpasuruanlabel2 h2,.bloggingpasuruanlabel3 h2{margin:20px 0 0 0;}

.bloggingpasuruanlabel1 h2:before,.bloggingpasuruanlabel2 h2:before,.bloggingpasuruanlabel3 h2:before{content:'\f108';right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;}

.bloggingpasuruanlabel2 h2:before{content:'\f0c3';}.bloggingpasuruanlabel3 h2:before{content:'\f143';}

.bloggingpasuruanlabel1 .index,.bloggingpasuruanlabel2 .index{font-size:10px;float:right;font-weight:400;}

.bloggingpasuruanlabel1 .index a,.bloggingpasuruanlabel2 .index a{display:flex;color:#039be5;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6}

.bloggingpasuruanlabel2 .index a{color:#ef6c00;border-color:#ffa726}

.bloggingpasuruanlabel1 .index a:hover{background:#039be5;color:#fff;border-color:transparent}

.bloggingpasuruanlabel2 .index a:hover{background:#ef6c00;color:#fff;border-color:transparent}

.bloggingpasuruanlabel1 .index a:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}

.bloggingpasuruanlabel2 .index a:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}

.bloggingpasuruanabel2 span.bloggingpasuruan_meta_comment a:hover{color:#38761d!important}

.bloggingpasuruanlabel2 ul.bloggingpasuruan_thumbs li a:hover,.bloggingpasuruanlabel2 ul.bloggingpasuruan_thumbs2 li a:hover{color:#ff675c;text-decoration:none}

.bloggingpasuruan_left{width:280px;width:45.7%;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #e9e9e9}

.bloggingpasuruan_right{width:250px;width:47.5%;float:right;margin:0;padding:0}

ul.bloggingpasuruan_thumbs{margin:0;padding:0}

ul.bloggingpasuruan_thumbs li,ul.bloggingpasuruan_thumbs2{margin:0;padding:0}

ul.bloggingpasuruan_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px}

ul.bloggingpasuruan_thumbs .cat_thumb img{height:auto;width:100%;transition:all 0.2s}

ul.bloggingpasuruan_thumbs .cat_thumb img:hover{opacity:.9;}

ul.bloggingpasuruan_thumbs2 li{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e9e9e9}

ul.bloggingpasuruan_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}

ul.bloggingpasuruan_thumbs2 .cat_thumb2{float:left;margin:0 10px 0 0;width:62px;height:72px;overflow:hidden}

ul.bloggingpasuruan_thumbs2 .cat_thumb2 img{height:auto;transition:all .2s}

ul.bloggingpasuruan_thumbs2 .cat_thumb2 img:hover{opacity:.9;}

span.bloggingpasuruan_title{font-family:'Roboto Condensed',sans-serif;font-size:20px;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none}

span.bloggingpasuruan_title2{font-size:16px;line-height:1.4em;margin:0 0 3px}

span.bloggingpasuruan_title a{color:#333}

span.bloggingpasuruan_title a:hover{color:#ff675c;text-decoration:none}

span.bloggingpasuruan_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0 0}

span.bloggingpasuruan_meta{display:block;font-family:'Roboto Condensed',sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}

span.bloggingpasuruan_meta a{color:#aaa;display:inline-block}

span.bloggingpasuruan_meta_date,span.bloggingpasuruan_meta_comment,span.bloggingpasuruan_meta_more{display:inline-block;margin-right:10px}

span.bloggingpasuruan_meta_comment a:before{content:"\f0e6";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}

span.bloggingpasuruan_meta_comment a:hover{color:#ff675c!important}

span.bloggingpasuruan_meta_date:before{content:"\f133";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}

ul.bloggingpasuruan_thumbs2 li a:hover,ul.bloggingpasuruan_thumbs li a:hover{color:#ff675c;text-decoration:none}

@media screen and (max-width:1024px) {

.bloggingpasuruanlabel1 .widget-content, .bloggingpasuruanlabel2 .widget-content {padding:20px 25px;}

.bloggingpasuruan_left {width:50%;float:left;margin:0;padding:0;border-right:none}

.bloggingpasuruan_right {width:46%;float:right;margin:0;padding:0;}

ul.bloggingpasuruan_thumbs .cat_thumb {width:100%;height:auto;}

ul.bloggingpasuruan_thumbs .cat_thumb img {width:100%;height:auto;}

ul.bloggingpasuruan_thumbs li {margin:0;padding:0;}

span.bloggingpasuruan_title2 {font-size:20px;line-height:1.2em;}

span.bloggingpasuruan_summary {font-size:14px;}}

@media only screen and (max-width:768px){

.bloggingpasuruanlabel1 .widget-content,.bloggingpasuruanlabel2 .widget-content{padding:10px 20px}

.bloggingpasuruan_right{width:100%;float:left;margin:0;padding:0}

ul.bloggingpasuruan_thumbs2 li{border-bottom:0}

span.bloggingpasuruan_summary,.bloggingpasuruan_left{display:none}

span.bloggingpasuruan_title{margin:0 0 5px}

ul.bloggingpasuruan_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}

span.bloggingpasuruan_title2{font-size:18px;line-height:1.2em}}

@media only screen and (max-width:480px){

#bloggingpasuruanlabel1-wrapper,#bloggingpasuruanlabel2-wrapper{display:none}}

@media only screen and (max-width:320px){

.bloggingpasuruanlabel1 .widget-content,.bloggingpasuruanlabel2 .widget-content{padding:10px 20px}

.bloggingpasuruanlabel1 h2,.bloggingpasuruanlabel2 h2{padding:10px 20px 1px 20px}

.bloggingpasuruan_right{width:100%;float:left;margin:0;padding:0}

ul.bloggingpasuruan_thumbs li{margin:0 0 10px;padding:0 0 10px;}

span.bloggingpasuruan_title2{font-size:18px;line-height:1.2em}}

@media screen and (max-width:260px) {

.bloggingpasuruanlabel1 .widget-content,.bloggingpasuruanlabel2 .widget-content{padding:10px}

.bloggingpasuruanlabel1 h2,.bloggingpasuruanlabel2 h2{padding:10px 10px 1px 10px}

.bloggingpasuruan_right{width:100%;float:left;margin:0;padding:0}

ul.bloggingpasuruan_thumbs li{margin:0 0 10px;padding:0 0 10px;}

span.bloggingpasuruan_title2{font-size:18px;line-height:1.2em}}

</style>

</b:if>

Javascript - GoWidget

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

//<![CDATA[

//]]>

</script>

var numposts=1,numposts2=6,showpostthumbnails=!0,showpostthumbnails2=!1,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=150,thumb_width=280,thumb_height=200,thumb_width2=62,thumb_height2=62,no_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBGdzDDHxq6tudrCf2a3S8uKlwUZuf5Fw6dXBBwOAMJR5F0SjiyUB3QnMpLeh6-8pBBmg1Bt1R6PeR8S9qSj-96xoRZgAL-BDx5SW7vIxZrqnh2kBw93Lbfv1DtefJ5HPojII1wWR4-uSC/s1600/bloggingpasuruanthumb_small.png";

</script>

</b:if>

Note: The code that marked the setting of the widget, please specify according to taste.

2. Next add markup widget below before markup

widget Blog1 <b: section class = 'main' id = 'main' maxwidgets = '3' showaddelement = 'yes'> <b: widget id =' Blog1 'locked =' true 'title =' Blog Posts' type = 'Blog'>

HTML - GoWidget

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:section class='bloggingpasuruanlabel1' id='bloggingpasuruanlabel1' maxwidgets='1' showaddelement='yes'>

<b:widget id='HTML80' locked='false' title='Template' type='HTML'>

<b:includable id='main'>

<h2><span class='index'><a href='/search/label/<data:content/>?&max-results=8'>View All</a></span><data:content/></h2>

document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=published&alt=json-in-script&callback=labelthumbs\"><\/script>");

</script>

</div>

</b:includable>

</b:widget>

</b:section>

</div>

<b:section class='bloggingpasuruanlabel2' id='bloggingpasuruanlabel2' maxwidgets='1' showaddelement='yes'>

<b:widget id='HTML81' locked='false' title='Tips Blogger' type='HTML'>

<b:includable id='main'>

<h2><span class='index'><a href='/search/label/<data:content/>?&max-results=8'>View All</a></span><data:content/></h2>

document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=published&alt=json-in-script&callback=labelthumbs\"><\/script>");

</script>

</div>

</b:includable>

</b:widget>

</b:section>

</div>

</b:if>

3. Save the template, now go to Layout >> Click the edit widget that has been added earlier >> Fill in it with the name of your blog label

4. Save the widgets and see the results. Similarly tutorial on How to Install Widget Recent Post by Label Blog.

Thank you, your visit in my blog ..

How to Add Effect Star Rating in Latest Post with Font Awesome

2016-04-13T10:06:00.000-07:00

GoWidget this time I will give you tricks on how to add an icon to the star rating in the Popular Posts widget with Font Awesome.Surely here you already understand the use and benefits of the Popular Post widget in Blogger. Addition effect is inspired by star rating Popular Post widget on WordPress platform that serves to display the results of voting that the visitor on a particular article.

Well, for those who want to try this trick so Popular Post widget looks more attractive please follow the simple steps below :

Add Effect Star Rating in Latest Post with Font Awesome

This widget uses Font Awesome, please add the following CSS link above </head>

CSS - GoWidget

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

If the link below previously been installed, please skip this step.

1. Login to Blogger >> Open Template Editor >> Add the code below before ]]> </ b: skin> or </ style>

Style 1

CSS - GoWidget

/* Popular Post */

.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}

.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}

.PopularPosts ul{margin:0;list-style:none;color:#64707a}

.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}

.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}

.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}

.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}

.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f006\f005\f005\f005\f005';opacity:.9}

.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f006\f006\f005\f005\f005';opacity:.85}

.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f006\f006\f006\f005\f005';opacity:.8}

.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f006\f006\f006\f006\f005';opacity:.75}

.PopularPosts ul li:hover:before{opacity:1}

.PopularPosts ul li:first-child{border-top:none}

.PopularPosts ul li:last-child{border-bottom:none}

.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}

.PopularPosts ul li a:hover{color:#2476e0;}

.PopularPosts .item-thumbnail{margin:0;}

.PopularPosts .item-snippet{display:none}

.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

Style 2

CSS - GoWidget

/* Popular Post */

.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}

.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}

.PopularPosts ul{margin:0;list-style:none;color:#64707a}

.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}

.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}

.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}

.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.9}

.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.85}

.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.8}

.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}

.PopularPosts ul li:hover:before{opacity:1}

.PopularPosts ul li:first-child{border-top:none}

.PopularPosts ul li:last-child{border-bottom:none}

.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}

.PopularPosts ul li a:hover{color:#2476e0;}

.PopularPosts .item-thumbnail{margin:0;}

.PopularPosts .item-snippet{display:none}

.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

Style 3

CSS - GoWidget

/* Popular Post */

.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}

.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}

.PopularPosts ul{margin:0;list-style:none;color:#64707a}

.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}

.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}

.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}

.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005';opacity:.9}

.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005';opacity:.85}

.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005';opacity:.8}

.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005';opacity:.75}

.PopularPosts ul li:hover:before{opacity:1}

.PopularPosts ul li:first-child{border-top:none}

.PopularPosts ul li:last-child{border-bottom:none}

.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}

.PopularPosts ul li a:hover{color:#2476e0;}

.PopularPosts .item-thumbnail{margin:0;}

.PopularPosts .item-snippet{display:none}

.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

2. Next save the template and view the results.

Here I do not give a live demo, demo could see my friend see in the picture above post or can also visit the blog dummy Twisted Shape

<http://twistedshape.blogspot.co.id/2015/1/memasang.pop.up.about.us.ala.arlina.design.html>

So from me to trick How to Give Effect Star Rating in Latest Post with Font Awesome, sorry if there are shortcomings and hopefully useful.

Widget Recent Post with Navigation on Blogger

2016-03-19T09:49:00.002-07:00

How do I add a navigation widget recent post in Blogger Blog, maybe this widget can be

other alternatives to bring the latest feeds from your blog posts.

How to implement them was quite easy, you just need to add code that will I share these into a new widget.

1. Login to Blogger >> Layout >> Click Add Gadget >> Then copy all the code below into a new widget earlier.

Recent Post Widget with Navigation

HTML - Go Widget

/* Recent Post Navigasi by Go Widget */

#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}

#recentpostsae{margin:0}

.recentpostel{background:#fff;display:block;border:1px solid #ddd;margin:5px 0;padding:10px;height:79px}

.recentpostel img{background:#fff;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border:1px solid #ddd}

.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#111}

.recentpostel:hover{background-color:#fefefe}

.recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}

#recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZXbay_mZjITTsdb_QitT4oUqXqCQAguA-SCmZOxw1MQ2PczK-2uRLdn7G8YwW9ctlGx-wk0BFjfEuIFTK6LorWJcR1AfFaHCmoQKqS9V5MnXtilNqsjmIhKuFlcwVq2G8ikUM4V-3B6v6/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd}

#recentpostnavfeed{border:1px solid #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}

#recentpostnavfeed:hover{background-color:#fefefe}

#recentpostnavfeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}

#recentpostnavfeed span{padding:5px 10px}

#recentpostnavfeed .next{float:right}

#recentpostnavfeed .previous{float:left}

#recentpostnavfeed .home{text-align:center}

#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important}

</style>

//<![CDATA[

var numfeed = 5;

var startfeed = 0;

var urlblog = "http://widgetmefor.blogspot.co.id";

var charac = 40;

var urlprevious, urlnext;

//]]>

</script>

2. Replace the code that is marked yellow color, click Save.

Note :

var numfeed: Number of posts displayed.

var urlblog: Fill with your blog address.

var charac: the maximum number of posts displayed summary.

Good luck and hopefully useful.

How to Install Widget Recent Comments on Disqus

2016-03-19T09:19:00.001-07:00

As we know, Disqus is one of the most popular commenting system platform today. In addition to the professional appearance, Disqus also offers features that are of special interest is the moderation system and edit comments in which comments can be edited if there is one visitor commented by inserting links or mentions one of the words that have been filtered in setting Disqus.

How to Install Widget Recent Comments on Disqus

There are still many other advantages offered Disqus, but here I will share how the "figs Add Comment Latest from Disqus Widget"

Most recent comments widget function of Disqus is to showcase the latest comments from both visitors and administrators who commented on the article in his blog. For those who are interested, please observe the following steps:

Make sure you are using the blog commenting system Disqus

1. Login to your Blogger >> layout >> Create a new widget HTML / Javascript. >> Then add script Disqus comments below in the widget:

HTML - Go Widget

#RecentComments{display:block;width:100%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:400px;}

#RecentComments ul.dsq-widget-list{text-align:left;max-height:400px;overflow:auto;}

#RecentComments img.dsq-widget-avatar{margin:3px 10px 7px 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block}

#RecentComments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400}

#RecentComments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#444}

#RecentComments p.dsq-widget-meta a:hover{color:#ff675c}

#RecentComments li.dsq-widget-item{margin:0;padding:6px 0 4px;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#736fb8;font-weight:600}

#RecentComments li.dsq-widget-item:last-child{border-bottom:none}

#RecentComments a.dsq-widget-user {display:table;color:#736fb8;font-weight:600;}

#RecentComments a.dsq-widget-user:hover{color:#999;}

#RecentComments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}

#RecentComments .dsq-widget-comment p{display:inline-block;font-size:88%;margin:0;font-weight:400;color:#444}

#RecentComments .dsq-widget-item pre{position:relative;background-color:#f3ffca;padding-top:0;box-shadow:0 1px 0 rgba(0,0,0,.1);border-radius:0;opacity:.9;transition:all .3s;}

#RecentComments .dsq-widget-item pre:hover {opacity:1}

#RecentComments .dsq-widget-item pre code {color:#444;font-size:82%;}

#RecentComments .dsq-widget-item pre:before{content:'';position:absolute;padding:initial;font-size:initial;text-indent:initial;left:initial;color:initial;top:0;right:0;width:1.2em;height:1.2em;background-color:#d8e3b0}

#RecentComments .dsq-widget-item pre:after{content:'';font-size:initial;padding:0;position:absolute;width:0;height:0;border-style:solid;border-width:0 1.2em 1.2em 0;border-color:transparent #fff transparent transparent}

</style>

//<![CDATA[

document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://gowidget.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=1&avatar_size=32&excerpt_length=120\"></scr" + "ipt>");

//]]>

</script>

//<![CDATA[

$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');

//]]>

</script>

</div>

Replace the code that is marked with the name of your Disqus blog user.

2. Save the widgets and see the results.

Thus tutorial "How to Install Widget Latest from Disqus Comments" may be useful.

Some Function Conditional Tag Widget in Blogger

2016-03-19T08:51:00.000-07:00

Multiple Functions Conditional Tag On Widget -There are a few tricks to hide elements of a good blog on the home page the homepage, posts, static pages or by adding conditional code * tag * in which every element you want to hide.

Examples of application:

HTML - Go Widget

<b:if cond='data:blog.pageType != "static_page"'>
..... The contents of the content to be wrapped in the conditional tag (Content will be hidden in the static pages) .....</b:if>

Not only hides an element but can also to display only certain elements in the page that you specify.

Examples of application:

HTML - Go Widget

<b:if cond='data:blog.url == data:blog.homepageUrl'>

..... The contents of the content to be wrapped in the conditional tag (Content will only appear on the home page) .....

</b:if>

For more details please refer to some function conditional tag for the widget below:

1. View the widget only on the home page:

HTML - Go Widget

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

2. View the widget only on post pages:

HTML - Go Widget

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

3. Displays widgets only on specific pages:

HTML - Go Widget

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL Anda"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Note: Your URL * Replace * with the address you want.

4. Hiding widgets only on specific pages:

HTML - Go Widget

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != " URL anda "'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

5. displaying widgets on the static page:

HTML - Go Widget

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

6. Hide the widget on a static page:

HTML - Go Widget

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

7. widget displays only on archive pages:

HTML - Go Widget

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

After you add the conditional tags above, save the template and see the results.

Not limited to the widget, with conditional tags you can wrap Other elements such as * Script *, * CSS *, or * HTML * in the template for reason accelerate blog by reducing Script contained in a page or other privacy reasons.

May be useful.

How To Easily Install Smart Links in Blogger Blog

2016-03-19T08:18:00.001-07:00

This time * Go Widget * will share plugin * Smart _SEO Link_ * which is a WordPress plugin that works to change any given word in an article into a link.

How it Works Plugin SEO Smart Links

This plugin will read every word pal specified in the article. For example, if my friend added the word * SEO * or * Blogger * on the plugin, then automatically every time the word will turn into a link and only then if in your blog article contained the word.

How to Install Smart Links in Blogger Blog

1. Go to Blogger >> Template >> Then add the following code before the </ body>

Javascript - Go Widget

function smartLink(){

this.keywdHref = new Object();

this.add = function(keyword, href){

if(keyword.substr(0,1) != " "){keyword = " " + keyword;}

this.keywdHref[keyword] = href;

}

this.createAnchor = function(){

var objs = document.getElementsByTagName("div");

for(var i=0; i<objs.length; i++){

var obj = objs[i];

if(obj.className.indexOf("post-body")>-1){

var content = obj.innerHTML;

for(var keyword in this.keywdHref){

var href = this.keywdHref[keyword];

var newstr = content.replace(keyword, "<a href='"+href+"'>"+keyword+"</a>", "gi");

obj.innerHTML = newstr;

content = newstr;

}

this.startScript = function(){

var onLoad = window.onload;

window.onload = function(){

if(onLoad){onLoad();}

setTimeout("f.createAnchor()", 100);

}

</script>

var f = new smartLink();

f.add("SEO", " http://widgetmefor.blogspot.co.id/");

f.startScript();

</script>

If you want the plugin above only appear on post pages only, please add a special conditional tag page post

Also Read : Multiple Functions Conditional Tag On Blogger Widget

2. Save the template

At the marked code, replace * SEO * with the keywords you specify and replace * http://widgetmefor.blogspot.co.id/* with your blog url.

In the above friend can add other keywords below, as an example

Javascript - Go Widget

f.add("SEO", " http://widgetmefor.blogspot.co.id /");

f.add("Template", " http://widgetmefor.blogspot.co.id /");

f.add("Blogger", " http://widgetmefor.blogspot.co.id /");

You can also add words into bold, for example

Javascript - Go Widget

f.add("<b>SEO</b>", "http:/widgetmefor.blogspot.co.id/");

* Note * It is advisable not to add excessive keyword, from 1 to 3 keywords is enough.

Similarly, about * How to Easily Install SEO Smart Links in Blog, may be useful ....

How to add Responsive Share Button with Counter in Blogger Blog

2016-01-06T05:13:00.004-08:00

This time Go-Widget will share the tutorial "How to add Responsive Share Button with Counter in Blogger Blog" Yes, this is a share button widget that you often encounter in the blog put it. The function of the button widget is still the same share as the share button other widgets that allow visitors to share articles were deemed beneficial to social media.

This widget also supports responsive and added to the display counter plugin from http: //donreach.com/social-share-count which will bring the number of shares that is clicked by visitors. To share the view of this button can mate look like the picture above.

Note: This widget uses fontawesome, make sure in the template already there is a link fontawesome.

How to Add Responsive Share Button with Counter in Blogger Blog

1. Log in to Blogger >> Template Editor >> Add the code below before ]]></b:skin> or </ style>

CSS - Go-widget

/* Share Button dengan Counter untuk Blogger by http://widgetmefor.blogspot.co.id*/

.gowidget_sharebutton{position:relative;z-index:2;width:100%;padding:20px 0;display:inline-block;margin:20px auto;border-bottom:2px solid rgba(0,0,0,.08)}

.gowidget_sharebutton .share_blog {display:block;}

.gowidget_sharebutton .share_blog .wrap {text-align:center;margin:0 auto;display:inline-block;min-width:41px;}

.gowidget_sharebutton .share_blog .wrap1 {display:inline-block;width:31px;float:left;}

.gowidget_sharebutton .share_blog ul {margin:0;padding:0;}

.gowidget_sharebutton .share_blog ul li{list-style:none;list-style-type:none;padding:0;margin:2px;float:left;width:16%;max-width:115px;display:inline-block;font-size:13px;overflow:hidden;text-align:left;height:32px;line-height:32px;color:#fff;border-radius:3px;transition:all .4s}

.gowidget_sharebutton .share_blog ul li a,.gowidget_sharebutton .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;height:100%;display:block;text-decoration:none}

.gowidget_sharebutton .share_blog ul li .fa{color:#fff;font-size:16px;font-weight:normal;font-family:FontAwesome;display:inline-block;text-align:center;padding:0;height:32px;line-height:inherit;width:30px;background-color:rgba(0,0,0,.05)}

.gowidget_sharebutton .share_blog .btn_fb{background:#3a579a}.gowidget_sharebutton .share_blog .btn_fb:hover{background:#314a83}.gowidget_sharebutton .share_blog .btn_twtr{background:#00abf0}.gowidget_sharebutton .share_blog .btn_twtr:hover{background:#0092cc}.gowidget_sharebutton .share_blog .btn_gplus{background:#df4a32}.gowidget_sharebutton .share_blog .btn_gplus:hover{background:#be3f2b}.gowidget_sharebutton .share_blog .btn_pntrst{background:#cd1c1f}.gowidget_sharebutton .share_blog .btn_pntrst:hover{background:#ae181a}.gowidget_sharebutton .share_blog .btn_linkdin{background:#2554BF}.gowidget_sharebutton .share_blog .btn_linkdin:hover{background:#224EB4}

.gowidget_sharebutton .share_blog .share.h6{font-size:10px;font-weight:700;text-align:center;color:#999;border-top:1px solid #e3e3e3;padding:8px 0 0;margin:8px auto 0;line-height:8px;width:42px;letter-spacing:.5px}

.gowidget_sharebutton .share_blog .share{margin:5px 5px 0 0;overflow:visible;width:95px}

.gowidget_sharebutton .share_blog .share .count.h4{font-size:22px;font-weight:700;text-align:center;color:#ff8349;line-height:16px;margin:-8px 0 0;min-height:15px}

.gowidget_sharebutton .share_blog .btn_fb .share-btn,.gowidget_sharebutton .share_blog .btn_twtr .share-btn,.gowidget_sharebutton .share_blog .btn_gplus .share-btn,.gowidget_sharebutton .share_blog .btn_pntrst .share-btn,.gowidget_sharebutton .share_blog .btn_linkdin .share-btn{position:relative;color:#fff;display:inline-block;text-align:center;font-weight:700;font-size:11px;float:right;min-width:12px;padding:0 8px 0 0}

@media only screen and (max-width: 979px) {

.gowidget_sharebutton .share_blog .btn_linkdin {width:34px;}

.gowidget_sharebutton .share_blog .btn_fb .share-btn,.gowidget_sharebutton .share_blog .btn_twtr .share-btn,.gowidget_sharebutton .share_blog .btn_linkdin .share-btn,.gowidget_sharebutton .share_blog .btn_gplus .share-btn,.gowidget_sharebutton .share_blog .btn_pntrst .share-btn{display:none}}

@media only screen and (max-width:768px) {

.gowidget_sharebutton .share_blog ul li a,.gowidget_sharebutton .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;font-size:11px;height:100%;display:block}.gowidget_sharebutton .share_blog .wrap{min-width:34px}.gowidget_sharebutton .share_blog .btn_linkdin,.gowidget_sharebutton .share_blog .btn_pntrst{width:30px}.gowidget_sharebutton .share_blog ul li{margin:1px 3px}}

@media only screen and (max-width:479px) {

.gowidget_sharebutton .share_blog .share{border:0;margin:0 5px 0 1px;overflow:visible;width:80px}.gowidget_sharebutton .share_blog ul li{width:25px;margin:2px;}.gowidget_sharebuttonn .share_blog .wrap{display:none}.gowidget_sharebutton .share_blog ul li .fa{width:25px}}

2. Add the following code just below or above <data: post.body /> or <div class = 'post-footer ">

HTML - Go-widget

<b:if cond='data:blog.pageType == "item"'>

<ul>

<div class='share h6'>SHARES</div>

</div>

</li>

<div class='wrap'>Share</div>

</a>

</li>

<div class='wrap'>Tweet</div>

</a>

</li>

<div class='wrap'>Share</div>

</a>

</li>

</a>

</li>

<div class='wrap'>Share</div>

</a>

</li>

</ul>

</div>

</b:if>

Replace the code that is marked with your Twitter username.

3. Add the following code before the </body>

jQuery - Go-widget

<b:if cond='data:blog.pageType == "item"'>

//<![CDATA[

// Share Button with Counter by widgetmefor.blogspot.co.id

$(document).ready(function(){var t=$("link[rel=canonical]").attr("href");$.getJSON("http://sharecount.twistblogger.com/?url="+encodeURIComponent(t)+"&callback=?",function(t){shares=t.shares,$(".count").each(function(t,e){service=$(e).parents(".share-btn").attr("data-service"),count=shares[service],count>1e3&&(count=(count/1e3).toFixed(1),count>1e3?count=(count/1e3).toFixed(1)+"M":count+="k"),$(e).html(count)})})});

//]]>

</script>

</b:if>

4. Save the template and see the results.

If you have questions with the tutorial above, please leave a message in the comments box, thank you and hopefully useful .....

Templete Blog is a Mess, this is solutions

2016-01-02T18:37:00.002-08:00

This blog afternoon of failure display (mess) blog who can not read the code auto readmore in the custom template.

After that I try to find a solution on the forum google blogger and find there are some posts that essentially experiencing the same thing that is an error on the display of custom templates. In the post there has been no answer to overcome this error, but after I tried to brain-tweaking themselves even this problem solved

For those who are experiencing similar things, please follow the simple steps below

1. Go to Blogger >> Templates >> Backup template first and then select the default blogger template and leave it like that.

SELECT DEFAULT TEMPLATE

2. The next step is to open an XML template files pal (can be with notepad or other programs), find the code below

CSS - Go Widget

<!-- /*<b:skin><![CDATA[

3. Then replace the code below

HTML - Go Widget

<b:skin><![CDATA[

4. Still in notepad, find the code Blog1 replace with Blog2.

Rename BLOG1 to BLOG2

5. Then save the template and try to upload them to the blog.

6. After that will come a duplicate of the blog post, through let alone .. Now open the HTML template >> Edit >> Find and delete all markup Blog1 widget below:

HTML - Go Widget

<b:widget id='Blog1' locked='false' title='Posting Blog' type='Blog'>

...

REMOVE ALL WIDGET BLOG1

...

</b:widget>

REMOVE ALL WIDGET BLOG1

7. Save the template and see the results.

Note : If there is a view that is still lacking, add this CSS code in the template

CSS - Go Widget

/* CSS Fix Layout temporary */

.date-header {visibility:hidden;width:0;height:0;}

8. Save, finished.

Perhaps this is only a temporary solution than I am, if there are less please could you add in the comments field. thanks.

How to Optimize Images for SEO Automatically

2016-01-02T07:27:00.000-08:00

This is done so that the picture on your blog pages indexed automatically by the search engines like google so you are not bothered by adding manually (add a description on <img alt = "description of the image" height = "125" scr = "/ image.png" width = "125" /> * when posting images).

The way it can be said to be troublesome. With this automatic way each image has the same description with the title picture. Therefore, you have to give them appropriate names for each picture to be posted.

Why should order SEO Image Optimization Automatically?

Because the pictures on the blog page is one medium that can be used for traffic on the search engines because the majority of Internet users really like searching or just browsing to look at pictures.

Here's how to install automated SEO code on the picture:

1. Find </body> in the template of your blog, then copy and paste the code below just above the </body>

Javascript - Go Widget

//<![CDATA[

$(document).ready(function() {

$('img').each(function(){

var $img = $(this);

var filename = $img.attr('src')

$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));

});

//]]>

</script>

//<![CDATA[

$(document).ready(function() {

$('img').each(function(){

var $img = $(this);

var filename = $img.attr('src')

$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));

});

//]]>

</script>

//<![CDATA[

var scrollTimer = null;

$(window).scroll(function() {

var viewportHeight = $(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(100);

if (scrollTimer !== null) {

clearTimeout(scrollTimer);

}

scrollTimer = setTimeout(function() {

$('#scroll').fadeOut();

}, 1500);

});

//]]>

</script>

2. Then save the template.

Each picture blog you plug in an article automatically will have a SEO friendly code. Thanks….if this article useful, please share in your social media accounts

How to Disable HTML links in the Comments Blog

2016-01-02T06:58:00.001-08:00

This article is How to Disable HTML links in comments Blog which aims to be the link that is "spam" in the column of blog comments do not damage the reputation of the blog in the eyes of search engines. As more and more outbound links that are not qualified out of our blog, then it will be bad for our blog later.

Usually the active links in comments abandoned spammers is a form of promotion, backlink search, and so forth. But in essence the way not only to find backlinks, because the backlink itself will come to our blog that is deemed useful.

To disable live links in blog comments, we just need to apply some javascript code, and you can replace the live link in the comment column of your blog with regular letters or in the form of a warning.

Follow the instruction install script to prevent HTML links in blog comments

1. Go to Blogger >> Dashboard >> Templete >> Edit HTML

2. Place the following code before tag </ style>

CSS - Go Widget

.spammer-detected {

font-size: 14px!important;

color: #fff!important;

background: #5cb0d8!important;

margin: 25px;

border-radius: 4px;

display: inline-block;

padding: 10px 15px!important;

}

3 Then place the following code before tag </ body>

jQuery - Go Widget

//<![CDATA[

$(function(){$('#comments p').find('a').contents().unwrap();});

//]]>

</script>

The following code uses a special message

jQuery - Go Widget

function blockLinks(parentID, children) {

var parent = document.getElementById(parentID),

content = parent.getElementsByTagName(children);

for (var i = 0; i < content.length; i++) {

if (content[i].innerHTML.indexOf('</a>') !== -1) {

content[i].innerHTML = "<mark> live links is prohibited!!</mark>Spam is not allowed!";

content[i].className = "spammer-detected";

} } }

blockLinks('comment-holder', 'p');

//]]>

</script>

4. Save your template

Thanks ... please share if this article useful to others.

Creating Responsive Multi Dropdown Menu

2016-01-01T01:48:00.000-08:00

This time I will share how to create a responsive multi dropdown menu that you can apply on the blog. Let's start to make it. Menu element in building a first step we need is HTML, the following HTML code on the menu that already I made

HTML - Go Widget

<nav>

</ul>

</li>

<li><a href="#"><i class="fa fa-user"></i> ABOUT</a></li>

<li><a href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</li>

<li><a href="#"><i class="fa fa-tags"></i> CATEGORIES</a>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</li>

<li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>

<li><a href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>

<li><a href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li>

</ul>

</nav>

The menu at the top is still a pure HTML and if you want to make the menu function properly and looks to be more attractive then the next step we need is the addition of CSS and jQuery function.

Here's the code CSS and jQuery already I made in such a way to adjust the framework HTML menu above.

CSS - Go Widget

nav {

display: block;

margin-top: 100px;

background: #374147;

}

.menu {

display: block;

}

.menu li {

display: inline-block;

position: relative;

z-index: 100;

}

.menu li:first-child {

margin-left: 0;

}

.menu li a {

font-weight: 600;

text-decoration: none;

padding: 20px 15px;

display: block;

color: #fff;

transition: all 0.2s ease-in-out 0s;

}

.menu li a:hover,.menu li:hover>a {

color: #fff;

background: #9ca3da;

}

.menu ul {

visibility: hidden;

opacity: 0;

margin: 0;

padding: 0;

width: 150px;

position: absolute;

left: 0px;

background: #fff;

z-index: 99;

transform: translate(0,20px);

transition: all 0.2s ease-out;

}

.menu ul:after {

bottom: 100%;

left: 20%;

border: solid transparent;

content: " ";

height: 0;

width: 0;

position: absolute;

pointer-events: none;

border-color: rgba(255, 255, 255, 0);

border-bottom-color: #fff;

border-width: 6px;

margin-left: -6px;

}

.menu ul li {

display: block;

float: none;

background: none;

margin: 0;

padding: 0;

}

.menu ul li a {

font-size: 12px;

font-weight: normal;

display: block;

color: #797979;

background: #fff;

}

.menu ul li a:hover,.menu ul li:hover>a {

background: #9ca3da;

color: #fff;

}

.menu li:hover>ul {

visibility: visible;

opacity: 1;

transform: translate(0,0);

}

.menu ul ul {

left: 149px;

top: 0px;

visibility: hidden;

opacity: 0;

transform: translate(20px,20px);

transition: all 0.2s ease-out;

}

.menu ul ul:after {

left: -6px;

top: 10%;

border: solid transparent;

content: " ";

height: 0;

width: 0;

position: absolute;

pointer-events: none;

border-color: rgba(255, 255, 255, 0);

border-right-color: #fff;

border-width: 6px;

margin-top: -6px;

}

.menu li>ul ul:hover {

visibility: visible;

opacity: 1;

transform: translate(0,0);

}

.responsive-menu {

display: none;

width: 100%;

padding: 20px 15px;

background: #374147;

color: #fff;

text-transform: uppercase;

font-weight: 600;

}

.responsive-menu:hover {

background: #374147;

color: #fff;

text-decoration: none;

}

a.homer {

background: #9ca3da;

}

@media (min-width: 768px) and (max-width: 979px) {

.mainWrap {

width: 768px;

}

.menu ul {

top: 37px;

}

.menu li a {

font-size: 12px;

}

a.homer {

background: #374147;

}

@media (max-width: 767px) {

.mainWrap {

width: auto;

padding: 50px 20px;

}

.menu {

display: none;

}

.responsive-menu {

display: block;

margin-top: 100px;

}

nav {

margin: 0;

background: none;

}

.menu li {

display: block;

margin: 0;

}

.menu li a {

background: #fff;

color: #797979;

}

.menu li a:hover,.menu li:hover>a {

background: #9ca3da;

color: #fff;

}

.menu ul {

visibility: hidden;

opacity: 0;

top: 0;

left: 0;

width: 100%;

transform: initial;

}

.menu li:hover>ul {

visibility: visible;

opacity: 1;

position: relative;

transform: initial;

}

.menu ul ul {

left: 0;

transform: initial;

}

.menu li>ul ul:hover {

transform: initial;

}

@media (max-width: 480px) {

}

@media (max-width: 320px) {

}

Jquery - Go Widget

//<![CDATA[

$(document).ready(function(){

var touch = $('#resp-menu');

var menu = $('.menu');

$(touch).on('click', function(e) {

e.preventDefault();

menu.slideToggle();

});

$(window).resize(function(){

var w = $(window).width();

if(w > 767 && menu.is(':hidden')) {

menu.removeAttr('style');

}

});

//]]>

</script>

Once added, then the result will look like the screenshot above. Thanks...

How to Install Multi Tab Sidebar Widget

2015-12-31T23:57:00.000-08:00

This time I will share about How to Install Multi Tab Sidebar Widget that you may have seen on some web use.

One benefit of this widget is that if you've added too many widgets in the sidebar, then by installing a multi-tab will save the placement of widgets in the sidebar column which usually extends downward. The placement of each widget in the sidebar you can

divided into several columns that will make your blog become more look neat and attractive.

Immediately, the way it is applied as follows:

1. Log in to Blogger >> Click Template >> Edit HTML >> Copy the code below just above ]]></ b:skin> or </style>

CSS - Go Widget

/* Multi Tab Widget */

.multitab-section{background:#fff;text-transform:uppercase;width:100%}

.multitab-widget{list-style:none;margin:0 0 10px;padding:0}

.multitab-widget li{list-style:none;padding:0;margin:0;float:left}

.multitab-widget li a{background:#22a1c4;color:#fff;display:block;padding:15px;font-size:13px;text-decoration:none}

.multitab-tab{border:0;width:33.3%;text-align:center}

.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}

.multitab-widget li a.multitab-widget-current{padding-bottom:20px;margin-top:-10px;background:#fff;color:#444;text-decoration:none;border-top:5px solid #22a1c4;font-size:14px;text-transform:capitalize}

2. Next, copy the code below just above the </body>

jQuery - Go Widget

//<![CDATA[

// Multi tab widget

jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });

//]]>

</script>

3. Then apply the code below just below <div id = 'sidebar-wrapper'>

HTML - Go Widget

<li class='multitab-tab'><a href='#multicolumn-widget-id1'>Popular</a></li>

<li class='multitab-tab'><a href='#multicolumn-widget-id3'>Archive</a></li>

</ul>

<b:section class='sidebar' id='sidebartab1' preferred='yes'/>

</div>

<b:section class='sidebar' id='sidebartab2' preferred='yes'/>

</div>

<b:section class='sidebar' id='sidebartab3' preferred='yes'/>

</div>

4. Change the name of the widget title that I put a mark on the code above in accordance with the title of the widget you want.

Finally save the template and see the results. A few tips How to Install Multi Tab Sidebar Widget…. good luck.

How to Banned Commentator Blogger with jQuery

2015-12-31T05:29:00.000-08:00

There are several reasons you want to ban the comments a blogger who frequently post comments that are considered unethical, abusive, defamatory, or contain elements that relate religion, race, ethnicity, and of course the unfavorable comments to display.

Unfavorable comments to display them:

* Comments containing SARA (religion, ethnicity, race) *: Can offend an individual, group / group, religion, or discrimination against a particular culture.

* Comments containing SPAM *: Ordinary to blogger comments that contain an invitation in the form of a link, hoping someone visiting a link that is inserted into the comments.

To avoid these things, my friend need to enter a specific code to the blog template.

Here's how its application:

The first way with jQuery

1. Open Blogger >> Templates >> Edit HTML >> Add the following code before the </ body>

jQuery - Go Widget

//<![CDATA[

var spamlist=[

'http://www.blogger.com/profile/123456789xxx', /* example URL commentator */

'http://name_blog.blogspot.com/',

' URL third commentators' /* last URL does not need to be comma */

];

for(var v=0; v<spamlist.length; v=v+1){

$("a[href='"+spamlist[v]+"']").each(function(){

$(this).closest(".comment-block").find(".comment-content")

.replaceWith("<div class='comment-content' style='color:red'> You have been banned! Please leave this blog!</div>"),

$(this).replaceWith("<span style='color:red'>BANNED USER!</span>");

})

}

//]]>

</script>

For those who use a template to hack commenting system, could use this code:

jQuery - Go Widget

//<![CDATA[

var spamlist=[

'http://www.blogger.com/profile/123456789xxx', /* example URL commentator */

'http://name_blog.blogspot.com/',

'URL third commentators' /* last URL does not need to be comma */

];

for(var v=0; v<spamlist.length; v=v+1){

$("a[href='"+spamlist[v]+"']").each(function(){

$(this).closest(".comment_inner").find(".comment_body")

.replaceWith("<div class='.comment_body' style='color:red'>You have been banned! Please leave this blog!</div>"),

$(this).replaceWith("<span style='color:red'>BANNED USER!</span>");

})

}

//]]>

</script>

2. Save the template.

The second way to Conditional Tag

Note : This method applies only to systems Threaded Comment Hack

1. Open Blogger >> Templates >> Edit HTML >> Find the code below

<b:loop values='data:post.comments' var='comment'>

Then add this code below

HTML - Go Widget

<b:if cond='data:comment.authorUrl != "http://www.blogger.com/profile/12345678910"'>

http://www.blogger.com/profile/12345678910 replace with URLs will be banned. After that search the code </ b: loop>, add this code in it:

HTML - Go Widget

<! - blacklist ->

</ b: if>

<! - blacklist ->

2. Save the template.

Good luck.

How to Add Pirsm Syntax Highlighter in Blogger

2015-12-25T21:13:00.000-08:00

This time I will share the article " How to Install Prism Syntax Highlighter in Blogger " This method is commonly used by every blogger when it wants to distribute java script code, CSS, jQuery in every post when we needed a box to store the code to make it look neat and exciting..and now I have implemented the code as a supporting feature of this blog. Then I mix with numbering feature

How to Install Prism Syntax Highlighter in Blogger

1. Ok just, please go to Blogger Templates >> Edit HTML >> Then copy and apply the code below before the </ style>

CSS - Go Widget

/* CSS Syntax Highlighter with numbering feature */

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;

}

code .token.punctuation {

color: #ccc;

}

pre code .token.punctuation {

color: #fafafa;

}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {

color: #777;

}

code .namespace {

opacity: .8;

}

code .token.property,code .token.tag,code .token.boolean,code .token.number {

color: #e5dc56;

}

code .token.selector,code .token.attr-name,code .token.string {

color: #88a9ad;

}

pre code .token.selector,pre code .token.attr-name {

color: #fafafa;

}

pre code .token.string {

color: #40ee46;

}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {

color: #ccc;

}

code .token.operator {

color: #1887dd;

}

code .token.atrule,code .token.attr-value {

color: #009999;

}

pre code .token.atrule,pre code .token.attr-value {

color: #1baeb0;

}

code .token.keyword {

color: #e13200;

font-style: italic;

}

code .token.comment {

font-style: italic;

}

code .token.regex {

color: #ccc;

}

code .token.important {

font-weight: bold;

}

code .token.entity {

cursor: help;

}

pre mark {

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 .line-numbers-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;

}

2. After that save 3 code below right before the </ body> or </ head>

Javascript

Javascript - Go Widget

jQuery

jQuery - Go Widget

$('pre').attr('class', 'line-numbers');

Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})

</script>

jQuery

jQuery - Go Widget

var pres = document.getElementsByTagName("pre");

for (var i = 0; i < pres.length; i++) {

pres[i].addEventListener("dblclick", function () {

var selection = getSelection();

var range = document.createRange();

range.selectNodeContents(this);

selection.removeAllRanges();

selection.addRange(range);

}, false);

}

</script>

3. Save the template.

4. And then when you create a new post, apply the calling code below to post HTML Tab

HTML - Go Widget

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... HTML (already in `escape`) here ... </code></pre>

<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... JavaScript code here ... </code></pre>

<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... jQuery code here... </code></pre>

May be useful...

How to Fix “ Do Not Track Your Own Pageviews “

2015-12-24T01:40:00.000-08:00

When visitors visit your blog page so-called pageviews. By default Blogger count each page views per visitor and page view Admin. For you who still wear blogspot subdomains probably will not experience an error and still be able to activate the feature Do not track your own pageviews, which you can enable in Blogger >> Statistics >> Overview as shown below:

But it is different if you who uses a custom domain for the blog, the feature Do not track your own pageviews will not work as it should and will receive an error message like this:

To overcome this, here I will give you an alternative that Admin blogger with a custom domain is no longer tracked on his own blog page views. Please copy the code below and paste it in the address bar

URL - Go Widget

http://widgetmefor.blogspot.co.id/b/statsBlockingCookie?action=SET&callback=__gwt_jsonp__.P2.onSuccess

Replace the code that is marked with the url of your blog, and then press Enter, and if successful will receive a message like this:

URL - Go Widget

// API callback__gwt_jsonp__.P2.onSuccess({"status":"yes"});

Done, now display their own buddy will not be recalculated.

Note: If your friend uses a different browser or a browser that has multiple users, buddy must apply the code above into any existing browser.

Thank you, may be useful.

White Hat SEO techniques and Blackhat SEO

2015-12-23T22:25:00.001-08:00

On this occasion will discuss Some * Techniques White Hat SEO and Black Hat SEO *

which can mate to apply for consideration for future blog.

1. White Hat SEO Techniques

White hat SEO : SEO optimization business is 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 a good result on the SERP page SEO techniques are advised to apply this one. The main purpose White hat SEO that increase 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, the blog visitors will be crowded and stable mate 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 post every day. Stringing words or writing on a blog is not easy as my friend imagined, but the search engines are happy 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.

* Keyword Optimization *

Perform a variety of keyword optimization that right without manipulating the color and font size with a keyword density of the content is not more than 3.5% or 5%.

* Optimization of the Blog URL *

Do not make a specific url redirect to another page when a visitor opens the link and of course strengthen seo optimization by entering keywords in the blog url.

* Perform link building *

Doing link bulding correct and not out of line like building a building links naturally and not by way of buying quality backlinks from blogs which have a high PageRank.

* Template or display *

In choosing a template or the display also includes a 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 or search engine.

* Meta Tags *

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. Place the title as keywords and descriptions, it is better placed in the following elements:

* Title

* Meta Description

* Keywords Meta

* Post the element h1-h6

* Alt tags that can be optimized in the image

* Title Tags

* Link contains Information targeted keywords

Creating content that is relevant and shows relevant information as well, that is if you want to sell a product then pasarkanlah sportive not make another keyword which is inserted into the content so that visitors also know the intent and purpose of the blog with appropriate products.

* Backlink good *

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 sites backlink dofollow one way / in accordance with the content of your blog.

* Ping regularly *

Ping is advisable to perform the technique regularly after publish new posts. But do not do too often because the Ping will be considered spam. If my friend made many posts in a day, enough to do Ping once.

* Blog to Promote Social Media *

Do it by relying on Facebook and Twitter or other social media, to note when linking link must have the appropriate title with a discussion on the blog.

2. 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 / 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.

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 suggest not to use this technique, because it will cause a site's ranking in search engine decreases dramatically.

Here are a few black hat SEO techniques, including:

* Link Farming *

Link Farming is a technique of collecting links on one page of a blog or website. That is on one page only lists links that are so easy to get hundreds or even thousands of links.

* Keyword Stuffing *

Keyword stuffing is the application of excessive keyword, where a blog page that contains a word that is repeated or unnatural.

* Text Invisible *

Invisible text 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 created the text color becomes white. The writing does not appear to be a way to block all pages with ctrl + a pointless way to select all the text is hidden. Another way is to look at the page source of the page.

* Repetition Title *

Repetition means the content posting title only contains a repetition of the title. Easy to do, for example posting title / Mechanical SEO / then it is only a repetition of the title of the post is / Mechanical SEO /, no need to add another article, it is 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 blogger friends. thanks.

How to add a Sticky Widget in Sidebar Blogger Blog

2015-12-23T21:58:00.000-08:00

This time I will share a tutorial with the same function, namely to make certain widgets become sticky or float to follow the page when rolled down and up. This tutorial is an improvement as well as answering comments buddy from the previous tutorial that when the page is scrolled down sticky widget Footer Wrapper will pass and it will be a little annoying because it hinders the widget that is placed in the Footer area.

I will share the code that is better suited installed on all content in the Sidebar or can be mounted on one widget tertentu.Bagi friend who wants to try it, please follow the tutorial * How to Make Sticky Widget in Sidebar Blog "

How to Make Sticky Widget in Sidebar Blog

1. Log in to Blogger >> Open Template editor >> Add the following code before the </ body>

jQuery - Go Widget

//<![CDATA[

$(function() {

if ($('#sticky-sidebar').length) { // change "#sticky-sidebar" with particular ID

var el = $('#sticky-sidebar');

var stickyTop = $('#sticky-sidebar').offset().top;

var stickyHeight = $('#sticky-sidebar').height();

$(window).scroll(function() {

var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // stopping distance in "#footer-wrapper"

var windowTop = $(window).scrollTop();

if (stickyTop < windowTop) {

el.css({

position: 'fixed',

top: 20 // Spacing or margin sticky from above

});

} else {

el.css('position', 'static');

}

if (limit < windowTop) {

var diff = limit - windowTop;

el.css({

top: diff

});

}

});

}

});

//]]>

</script>

Note the marked code, replace the code with the ID that will be made in accordance sticky template used

# sticky-sidebar: ID of the content or widgets that will be made sticky

# footer-wrapper: Set ID to limit the functions of sticky

Next add the width of the content or widgets that made sticky with CSS. Suppose here I give to the width 300px sticky, for example:

#sticky-sidebar{width:100%;max-width:300px}

#HTML1{width:100%;max-width:300px}

Determine the width according to the width of the sidebar on the template you are using and also do not forget to change the width of the media specific query, for example:

CSS - Go Widget

@media only screen and (max-width:768px){

#sticky-sidebar{width:100%;max-width:100%}

}

Sticky Widget to view the demo, please click on the button below: "See Demo for sticky on all content sidebar"

Demo for sticky on a particular widget See demo

Good luck......

How to Add Detect Adblock Messages with JavaScript in Blogger Blog

2015-12-23T07:13:00.001-08:00

I will share with you another tutorial. And this tutorial is " How Adding Messages to Detect Adblock with JavaScript in Blogger Blog " If my friend wants to know whether visitors on your blog blocking Google AdSense ads or not, my friend can do so by adding JavaScript code.

The workings of the JavaScript code that will I share this is the Adblock extension automatically detects if the visitor has Adblock browser they use when opening your blog to bring a special message. JavaScript code is already supporting

The new format of the data Asynchronous Responsive Google Adsense ads and utilize selector ins.adsbygoogle then replace it with a message when Adblock active in your browser.

How to Add Message to Detect Adblock with JavaScript

This code is also quite light, so my friend does not need to worry if the code is going to weigh on the loading speed of your blog. For those who want to try please follow these steps:

1. Log in to Blogger >> Open Template Editor >> Then add the following code before the </body>

Java Script - Go Widget

//<![CDATA[

// Adblock Detected

window.onload=function(){setTimeout(function(){var e=document.querySelector("ins.adsbygoogle");e&&0==e.innerHTML.replace(/\s/g,"").length&&(e.style.cssText="color:rgba(0,0,0,0.5);font-weight:700;font-size:110%;padding:20px;margin:auto;text-align:center;text-decoration:none;display:block!important;background:rgba(0,0,0,0.02);border:1px solid rgba(0,0,0,0.08)",e.innerHTML="It seems you block Google AdSense ads on your browser")},2e3)};

//]]>

</script>

* Example display the message: *

Description

Java Script - Go Widget

e.style.cssText="color:rgba(0,0,0,0.5);font-weight:700;font-size:110%;padding:20px;margin:auto;text-align:center;text-decoration:none;display:block!important;background:rgba(0,0,0,0.02);border:1px solid rgba(0,0,0,0.08)"

Code marked a CSS display a message, please modify according to your wishes

Java Script - Go Widget

e.innerHTML="It seems you block Google AdSense ads on your browser"

Replace the code that is marked with your writing.

2. If it has been added, save the template and then check the blog and activate Adblock to ensure the code is running properly. Thus tutorial about “ How Adding Messages to Detect Adblock with JavaScript in Blogger Blog “

Hopefully

How to Install the Slide Box recommendation on Blogger Blog

2015-12-23T06:37:00.000-08:00

The next tutorial, I will share a tutorial “ How to Install Slide Box recommendation on Blogger Blog “ Install widgets slide box recommendations based label that will appear on the right blog is very easy and suitable for news or blog theme can also be installed on a personal blog. In addition to installing this widget will give you the option to visitors to open another article which he is charming and helpful.

How to Install the Slide Box recommendation on Blogger Blog

The workings of this widget is similar to the widgets related post regular blog article attached below, which will bring up a few related posts based label.

For those of you who want to install the widget slide box these recommendations, please see the tutorial How to Install Slide Box Recommendation Blog below:

1. Log in to Blogger >> Open Template> Add the code below before ]]></ b:skin> or </ style>

CSS - Go Widget

/* Recommendations Widget – Go Widget*/

#chslidingbox{background:#fff;width:100%;max-width:355px;height:185px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:99;text-align:left;box-shadow:0 1px 0 0 rgba(0,0,0,0.03);transition:all .4s ease-out}

.chslidingbox-title{background:#9eb2c0;color:#fff;display:block;height:45px;line-height:45px;width:100%;font-size:14px;text-transform:capitalize;font-weight:700;letter-spacing:.5px}

.chslidingbox-title span a{font-family:initial;float:right;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:20px}

a#chslidingbox-close,a#chslidingbox-close{margin-right:15px}

.chslidingbox-title >span >h2{font-size:20px!important;font-weight:normal!important}

.chslidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}

.chslidingbox-container >div{border:none;margin:3px 0;padding:10px 0}

.chslidingbox-container >div >span{font-size:14px}

.show{bottom:84px}

.hide{bottom:-145px}

.related-post{font-size:70%}

.related-post h4{font-size:150%;margin:0 0 .5em}

.related-post-style-2{margin-top:-20px;padding-top:15px;list-style:none}

.related-post-style-2 li{padding:0 10px 10px 10px;overflow:hidden}

.related-post-style-2 li:first-child{border-top:none}

.related-post-style-2 .related-post-item-thumbnail{width:45px;height:45px;max-width:none;max-height:none;border:0;padding:0;border-radius:3px;float:left;margin:2px 10px 0 0}

.related-post-style-2 .related-post-item-title{font-weight:700;font-size:130%;line-height:normal}

a.related-post-item-title{color:#95a5a6;transition:all .4s ease-out}

a:hover.related-post-item-title{color:#2ecc71;text-decoration:none}

.related-post-style-2 .related-post-item-summary{display:block;overflow:hidden}

2. Then copy the code below before the </body>

Java Script - Go Widget

<b:if cond='data:blog.pageType == "item"'>

//<![CDATA[

$(window).scroll(function(){$("#chslidingbox").css($(this).scrollTop()>400?{right:"0px"}:{right:"-360px"})}),$(document).ready(function(){var i=$("#chslidingbox"),s=$("#chslidingbox-close"),o=$("#chslidingbox-minimize"),l=$("#chslidingbox-maximize");l.hide(),s.click(function(){i.css({right:"-350px"}),i.fadeOut("slow")}),o.click(function(){i.toggleClass("hide"),$(this).hide(),l.show()}),l.click(function(){i.toggleClass("hide"),$(this).hide(),o.show()})});

//]]>

</script>

</b:if>

3. Next find the <data:post.body/> and add the following code just below the code <data:post.body/>

HTML - Go Widget

<b:if cond='data:blog.pageType == "item"'>

<span style='float:left;margin:0 15px;'>We Recommendation for you</span>

</div>

var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>

"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>

</b:loop></b:if>];

var relatedPostConfig = {homePage: "<data:blog.homepageUrl/>",widgetTitle: "<h4></h4>",numPosts: 2,summaryLength: 0,

titleLength: "auto",thumbnailSize: 45,noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId: "sliding-tab",newTabLink: true,moreText: "",widgetStyle: 2,callBack: function() {}};

</script>

</div>

</b:if>

Or it could also be added on top of the code </b:includable> post like this:

HTML - Go Widget

<b: includable id = 'post' var = 'post'>

...

<- PUT THE CODE HERE ->

</ b: includable>

numPosts: 2: Number of posts that will be shown, if you add a post you must also set the height widget slide box

4. Save the template and see the results

See demo

May be useful…

How to add a Widget Ad Text Similar to Google AdSense

2015-12-23T05:52:00.000-08:00

This time I will share a tutorial "How to add a Widget Ad Text Similar to Google AdSense" was created specifically Widget widget is similar to its Google Adsense ads Google. Works the same way that when one of the advertising links on hover, it appeared the content or description of ads with subtle effects. Effect is added also quite comfortable viewing and light enough to be installed on your blog.

How to Add a Widget Ad Text Similar to Google AdSense

For those who want to try, please follow the following tutorial:

This widget uses the font awesome, please add the following CSS link above </ head>

HTML - Go Widget

If the above link has buddy pairs, please skip this step.

How to Install Widget Ad Text Similar to Google AdSense

1. Log in to Blogger >> Template >> Add the code below before ]]></b:skin> or </ style>

CSS - Go Widget

/* Google Adsense similiar Text Ads */

.iklan-teks{position:relative;margin:0;padding:10px;max-height:300px;overflow:hidden}

.iklan-teks div{position:relative;background:#FFF;height:120px;padding:8px 0;margin:0;z-index:1;color:#555}

.iklan-teks h2.iklan-header{position:relative;background:#FFF;font-size:18px;color:#0f7dc8;border-top:1px solid #d8d8d8;border-radius:0;padding:8px 0;margin:0;text-transform:none;cursor:pointer}

.iklan-teks h2.iklan-header:first-child{border-top:0}

.iklan-teks h2.iklan-header:before{content:"";width:0;height:0;position:absolute;top:20px;right:15px;border:5px solid transparent;border-color:#b2b2b2 transparent transparent;cursor:pointer}

.isi-iklan span.judul-iklan{font-size:18px;color:#0f7dc8;display:inline-block;cursor:pointer}

.isi-iklan span.url-iklan{font-size:12px;color:#0f7dc8;display:block;margin:8px 0;cursor:pointer}

.isi-iklan span.url-iklan:before{content:"\f0c0";font-family:FontAwesome;margin:0 10px 0 0}

.isi-iklan span.panah-besar{color:#fff;background:#e74c3c;border-radius:50%;height:34px;float:right;width:34px;text-align:center;line-height:34px;cursor:pointer;transition:all .6s}

.isi-iklan span.panah-besar:before{content:"\f054";font-family:FontAwesome;margin:0 0 0 3px;font-size:20px}

.isi-iklan span.panah-besar:hover{background:#34495e;color:#fff}

.isi-iklan p.isi{padding:0;margin:0 40px 0 0;color:#555;font-size:12px;text-align:left}

2. Then copy the code below before the </ body>

Javascript - Go Widget

//<![CDATA[

//]]>

</script>

Once added, save the template.

3. Next open layout >> Create a new widget >> Then add the following code in it

HTML - Go Widget

<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>

<span class='url-iklan' onclick="window.open('/');">url web kalian</span>

<p class='isi'>Pasang Iklan Anda Disini</p>

</span>

</div>

<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>

<span class='url-iklan' onclick="window.open('/');">url web kalian</span>

<p class='isi'>Pasang Iklan Anda Disini</p>

</span>

</div>

<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>

<span class='url-iklan' onclick="window.open('/');">url web kalian</span>

<p class='isi'>Pasang Iklan Anda Disini</p>

</span>

</div>

<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>

<span class='url-iklan' onclick="window.open('/');">url web kalian</span>

<p class='isi'>Pasang Iklan Anda Disini</p>

</span>

</div>

<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>

<span class='url-iklan' onclick="window.open('/');">url web kalian</span>

<p class='isi'>Pasang Iklan Anda Disini</p>

</span>

</div>

4. Save the widgets and see the results.

If you want to try a simpler version, add the code below in the widget

HTML - Go Widget

<a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="#" target="_blank" title=" Cheap Text Ads "><strong> Cheap Text Ads</strong></a>

<br />

<span style="font-size:11px"> Only $ 10 / month, Put Your Text Ad Here Now!</span>

<br />

<a style="font-size: 9px;color:#b0130d;" href="#" target="_blank" title=" Cheap Text Ads ">http://your-ads links</a>

<br/>

<a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="#" target="_blank" title=" Cheap Text Ads "><strong> Cheap Text Ads </strong></a>

<br />

<span style="font-size:11px"> Only $ 10 / month, Put Your Text Ad Here Now!!</span>

<br />

<a style="font-size: 9px;color:#b0130d;" href="#" target="_blank" title=" Cheap Text Ads "> http://your-ads links </a>

<br/>

<a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="#" target="_blank" title=" Cheap Text Ads "><strong> Cheap Text Ads </strong></a>

<br />

<span style="font-size:11px">$ 10 / month, Put Your Text Ad Here Now!</span>

<br />

<a style="font-size: 9px;color:#b0130d;" href="http://widgetmefor.blogspot.co.id" target="_blank" title="Go Widget"> Go Widget </a>

<br/>

<a style="text-decoration:none;padding:15;font-size:12px;float:right;color:#b0130d;" href="#" target="_blank" title=" Advertise Offers Our Blog "><small>Ads by Go Widget</small></a>

<br />

</div>

Thus tutorial * How to Add a Widget Ad Text Similar to Google AdSense. May be useful....

Creating Error 404 Page with Animation Glazing Ribbon Effects

2015-11-16T23:10:00.006-08:00

After I have been giving way to make a page error 404 page with animation Matrix, on this occasion I will share how to make a 404 error page with animated effects Glazing Ribbon. Actually this post before is about how to create animations Glazing Ribbon, but because I think it is not very useful so passable animation is shown only in the error page in the blog, what The 404 error page? if my friend do not know, just read the post

How to Redirect Error Page404 to Homepage

Creating Error 404 Page with Animation Glazing Ribbon Effects

1. Log in to Blogger

2. Select the Template >> Edit HTML.

3. Put the following code above the </body>

HTML - Go Widget

<b:if cond='data:blog.pageType == "error_page"'>

<h1>PAGE NOT FOUND</h1>

<p>You are half way around the word, but OOPS you make the wrong turn,

let us lead you to the right way,</p>

<p> return to our

<a href=' http://widgetmefor.blogspot.co.id ' title='HOME'>Homepage</a> ?

</p>

</form>

</div>

</b:if>

4. Replace http://widgetmefor.blogspot.co.id with your blog link.

5. Save the template.

If you are interested in this article, please help to sharing in social media you have .. thank you very much for your visiting this Blog.

.www.seopics.com source of the article.

How to Create an Automated Error 404 Page Redirect to Homepage

2015-11-16T22:40:00.001-08:00

Hi guys on this occasion I will share the tricks to make a 404 error page automatically redirect to the home page. Actually this is just a regular redirect script, but in the past I had thought to use this script in my error page.

Previous if my friend already knew what it was a 404 error page error page is usually a page url / link earlier in our blog but has been erased / deleted, as well as visitors to one type the link which is based on our blog link then he will go to a page This 404 error. Well from the page / blank pages intended (if not in costume / modifications) we better just point to the visitors of our blog homepage. Well here is how to make ...

404 Error page in the Redirect to the homepage.

1. Log in to your Blogger account.

2. Select the Template >> Edit HTML

3. Put the following code above the </ body>

HTML - Go Widget

<b:if cond='data:blog.pageType == "error_page"'>

BSPNF_redirect=setTimeout(function() {

location.pathname= "/"

}, 0);

</script>

</b:if>

4. Save the template.

If you are interested in this article, please help to sharing in social media you have .. thank you very much for your visiting this Blog.

How to Automatically Remove Active Links in Comments Blog

2015-11-16T21:42:00.005-08:00

How to automatically deletes active links in blog comments. The most likely to be spam nest is on a comment form that contains active links. or live links from blog visitors. Link active or live link is deliberately placed by visitors with the intention of just looking for backlink up for advertising specific products they offer.

How to automatically deletes active links in blog comments

There are ways to remove and there are also ways membuatnya.Kali I will help you to optimize your blog to remove comments that Sepam by removing the automatic link to the blog comment box. Note the steps:

Method 1 # deletes automatically active link in the blog comments

1. Log in to your Blogger account

2. Then Select Menu Template

3. After selecting a menu template and then locate and click the Edit HTML

4. Find </ head> (Click CTRL + F to facilitate the search)

5. Once the code </ head>See you then copy the code below just above the </ head>

HTML - Go Widget

jQuery(document).ready(function(){

jQuery("#comments p").find("a").replaceWith("<span> Warning: active links automatically will be removed </span>");

});

</script>

Description : If you are an existing blog scripst like code red berwarana above, then the red script above should not be used.

Method 2 # deletes automatically active link in the blog comments

1. Log in to your Blogger account

2. then Select Menu Template

3. After selecting a menu template and then locate and click the Edit HTML

4. Find </ body> (Click CTRL + F to facilitate the search)

5. Once the code </ body> See you then copy the code below just above the </ body>

HTML - Go Widget

//<![CDATA[

function blockLinks(parentID, children) {

var parent = document.getElementById(parentID),

content = parent.getElementsByTagName(children);

for (var i = 0; i < content.length; i++) {

if (content[i].innerHTML.indexOf('</a>') !== -1) {

content[i].innerHTML = "<mark>NO LIVE LINK</mark> Sorry Your comment has been deleted!";

content[i].className = "spammer-detected";

}

blockLinks('comment-holder', 'p');

//]]>

</script>

Link active or live link must be immediately removed from the comment form if you do not want to point the blog that we manage. If there are only one or two active link or link live I guess it does not matter, we can remove them one by one. But perhaps for the blog already crowded certainly very inconvenient. Due to these reasons, we must Deleting Automated Link On or Live Link Comments Blog, so blogs that we manage to grow with a reasonable and growing reputation.

So as to How to Delete Auto Link On or Live Link Comments Blog, may be useful

Creating Related Articles Below Blog Posts With Pictures

2015-11-16T20:49:00.002-08:00

On this occasion GoWidget will share how to create the image related post on the blog. special Blogspot. What is it related post or that the intent related post? related post was related articles or articles that relate to the post that is being read. Related post is usually put in under the posts so that when visitors finish reading an article in a blog post that he could see the other articles related.

Related post on Blogspot It first appeared in an article discussing or labeled as "Tutorial" then that will appear are postings with the label "Tutorial", therefore if you want enter a category or label on the post should really consider whether these postings have relevance to other posts or not.It also has a related post I add alt, title and description of appropriate automated posting, so do not be afraid of pictures in this related post will reduce the SEO value of your blog template. Besides looks interesting related post is seo friendly. How will this related post? see the image above.

How to Make Related Articles Under Posts With Pictures

1. Log in to your Blogger account

2. Go to edit template or select a template and then select HTML

3. Find the code ]]></b:skin> and place the code below in above ]]></b:skin>

CSS - Go Widget

#related-posts { float:center; width:100%; margin:0; padding-top:10px; }

#related-posts .judul { background:none; color:#333; font:16px Oswald; display:none;}

#related-posts .GoWidget_img { padding:0; margin:7px; width:180px !important; height:auto; position:relative; overflow:auto;border:4px double #ddd; }

#related-posts .GoWidget_img { height:130px; }

#related-posts .GoWidget_img:hover { opacity:.7; filter:alpha(opacity=70); -moz-opacity:.7; -khtml-opacity:.7; }

Note: for a code red at the top is the size of the width and height The related post, please edit and adjust the width template your blog, but remember do not forget to set the width size is also the title on step 5 below.

4. Next put this code above the code </ head> (if there is already code the same, or nearly the same then the following code does not need to be installed)

Java script - Go Widget

5. Still at the top of the code </ head>, also put the following code above </ head>.

Java script - Go Widget

//<![CDATA[

//]]>

</script>

Red code above is the width of the writing / title of your post in the related post, please change the width and height to fit the template of your blog. Addendum: If you want to summarize the above code simply uploaded to a hosting storage of your code.

6. Find <div class = 'post-footer "> or <div class =' post-footer-line post-footer-line-2"> or <div class = 'post-footer-line post-footer-line-3 '> (choose one) and place this code in it.

HTML - Go Widget

<b:if cond='data:blog.pageType == "item"'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != "true"'>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

var currentposturl="<data:post.url/>";

var maxresults=6;

var relatedpoststitle="Related Posts :";

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div>

</b:if>

7. Save your template and see the results.

(Addendum: if related his post are not out trying to settings such as the example image below) Setting Related Post With Pictures On Blogs I added as shown above as some (only some) related post that has been circulating at the moment and that has been distributed not arise because of this setting.

Creating the Share Button Below the Post with a Round Image

2015-11-15T21:51:00.000-08:00

In the second post in this day GoWidget will share a share button on this blog post is used. This tutorial I created at the request of the bloggers here.

Share button is useful to facilitate visitors who want to share articles were deemed beneficial to their social media networks. Such as Facebook, Twitter, Google plus, and Linkedin. Share This button will appear in each of your blog posts.

To look like the screenshot below or can be viewed directly below this blog article (if not replaced)

Here's how its application:

1. Log in to Blogger> Template> Edit HTML> Find the code below and then select the second in the markup post (not mobile post)

<data:post.body/>

2. Then copy the code below right after the code mentioned above

HTML - Go Widget

<b:if cond='data:blog.pageType == "item"'>
<div class='share-button-gowidget'>
<div class='share-button-gowidget-fb'>
<a class='share-gowidget-fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'/>
<a class='share-gowidget-fb-label' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>
</div>
<div class='share-button-gowidget-tw'>
<a class='share-gowidget-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
<a class='share-gowidget-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a>
</div>
<div class='share-gowidget'>
<a class='share-gowidget-gp' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'/>
<a class='share-gowidget-gp-label' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
<div class='share-gowidget'>
<a class='share-gowidget-lin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='_blank'/>
<a class='share-gowidget-lin-label' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a>
</div>
</div>
</b:if>

3. Next apply the code below just before ]]></ b:skin> or </style>

CSS - Go Widget

/* Wandadesign CSS Share Button */
.share-button-gowidget{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
.share-button-gowidget-fb,.share-gowidget{float:left;width:21%;padding:0 10px;height:inherit}
.share-button-gowidget-tw,.share-gowidget,.share-gowidget-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}
.share-gowidget-fb,.share-gowidget-tw,.share-gowidget-gp,.share-gowidget-lin,.share-gowidget-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglYrRTSvWzxL-DT4gVWJS_uK4ZDsK9i5ajc4mOqVWuFjx6x7efUkCE4DQjjqFC8RxEnXTxQxcKkFJqh0rLmNdWlWdQMRWVIbocYDoT8NX4eJFiWKbVdqPMXjIHqxSyFSOt2SwpeEVintfe/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
.share-gowidget-fb-label{color:#2d609b}
.share-gowidget-fb-label,.share-gowidget-tw-label,.share-gowidget-gp-label,.share-gowidget-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
.share-gowidget-tw{background-position:0 -43px}
.share-gowidget-tw-label{color:#00c3f3}
.share-gowidget-gp{background-position:0 -86px}
.share-gowidget-gp-label{color:#f00}
.share-gowidget-lin{background-position:0 -129px}
.share-button-gowidget a{color:#999;transition:all .3s;}
.share-button-gowidget a:hover{color:#7cb0ed}
@media only screen and (max-width:640px){
.share-gowidget,.share-button-gowidget-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.share-gowidget,.share-button-gowidget-tw,.share-gowidget-lk{float:left;width:48%;padding:0;border-left:0}}

4. Save the template.

Done ...

If you liked the article on this blog, Please feel free to subscribe via email, so you will get an article submission every article published in Go Widget

Change Sidebar Position and Main In Blogger Template

2015-11-06T10:39:00.000-08:00

Go Widget - this time I want to share is in fact very simple trick, I found the results of brain-tweaking CSS is currently trying to design a new template. Namely how to change the sidebar position and the main (primary column of the posting) on blogger template, for example, the default template display page elements such minima the following image:

From the picture above we can see the position of the sidebar is on the right, while the main column on the left. To change the sidebar position and play into instead it was easy. please follow the following tutorial:

1. Upon entry to your blogger account: Click dashboard >> Layout >> Edit HTML

2. Find the following code (or similar) :

CSS - Go Widget

#main-wrapper {

width: 410px;

float: $startSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

#sidebar-wrapper {

width: 220px;

float: $endSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

3. To note only the red writing, please replace it with the following code:

CSS - Go Widget

#main-wrapper {

width: 410px;

float: right;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

#sidebar-wrapper {

width: 220px;

float: left;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

4. Save the template. Please see the results on the page elements (layout)

If you liked the article on this blog, Please feel free to subscribe via email, so you will get an article submission every article published in Go Widget

Create Column Add a Gadget (ADD PAGE ELEMENT) under the header

2015-11-06T10:07:00.004-08:00

Go Widget - After seeing that lay under the column header aiklan code is much more efficient, so this time I wanted to share tutorials Create 1 Column Add a Gadget (ADD PAGE ELEMENT) under the header

And to add or create columns add gadgets (add page element) under the header was not as difficult as I imagined

Yes. Even after I tried to somewhat personalized code, apparently to make more than one column Add Gadget under the header also feels so easy. Want to know how? Take a look at the tutorial below.

it's easy, is as follows:

1. Login to your Blogger Account >> layout >> Edit HTML

2. As a precaution when edit it later on the outcome of things are not liking, then first download the initial template, so that we can restore the original template as a way to upload (upload) the initial template has been downloaded previously.

3. After searching the code ]]></ b:skin> and add the following code above:

CSS - Go Widget

#under_header{ width:970px; }

4. After that find the line of code following (or similar, depending on the model template you are using

HTML - Go Widget

<b:section class='header' id='header' maxwidget="1" showaddelement="no">

<b:widget id='Header1' locked='true' title='Blog Name (Header)' type='Header'/>

</b:section>

</div>

5. And add the following code under the code above:

HTML - Go Widget

<b:section class='header' id='underheader' preferred='yes'/>

</div>

6. so that the composition of the code would be as shown in the figure below:

7. Then click SAVE TEMPLATE, and check on whether the column Page Element Add a Gadget newly created already appeared under the header as shown in the first image above.

If you liked the article on this blog, Please feel free to subscribe via email, so you will get an article submission every article published in the Go widget. Hopefully the above tutorial can be useful and beneficial ...

How to add a new column element added gadget Blogspot

2015-11-06T09:25:00.001-08:00

Go Widget - sometimes template that we use not in accordance with our wishes, for example column widget provided only one when we need the two columns, I created this tutorial for bloggers who want to Make Two Columns widget on the blog.

To enhance your blog with an array of gadgets in accordance with the wishes of my friend, in this case the number of columns of widgets, buddy can make it themselves and it is up to put where, could be below the post, at the top of the post, under the header, in the sidebar, in the footer or in other places.

Here's How to Make two elements Gadget / Widget:

1. Login to your Blogger account

2. Select Template >> Edit HTML.

3. Find the code ]]></ b:skin> by pressing CTRL + F on the keyboard.

4. Place the following script above ]]> </ b:skin>:

CSS - Go Widget

#box-main-container {

clear:both;

}

.box-column {

padding:0px 10px 10px 10px;

border:1px dotted $bordercolor;

}

√ You can change the padding (the distance gadget position) 0px 10px 10px 10px means the distance (Up, Right, Down, Left).

√ You can also change the border (edge lines widgets) with color, how to delete $ bordercolor and replace with the color code you want.

5. Then find the code

<div id = 'main-wrapper'>

<div id = "content-wrapper '>

<div id = "header"> or <div id = 'header-wrapper'>

<div id = 'sidebar-wrapper'>

<div id = "bottom">

Description :

√ <div id = 'main-wrapper'> is the position of your main page. Usually used for placement horizontall menu or list the contents of a blog.

√ <div id = "content-wrapper '> is the position of the post.

√ <div id = "header"> is the position of the head. Usually placed the blog title and blog description.

√ <div id = 'sidebar-wrapper'> is the position of sidebar.

√ <div id = "bottom"> is the lowest position. Your blog or Footer.

Please choose one, would place it where.

6. If you have obtained or almost the same as the above code, place the HTML code below

HTML - Go Widget

<b:section class="box-column" id="col1" preferred="yes" style="float: left;">
</b:section></div>

<b:section class="box-column" id="col2" preferred="yes" style="float: right;">
</b:section></div>

Please you put it at the top or below the one that code.

√ For example, I put under the code <div id = 'main-wrapper'>

7. The results are as shown below

8. If you are finished click Preview / preview first, then click Save Template

Creating Two Column Page Element Add Gadget Under Column Post

2015-11-06T08:49:00.002-08:00

Go Widget - Before I installed the widget recent posts by label or category, I think need to put the widget where? Because the sidebar and footer of my blog is full, I finally took the initiative to create two new gadgets plus page elements under the column posts.

Well on this occasion, God willing, I shall make a tutorial to add two columns added gadget page elements below the post column that I apply this blog.

Okay, please follow the steps below:

1. Login to your account on the dashboard click >> >> >> Edit HTML Template (Do not tick Expand Widget Templates).

2. Then find this code or something similar:

HTML - Go Widget

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog type='Blog'/>

</b:widget>

</b:section></div>

3. If it can place the following code under the code </ b: section> before </ div>

HTML - Go Widget

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:section class='sidebar' id='gowidget-left' showaddelement='yes'>

<b:widget id='Text51' locked='false' title='Column 1' type='Text'/>

</b:section>

<b:section class='sidebar' id=' gowidget-right' showaddelement='yes'>

<b:widget id='Text52' locked='false' title='Column 2' type='Text'/>

</b:section>

</b:if>

Until this point, you can see a preview of the template or the preview but is still located on the left column is not in the center position. For that you need to add again the following CSS code to make both columns are in the middle position.

4. Look for the code]]> </ b: skin> and place the following code before the code]]></ b: skin>

CSS - Go Widget

# gowidget-left {

width: 45%;

float: left;

}

# gowidget-right {

width: 45%;

float: right;

}

You can still add the CSS code above, for example, add borders etc, please creativity!

5. Do not forget to click preview or save the template to immediately see the results.

If you managed to follow every step described above, the layout of the part you will see the following screen shoot post column as follows:

Thus tutorial add elements added gadget page under the column posts. Hope it is useful!

If you liked the article on this blog, Please feel free to subscribe via email, so you will get an article submission every article published in Go Widget

How to Make Social Media Widget Follow Us Buttons cool

2015-11-05T21:16:00.000-08:00

Almost every website has a blog or social media widgets follow the button icons are diverse. By installing a social media widget on blogs, you can invite readers / visitors to the blog to be involved in your social networks, and of course can enhance the reputation of your blog. But it will not happen if visitors do not click on the follow button on your social network widget, and they're just going to click or follow your blog updates unless they feel or find it useful and beneficial to your blog.

This widget does not automatically increase your blog follower various social nets but at least we can lure them to at least click once on a button to create / display the widget button is more attractive and has a widespread effect hover, smooth and sexy Embarrassed smile. The hover effect we created with the help of CSS3 transitions.

This widget also without javascript, without JQuery, purely with CSS. The widget will look neat and clean sidebar of your blog or any part you put it.

if you find it amazing or just interested in trying to make it or add it on your blog please step on the stages of manufacture

Features:

This widget is quite simple but has several key features:

• Covering four key social networks are most commonly used and the plus icon RSS

• The effects extend, smooth and sexy on hover

• Use CSS sprites

• Very neat and clean

• There is no JavaScript. JQuery No. This pure CSS

CSS sprite technique is pretty cool and useful, especially when you have too many pictures. In this widget you would think that the picture or icon is used for each button that makes a total of 5 images. But in fact there is only one image is used which contains all the icons. This technique is useful because instead of 5 HTTP requests, you only make one request that speed up loading time. This technique is not very common in Blogger blog in WordPress blog but this technique is often used.

Now let's add this widget on your blog.

Note: If you want to add a widget to a particular place, use separate HTML and CSS and if you want the widget to appear somewhere in the sidebar you, please skip straight in the alternative at the bottom.

Now add the CSS code that will make this button cool

1. Login to your Blogger account >> Templates >> Edit HTML >> Proceed

2. Find the code ]]></ b: skin> Place the following code above

CSS - Go Widget

/* Social Buttons Widget by by Go Widget*/

#GoWidget{list-style:none; text-decoration:none; font-size:0.9em;

font-family:trebuchet ms,sans-serif;}

#GoWidget a{text-decoration:none; font-family:trebuchet ms,sans-serif;}

#GoWidget li{position:relative; height:38px; cursor:pointer; padding: 0

!important;}

#GoWidget .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative;

z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px;

border-radius:5px;

background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAA

G2E/CDbmwPO4haA/s800/sprites.png) no-repeat;

background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px

3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px

3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0;

white-space:nowrap; line-height:32px; -webkit-transition:width .25s

ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s

ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s

ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s

ease-in-out,background-color .25s ease-in-out; transition:width .25s

ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px

3px;}

#GoWidget li:after{position:absolute; top:0; left:50px; z-index:2; display:block;

height:38px; color:#141414; content:attr(data-alt); line-height:32px;}

#GoWidget .icon{overflow:hidden; color:#fafafa;}

#GoWidget .facebook{width:32px; height:32px;

background-color:rgba(59,89,152,0.42); background-position:0 0;}

#GoWidget .twitter{width:32px; height:32px;

background-color:rgba(64,153,255,0.42); background-position:0 -33px;}

#GoWidget .googleplus{width:32px; height:32px;

background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}

#GoWidget .pinterest{width:32px; height:32px;

background-color:rgba(174,45,39,0.42); background-position:0 -95px;}

#GoWidget .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42);

background-position:-3px -126px;}

#GoWidget li:hover .icon,

.touch #GoWidget li .icon{width:210px;}

.touch #GoWidget li .facebook, #tbisose li:hover

.facebook{background-color:rgba(59,89,152,1);}

.touch #GoWidget li .twitter, #GoWidget li:hover

.twitter{background-color:rgba(64,153,255,1);}

.touch #GoWidget li .googleplus, #GoWidget li:hover

.googleplus{background-color:rgba(228,69,36,1);}

.touch #GoWidget li .pinterest, #GoWidget li:hover

.pinterest{background-color:rgba(174,45,39,1);}

.touch #GoWidget li .rss, #GoWidget li:hover

.rss{background-color:rgba(255,102,0,1);}

/* Social Buttons Widget by - Go Widget*/

HTML

1. Login to your Blogger account >> Templates >> Edit HTML >> Proceed

2. Place the following code in the section you want from your blog

HTML - Go Widget

<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>

<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>

<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>

<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>

<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>

</ul>

<!--Social Buttons Widget by Go Widget—>

<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://widgetmefor.blogspot.co.id/2015/11/how-to-make-social-media-widget-follow.html" target="_blank" title="credit">+ Get This Widget </a></div></small>

Replace all the # sign with the URL of your social networking.

Alternative

If you want to add this widget to the sidebar of your blog

1. Log in to your Blogger account you >> Layout

2. Click the plus gadget sidebar

3. PilihHTML / JavaScript on the form place the following code

HTML/CSS - Go Widget

<style>

#goWidget{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}

#goWidget a{text-decoration:none; font-family:trebuchet ms,sans-serif;}

#goWidget li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}

#goWidget.facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq7C_ND94c21dwRKHDdhrkfc9YwqjxQcLATzLNoEH3pY0W2ogwEU3SPLFO14qlUi2y6u1NP_k5oCj8mT28wRxk4m5s_UT1ZCjNycJpL7kkA0s8UQkLVl2-WPSh5sEmznnPaVFhBhYpdzY/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}

#goWidget li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}

#goWidget .icon{overflow:hidden; color:#fafafa;}

#goWidget .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}

#goWidget .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}

#goWidget .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}

#goWidget .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}

#goWidget .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}

#goWidget li:hover .icon,

.touch #goWidget li .icon{width:210px;}

.touch #goWidget li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}

.touch #goWidget li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}

.touch #goWidget li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}

.touch #goWidget li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}

.touch #goWidget li .rss, #goWidget li:hover .rss{background-color:rgba(255,102,0,1);}

</style>

<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>

<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>

<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>

<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>

<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>

</ul>

Replace all the # sign is blue with the URL of your social networking

4. Save and see the results in your blog!

Well thus tutorial create widgets follow social media with a cool button. Hope it is useful!

If you liked the article on this blog, Please feel free to subscribe via email, so you will get an article submission every article published in Go Widget

Creating Widget Social Profile Cool Metro UI

2015-11-04T17:48:00.004-08:00

Go Widget - This time I wanted to post a tutorial to make modifications to the profile widget blogger, this time I want explores how to create a social networking profile widget draw with colored style. This widget is commonly called Metro UI

Features

1. Includes 7 social networks are most frequently used

2. Effect hover and elegant design,

3. The very neat and clean

4. Did not exist JavaScript, No. Jquery, purely with CSS

How to add this widget to the blog

To install this widget to a blog is very easy, good blog by flatfrom blogger, wordpress or other blogging services where the style CSS and HTML received on widget or template. You just need to add code gadget / widget on the HTML / JavaScript.

Step by step for a blogger

1. On the Dashboard >> Layout menu Login >> Add a Gadget >> Choose HTML / JavaScript

2. Copy and paste the following code in column content:

HTML - Go Widget

</div>

<style>

.metro-social{width:285px}

.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}

.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}

.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}

.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}

.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}

.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}

.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}

.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}

.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}

.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}

.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}

.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}

.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}

.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}

.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}

.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}

</style>

Customization: Change my profile link by link your own profile.

3. Save and see the results in your blog.

Thus this tutorial, how to create a social profile on the blog widget. Hope it is useful. If you liked the article on this blog, Please feel free to subscribe via email, so you will get an article submission every article published in Go Widget

Widget Popular Posts The Marquee Effect

2015-11-02T21:57:00.004-08:00

After my previous tutorial explores add widget popular posts on the blog, this time I returned update with different modifications on the widget popular blogger posts. Namely widget popular posts with marquee effect, runs upwards. To create a popular posts with marquee effect, I suggest you back up the template in advance in order to avoid mistakes in adding code to the template.

Well stages of manufacture as follows:

1. Login to your account >> At the entrance on the Dashboard >> layout >> Add gadget

2. Go to the Templete >> Edit HTML

3. Checklist on the widget templates Expan

4. Find the code <div class = 'widget-content popular posts'> and save the marquee code below after the code

Go Widget

5. Next look for the code </ b: loop> and add the code </ marquee> under the code </ b: loop>

So overall the code be as follows:

Go Widget

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>

<ul>

<b:loop values='data:posts' var='post'>

<li>

<b:if cond='data:showThumbnails == "false"'>

<b:if cond='data:showSnippets == "false"'>

<b:else/>

</b:if>

<b:else/>

<b:if cond='data:showSnippets == "false"'>

<b:if cond='data:post.thumbnail'>

</a>

</div>

</b:if>

</div>

<b:else/>

<b:if cond='data:post.thumbnail'>

</a>

</div>

</b:if>

</div>

</b:if>

</li>

</b:loop>

</ul>

</marquee>

<b:include name='quickedit'/></div>

</div>

</b:includable>

</b:widget>

6. Save the template and see the results on your blog!

Thus tutorial makes the popular posts with marquee effect this time. Hope it is useful! Congratulations to create!

If you liked the article on this blog, please subscribe for free via email, so you will get an article submission every article published in Go Widget

Widget Popular Posts With Circle Image Style

2015-11-02T20:18:00.000-08:00

WidgetMeFor. - On this occasion, I would still explores the different modifications of popular posts widget blogger, had previously been there at least 4 widget popular posts with different effects, this time a modification is in style, and also the incorporation of effects. Such as this tutorial, we will create a widget popular posts with image circle style and adding hover effects and spinning on the thumbnails border and background hover effects on links. Like the example screen shoot besides

Popular posts widget is the default widget blogger, modifications that we make only add CSS3 thus guaranteed fixed fast loading.

Well if you are interested in adding a widget popular posts with circle style image on your blog, please follow the steps of manufacture as follows:

1. Once logged into your account on the layout >> Add >> Add gadgets popular blogger posts innate and configure the widget with thumbnail mencenteng small boxes and leave it empty on the small box snippet. Save. If you do not already know how to add widgets congenital popular blogger posts, please see the tutorial here

2. Then go to the section edit HTML templates >> Find the code ]]> </ b: skin>

3. Copy and paste the following CSS code above the code ]]> </ b: skin>

CSS - WidgetMeFor

.popular-posts ul{padding-left:0px;font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0} .popular-posts ul li {background: url(#) no-repeat scroll 5px 5px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 5px !important;font-size:12px!important;font-weight:550; border: 1px solid #58ACFA; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .popular-posts ul li:hover { background: #CCE9FD;border:1px solid #58ACFA; } .popular-posts ul li a:hover { text-decoration:none; } .popular-posts .item-thumbnail img { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);height:70px;width:70px;}.popular-posts .item-thumbnail img:hover { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

-webkit-transform:rotate(360deg);

-moz-transform:rotate(360deg);

-ms-transform:rotate(360deg);

-o-transform:rotate(360deg);

transform:rotate(360deg);}

4. Save the template and see the results on your blog!

Credits: Pointing upStyle widget popular posts and the effect that there is a modified me, if you are interested in this widget and want to publish it again, it is wise if you provide a link back or keblog kepostingan this. Thank ats your cooperation! Thumbs up

Please be creative, and good luck!

If you liked the article on this blog, please click here to subscribe for free via email, so you will get an article submission every article published in WidgetMeFor. And please click share to your friends, so you will help me to stay motivated ....

Thank you..