Showing posts with label Blogger Widget. Show all posts

Monday, 10 March 2014

COOL ADVERTISE HERE TEXT WITH HOVER EFFECT

Cool Advertise Here Text with Hover Effect: Keeping Affiliate and Link Selling in view the Ad which will be placed on your site should be an attractive One.Visitors really like creativity and awesomeness of any thing in Your Web Log,it is a common problem these days that every Blogger who Place ads in his/her blog is really a dull One.In This regards,we gonna help you to add a significant Style Advertise Banner which will surely help you to get some bounty from visitors and you will get alot of chances to get advertisement from different Companies.

Live DEMO

How To Add Cool Advertise Here Text With Hover Effect

Go To Blogger Dashboard.
Click On Layout
Click On Add a Widget at the Right Side-bar
A Box will Pops-up
Select HTML/JavaScript
Copy the Below Script and paste it over there

<style>#text{-moz-transform:rotate(-5deg);-o-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);color:#FFF!important;font-family:arial;font-size:60px;font-weight:300;letter-spacing:-5.5px;line-height:45px;text-align:center;margin:20px 10px}#text a{color:#333;text-shadow:1px 1px #000, 3px 3px #EEEEEE, 5px 5px #DDDDDD, 7px 7px #AAAAAA, -1px -1px #000;text-transform:lowercase;-moz-transition:all .3s ease-in 0;-webkit-transition:all .3s ease-in 0;-o-transition:all .3s ease-in 0;-kmoz-transition:all .3s ease-in 0}#text a:hover{-moz-transition:all .3s ease-in 0;-webkit-transition:all .3s ease-in 0;-o-transition:all .3s ease-in 0;-kmoz-transition:all .3s ease-in 0;text-shadow:1px 1px #000, 3px 3px #EEEEEE, 5px 5px #DDDDDD, 7px 100px transparent, -1px -100px transparent;color:transparent}inf{color:#d2a}#text a:focus,#text a:active{color:#eee!important;-moz-transition:all 0 ease-in-out!important;-o-transition:all 0 ease-in-out!important;-kmoz-transition:all 0 ease-in-out!important;-webkit-transition:all 0 ease-in-out!important}</style><div id="text" class="rent"><a href="URL" target="blank"><blink>⇝</blink> Here is a free space.<br />Contact <inf>αⅾмїη for more information</inf><blink>⇜</blink></a></div>

Note: Change "URL" to the link of the Page where you want to redirect the visitors when they click the ad.Now Just hit Save and that's it ! Ask any Question freely ;) We are here to Solve Your Problems,Happy Blogging!

Cool Advertise Here Text with Hover Effect

Drop Down Navigation Menu For Blogger : You may have seen many drop-down menus but today "ThatsBlogging" will present you an incredible Drop Down menu , which is really a magnificent drop down menu.Actually it is developed by the combination of CSS with HTML . Beautiful Colors combinations are used which makes it more significant drop down menu.Actually , drop down menu makes your blog navigative and easy to expand.This drop down menu is very stylish which means your Blog Beauty will increase by adding this menu.Moreover this menu will not slow your blog loading speed.
Live DEMO
How To Add Cool Drop Down Menu In Blogger

Go To Blogger Dashboard
Click On Template
Edit HTML
Search For </header>
Copy the Below Script and Add it below the Closing Header tag ( </header>)

<div id='menubor'></div><center><ul id='menu'>
<li><a class='hmlink' href='#'>Home</a></li>
<li><a class='winlink' href='#'>Blogger Templates</a></li>
<li><a class='maclink' href='#'>Blogger Widgets</a></li>
<li><a class='andlink' href='#'>How To Tuts</a></li>
<li><a class='gamlink' href='#'>Privacy Policy</a></li>
<li><a class='seclink' href='#'>Guest Post</a></li>
<li><a class='linlink' href='#'>About</a></li>
</ul></center>
<style>
#menu li {
display: inline;
list-style: none;
padding: 0;
}

#menu li a {
padding: 15px 20px 15px 20px;
text-decoration: none;
color:white;
font-family: 'Noto Serif', serif;
-moz-box-shadow: inset 0 0 13px -2px #000;
-webkit-box-shadow: inset 0 0 13px -2px #000;
box-shadow: inset 0 0 13px -2px #000;
font-size:18px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
transition: padding-bottom .666s;
-webkit-transition: padding-bottom .666s;
-moz-transition: padding-bottom .666s;
-o-transition: padding-bottom .666s;
-ms-transition: padding-bottom .666s;

}
#menu li a:hover {

padding-bottom:20px;
}
.hmlink{
background:#24459A;
}
.winlink{
background-color: rgba(9,173,217,1);
}
.maclink{
background-color: rgba(108,109,112,1);
}
.weblink{
background:#EEEE00;
color:black;
}
.andlink{
background-color: rgba(149,191,43,1);
}
.gamlink{
background-color: rgba(212,2,43,1);
}
.seclink{
background-color: rgba(0,158,62,1);
}
.linlink{
background-color: rgb(123, 82, 138);
}
#menubor{
border-top:1px solid black;
margin-bottom:-1px;
}
.header-outer{
padding-bottom:20px;
}
</style>

Changes

For Changing the Links Replace # with your Own Links and the Anchor text with your desired text
That's it , Save Your template and have fun !
If you are interested in adding extra <li> options for that add <li><a class='desiredword' href='#'>text</a></li> between <ul> and </ul> tags.
After implementing the above step , you have to define the class in CSS for that define the class between the style container and hit save.
If you have any Question ask it freely !! Stay Blessed , Happy Blogging !

Customize Label Widget For Blogger

Customize Label Widget brings more beauty in blogger blog. It will make our blog more attractive and designable. We know that by default blogger cloud label widget looked ugly and unprofessional however, if we add some piece of code to style sheet then it could become an eye-catcher for readers & make our blog design lovely. This widget is mostly appeared at the right side of the blog which consist of several labels. Today we will present an awesome blue color cloud label widget which we have personally implemented on PBT. Since from a long time we have received budles of email from reader to share the PBT labels widget with us. So in today article we will share with you customized label widget for blogger.

Label Widget For Blogger

Well guys you all of know that every blogger use label widget in blog to navigate or jump from one category into another without search any post by Search Engine. This widget help us to show all the related posts of the same category by single button. So we could easily click on desire niche label to view all the posts of related topics. So in this way we can find multiple posts of the same topic with single label button.

Recommended: Customize Google Plus Followers Widget for Blogger

A label widget is an automated and official part of a blog which can be interlinked and hold bundles of posts with a single tab to find multiple posts easily of the same category.

How To Add Customize Label Widget In Blogger Blog

Here is all the beginner steps that you will learn how can we apply any Css designing to labels widget.

Go to blogger dashboard:

Go to Template>>Edit/Html:

Now Search for ]]></b:skin> tag

Past the below given code before ]]></b:skin> tag

.label-size{
margin:0;
padding:0;
position:relative;
}
.label-size a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#0089e0;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}
.label-size a:before{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.label-size a:after{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}

.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555
transparent transparent;}

Finally Click on save button & you done almost:

Recommended: Add Stylish Popular Post Widget In Blogger

Want Help ?

Buddies this was a little tutorial all about how to add customize label widget in blogger blog. If you like this widget then you must try to use it it will definitely bring dramatics change in your blog designing. If somebody want a professional label widget for blogger then i will recommended to use this widget for blogger blog. we have personally implement this widget on our blog.

Guys if you found any bugs or face any difficulty in implementation then do not hesitate to post your problem in comment section. we will back your response as soon as possible.Thanks and happy blogging !)

Just today a client requested us that he wish to open all his external links in new window or new tab when clicked and he is not willing to manually do it for each post by adding target="_blank" inside each hyperlink. We wrote down a simple jQuery script that will check all hyperlinks inside your blog pages and will only add the target="_blank" attribute to links which are external links. It wont put any effect to internal links of the blog. The script will only detect external hostnames and the moment it finds one, it will insert into the html a target attribute that tells the browser to open the link in a new window. Thus preventing your blog readers from leaving your blog and also helps in increasing your overall pageviews and bounce rate. We thought we shall also share the script with all of you.

Open all external links in a new tab

Follow these easy steps to add this cool dynamic way of updating all external links.

Note: This method works for both blogger and wordpress blogs, irrespective of platforms.

Go to Blogger > Template
Backup your template
Click "Edit HTML"
Just above </head> paste the following script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

$(document).ready(function() {

$("a[href^='http://']").each(
    function(){
     if(this.href.indexOf(location.hostname) == -1) {
        $(this).attr('target', '_blank');
      }
    }
);

$("a[href^='https://']").each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr('target', '_blank');
}
}
);

});

</script>

PS: Please do not add the red code if you already have jQuery library source code installed on your blog.

5. Save your template and you are all done!

Check your blog and click some external links to see it working just fine. :)

How it works? (Optional know-how)

I have added the code twice to check once for links starting with http:// and then for https://. Normally all bloggers blogs have hostnames starting with http:// without the http:// secure protocol. Therefore I added the second instance so that the script may work even for wordpress self hosted blogs.

The yellow highlighted part is where the script scans values inside href attributes and if the value is equal to a negative one (== -1), then this indicates that the hostname is an external domain.

Note: If you equate the href value to a positive one (==1) inside the conditional statement, thenall your internal links will start opening in new windows!

Once the condition is met, the script then inserts a target="_blank" attribute inside the hyperlink tag. That simple!

Hope this script proves helpful for most of you. It is extremely SEO friendly and works fine with all major browsers be it IE, webkit browsers or Mozilla.

Peace and blessings buddies! :)

Popular Posts Beautiful Widget For Blogger

Popular posts on blogger is being always displayed with the default style by Blogger, and it also being displayed with different styles in custom blogger templates. However, it is very easy to customize popular posts widget in Blogger, just you need to target it's random ID which is automatically created by Blogger when you add a popular posts widget from your Layout page. We have already published a tutorial on how to customize popular posts in blogger. But today's tutorial is more advance than that, because I've a customized colored widget for you which will make your popular posts super beautiful. This widget was created by someone else, but I've customized it and fixed its bugs, now it will be working fine on all blogger templates including the custom ones. Just let's start how to add it to blogger. After adding this widget to your blog, the popular posts on your blog will be looking exactly like you can see on my blog.

How to Add Popular Posts Widget to Blogger?

The steps are very easy and straightforward, and You'll do it within seconds. Just follow the given steps in order to add this new widget to your blog.

Go to Blogger Dashboard
Template >> New HTML Editor
Now find </b:skin> tag which holds all your CSS styles [see the image below]

If you are not familiar with New Blogger HTML page, then just see the above picture for where to find the </b:skin> tag, when you found that <b:skin>...</b:skin> just click the arrow at left side and all the css styles will be expanded. Now just copy below code and paste before </b:skin>:

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 10px 0px -5px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; }
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px;}
#PopularPosts1 img {
border-radius:200px;
width:60px; height:60px;
margin-left:4px;
}

Just save to ur template and you are all done, view your blog for seeing a beautiful popular posts widget in the sidebar. If you haven't added the popular posts widget then first add it and select 5 posts show.

Cheers & Enjoy, if you faced any problem then let me know by commenting on this post. Take Care.

Style Social Media Flipboard Widget For Blogger

In this post im gonna explain how to awesome effect social media widget with light search box
for your blog.So, this include two gadget. social profiles icons and search box.You can link with
Facebook, Twitter, Google plus ,Pintrest and Rss Feed.you can take a look at in demo page.

Demo

You may like these articles
     Below Post Social Sharing Widget for Blogger
     Extracting Hover Style Social Media Widget for Blogger
     Wooden Style Social Media Widget For Blogger
   5 Most Baffling Aspects of Pinterest
     Ultimate Traffic Driver For Your Site: Twitter

How to addFlipboard Style Social Media Widget

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below code.

<style type="text/css">
#flipboard_btrix{ width:300px;}
ul.flipboard_btrix{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px; 
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard_btrix li{
display: inline-block;width: 55px; height: 50px;margin-right: -px; background: white;font: bold 36px Arial; 
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.flipboard_btrix li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s; 
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_btrix li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 5px; 
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_btrix li a img{
border-width: 0;
}
ul.flipboard_btrix li:hover a{
-moz-transform: rotateY(180deg); 
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #cef1ff; 
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 0 5px #eee inset;
-moz-box-shadow:0 0 5px #eee inset;
box-shadow:0 0 5px #eee inset;
}
ul.flipboard_btrix li:hover a span{
-moz-transform: rotateY(180deg); 
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#btrix-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin7D3bN-Gik48s_ZulwUBRNgoDftuBxVClMu-m-KvLl3rgQcCc3YVBTwFG9W24vu4XOh-uwYI9tPmkLEquSkiM_Egz1zLaN8EIcTrWld5mkaDFagJb4YsOj2c48lvkARu9x0ih88yEMFUH/s1600/green.png) no-repeat scroll center center transparent;
    width: 290px;
    height: 50px;
    disaply: block;
}
form#btrix-searchform {
    display: block;
    padding: 7px 16px;
    margin: 0;
}
form#btrix-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
form#btrix-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    vertical-align: top;
    border: none;
    background: transparent;
}

</style>
<div id="flipboard_btrix">
<center>
<a style="font-size:25px;" >Connect With Us </a>
</center>
<br />
<ul class="flipboard_btrix">
<li><a href="http://www.pinteresr/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnB1-ctjJMVTZBt1wXMd58Mi-0ET2-hT3EyJ4A6ErdaXfwketxtp_BZAwoQi5SQn9V5jH399otkwT9K3QDYN3ekn8xpBimTubiMA9ydnNyFFbplL17vOWhnawqoF4oeIae7H8hidYUZmQt/s1600/btrix_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg23Mg9kzwMI-wAXZN9K7uo4ECwFPn8NHxPolx5HLEcE1Lj4O5M0JUPFA-c9tpEzbhuFFkufbZUPl6sTnDcznaoqf1ywTjDbPZfcjibsoI6SCHIgCg474Nczq1UoS3EIZxszSHuUCnSeqtG/s1600/btrix_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="https://plus.google.com/userId"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGYKCtYbbkzD5tAdGUomP7A9DaA1_sKjADKdBS_NnrmgwoH3xz0tQUuxxXYl2Eb7WYFnHx44agVKFJoMGaGgavApM_aIrVDBlFuXuvg5CtzvVGmnUIvMzSzFl9H10YZRLQEysSYzfFKn-v/s1600/btrix_google+.png" title="Google plus" /></a></li>
<li><a href="http://www.twitter/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_juK8O4BEkIpgQcZBHkgXgWs_qV-aL0Aajc8YZ8kAAY-BqG138iSMVu_Q9tPsfSs8586BIeMN0GwG38VZVtzMdBPTup8s_2r88EaoHr5ovfQ-K7R0eVMUsjcXQAysXB6E7mWYBobhr3_D/s1600/btrix_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO79WpVgq2DwvIBgTfdbWUSPFX5dsRYsXZBCK63QeoJwZHRRezsdMev2TMwA4kLMz4K9_GJBZdg5k2g3NV3_RdglQvm2-LlrmZNN5QkyUfdv9JaRnMhi8yuFExmGw0N-dExnCDnUm4pcOZ/s1600/btrix_rss.png" title="Add RSS Feed" /></a></li>
</ul>
<div id="btrix-searchbox">
<form action="/search" id="btrix-searchform" method="get">
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" type="text" value="Search..." />
        <input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
    </form>
</div>
</div>

Replace Bloggertrix with your twitter profile
Replace Bloggertrix with your facebook profile
Replace Bloggertrix with your feedburner profile
Replace Bloggertrix with your pinterest Username
Replace UserId with your Google Plus User Id

5. Now save your HTML/Javascript'. You are done.
If you have any problem about Flipboard Social Media Widget, Just leave a comment

Facebook And blogger Urdu Tricks Tips