Tutorial membuat tombol Social Profile di Sidebar Footer Blogger
|
| Tombol Social Profile di Sidebar Footer Blogger |
Social Profile
Social profile atau profil media sosial adalah sebuah media online, dengan para penggunanya bisa dengan mudah berpartisipasi, berbagi, dan menciptakan isi meliputi blog, jejaring sosial, wiki, forum dan dunia virtual. Blog, jejaring sosial dan wiki merupakan bentuk media sosial yang paling umum digunakan oleh masyarakat di seluruh dunia.
Tombol social profile adalah tombol bilah sosial untuk menunjukkan atau memilih profil sosial Anda. Yang berarti pengguna situs web , ingin mengikuti situs web Anda di platform sosial lain (seperti Youtube, Instagram, Facebook, Twitter,dll.). Kegunaan tombol bilah sosial ini secara langsung membantu menemukan dan mengikuti profil sosial Anda.
Tutorial
Bagaimana cara membuat tombol social profil ? Cara membuat atau menambahkan tombol profil sosial di sidebar atau footer di Blogger, ikuti langkah-langkahnya sebagai berikut.
Script Tombol Social Profile
- Pertama masuk ke Dashboard Blogger.
- Pilih Tata Letak.
- Tambahkan GadgetHTML/Javascript di bagian Sidebar atau Footer
- Salin kode script di bawah ini
- Terakhir - Simpan
<div class ="social-frame">
<a href="#" class="social-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="#3b5998" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
</a>
<a href="#" class="social-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="#00acee" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
</a>
<a href="#" class="social-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="#ff0000" stroke-linecap="round" stroke-linejoin="round"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon fill="#fff" points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg>
</a>
<a href="#" class="social-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="#0e76a8" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
</a>
<a href="#" class="social-btn">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 48 48" width="34px" height="34px"><radialgradient id="yOrnnhliCrdS2gy~4tD8ma" cx="19.38" cy="42.035" r="44.899" gradientunits="userSpaceOnUse"><stop offset="0" stop-color="#fd5"/><stop offset=".328" stop-color="#ff543f"/><stop offset=".348" stop-color="#fc5245"/><stop offset=".504" stop-color="#e64771"/><stop offset=".643" stop-color="#d53e91"/><stop offset=".761" stop-color="#cc39a4"/><stop offset=".841" stop-color="#c837ab"/></stop></stop></stop></stop></stop></stop></stop></radialgradient><path fill="url(#yOrnnhliCrdS2gy~4tD8ma)" d="M34.017,41.99l-20,0.019c-4.4,0.004-8.003-3.592-8.008-7.992l-0.019-20 c-0.004-4.4,3.592-8.003,7.992-8.008l20-0.019c4.4-0.004,8.003,3.592,8.008,7.992l0.019,20 C42.014,38.383,38.417,41.986,34.017,41.99z"/><radialgradient id="yOrnnhliCrdS2gy~4tD8mb" cx="11.786" cy="5.54" r="29.813" gradienttransform="matrix(1 0 0 .6663 0 1.849)" gradientunits="userSpaceOnUse"><stop offset="0" stop-color="#4168c9"/><stop offset=".999" stop-color="#4168c9" stop-opacity="0"/></stop></stop></radialgradient><path fill="url(#yOrnnhliCrdS2gy~4tD8mb)" d="M34.017,41.99l-20,0.019c-4.4,0.004-8.003-3.592-8.008-7.992l-0.019-20 c-0.004-4.4,3.592-8.003,7.992-8.008l20-0.019c4.4-0.004,8.003,3.592,8.008,7.992l0.019,20 C42.014,38.383,38.417,41.986,34.017,41.99z"/><path fill="#fff" d="M24,31c-3.859,0-7-3.14-7-7s3.141-7,7-7s7,3.14,7,7S27.859,31,24,31z M24,19c-2.757,0-5,2.243-5,5 s2.243,5,5,5s5-2.243,5-5S26.757,19,24,19z"/><circle cx="31.5" cy="16.5" r="1.5" fill="#fff"/><path fill="#fff" d="M30,37H18c-3.859,0-7-3.14-7-7V18c0-3.86,3.141-7,7-7h12c3.859,0,7,3.14,7,7v12 C37,33.86,33.859,37,30,37z M18,13c-2.757,0-5,2.243-5,5v12c0,2.757,2.243,5,5,5h12c2.757,0,5-2.243,5-5V18c0-2.757-2.243-5-5-5H18z"/></path></circle></path></path></path></svg>
</a>
</div>
<style>
.social-frame{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height: 80px;
width: auto;
position: relative;
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001,
inset 0px 0px 0px 0px #fff9,
inset 0px 0px 0px 0px #0001,
inset 0px 0px 0px 0px #fff9,
inset 0px 0px 0px 0px #0001;
transition:box-shadow 0.6s cubic-bezier(.79,.21,.06,.81);
border-radius: 10px;
}
.social-btn{
height: 35px;
width: 35px;
border-radius: 3px;
background: #e0e5ec;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001,
inset 0px 0px 0px 0px #fff9,
inset 0px 0px 0px 0px #0001,
inset 0px 0px 0px 0px #fff9, inset 0px 0px 0px 0px #0001;
transition:box-shadow 0.6s cubic-bezier(.79,.21,.06,.81);
font-size: 16px;
color: rgba(42, 52, 84, 1);
text-decoration: none;
}
.social-btn:active{
box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
} </style>
Demo
Demikian Cara Membuat Tombol Social Profile di Sidebar Footer Blogger, semoga bermanfaat