Select Language

Search For Content

28 Oct 2016

Add an Awasome Slider Show

Hi everyone,
Today i want to share with an elegant sidebar slider show, It shows the latest posts you have posted on your blog. 

It looks very nice on the sidebar, and you can add it anywhere on your blog

- How to ad it?

From your dashboard click add gadget, select HTML/JavaScript then, Past the code bellow into the box then click save. That is all and enjoy

<style scoped="" type="text/css">
Made by with lot of hardwork please keep the comment intact
ul.abt-sidebar-slider *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.abt-sidebar-slider{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.abt-sidebar-slider,ul.abt-sidebar-slider li{margin:0;padding:0;list-style:none;position:relative}
ul.abt-sidebar-slider li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){display:block}
ul.abt-sidebar-slider img{border:0;width:100%;height:100%}
ul.abt-sidebar-slider li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%}
ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%}
ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.abt-sidebar-slider .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(;background-position:50% 50%;background-repeat:repeat-x}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{border:4px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
ul.abt-sidebar-slider li:nth-child(1) .overlayx{background-position:50% 25%}
ul.abt-sidebar-slider .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
ul.abt-sidebar-slider h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{font-size:150%}
ul.abt-sidebar-slider .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider li:nth-child(3) .autname{display:none}
.buttons{margin:5px 0 0}
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
<div id="featuredpostside"></div>
<script src="" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
<script type='text/javascript'>

Read More

26 Oct 2016

Becarful - Do Not Buy Twitter Followers

Today I wanted to speak about buying followers for Twitter online. Most of people want more followers on Twitter and other social networks. When they can't get more followers. The first thing they think about is BUYING FOLLOWERS ONLINE
However, Let me tell you my story about buying followers on Twitter from other websites.

I had a few followers on Twitter, real ones. I thought about more followers. So I started looking forward to buying followers which it was a stupid idea.

I browsed a website named Social Springer .That sells followers, I chatted with one of their agents. And yes, I bought some followers.

After I purchased I started receiving emails saying I'm getting followers. I got so excited Wow! 400 followers in a few minutes, that's awesome.

After that I started checking the profiles of the people whom had followed me. I got Shocked :(

You know what I found out?...  I found out something has disappointed me and made me regret buying followers. Actually I put myself into a problem.

I found out that None of those followers is Active. All were Fake....!

The problem I mentioned above that I went into is :  

The website that i bought followers from is:


Here is the website look. Check the bellow pictures:

You all know now this website, Is not trustful So do not trust them

Back to my issue. Now I have 400 fake followers on Twitter and I have no idea how to get a rid of them. But, removing my Twitter account and, I start again with a new one.

Results I've got from buying followers:

-400 fake followers
-Got stressed thinking how to get a rid of them.
-I paid to put myself into this case.
-Probably I will delete my account on Twitter and start over. That will cause me losing a lot of tweets.

- Advise for you my dear readers:

DO NOT buy any followers for Twitter or any of the social network websites from any website.

I tell you again. BeWare of the following website:

Don't trust those scammers and do not buy followers from them.

If you had this happened to you , Please leave a comment!

Read More

23 Oct 2016

Add Contact Form On Blogger

Hello Guys, Our lesson today is to learn how to add an easy contact form, so people can contact you on your blog, follow the few steps bellow :

1 - Sign in to blogger and click the arrow that beside View Blog button and then click LAYOUT. as you see on the pic

2 - After clicking on LAYOUT, a page of gadgets will show up, click on MORE GADGETS, Then click the blue +  to add the contact form, like you see on the pic bellow

3 - As  you see on the pic bellow,  You can change CONTACT FORM with anything you want. like :contact me , ask a question etc. Do not forget to click SAVE.

4 - The result as you see bellow

NOTE: You can move the contact form anywhere you want on your blog. Enjoy 

Read More

13 Oct 2016

Add Print and PDF Buttons for Blogger

Hello guys,
Today i brought you a gadget of Print & PDF, Its from print Friendly. Some blogger might like it and some may not. However, it is an elegant gadget

To add it to your blog, From template clock Edit HTML , And by using Ctrl + F, Search for the tag <head> and bellow it past the bellow code and save. 

The Code

 <b:if cond='data:blog.pageType == "item"'>&lt;script&gt;var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 1;var pfHideImages = 0;var pfImageDisplayStyle = 'right';var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfBtVersion='1';(function(){var js, pf;pf = document.createElement('script');pf.type = 'text/javascript';if ('https:' === document.location.protocol){js=''}else{js=''}pf.src=js;document.getElementsByTagName('head')[0].appendChild(pf)})();&lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;var pfButtonHTML = '&lt;a href=&quot;; style=&quot;margin-top:0.5em; float:left;display:block; margin-right: 0.5em; color:#6D9F00; text-decoration:none;&quot; class=&quot;printfriendly&quot; onclick=&quot;window.print(); return false;&quot; title=&quot;Printer Friendly and PDF&quot;&gt;&lt;img style=&quot;border:none;-webkit-box-shadow:none;box-shadow:none;&quot; src=&quot;; alt=&quot;Print Friendly and PDF&quot;/&gt;&lt;/a&gt;'; var pfBloggerJs; pfBloggerJs = document.createElement(&quot;script&quot;); pfBloggerJs.type =&quot;text/javascript&quot;; js= &quot;;; pfBloggerJs.src=js; document.getElementsByTagName(&quot;head&quot;)[0].appendChild(pfBloggerJs);&lt;/script&gt;</b:if>

Read More

Add Share Social Networking Buttons

Hello everyone,

I've got you a wonderful Share Social Networking buttons, It contains 4 buttons which are facebook, twitter, google plus and linekdinAdd it to your blog then it will appear under every post.

How to add it?

Copy the bellow code and add it in HTML widget. Enjoy!

<script type="text/javascript" src=""></script> 
Read More

7 Oct 2016

Add Rating and Number of Views Widget

Rating widget is important to put in your blog, It shows you how your topic rate is. therefore im giving you the codes of the widget to install it on your blog, This widget contains rates and number of views. To add it just Follow these steps 

  1. From your blogger dashboard click temlate and the Edit HTML, Back up your template
  2. look for </head> and past the following code above it 
        <script type="text/javascript" src=""/>
  3. Now look for <data:post.body/> and past the bellow code after/under it   
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <div expr:id='"labels_" +' style='display: none; visibility: hidden;'>
        <b:if cond='data:post.labels'>
        <b:loop values='data:post.labels' var='label'>
        <>,</b:loop></b:if></div>Rate this posting: <div expr:id='' class='ffbs_rate'>{[[&#39;&lt;img src=&quot;;/&gt;&#39;]]}</div>
        <div expr:id='&quot;ffbs_stats_&quot; +' class='ffbs_stats'></div>
        <script type='text/javascript' expr:src='&quot;; + + &quot;?id=&quot; + + &quot;&amp;stats=ffbs_stats_&quot; + + &quot;&amp;labels=labels_&quot; + + &quot;&amp;info=info-&quot; + + &quot;&amp;info_delay=2&amp;url=&quot; + data:post.url + &quot;&amp;class_star=ffbs_star_img&amp;class_star_set=ffbs_star_img_set&amp;class_star_vote=ffbs_star_img_vote&amp;views=yes&amp;votes=yes&amp;average=yes&quot;'></script></b:if>

Read More

6 Oct 2016

Add a Wonderful Social Sharing Buttons

social media sharing buttons
Social website are considered one of  the greatest place where you share your blogger's posts, Therefore we need to add them to our blogs and websites so we can share the things we write.

Today i have a very nice social media sharing buttons, they are Facebook, Twitter,Google+ and LinkedIn.

click the picture to see it

How to add? 

  1. First of all, Sign in to blogger, click Template and back up your template . 
  2. Click edit HTML and search for <data:post.body/> and past the following code after it     
         <b:if cond='data:blog.pageType == &quot;item&quot;'><div class='tombol-berbagi-arlina'><div class='tombol-berbagi-arlina-fb'><a class='tombol-berbagi-fb' expr:href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/><a class='tombol-berbagi-fb-label' expr:href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a></div><div class='tombol-berbagi-arlina-tw'><a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='' rel='nofollow' target='_blank'/><a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='' rel='nofollow' target='_blank'>Share on Twitter</a></div><div class='tombol-berbagi'><a class='tombol-berbagi-gp' expr:href='&quot;; + data:post.url' rel='nofollow' target='_blank'/><a class='tombol-berbagi-gp-label' expr:href='&quot;; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a></div><div class='tombol-berbagi'><a class='tombol-berbagi-lin' expr:href='&quot;;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/><a class='tombol-berbagi-lin-label' expr:href='&quot;;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a></div></div></b:if>
  3. Now find  ]]></b:skin> and past the following code right before/above it. That is it. Enjoy
    /* CSS Share Button */.tombol-berbagi-arlina{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}.tombol-berbagi-arlina-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}.tombol-berbagi-arlina-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('') no-repeat;width:42px;height:41px;margin-right:3px}.tombol-berbagi-fb-label{color:#2d609b}.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-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}.tombol-berbagi-tw{background-position:0 -43px}.tombol-berbagi-tw-label{color:#00c3f3}.tombol-berbagi-gp{background-position:0 -86px}.tombol-berbagi-gp-label{color:#f00}.tombol-berbagi-lin{background-position:0 -129px}.tombol-berbagi-arlina a{color:#999;transition:all .3s;}.tombol-berbagi-arlina a:hover{color:#7cb0ed}@media only screen and (max-width:640px){.tombol-berbagi,.tombol-berbagi-arlina-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}.tombol-berbagi,.tombol-berbagi-arlina-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}

احتراف سيو

Read More

Create Subscribe by Email Gadget

Hi Guys,Today's lesson is about how to create Subscribe By Email Gadget, its an important thing that must be in your blog, so people could easily get your updates through Email.

Once they Subscribe they will receive all the articles you write.

This gadget that we are going to add to the blog is from FeedBurner website,  Please follow the few steps bellow: 

1 - Sign in to FeedBurner HERE and type your blog's Link, Then hit Next, as it is on the pic bellow 

 2 - Choose RSS ,The second option where the arrow is pointing to then click Next
3 - Give an address to your Blog , click Next
4 - Do not click next, click the blue link
5 - Click Publicize, then Email subscriptions and click Activate
6 - You will get a Code, Copy it
Done with Feed Burner.

Now we will learn how to add the Gadget into the blog 

1 - Sign in to Blogger, go Layout and then add gadget
2 - Pick HTML/JavaScript then click the  +

3 - Past the Code in the box, write the title you desire, like Subscribe, etc.... then click Save and you can add the gadget anywhere in your Blog
The Result is This:

Read More

How To Center Post Title on Blogger

Today i am going to show you how to center the title's post on blogger, Please share this topic with your friends and family. thank  you!

- Here is how to center the title of the post:
  1.  Log in to blogger, chose Template, edit HTML
  2.  Use Ctrl + f and find : ]]></b:skin> 

 Add the following right above/before it: { text-align:center; } 
Read More

3 Oct 2016

Add Image That Requires Title Without it on Blogger

Hello everyone,

Today i am going to show you how to add image that requires title on the sidebar of your blog without title. Follow the below steps:

Example: On the pic i try to add an image but it requires the title :(

  All what we do is to add this : <!– –>  in the box of the title and save. That's it

Share please!

Read More

Online User Gadgets

Hello dear followers and visitors, Today I want to share with you some nice widgets for blogger, It's a gadgets for tracking visitors and shows you how many user are browsing your blog at real time.from

 Copy the code and past into a HTML/JavaScript box, and put it anywhere on your blog , Here is the info about the widgets:

- A widget with black background and the font is white



<script id="_wau3w6">var _wau = _wau || []; _wau.push(["classic", "qvd9jbro6vly", "3w6"]);
(function() {var s=document.createElement("script"); s.async=true;
- A widget with yellow background with black font



<script id="_wauvgn">var _wau = _wau || [];
_wau.push(["colored", "qvd9jbro6vly", "vgn", "ffc20e000000"]);
(function() {var s=document.createElement("script"); s.async=true;
- An elegant small black gadget with white font



<script id="_wau96l">var _wau = _wau || []; _wau.push(["small", "qvd9jbro6vly", "96l"]);
(function() {var s=document.createElement("script"); s.async=true;
- A floating red widget with white font



<script id="_wauxlq">var _wau = _wau || [];
_wau.push(["tab", "qvd9jbro6vly", "xlq", "left-middle"]);
(function() {var s=document.createElement("script"); s.async=true;
I hope you guys like the widgets, Please leave a comment and share

Read More

1 Oct 2016

How To Change Your Blog URL Without Losing Visitors

Hello everybody,

Today we are gonna learn about changing Blog's URL.

Some people, Including me wants to change the URL of their blogs because for some reason is too long, we doesn't like it or for any other reasons.

Today i will show you the way how to change the URL of your Blog without any problems.

First lets know some things:
  1.  Does changing the blog's URL make my blog posts doesn't appear in search engine? No it does not, they will appear normally
  2.  Does it make you loose your rank in Alexa? Yes, But you'll get your rank in awhile
  3.  Does my visitors can find my blog easily? Yes
There is no problem with the way that I'm giving you today about changing the URL.

How can we do it?
For example, your current blog's URL is: and you want it to be

The first step is to change the current URL with the new one ( . Then create a new blog and give it your old URL (

Now,  Go to your new blog , template (the one you gave it the old URL ) , edit HTML and find </head>
Copy the bellow code and add right above </head>


<!--Start redirection code-->
<script type='text/javascript'>
  var d='<data:blog.url/>';
  d=d.replace(/.*\/\/[^\/]*/, '');
  location.href = '';
<!--End redirection code--> 

Change the red URL with your new one - - and click save.

Now try search for your blog on google and your articles will show up as it was, Without any wait and your visitors stays the same.

Please share the article         

مدونة أستوتك code
Read More

Related Posts Via LinkWithin

Hello Guys, Today im going to show you how to add an wonderful Related Posts Gadget, It is from 
Linkwithin website

It is easy to add it, just  follow the below steps: 

1 - Go to LinkWithin , Click Here

2 -  As you see on the picture bellow, Put your Email address in the 1st Box, Your blog's link in 2nd box. Click on Platform and choose Blogger. Pick how many post you want to show by clicking on stories button and then Click Get Widget! 

3 - Click Install Widget 

4 - If you have more than 1 blog click Select a blog and pick the blog you want, then click Add Widget

All Done! Check you blog you will see Related Posts.

Any Questions? Leave a Comment :)

Read More
Make money ONLINE
Copyright © All rights reserved Jalil0Web 2015 - 2021