Assignment for you How to add style button to blogger 2021 How to add style button to blogger 2021

How to add style button to blogger 2021

 

ការបន្ថែមប៊ូតុងទាញយកទាន់សម័យនៅក្នុងប្លុកមិនពិបាកទេ។ប្រសិនបើអ្នកមានចំណេះដឹងផ្នែកសរសេរកូដខ្លះ (HTML និង CSS) នោះអ្នកអាចធ្វើវាបានយ៉ាងងាយស្រួល។


ប្រសិនបើអ្នកបង្កើតប៊ូតុងទាញយកដ៏សាមញ្ញឬប៊ូតុងណាមួយនៅលើ blogger អ្នកសរសេរbloggerដោយមានជំនួយពី <button> ... </button>  អ្នកគ្រាន់តែត្រូវការបន្ថែម CSS របស់វានៅក្នុងប្រធានបទអ្នកសរសេរប្លុករបស់អ្នកបន្ទាប់ពីនោះនៅពេលណាដែលអ្នកបង្កើតប៊ូតុងនៅលើគេហទំព័រអ្នកសរសេរប្លុករបស់អ្នកបន្ទាប់មកប៊ូតុងទាំងនោះនឹងមើលទៅទាក់ទាញជាងមុន។



step 1:</head>


<script type='text/javascript'>

//<![CDATA[

function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }

loadCSS("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css");

//]]>

</script>

<noscript>

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css' rel='stylesheet'/>

</noscript>


step 2: ]]></b:skin>


/* CSS Demo & Download Buttons By (www.Techly360.com) */

.bie-slide,

.bie-slide2 {

  position: relative;

  display: inline-block;

  height: 40px;

  width: 170px;

line-height: 40px;

  padding: 0;

border-radius: 50px;

  background: #fdfdfd;

  border: 2px solid #f84f4f;

  margin: 10px;

  transition: all 0.5s ease-in-out;

}

.bie-slide2 {

  border: 2px solid #36D7B7;

}

.bie-slide:hover {

background-color: #f84f4f;

}

.bie-slide2:hover {

background-color: #36D7B7;

}

.bie-slide:hover span.circle,

.bie-slide2:hover span.circle2 {

  left: 100%;

margin-left: -45px;

background-color: #fdfdfd;

  color: #f84f4f;

}

.bie-slide2:hover span.circle2 {

  color: #36D7B7;

}

.bie-slide:hover span.title,

.bie-slide2:hover span.title2 {

  left: 40px;

  opacity: 0;

}

.bie-slide:hover span.title-hover,

.bie-slide2:hover span.title-hover2 {

  opacity: 1;

  left: 28px;

}

.bie-slide span.circle,

.bie-slide2 span.circle2 {

  display: block;

background-color: #f84f4f;

  color: #fff;

  position: absolute;

  float: left;

  margin: 5px;

line-height: 30px;

  height: 30px;

  width: 30px;

  top: 0;

  left: 0;

  transition: .5s;

border-radius: 50%;

}

.bie-slide2 span.circle2 {

background-color: #36D7B7;

}

.bie-slide span.title,

.bie-slide span.title-hover,

.bie-slide2 span.title2,

.bie-slide2 span.title-hover2 {

  position: absolute;

  left: 65px;

text-align: center;

  margin: 0 auto;

font-size: 16px;

font-weight: bold;

  color: #f84f4f;

  transition: .5s;

}

.bie-slide2 span.title2,

.bie-slide2 span.title-hover2 {

  color: #36D7B7;

}

.bie-slide span.title-hover,

.bie-slide2 span.title-hover2 {

  left: 80px;

  opacity: 0;

}

.bie-slide span.title-hover,

.bie-slide2 span.title-hover2 {

  color: #fff;

}


Step 3: style button 


<div id="wrap" style="text-align:center">

<a class="bie-slide" href="#" rel="no-follow" target="_blank">

<span class="circle"><i class="fa fa-laptop"></i></span>

<span class="title">Demo</span>

<span class="title-hover">Click here</span>

</a>

<a class="bie-slide2" href="#" rel="nofollow" target="_blank">

<span class="circle2"><i class="fa fa-download"></i></span>

<span class="title2">Download</span>

<span class="title-hover2">Click here</span>

</a>

</div>


Videos Training 

Post a Comment

Previous Post Next Post

Indian Posts Office

6/box-posts/recent

Author Site

This website Basically Provides Jobs Portal For Candidates. All the Posts are provided here sectioned well table for easier to reach for employer. Not only for Job you set this template for your educational website and some other categories related to study.


2018 - 2019 we have worked hard to create amazing look template. if you are interesting for using this template to your into your website then go to PikiTemplates.com
and purchase at cheap price the licence key and customisation support and lifetime update support.

Piki True Job template is basically designed for meet the requirements of users and customers. if you have any question please reach our contact us page.
assignmentskh provides online education, homework help, assignmentskh help, and e-learning services to students from various schools, colleges and universities. We assist, guide, and mentor students in their assignments editing, homework guidance, term papers, and project mentoring. We are a team of highly talented and ambitious professionals ready to serve you 24/7. A4U was incorporated by a team of highly qualified tutors who have been assisting students worldwide. A4U has onboard faculties who go through a rigorous selection process before being taken onto the tutor pool. We serve students looking for a homework helper service, that is learning and development-oriented. We are the solution to the student's educational needs. We understand your needs and help accordingly. We are working 24 hours a day and seven days a week. We work hard for your satisfaction, till you have a clear understanding of the subject matter. We provide a homework help chat room, where our professors are available to assist you. We aim to become the best assignment help site. Mission Statement- To impart education to the students that they can learn and implement. Thank you for visiting my website!