Blog đây, hôm nay chúng ta sẽ tìm hiểu Cách Tạo Widget Các Trang Mạng Xã Hội Trên Blogger/Blogspot nhé.
Như bạn có thể thấy trong hình trên, đó là một tiện ích truyền thông xã hội thực sự đẹp và hấp dẫn. Bạn có thể sử dụng tiện ích này ở bất kỳ đâu trong blogger hoặc WordPress, bạn chỉ cần sao chép và dán mã vào bất kỳ tiện ích nào và nó sẽ hoạt động bình thường.
Cách Tạo Widget Các Trang Mạng Xã Hội Trên Blogger/Blogspot
Làm theo các bước này là chúng ta có thể tậu cho mình một tiện ích mạng xã hội rồi nhé.
Bước 1: Đăng nhập vào Blogger.
Bước 2: Trên bảng điều khiển Blogger , Chọn Bố Cục.
Bước 3: Chọn một nơi để đặt widget này, mình sẽ chọn bên thanh sidebar nhé. Sau đó ấn Thêm tiện ích.
Bước 4: Sau khi chọn thêm tiện ích xong thì các bạn chọn HTML/JavaScript.
Bước 5: Copy đoạn HTML bên dưới và dán vào.
<link href='https://cdn.jsdelivr.net/gh/nguyenlamblog/nguyenlamblog.xyz@eaea539/CSS/SocialMediaWidgets.css' rel='stylesheet'/>
<div class="tl-socialicons">
<div class="tl-socialInner">
<!--Facebook-->
<div class="tl-social">
<div class="tl-facebook tl-sinn">
<a href='https://www.nguyenlamblog.xyz' target='_blank' title="Facebook">
<span class="tl-sicon"><i class="fa fa-facebook"></i></span>
<span class="tl-scount">3.1K</span>
</a>
</div>
</div>
<!--Google Plus-->
<div class="tl-social">
<div class="tl-googleplus tl-sinn">
<a href='https://www.nguyenlamblog.xyz' target='_blank' title="Google Plus">
<span class="tl-sicon"><i class="fa fa-google-plus"></i></span>
<span class="tl-scount">2K</span>
</a>
</div>
</div>
<!--Twitter-->
<div class="tl-social">
<div class="tl-twitter tl-sinn">
<a href='https://www.nguyenlamblog.xyz' target='_blank' title="Twitter">
<span class="tl-sicon"><i class="fa fa-twitter"></i></span>
<span class="tl-scount">1.4K</span>
</a>
</div>
</div>
<!--Instagram-->
<div class="tl-social">
<div class="tl-instagram tl-sinn">
<a href='https://www.nguyenlamblog.xyz' target='_blank' title="Instagram">
<span class="tl-sicon"><i class="fa fa-instagram"></i></span>
<span class="tl-scount">2K</span>
</a>
</div>
</div>
<!--Pinterest-->
<div class="tl-social">
<div class="tl-pinterest tl-sinn">
<a href='https://www.nguyenlamblog.xyz' target='_blank' title="Pinterest">
<span class="tl-sicon"><i class="fa fa-pinterest"></i></span>
<span class="tl-scount">4.5K</span>
</a>
</div>
</div>
<!--Youtube-->
<div class="tl-social">
<div class="tl-youtube tl-sinn">
<a href='https://www.nguyenlamblog.xyz' target='_blank' title="YouTube">
<span class="tl-sicon"><i class="fa fa-youtube"></i></span>
<span class="tl-scount">2.8K</span>
</a>
</div>
</div>
<!--Vine-->
<div class="tl-social">
<div class="tl-vine tl-sinn">
<a href='https://www.nguyenlamblog.xyz' target='_blank' title="Vine">
<span class="tl-sicon"><i class="fa fa-vine"></i></span>
<span class="tl-scount">3.3K</span>
</a>
</div>
</div>
<!--SoundCloud-->
<div class="tl-social">
<div class="tl-soundcloud tl-sinn">
<a href='https://www.nguyenlamblog.xyz' target='_blank' title="SoundCloud">
<span class="tl-sicon"><i class="fa fa-soundcloud"></i></span>
<span class="tl-scount">3.9K</span>
</a>
</div>
</div>
<!--VK-->
<div class="tl-social">
<div class="tl-vk tl-sinn">
<a href='https://www.nguyenlamblog.xyz' target='_blank' title="VK">
<span class="tl-sicon"><i class="fa fa-vk"></i></span>
<span class="tl-scount">3.9K</span>
</a>
</div>
</div>
<!---->
<div class="tl-social">
<div class="tl-foursquare tl-sinn">
<a href='https://www.nguyenlamblog.xyz' target='_blank' title="Foursquare">
<span class="tl-sicon"><i class="fa fa-foursquare"></i></span>
<span class="tl-scount">3.9K</span>
</a>
</div>
</div>
<!--GitHub-->
<div class="tl-social">
<div class="tl-github tl-sinn">
<a href='https://www.nguyenlamblog.xyz' target='_blank' title="GitHub">
<span class="tl-sicon"><i class="fa fa-github"></i></span>
<span class="tl-scount">3.9K</span>
</a>
</div>
</div>
<!--Dribbble-->
<div class="tl-social">
<div class="tl-dribbble tl-sinn">
<a href='https://www.nguyenlamblog.xyz' target='_blank' title="Dribbble">
<span class="tl-sicon"><i class="fa fa-dribbble"></i></span>
<span class="tl-scount">3.9K</span>
</a>
</div>
</div>
</div>
</div>
Thay https://www.nguyenlamblog.xyz thành liên kết mạng xã hội của bạn. Đừng quên thay số nhé.
Xóa bất kiểu biểu tượng nào
Nếu Bạn muốn Xóa bất kỳ Biểu tượng Truyền thông Xã hội nào khỏi Tiện ích, Chỉ cần xóa khỏi nơi các biểu tượng bắt đầu và sau đó kết thúc.
Ví dụ:
<!--VK-->
<div class="tl-social">
<div class="tl-vk tl-sinn">
<a href='https://www.nguyenlamblog.xyz' target='_blank' title="VK">
<span class="tl-sicon"><i class="fa fa-vk"></i></span>
<span class="tl-scount">3.9K</span>
</a>
</div>
</div>