CuteRebellion

Wednesday, June 13, 2018

How To Add Author Box Below Every Post In Blogger

Hi ! Today i'm going to share an awesome post about How To Add Author Box Below Every Post In Blogger, About the author widget is one of the compulsory and important widget to add in your blog. It helps the visitor to know more about the author and his/her blog. The widget which i have shared today is very minimal and elegant and doesn't affect your blog loading time . Lets move further and see How To Add Simple Author Box Below Every Post In Blogger. You can check the photo below.

LET'S START

The First thing you need to do is to login into your Blogger account and go to > Template > Edit HTML and search for the ending ]]></b:skin> tag and just above it paste the following code.

/* ######## Author Widget By Sorabloggingtips.com ######################### */
.sora-author-box {
border: 1px solid #f2f2f2;
background: #f8f8f8;
overflow: hidden;
padding: 10px;
margin: 10px 0;
}
.sora-author-box img {
float: left;
margin-right: 10px;
border-radius: 50%;
}
.sora-author-box p {
padding: 10px;
}
.sora-author-box b {
font-size: 20px;
}

ADDING HTML

In the template, search for the <data:post.body/> tag and just below it paste the following HTML Coding. In case, you are unable to find <data:post.body/>, then you can paste it just below <div class='post-footer'> or <div class='post-footer-line post-footer-line-1'></div>.

NOTE: If you want to display the widget in every page ( Homepage, postpage, indexpage, searchpage, archive page etc.) Then remove the lines which are marked in red from the above code.

NOTE*: Change the text in blue line with your detail.

Congrats !! You have made it. Visit your blog and check the awesome widget live in action, hope you liked this tutorial, if you enjoyed then please share it with your friends.

Credit to: SoraBloggingTips

Thank you for using my tutorial's ^^ Leave a comment here ! so i can re-visit you!

How to Add Social Sharing Widget In Blogger

CuteRebellion 5:28 AM 2 Comments

Hi ! Social sharing widgets are an essential part of blog and today we are going to learn How To Add Social Sharing Widget In Blogger, This widget will help you and your visitor to share your blog content easily all over the internet via various social media sites . Lets move further and see How To Add Simple But Elegant Social Sharing Widget In Blogger. You can check the picture below.

/* ######## Social Sharing Widget By Sorabloggingtips.com ######################### */
.share-box {
position: relative;
padding: 10px;
}
.share-title {
border-bottom: 2px solid #777;
color: #010101;
display: inline-block;
padding-bottom: 7px;
font-size: 15px;
font-weight: 500;
position: relative;
top: 2px;
}
.share-art {
float: right;
padding: 0;
padding-top: 0;
font-size: 13px;
font-weight: 400;
text-transform: capitalize;
}
.share-art a {
color: #fff;
padding: 3px 8px;
margin-left: 4px;
border-radius: 2px;
display: inline-block;
margin-right: 0;
background: #010101;
}
.share-art a:hover{color:#fff}
.share-art .fac-art{background:#3b5998}
.share-art .fac-art:hover{background:rgba(49,77,145,0.7)}
.share-art .twi-art{background:#00acee}
.share-art .twi-art:hover{background:rgba(7,190,237,0.7)}
.share-art .goo-art{background:#db4a39}
.share-art .goo-art:hover{background:rgba(221,75,56,0.7)}
.share-art .pin-art{background:#CA2127}
.share-art .pin-art:hover{background:rgba(202,33,39,0.7)}
.share-art .lin-art{background:#0077B5}
.share-art .lin-art:hover{background:rgba(0,119,181,0.7)}

<b:if cond='data:blog.pageType == "item"'>
<div class='share-box'>
 
          <h8 class='share-title'>Share This:</h8>
               <div class='share-art'>
 
<a class='fac-art' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'> Facebook</span></a>

<a class='twi-art' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> Twitter</span></a>

<a class='goo-art' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='resp_del3'> Google+</span></a>

<a class='pin-art' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='resp_del4'> Pinterest</span></a>

<a class='lin-art' expr:href='"http://www.linkedin.com/shareArticle?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/><span class='resp_del5'> Linkedin</span></a>

</div>
</div>
<div style='clear:both'/>
 
</b:if>

NOTE: If you want to display the widget in every page ( Homepage, postpage, indexpage, searchpage, archive page etc.) Then remove the lines which are marked in red from the above code.

Note* :- Change the text in blue line with your detail.

ADDING FONTawesome

The widget works on fontawesome icons, so to make the widget work you have to install fontawesome in your blog, To do so.

In the template, search for the </head> tag and just above it paste the following HTML Coding.

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Congrats !! You have made it. Visit your blog and check the awesome widget live in action, hope you liked this tutorial, if you enjoyed then please share it with your friends.

Credit to: SoraBloggingTips

Thank you for using my tutorial's ^^ Leave a comment here ! so i can re-visit you!

How to Add Stylish Cloud Label Widget In Blogger

CuteRebellion 4:51 AM 0 Comments

Hi guys ! So today we are going to learn How to Add Stylish Cloud Label Widget In Blogger, This widget will help you to categories your blog content in perfect and standard way. it also helps to manage your blog bounce rate in control. Lets move further and see How to Add Stylish Cloud Label Widget In Blogger. You can check the picture below.

LET'S START

The First thing you need to do is to login into your Blogger account and go to

Layout
Add label Widget
From the Layout and put the settings same as the picture below.

In the template, search for the ]]></b:skin>

tag and just above it paste the following Coding.

/* ######## Cloud Label Widget By Sorabloggingtips.com ######################### */
.cloud-label-widget-content {
text-align: left
}
.cloud-label-widget-content .label-count {
background: #2b2b2b;
color: #fff!important;
margin-left: -3px;
padding-right: 3px;
white-space: nowrap;
border-radius: 2px;
padding: 1px 4px !important;
font-size: 12px !important;
margin-right: 5px;
}
.cloud-label-widget-content .label-size {
background: #ebebeb;
display: block;
float: left;
font-size: 11px;
margin: 0 5px 5px 0
}
.cloud-label-widget-content .label-size a,
.cloud-label-widget-content .label-size span {
height: 18px !important;
color: #2b2b2b;
display: inline-block;
font-size: 12px;
font-weight: 500!important;
padding: 6px 8px
}
.cloud-label-widget-content .label-size a {
padding: 6px 10px
}
.cloud-label-widget-content .label-size a:hover {
color: #000!important
}
.cloud-label-widget-content .label-size,
.cloud-label-widget-content .label-count {
height: 30px!important;
line-height: 19px!important;
border-radius: 2px
}
.cloud-label-widget-content .label-size:hover {
background: #2b2b2b;
color: #fff!important
}
.cloud-label-widget-content .label-size:hover a {
color: #fff!important
}
.cloud-label-widget-content .label-size:hover span {
background: #ebebeb;
color: #2b2b2b!important;
cursor: pointer
}
.cloud-label-widget-content .label-size-1,
.label-size-2,
.label-size-3,
.label-size-4,
.label-size-5 {
font-size: 100%;
opacity: 10
}

NOTE: The following Css only works for Cloud Label Widget if you put the setting for List label it will not work properly.

You have made it. Visit your blog and check the awesome widget live in action, hope you liked this tutorial, if you enjoyed then please share it with your friends,

Credit to: SoraBloggingTips

Thank you for using my tutorial's ^^ Leave a comment here ! so i can re-visit you!

Cute Divider's

CuteRebellion 4:30 AM 0 Comments

Hi! These are some cool and girly divider's for your blog! They can suit all sorts of happy moods. Use these cute divider's for dividing posts or long texts. You can also put your text in the center as a headline divider. See also the They’re great to use on website/blog.

NOTE:

This is not mine unless stated. I just want to share what i discovered so you can use it too in your blog. Credits to the owner of this cute cursor's. Please! Leave a comment if your using this ^_^.

Thank you for using my tutorial's ^^ Leave a comment here ! so i can re-visit you!

Monday, June 11, 2018

Cute Cursor

CuteRebellion 9:27 AM 0 Comments

Hi! i want to share this cute cursor's there so many of them so i think you gonna that suits to your taste enjoy !

How to add cursor in blog?

FOR TEMPLATE DESIGNER

Search ]]></b:skin> copy the code below and paste it underneath ]]></b:skin>

body, a, a:hover {
cursor: url(YOUR CURSOR URL), auto;}

FOR BLOG-SKIN

Search </style> copy the code below and paste it underneath </style>

body, a, a:hover {
cursor: url(YOUR CURSOR URL), auto;}

Change the highlighted text with your own cursor url…

NOTE

This is not mine unless stated. I just want to share what i discovered so you can use it too in your blog. Credits to the owner of this cute cursor's.
Please! Leave a comment if your using this ^_^.