Customize Blogger labels with gradients CSS

Customize Blogger labels with wonderful color gradients

Customize Blogger labels

Do you own a blog on Blogger platform

Do you like designing and developing blogger templates?

I give you the CSS code to make the appearance of Blogger labels better

Of course you need to customize and design your blog better

I offer you a wonderful CSS code set with color gradients that make you a better blogger

All you have to do is go to your blog and put the code inside the HTML editor below the skin  ]]></b:skin>

Code for Blogger Labels

<style>

/* Label1 https://bttemb.blogspot.com/ CSS Styles */

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {

font-size:100%;

filter:alpha(100);

opacity:10

}

.cloud-label-widget-content{

text-align:left

}

.label-size {

background:linear-gradient(to bottom, #3D6218 0, #548722 40%, #578B23 50%, #548722 60%, #3D6218 100%) no-repeat;

display:block;

float:left;

margin:0 3px 3px 0;

color:#ffffff;

font-size:11px;

text-transform:uppercase;

}

.label-size a,.label-size span{

display:inline-block;

color:#ffffff !important;

padding:6px 8px;

font-weight:bold;

}

.label-size:hover {

background:#333333;

}

.label-count {

white-space:nowrap;

padding-right:3px;

margin-left:-3px;

background:linear-gradient(to bottom, #EA3B06 0, #F83F07 8%, #FA7147 40%, #FB7951 50%, #FA7147 60%, #F83F07 93%, #EA3B06 100%) no-repeat;

color:#fff !important;

}

.label-size {

line-height:1.2

}

</style>

Place the code directly below the skin ]]></b:skin>

Then click Save and see the result

Read more »

CUSTOMIZE BLOGGER LABELS WITH CSS

Blogger is a great blogging platform that features great blogging features that contribute to blogging in search engines and SEO

You may need to customize your appearance labels for your blogger's blog

This is a css code in order to customize blogger labels and you can customize it as you like.

All you have to do is log in to your Blogger account and go to the blog where you want to add the effect and place this code inside the HTML control panel Top tag </ head>.

<style>#Label1 a {

    color: #123cae;

    font-weight: bold;}

#Label1 a:hover {

    color: #fff;

    font-weight: bold;}

#Label1 ul&gt;li {

    background: #fff;

    padding: 2px;}

#Label1 ul&gt;li:hover {

    background: #0d88e6;}

.Label li {

 background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;

/* Label1 https://bttemb.blogspot.com/ CSS Styles */

  border: 1px solid;

  border-radius: 6px 6px 6px 6px;

  float: left;

  font-size: 116%;

  list-style: none outside none;

  margin: 2px; padding: 4px;

  transition: all 0.3s ease 0s; }.Label li:hover {transform: rotate(5deg);}.Label a {color: #fff;text-decoration: none;}</style>

After placing the code press Save.

Read more »

Add email subscribe to Blogger

Add email subscription to Blogger Blogs

How  to Add email subscription to Blogger Blogs

Blogger is a great platform and has many features and is the most prevalent platform in the world and the best in terms of customization, design and ease.

Add Email Subscription Add a feature that allows visitors to your blog to receive e-mail notifications of new topics on your blog.

إAdd email  subscribe to Blogger

The add-in is in the existing form, and you can customize it as you want if you have some experience in HTML and CSS.

In this publication, you can study and explain in detail how to add an email subscription to a blogger

Just follow the steps and apply them

How is that ?

• 1- You will log into your Blogger account and head to the blog to add the gadget to :
• 2- Go to : Layot > And then to where you want the extension to appear : > Add a Gadget > HTML/JavaScript :

Illustrative image

• 3- Copy the code below :

<style>
#HMH-FeedBurner {
background: #;
border: 0px solid #;
padding: 14px 0px 0px 0px;
text-align: center;
}
#HMH-FeedBurner input[type="text"] {
border: 0px solid #;
font-size: 10px;
margin: -5px 0 10px 0;
padding: 10px;
width: 80%;
border-radius: 6px;
}
#HMH-FeedBurner input {
box-shadow: 0 2px 2px #BBBBBB;
-moz-box-shadow: 0 2px 2px #BBBBBB;
-webkit-box-shadow: 0 2px 2px #BBBBBB;
}
#name {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGyj4-ND8QQTpGDBE_9_GU8-fytUNybmVMSbz8HW88Vm-MdrtArHJptVOen1t531VdHOz0ou3nX-eodXD7gUfXiono8n_cnUAMiVqS0LsWDHFVvZBe0uoCca2jAXyOppEzZ8fjDox9QA3k/s1600/Asset+15%2540222x.png) no-repeat scroll right center #FFFFFF;
}
#email {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJNCG_cAmpbS_ra1saqd4-GfwwGeitcK12BUSSkkSzHSb0oXm2Ctui6boKTIdllhFS1H1YHD-S6aUmagUAB6i1qD2WGJRdW6D0cZK3HVttCU8u-rkKancPEqQc61Fvb8BUppnEANlxSGB2/s1600/Asset+14%2540222x.png) no-repeat scroll right center #FFFFFF;
}
#HMH-FeedBurner input[type="submit"] {
    background: #0a4650;
    border: 2px solid #0d5f6d;
    color: #ffffff;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    height: 40px;
    margin-top: -1px;
    padding: 8px 0;
    text-transform: capitalize;
    width: 94%;
    border-radius: 6px;
}
border-radius: 6px;
#HMH-FeedBurner input[type="submit"]:hover {
background: none repeat scroll 0 0 #005588;
}
.art-blockcontent {
    padding: 0px;
}
<!-- Follow by Email https://bttemb.blogspot.com -->
</style>
<!-- HMH.pe FeedBurner Subscription Form -->
<div id="HMH-FeedBurner">
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bt-temblates', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" name="uri" value="bt-temblates" /><input type="hidden" value="en_US" name="loc" />
<input type="text" id="name" name="name" onfocus="this.value=&#39;&#39;" value="Your Name" placeholder="Your Name" />
<input type="text" id="email" name="email" onfocus="this.value=&#39;&#39;" value="Your Email Address" placeholder="Enter Your Email Address" />
<input type="submit" value="Subscribe Now" id="submit" name="submit" />
</form>
</div>
<div align="center">
<br />
</div>
<div align="center">
<a href="http://www.facebook.com/bttemb" target="_blank" medium;"="" font-size:="" roman";="" new="" times="" style="font-family: "><img border="0" align="center" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ16w9ou1A4EIWz1KglS2mI_BI0nkyhH2974-JQDb54L5Mrm8wlK0iLldFuWWDDZzbYZTt73lD5SaUIE7a6p3DMkzBLuQFPYVA0GRoiCpohYRQ8fWvth-N71ABWgMUeAAiWnuEhlTmFFEZ/s1400/social+media+%25282%2529.png" style="width: 40px; height: 40px;" /></a> <a href="https://twitter.com/bttemblate" target="_blank" medium;"="" font-size:="" roman";="" new="" times="" style="font-family: "><img border="0" align="center" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQlm7LGLdecm_SD7-yHGim_1B7PbfavVK3i2uFcVa6D-6WuBHxcR2jGWfn7SWETEVbBZnaPrQGLiDALmcULEf_E40oKH6zOFCVSZq_fLcX9_Y6x9MzxRgd8yOlPaaOtenwR2TuYnYBkHFx/s1400/social+media+%25283%2529.png" style="width: 40px; height: 40px;" /></a> <a href="https://plus.google.com/113543832299768734135" target="_blank" medium;"="" font-size:="" roman";="" new="" times="" style="font-family: "><img border="0" align="center" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqku0FOKR_0uocMNe9uYHkKnkBoNFgg5zqXPyf1vuwoYOhyDamWhRgi5stW891BUBQBrA2yseMLoRNtjNm84zNovLPUh9Lr6dLgMo3rmWlP-6mKW16LCYynSBYbFI3fW_O8sRROHOEyHGw/s1400/social+media+%25281%2529.png" style="width: 40px; height: 40px;" /></a>
</div>

• 4- Customize : Replace bt-temblates Place your username on feedburner.
• 5- (Place the code in the tool and then save and see the result).

Read more »