Bạn có muốn thêm logo hoạt hình (Animated Logo) vào trong Blogger không? Hãy làm theo các bước dưới đây một cách cẩn thận để thêm Biểu trưng hoạt hình trong Blogger và tận hưởng một biểu trưng sáng tạo trong trang web blogger của bạn.
Sử dụng các bước dưới đây, bạn có thể tạo chuyển động cho văn bản hoặc hình ảnh bằng cách sử dụng một vài dòng mã CSS. Làm cách nào để thêm (animated logo) logo hoạt hình trong Blogger? Mình sẽ hướng dẫn bạn thêm Animated Logo trong Blogger. OK chúng ta hãy bắt đầu!
Bước 1 . Lúc đầu, bạn cần đi tới bảng điều khiển Blogger, tức là Blogger.com . Bước 2 . Chuyển đến Phần Chủ đề và Nhấp vào Chỉnh sửa Nút HTML
Bước 3 . Sao chép mã được cung cấp dưới đây theo nhu cầu của bạn.
Đối với hình ảnh động Logo, ta thực hiện như sau
/* Animation Code */ #header { position: relative; display: inline-block; } #header:before, #header:after { content: ""; position: absolute; top: 50%; width: 3%; height: 100%; transform: translateY(-50%); background: rgba(255, 255, 255, .75); z-index: 999999999; } #header:before { left: 155%; animation: light-left 1.8s infinite alternate linear } #header:after { right: -55%; animation: light-right 3.0s infinite alternate linear } @keyframes light-left { 0% { left: 85%; opacity: 0 } 50% { left: 40%; opacity: 1 } 100% { left: 50%; opacity: 0 } } @keyframes light-right { 0% { right: 80%; opacity: 0 } 50% { right: 100%; opacity: 1 } 100% { right: 0%; opacity: 0 }
}{codeBox}
/* Animation Code */ #header h1 a, #header h2 a, #header h1, #header h2 { position: relative; display: inline-block } #header h1 a:before, #header h2 a:before, #header h1:before, #header h2:before, #header h1 a:after, #header h2 a:after, #header h1:after, #header h2:after { content: ""; position: absolute; top: 50%; width: 3%; height: 100%; transform: translate(-50%); background: rgba(255, 255, 255, .75); z-index: 999999999 } #header h1 a:before, #header h2 a:before, #header h1:before, #header h2:before { left: 155%; animation: light-left 1.8s infinite alternate linear } #header h1 a:after, #header h2 a:after, #header h1:after, #header h2:after { right: -55%; animation: light-right 3.0s infinite alternate linear } @keyframes light-left { 0% { left: 85%; opacity: 0 } 50% { left: 40%; opacity: 1 } 100% { left: 50%; opacity: 0 } } @keyframes light-right { 0% { right: 80%; opacity: 0 } 50% { right: 100%; opacity: 1 } 100% { right: 0%; opacity: 0 }
}{codeBox}
Bước 4 . Sau khi sao chép mã, bạn cần dán mã vào thẻ ]]> .
Bước 5 . Nhấp vào để lưu!
Kết luận
Vậy các bạn ơi, làm thế nào mà các bạn thích bài đăng này về cách thêm Logo hoạt hình (Animated Logo) trong Blogger? Bây giờ bạn phải hiểu cách thêm logo hoạt hình trong Blogger. Hãy cho chúng tôi biết cảm nhận của bạn về bài viết này về Cách thêm logo hoạt hình (animated Logo) trong Blogger? bằng cách viết bình luận để chúng tôi cũng có thể có cơ hội học hỏi và cải thiện điều gì đó từ ý tưởng của bạn.
