» » " NEW " Cara Membuat Lipatan kertas Social Share Button Di Sudut Bawah Kanan Blog

" NEW " Cara Membuat Lipatan kertas Social Share Button Di Sudut Bawah Kanan Blog

Ivankgribatako
Add Comment
NEW WIDGET 2016
Minggu, 17 Januari 2016
Cara Membuat Lipatan kertas Social Share Button Di Sudut Bawah Kanan Blog



*  Login Blog Anda
*  Pilih Template >>> Edit HTML
*  Cari Kode ini ]]></b:skin>
*  Copy kode di bawah dan letakkan diatas kode ]]></b:skin>
.content {
  box-sizing: border-box;
  position: relative;
  width: 90%;
  max-width: 100%;
  margin: 20px auto;
  padding: 30px;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mocked {
  display: block;
  background: #f4f4f4;
  width: 100%;
  height: 1em;
}
.mocked--heading {
  font-size: 3em;
}
.mocked--subtitle {
  font-size: 1.5em;
  width: 50%;
  margin-top: 0.5em;
}
.mocked--line {
  height: 1em;
  margin-top: 0.5em;
}
.mocked--line:first-child {
  margin-top: 1em;
}
.mocked--line:last-child {
  width: 50%;
}
.mocked--image {
  width: 200px;
  height: 200px;
}

.corner-share {
  width: 60px;
  height: 60px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: #75d0ff;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: width, height, box-shadow;
  transition: width, height, box-shadow;
  -webkit-transition-duration: 0.4s;
          transition-duration: 0.4s;
}
.corner-share:before {
  content: '';
  display: block;
  width: 141.42136%;
  height: 141.42136%;
  position: absolute;
  top: -70%;
  left: -70%;
  z-index: 1;
  background: white;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: box-shadow 0.4s;
  transition: box-shadow 0.4s;
}
.corner-share:hover {
  width: 120px;
  height: 120px;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.1);
}
.corner-share:hover:before {
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
}
.corner-share:hover .corner-share__left,
.corner-share:hover .corner-share__right {
  opacity: 1;
}
.corner-share:hover > .icon {
  opacity: 0;
}
.corner-share > .icon {
  position: absolute;
  right: 18px;
  bottom: 18px;
  margin-right: -9px;
  margin-bottom: -9px;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
.corner-share__left, .corner-share__right {
  display: block;
  width: 84px;
  height: 84px;
  position: absolute;
  bottom: 0;
  opacity: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
.corner-share__left .icon, .corner-share__right .icon {
  position: absolute;
  bottom: 70%;
  margin-bottom: -14px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.corner-share__left {
  background: #0080d1;
  right: 0;
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
}
.corner-share__left .icon {
  left: 70%;
  margin-left: -14px;
}
.corner-share__right {
  background: #38b2ff;
  left: 100%;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}
.corner-share__right .icon {
  right: 70%;
  margin-right: -14px;
}
*  Copy kode dibawah dan Kemudian pilih kolom footer trus klik tambahkan gadget ke dalam HTML/Javascript
" Lihat gambar di bawah "
<div class="corner-share">
    <svg class="icon" style="width:18px;height:18px" viewbox="0 0 24 24">
     <path fill="#FFF" d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z" />
    </path></svg>
    <a href="https://facebook.com/IvankValentine"class="corner-share__left"target="blank">
      <svg class="icon" style="width:24px;height:24px" viewbox="0 0 24 24">
       <path fill="#FFF" d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" />
      </path></svg></a>
    <a href="https://twitter.com/IvankGribatako"class="corner-share__right"target="blank">
      <svg class="icon" style="width:24px;height:24px" viewbox="0 0 24 24">
       <path fill="#FFF" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
      </path></svg></a>
  </div>








*  Klo sudah, jangan lupa di save

 ###  GOOD  LUCK  ###

Baca Juga Artikel Terkait Lainnya

Thanks For Your Comment Here
Langganan: Posting Komentar (Atom)