-->
Beranda
Blogger

Cara Membuat Kotak Berlangganan Sosial Media diBlog

Halo teman kita Info, kali ini kita Info akan menaruh tutorial tentang cara menciptakan kotak berlangganan atau yg biasa diklaim subscribe box yg keren buat blog.

Tetapi pada sini masih ada tambahan untuk tombol media umum nya. Subscribe kontak digabung menggunakan tombol media umum tujuannya supaya lebih berhemat kode yg digunakan.

Pentingnya Kotak Berlangganan (Subscribe kotak)

Kotak berlangganan dalam blog melalui email ini memiliki kiprah yg nir kalah pentingnya. Tujuan pembuatan kotak berlangganan merupakan buat menaikkan pengunjung setia pembaca blog Anda.

Pengunjung Anda nir akan ketinggalan artikel atau berita terupdate menurut blog yg Anda kelola. Pada biasanya semakin poly yg berlangganan dalam blog anda, semakin rupawan dampaknya terhadap blog anda.

Cara Membuat Subscribe Box & Tombol Media Sosial pada Blogger

Kotak berlangganan yg akan Anda pasang dalam blog Anda haruslah ringan & responsive. Tujuannya supaya blog anda nir sebagai berat sebagai akibatnya loadingnya sebagai sangat lama. Pengunjung pun akan meninggalkan blog anda bila loadingnya sangat lama.


Nah, dalam artikel kali ini Kita Info akan menaruh tutorial. Mari simak menggunakan teliti.

Langkah 1

Pertama, Anda perlu menciptakan akun pada Feedburner.


Setelah mempunyai akun Feedburner & mengaktifkan email subscriptons, selanjutnya Anda perlu memasang kode CSS & HTML ke pada pengaturan blog.


Langkah 2

Langkah berikutnya yaitu simpan kode CSS berikut adalah pada atas </style> atau ]]></b:skin>

#sikupaiinfoSubscribe button:focus {background-color:#1d2129;} #sikupainfoSubscribe button:before {display:inline-block; width:20px; height:20px; margin:0px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2,21L23,12L2,3V10L17,12L2,14V21Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat; content:''; vertical-align:-3px;} #penainfoSubscribe .medsos {width:100%; text-align:center;} #penainfoSubscribe .medsos svg {width:20px;height:20px;margin-top:7px} #penainfoSubscribe .medsos svg path {fill:#fff} #penainfoSubscribe .medsos a {display:inline-block; margin-right:7px; width:35px; height:35px; box-shadow: 0px 7px 15px 0px rgba(0,0,0,0.4); transition: all ease-in-out 300ms; border-radius:100px;} #penainfoSubscribe .medsos a:last-child {margin-right:0px;} #penainfoSubscribe .medsos a:hover {box-shadow: 0px 23px 15px -3px rgba(0,0,0,0.25); transform: translate(0px, -10px) scale(1.05);} #penainfoSubscribe .medsos .facebook{background:#3a579a} #penainfoSubscribe .medsos .twitter {background:#00abf0} #penainfoSubscribe .medsos .googleplus {background:#df4a32} #penainfoSubscribe .medsos .youtube {background:#cc181e} #penainfoSubscribe .medsos .instagram {background:#992ebc} #penainfoSubscribe .medsos .pinterest {background:#e60023} @-webkit-keyframes penainfoRing{ 0% { -webkit-transform: rotateZ(0); } 1% { -webkit-transform: rotateZ(30deg); } 3% { -webkit-transform: rotateZ(-28deg); } 5% { -webkit-transform: rotateZ(34deg); } 7% { -webkit-transform: rotateZ(-32deg); } 9% { -webkit-transform: rotateZ(30deg); } 11% { -webkit-transform: rotateZ(-28deg); } 13% { -webkit-transform: rotateZ(26deg); } 15% { -webkit-transform: rotateZ(-24deg); } 17% { -webkit-transform: rotateZ(22deg); } 19% { -webkit-transform: rotateZ(-20deg); } 21% { -webkit-transform: rotateZ(18deg); } 23% { -webkit-transform: rotateZ(-16deg); } 25% { -webkit-transform: rotateZ(14deg); } 27% { -webkit-transform: rotateZ(-12deg); } 29% { -webkit-transform: rotateZ(10deg); } 31% { -webkit-transform: rotateZ(-8deg); } 33% { -webkit-transform: rotateZ(6deg); } 35% { -webkit-transform: rotateZ(-4deg); } 37% { -webkit-transform: rotateZ(2deg); } 39% { -webkit-transform: rotateZ(-1deg); } 41% { -webkit-transform: rotateZ(1deg); } 43% { -webkit-transform: rotateZ(0); } 100% { -webkit-transform: rotateZ(0); } } @-moz-keyframes penainfoRing{ 0% { -moz-transform: rotate(0); } 1% { -moz-transform: rotate(30deg); } 3% { -moz-transform: rotate(-28deg); } 5% { -moz-transform: rotate(34deg); } 7% { -moz-transform: rotate(-32deg); } 9% { -moz-transform: rotate(30deg); } 11% { -moz-transform: rotate(-28deg); } 13% { -moz-transform: rotate(26deg); } 15% { -moz-transform: rotate(-24deg); } 17% { -moz-transform: rotate(22deg); } 19% { -moz-transform: rotate(-20deg); } 21% { -moz-transform: rotate(18deg); } 23% { -moz-transform: rotate(-16deg); } 25% { -moz-transform: rotate(14deg); } 27% { -moz-transform: rotate(-12deg); } 29% { -moz-transform: rotate(10deg); } 31% { -moz-transform: rotate(-8deg); } 33% { -moz-transform: rotate(6deg); } 35% { -moz-transform: rotate(-4deg); } 37% { -moz-transform: rotate(2deg); } 39% { -moz-transform: rotate(-1deg); } 41% { -moz-transform: rotate(1deg); } 43% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(0); } } @keyframes penainfoRing{ 0% { transform: rotate(0); } 1% { transform: rotate(30deg); } 3% { transform: rotate(-28deg); } 5% { transform: rotate(34deg); } 7% { transform: rotate(-32deg); } 9% { transform: rotate(30deg); } 11% { transform: rotate(-28deg); } 13% { transform: rotate(26deg); } 15% { transform: rotate(-24deg); } 17% { transform: rotate(22deg); } 19% { transform: rotate(-20deg); } 21% { transform: rotate(18deg); } 23% { transform: rotate(-16deg); } 25% { transform: rotate(14deg); } 27% { transform: rotate(-12deg); } 29% { transform: rotate(10deg); } 31% { transform: rotate(-8deg); } 33% { transform: rotate(6deg); } 35% { transform: rotate(-4deg); } 37% { transform: rotate(2deg); } 39% { transform: rotate(-1deg); } 41% { transform: rotate(1deg); } 43% { transform: rotate(0); } 100% { transform: rotate(0); } }   

Catatan*: Silahkan membarui rona yg telah ditandai pada atas sinkron menggunakan harapan Anda.
Langkah 3
Setelah terselesaikan memasang kode CSS pada atas, selanjutnya Anda perlu memasang kode HTML. Kode HTML bisa dipasang pada mana saja sinkron harapan Anda. Apakah pada bawah artikel ataupun pada sidebar blog. Nah, jika Anda ingin menampilkannya pada sidebar, caranya misalnya berikut. Masuk ke Layout (Tata Letak), klik Add a Gadget (Tambahkan Gadget), Pilih HTML/Javascript Berikut ini merupakan kode HTML nya.


Catatan*: Silahkan membarui rona yg telah ditandai pada atas sinkron menggunakan asa Anda.
-Ganti yg ditandai kuning (terdapat tiga buah) menggunakan username feedburner Anda.
-Ganti xxx menggunakan username id setiap media umum Anda.

Nah, bagaimana teman  Info? gampang bukan? Kotak Berlangganan (Subscriber kotak) & Tombol Media Sosial pada atas memakai icon SVG sebagai akibatnya nir akan memberatkan blog lantaran nir memuat script apapun.

1 komentar

  1. 20 Februari 2022 pukul 21.01
    can you speak english
DotyCat - Teaching is Our Passion