Kami mendapat satu lagi widget perkongsian sosial untuk menunjukkan kepada anda semua, dan ia datang daripada pengguna Blogger bernama Lokjeeth Singh BloggingBolt. Ia tidak mempunyai nama rasmi jadi saya mengambil kebebasan hanya menamakan diri saya dan memutuskan untuk memanggil ia slaid-up 'n Go widget perkongsian sosial semata-mata kerana ia slaid apabila anda membawa tetikus anda ke atasnya dan dicetak dengan perkataan' GO ' . Setakat ini, ia kini mempunyai butang untuk Facebook, Dribbble, Behance, Twitter, dan Instagram, tetapi diharapkan mereka akan mempunyai butang untuk laman perkongsian sosial yang lain juga, seperti LinkedIn, Google+, dan Digg.Anda akan menemui demo di sini.
Ikut arahan di bawah untuk memasukkannya ke dalam blog anda.
Log masuk ke Blogger dan pada papan pemuka anda, pergi ke Template > Edit HTML.
Menggunakan Ctrl + F, cari ]]></b:skin>.
Paste kod CSS berikut sebelum/atas kode yang anda cari tadi:
.socialw {
width: 236px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
overflow: auto;
height: 100%;
}
#social1 {
border: 1px solid #292929;
width: 37px;
height: 62px;
margin-left: 1px;
float: left;
overflow: hidden;
}
#social2,#social3,#social4,#social5 {
border: 1px solid #292929;
width: 37px;
height: 62px;
float: left;
margin-left: 10px;
overflow: hidden;
}
/* ANIMATIONS */
.animate {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animate.queue {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
.animate.queue2s {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
.animate.queue3s {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
}
.animate.queue4s {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
/* Fade In Down */
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-100px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInDown {
0% {
opacity: 0;
-moz-transform: translateY(-100px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInDown {
0% {
opacity: 0;
-o-transform: translateY(-100px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
}
/* Fade In Down */
/* Social 1 Animation */
#social1 {position:relative;}
#social1 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social1:hover img{
margin-top:-62px;
}
#social1 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 2 Animation */
#social2 {position:relative;}
#social2 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social2:hover img{
margin-top:-62px;
}
#social2 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 3 Animation */
#social3 {position:relative;}
#social3 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social3:hover img{
margin-top:-62px;
}
#social3 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 4 Animation */
#social4 {position:relative;}
#social4 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social4:hover img{
margin-top:-62px;
}
#social4 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 5 Animation */
#social5 {position:relative;}
#social5 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social5:hover img{
margin-top:-62px;
}
#social5 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
Klik pada Save Template.
Sekarang pergi ke Layout, klik pada HTML / JavaScript.
Copy dan paste kod di bawah:
<!-- Social Icons Start !-->
<div>
<!-- Dribbble !-->
<a href="http://dribbble.com/YOUR_USERNAME" target="_blank">
<div id="social1"> <img src="http://i.imgur.com/64r2jAv.png" /> </div>
</a>
<!-- Dribbble !-->
<!-- Behance !-->
<a href="http://behance.com/ YOUR_USERNAME " target="_blank">
<div id="social2"> <img src="http://i.imgur.com/fkuhUov.png" /> </div>
</a>
<!-- Behance !-->
<!-- Facebook !-->
<a href="http://facebook.com/ YOUR_USERNAME " target="_blank">
<div id="social3"> <img src="http://i.imgur.com/PY2EPRW.png" /> </div>
</a>
<!-- Facebook !-->
<!-- Twitter !-->
<a href="http://twitter.com/ YOUR_USERNAME " target="_blank">
<div id="social4"> <img src="http://i.imgur.com/ny0pyqt.png" /> </div>
</a>
<!-- Twitter !-->
<!-- Intagram !-->
<a href="http://instagram.com/ YOUR_USERNAME " target="_blank">
<div id="social5"> <img src="http://i.imgur.com/tZZG2zQ.png" /> </div>
</a>
<!-- Instagram !-->
</div>
<!-- Social Icons End !-->
NOTA: Jangan lupa untuk menukar tulisan warna merah itu dengan usename anda.
TekanSimpan dan anda selesai!
Teruskan dan tengok blog anda. Tahniah! Anda kini mempunyai widget sosial yang baru.
2 Ulasan
thanks for sharing
BalasPadam:)
Padam