ADMIN WIDGETS: Widgets

Showing posts with label Widgets. Show all posts

Friday, 4 July 2014

Metro Style Social Media Widget for Blogger

Friday, July 04, 2014 Widgets No comments

We have shared many Social Media widgets with you since we started sharing widgets. We have come up with this new Metro Style Social Media Widget for Blogger. Previously we had shared

We are sharing another Social media Widget for blogger that would enhance the view and appearance of your blog. This enables your visitors to connect with you on Social Network easily. Metro Style Social Media widget provides a look like win 8 home screen. Which attracts the visitors and make them click on the links. We have observed that Metro Style Social icons are liked by most of the viewers and creates attraction.

Go to Blogger Dashboard

Click on Layout

Click on Add a Gadget on the Sidebar

A Popup window will appear like this

Click on Add Button and insert the below code into the box

<style>

.metro-social{width:315px}

.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}

.metro-social .facebookbt,.twitterbt,.googleplusbt,.pinterestbt,.linkedinbt,.youtubebt,.rssbt{z-index:7;float:left;margin:1px;position:relative;display:block}

.metro-social .facebookbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}

.metro-social .twitterbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-twitter.png) no-repeat center center #43b3e5;width:68px;height:70px}

.metro-social .googleplusbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-google+plus.png) no-repeat center center #da4a38;width:69px;height:70px}

.metro-social .pinterestbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-pinterest.png) no-repeat center center #d73532;width:68px;height:69px}

.metro-social .linkedinbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-linkedin.png) no-repeat center center #0097bd;width:69px;height:69px}

.metro-social .youtubebt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-youtube.png) no-repeat center center #e64a41;width:140px;height:69px}

.metro-social .rssbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-feed.png) no-repeat center center #e9a01c;width:140px;height:69px}

.metro-social li:hover .facebookbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-facebook1.png) no-repeat center center #1f69b3}

.metro-social li:hover .twitterbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-twitter1.png) no-repeat center center #43b3e5}

.metro-social li:hover .googleplusbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-google+plus1.png) no-repeat center center #da4a38}

.metro-social li:hover .pinterestbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-pinterest1.png) no-repeat center center #d73532}

.metro-social li:hover .linkedinbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-linkedin1.png) no-repeat center center #0097bd}

.metro-social li:hover .youtubebt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-youtube1.png) no-repeat center center #e64a41}

.metro-social li:hover .rssbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-feed1.png) no-repeat center center #e9a01c}

</style>

<br />

</div> <center>

<span id="linkit"><a href="http://technoratan.in/blogger-tips/metro-style-social-media-widget-blogger" rel="nofollow">Get This Social Widget</a></span></center>

Save and Exit

We had Also Shared

Customize Metro Style Social Widget for Blogger

Replace https://www.Facebook.com/TechnoratanIndia with your Facebook User ID

Replace http://twitter.com/technoratan with your Twitter User ID

Replace https://plus.google.com/+technoratanIndia with your Google Plus ID

Replace http://feeds.feedburner.com/technoratanindia with your RSS Feed Address

Replace http://www.youtube.com/user/technoratanindia with your Youtube Channel ID

Replace http://www.linkedin.com/company/technoratan-india/ with your Linkedin User ID

Replace http://www.pinterest.com/Technoratan with your Pinterest ID

If you have any doubt in your mind, you may ask via comments.

Awesome Multi-Colored Popular Posts Widget for Blogger powered CSS3

Sunday, June 29, 2014 Widgets No comments

Popular Posts Widget is a Widget providing by Blogger and we can add it to our Blog. This Widget displays the Most viewed posts of your blog, that may be of Month or in Week or All the time. You can select how Popular posts are to be displayed.By default it shows an image(if the post has) and Title of Post followed by the content of post wrapped by 20-25 Words. This article is a tutorial to Style that Popular posts Widget to an Awesome Multi - colored Popular posts Widget. This trick is done using simple CSS3 rather than using complex JavaScripts. A great feature of this trick is each Post shown in each Flat UI color, so these colors catches your Blog visitor's eyes and they have the tendency to take that post even if the Post is not so good.

Demo shows in bottom right side →

Features of this Widget

Flat UI colors used (it will attract users attention)

Automatic Post Numbering

CSS3 Hover Animation

Sign in to your Blogger Account and Active Popular Posts Widget

First Add Popular post Widget to Blogger

Go to Layout -> Select "Add a Gadget" and take Popular Posts Widget from the Widget List appear.

Give Title of widget, select how the popular posts should be appeared(in Month,or Week or All time) and click Save

Go to Template -> Edit HTML, Find ( Ctrl + F ) ]]></b:skin>

Copy the following code and Paste just above it

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}

#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}

#PopularPosts1 ul li:first-child:after{content:"1"}

#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}

#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}

#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}

#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:72%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}

#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:#c7f25f;width:66%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}

#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{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}

#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}

#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

#PopularPosts1 img{

-moz-border-radius: 130px;

-webkit-border-radius: 130px;

border-radius: 130px;

-webkit-transition: all 0.3s ease;

-moz-transition: all 0.3s ease;

transition: all 0.3s ease;

padding:4px;

border:1px solid #fff !important;

}

#PopularPosts1 img:hover {

border-radius: 0 0 0 0;

-moz-transform: scale(1.2) rotate(-711deg) ;

-webkit-transform: scale(1.2) rotate(-711deg) ;

-o-transform: scale(1.2) rotate(-711deg) ;

-ms-transform: scale(1.2) rotate(-711deg) ;

transform: scale(1.2) rotate(-711deg) ;

}

Click on Preview Template (You can see the template without saving)

Save the Template.

View Your Blog it is ready to attract users. I think this article will help you if so please share and Like us to spread our Blog.

If any problems with this trick don't hesitate to ask, do comment here...

Amazing New Facebook Smiley Codes For Chat

Saturday, June 28, 2014 Widgets No comments

Amazing New Facebook Smiley Codes For Chat

Its really cool to send smileys or art work along with your text in facebook messenger to your friends. In my previous post i have shown you to add Facebook Smiley Addons for google chrome as well as mozilla firefox which will let you add smileys or art work from within facebook chat box. In this post i will share with you guys some new facebook chat smiley codes which you type in facebook chatbox and is seen as smileys. Just copy any codes from below list into your facebook messenger and see the results.

Facebook Smiley Codes

[[f9.angry]]

[[f9.sleepy]]

[[f9.shock]]

[[f9.sun]]

[[f9.heart]]

[[f9.kiss]]

[[f9.inlove]]

[[f9.pizza]]

[[f9.coffee]]

[[f9.brb]]

[[f9.wine]]

[[f9.gift]]

[[f9.adore]]

[[f9.heartbreak]]

[[f9.angel]]

[[f9.baloons]]

[[f9.bowl]]

[[f9.rain]]

[[f9.bomb]]

[[f9.ghost]]

[[f9.cake]]

[[f9.callme]]

[[f9.devilface]]

[[f9.lying]]

[[f9.clap]]

[[f9.confused]]

[[f9.curllip]]

[[f9.doctor]]

[[f9.laugh]]

[[f9.sad]]

Awesome Guest Author Info Widget For You Blog

Saturday, June 28, 2014 Widgets No comments

Awesome Guest Author Info Widget For You Blog

Guest blogger plays important role on your blog when you don't have enough time. But no one serves you when they get nothing in return. Well you can reward your precious guest blogger by displaying their bio along with a link to their blog, website or any other social links like Google+, twitter etc. In this post i will share with you a widget which will allow you to display author bio below their post as one show in above image.

Editing Code For Guest Author Widget

Go to Blogger > Template > Edit Html

2. Now search for ]]></b:skin>

3. Copy/Paste following code just above ]]></b:skin>

/****MBW Guest Blogger Widget*****/

.mbw-author-box {

background: #f6e4db;

margin: 5px 0 20px 0;

padding: 12px;

border: 1px solid #e3e3e3;

border-radius:5px;

box-shadow:2px 2px 1px #e3e3e3;

overflow: hidden;

color: #3b3b3b;

font-size: 14px;

font-family: Arial, Tahoma, Verdana;

line-height: 1.6em;

}

/****www.myblogggersworld.com*****/

.mbw-author-box p {

margin: 0px;

padding: 0px;

}

.mbw-author-box img {

background: #FFFFFF;

float: left;

margin: 0 10px 0 0;

padding: 5px;

border: 3px solid #e3e3e3;

}

Save the template.

5. The major part is done, now every time you publish a guest post just follow this simple steps given below to add guest author widget.

How To Add Guest Author Bio Inside Blog Post?

After writing your guest post go to html section of your blog post by clicking on HTML beside Compose as show in the image below.

<div class="mbw-author-box">

<img alt="author-pic" height="85" src="IMG" width="85" /> <strong>About Guest Blogger</strong><br />Here Goes Details about your guest author</div>

Replace IMG with your guest author image url

Change Here Goes Details about your guest author to the details about your guest author.

If you have any query or have problem implementing this widget to your blog leave a comment below i will be happy to help you out.

Add Social Media Buttons Below Post In Blogger

Friday, June 27, 2014 Widgets No comments

Add Social Media Buttons Below Post In Blogger

In my last post, i told you the trick that how can you download torrent directly with idm. Today, i am going to share a beautiful spirit style social media widget for blogger. You can add this blogger at any place on your blog like side bar, header or below post. But according to my recommendation, try to use it below post.

Benefits Of Using Social Media Icons Below Post:

These social icons can be very beneficial foe you. You can see that on most popular blogs, these social media widgets are more prominent as compare to any thing on the blogs.

Helps you to get more traffic.

Build your readership on social media sites.

Gets you more like and shares.

Make your blog worthy in search engine eyes.

You may also like:

Problogger subscription box widget for blogger.

Facebook like box for blogger

How To Add Social Media Widget In Blogger?

As i have already explained that you can add this widget below post or in side bar. Follow below guide to install this widget on your blogger blog.

Below Post:

Login to your blogger account.

Back up your template. Important)

Go to Dashboard ==> Template ==> Edit HTML.

Find the following code.

Copy the below code and paste it just after the above code.

<li>

<div id="BeHsocialfb" style="background-position: 0px 0px;">Facebook</div>

</a>

<div id="BeHsocialtwit" style="background-position: -86px 0px;">Twitter</div>

</a>

<div id="BeHsociallink" style="background-position: -172px 0px;">Linkedin</div>

</a>

</a>

</li>

</ul>

<style>

.subscribebutton .mj_btnbg {

color: #141414;

font-weight: bold;

height: 35px;

line-height: 35px;

padding: 0 10px;

text-transform: uppercase;

}

.ul_hm li div {

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu6wnPE1iNDVzJDfIfBLp_-uWRVk2oS8ihvLtTgLTt5ELjATHAY9g-OQVcvxD8MVKorD_ZwCpT7xypZgCwmRSl7vOvkOJL2Tn5l37pUYQ3RV3etQaHYFyigwunOSWVxoq6NJ7PWeNoltU/s1600/social_icon_sprite.png");

float: left;

height: 83px;

margin-right: 3px;

width: 83px;

}

.BeHsociallinks {

font-size: 0;

}

#BeHsocialfb:hover {

background-position: 0 -86px !important;

}

#BeHsocialtwit:hover {

background-position: -86px -86px !important;

}

#BeHsociallink:hover {

background-position: -172px -86px !important;

}

#BeHsocialytube:hover {

background-position: -258px -86px !important;

}

#BeHsocialblog:hover {

background-position: -344px -86px !important;

}

ul li {list-style: none outside none;}

</style>

Click on save template.

Add Social Media Widget In Sidebar:

Go to Dashboard ==> layout ==> add a gadget

Click on Html/Java script.

Copy the above code mentioned in step 5 and paste it.

Click on save gadget.

Customizing The Social Media Widget:

Facebook Link, Twitter Link, LinkedIn link, YouTube link, Blog link with the requires link before saving the widget.

ADMIN WIDGETS

Friday, 4 July 2014

Metro Style Social Media Widget for Blogger

Sunday, 29 June 2014

Awesome Multi-Colored Popular Posts Widget for Blogger powered CSS3

Saturday, 28 June 2014

Amazing New Facebook Smiley Codes For Chat

Awesome Guest Author Info Widget For You Blog

Friday, 27 June 2014

Add Social Media Buttons Below Post In Blogger

visitor

Labels

Contributors