Cách Tạo Widget Các Trang Mạng Xã Hội Trên Blogger/Blogspot



Cách Tạo Widget Các Trang Mạng Xã Hội Trên Blogger/Blogspot 20


Xin chào các bạn, mình là Nguyễn Lâm 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.
Cách Tạo Widget Các Trang Mạng Xã Hội Trên Blogger/Blogspot 21

Bước 4: Sau khi chọn thêm tiện ích xong thì các bạn chọn HTML/JavaScript.
Cách Tạo Widget Các Trang Mạng Xã Hội Trên Blogger/Blogspot 22

Bước 5: Copy đoạn HTML bên dưới và dán vào.

<link href='https://cdn.jsdelivr.net/gh/nguyenlamblog/[email protected]/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>

Read This

We share content only for testing purpose and help those who didn’t afford money to buy, not for commercial use.Please, If you have money then we strongly recommend to buy it from original authors or legally because they put really very hard work in making it.
If you are the owner of this content and you have problem with this then, mail us We will remove it as soon as Possible.


8 Comments

Add a Comment

Your email address will not be published. Required fields are marked *