Free Blogger Academy: CSS

How To Add Beautiful Subscribe Widget to Blogger

Do you like to add a good looking social subscribe widget to your blog? Then simply follow the steps given below.

1.Login to your blogger account and go to "Edit HTML".

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

<style type='text/css'>
@import url(https://fonts.googleapis.com/css?family=Lora:400,700);

#subscribe-btt {
    margin: 0;
    padding: 10px;
    background: #eee;
    border: 3px solid #e8e8e8;
}

#subscribe-btt:hover {
    background: #e9e9e9;
    border: 3px solid #ddd;
}

#subscribe-btt h2.mysocialurl {
    border: 0;
    margin: 0 0 8px 0;
    padding: 0 0 0 56px;
    height: 48px;
    line-height: 48px;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    font-family: Lora;
}

#subscribe-btt h2.my-twitter {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLduMTorB3Jia3Ualt__zrKS-naS-pVp8pUUm42nk-d7c88z0CNnZ_PMT2qcOzNQEFW-l5MiCvPCH8HIzuHQskKJ6hRezyS7zHFAhT4qmcAtW4VYhpfEbCCxLb1ODM8FpFfYJgvd0RDzct/s1600/twitter.png) no-repeat top left;
}

#subscribe-btt h2.my-facebook {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibJhkqR749C0mf-_24VaCECQAZgwmx8bmPBdLHrWoTLaTdpBBJyh9z8hfqswQrhYkTGvB5TooHLDH1ua3DPDoOMNEEZHmrVO44TEf8ivisdNBND-JzqlXNfWgSlTDuKPA2WVeXYk2JAb4h/s1600/facebook.png) no-repeat top left;
}

#subscribe-btt h2.my-googleplus {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitA57Z3EWJa4vke9jB0we2YgJyOmMtBfxjpteF9zxq6904eCtEzir6QQEJzCzlOHiIaq3IpmP6uX-yABgHvPkve6dtnjLuy-47KkkKOhIXRpAT-_Yv1oPoJBk79dpTu3oB2TsjBMK5INrj/s1600/google_plus.png) no-repeat top left;
}

#subscribe-btt h2.my-pinterest {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioSChz2SA_Y0RIiyXSv0BbPpz7i75Ife4EiY7oKtqDQRn4zBwyqVd7DhVqNVmo-Jaga7Q4u5eQKFT7jQZsvpKp3LyZUtab7eb0pQCu25DguNxrovvP9CH6ZckN3RiT_9XjEqY0F7FNejaY/s1600/pinterest.png) no-repeat top left;
}

#subscribe-btt h2.my-instagram {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkWpB5-nrptnkOGM1SkLsqIae1kTjJlbJMlNrCXk5A5qMSAIDEpHZWJ6V8ve-TuSNKzJfjr3xqdSDC8N0tt21Wjwba9SWRmC_MiiKgS79n4pclU9DZBYOqguebV5SuSFkmXcYiAky7rise/s1600/instagram.png) no-repeat top left;
}

#subscribe-btt h2.my-linkedin {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-0UGu5kex_bso-dycdMmaxPvH8AwgbBN0M6PQ2dpNSu9JsvVtMht7PFtnazedl_H2qt0LqyH9FBH4RJjqi-Oeel-UzT8sBaUNHxVmMYhHojzM0abwS5fqjONdfGbTesjZj4KKAv0auLnu/s1600/linkedin.png) no-repeat top left;
}

#subscribe-btt h2.my-youtube {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgheAM37nXYHhQfUL4a0hGxBc3JABiBr9Ji77m4Scdgbo-u8Xus0UojXp77hnPobIpxF58CR1fq8znYMZ7rEdQuyvl54aYC-XcHZGwJe5bvkAn1m-7rki39AEGBUxFEs9w_SY7snjYoPqqw/s1600/youtube.png) no-repeat top left;
}

#subscribe-btt h2.my-rss {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyn5neeUinkk66ROlrYBQjHQu3mhK-4ccKpf1fcGrC5aPQ0zxBF4sT_7oAO-UzL6NinlSB2mCV6GrhrNZtADqUvGaoU2MVM8cJIwTSVsY1Yw4PRRpr_l8SGHls-QIiVjlOT_0ZsmF_CC6P/s1600/rss.png) no-repeat top left;
}

#subscribe-btt h2.my-email {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy3Zs64aaZijh9OxADbqwt1B9JYGdBmsbrgi35soykwa2O1_ryReiKQoAo6gJM2XETN_LhvzBDGhjbP-MNCXSuEuGhsmyxMH2TnWKJA72jYeW6_bOC3bpt69s_-QJjDyQGxlnbqpKS9HQS/s1600/mail.png) no-repeat top left;
}

#subscribe-btt .mysocialurl a {
    color: #252e28;
    text-decoration: none;
}

#subscribe-btt .mysocialurl a:hover {
    color: #000000;
    text-decoration: underline;
}
</style>

4.Now go to "Layout" and click on "Add a Gadget".

5.Select "HTML/JavaScript" and add the code given below and click "Save".

<div id="subscribe-btt">

<h2 class="mysocialurl my-twitter"><a href="YOUR-TWITTER-URL">FOLLOW ME ON TWITTER</a></h2>

<h2 class="mysocialurl my-facebook"><a href="YOUR-FACEBOOK-URL">FOLLOW ME ON FACEBOOK</a></h2>

<h2 class="mysocialurl my-googleplus"><a href="YOUR-GOOGLE-PLUS-URL">FOLLOW ME ON GOOGLE PLUS</a></h2>

<h2 class="mysocialurl my-pinterest"><a href="YOUR-PINTEREST-URL">FOLLOW ME ON PINTEREST</a></h2>

<h2 class="mysocialurl my-instagram"><a href="YOUR-INSTAGRAM-URL">FOLLOW ME ON INSTAGRAM</a></h2>

<h2 class="mysocialurl my-linkedin"><a href="YOUR-LINKEDIN-URL">FOLLOW ME ON LINKEDIN</a></h2>

<h2 class="mysocialurl my-youtube"><a href="YOUR-YOUTUBE-URL">FOLLOW ME ON YOUTUBE</a></h2>

<h2 class="mysocialurl my-rss"><a href="YOUR-RSS-FEED-URL">SUBSCRIBE VIA RSS</a></h2>

<h2 class="mysocialurl my-email"><a href="YOUR-FEEDBURNER-EMAIL-SUBSCRIPTION-URL">SUBSCRIBE VIA EMAIL</a></h2>

</div>

NOTE : In above code, replace pink colored codes with your social profile URLs.

Final result will look like this:

How To Add Image Hover Effect in Blogger

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> Tag

3.Copy and Paste below CSS code above </head> Tag

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

</style>

4.Now Click on "Save Templates"

Now whenever you embed your image in blog or blog posts you use codes like below.

Look at the Example below.

5.Replace above code with below code to have hover effect..

It will look like this.

How To Add Beautiful Subscribe Widget to Blogger

How To Add Beautiful Subscribe Widget to Blogger

How To Add Image Hover Effect to Blogger

How To Add Image Hover Effect in Blogger