Share Code Tạo Widget Admin Blog Cho Blogspot

Hôn nay mình sẽ hướng dẫn các bạn cách tạo widget Admin blog cho Blog cực đẹp .Chúng ta cùng bắt đầu nào .

Cách Tạo Widget Admin blog

Các bước thực hiện :

Bước 1 : Vào Blogger -> Bố Cục -> Thêm Tiện Ích -> Hồ Sơ ( Nếu Blog bạn đã có hãy bỏ qua bước này .)

Bước 2 : Các bạn vào Chủ Đề -> Chỉnh Sửa HTML Sau đó hãy tìm đến thẻ đóng ]]> /b :skin> và chèn đoạn CSS này vào trên nó

/* Widget Profile */

.Profile{font-size:13px}

.Profile .individual{display:flex;align-items:center;flex-direction:row;position:relative;padding:12px 15px;border-radius:8px;background:rgba(255,255,255,.98);box-shadow:0 4px 12px 0 rgba(9,32,76,.05);overflow:hidden}

.Profile .individual:after{content:'';display:block;position:absolute;bottom:3px;right:0;width:40px;height:80px;background:rgba(0,0,0,.025);border-radius:80px 0 0 80px;}

.Profile .individual .profile-image, .Profile .individual .profile-info{position:relative;z-index:2;}

.Profile .individual .profile-image{flex:0 0 auto;width:60px;}

.Profile .individual .profile-image a{display:block;height:60px;border-radius:50%;overflow:hidden;background-color:#ebeced}

.Profile .individual .profile-image img{max-height:60px;}

.Profile .individual .profile-info{flex-grow:1;margin-right:auto;padding-left:15px;}

.Profile .individual .profile-datablock{margin:0;}

.Profile .individual .profile-datablock a{display:block;margin:0;color:#161617;font-family:'Nunito Sans', sans-serif;font-size:13px;}

.Profile .individual .profile-textblock{font-size:11px;margin:5px 0 0;color:#989b9f;line-height:1.3em}
.Profile .individual .profile-link{display:none;margin-top:5px;font-size:11px;}

.Profile .team li:not(:first-child){margin-top:10px}

.Profile .team .team-member a {display:flex;align-items:center;flex-direction:row;position:relative;padding:10px 15px;border-radius:8px;background:rgba(255,255,255,.98);box-shadow:0 4px 12px 0 rgba(9,32,76,.05);overflow:hidden;}

.Profile .team .team-member a:after{content:'';display:block;position:absolute;bottom:0;right:0;width:70px;height:65px;background:rgba(0,0,0,.025);border-radius:70px 0 5px 0;}

.Profile .team .team-member a .profile-image{flex:0 0 auto;width:50px;height:50px;border-radius:50%;overflow:hidden;background-color:#ebeced}

.Profile .team .team-member a .profile-name{flex-grow:1;margin:0 auto 0 15px;font-family:'Nunito Sans', sans-serif;color:#161617;}
.Profile .team .team-member a .profile-name:after{content:'View profile';display:block;margin-top:5px;color:#989b9f;font-size:11px;font-family:'Nunito Sans', sans-serif}

.Profile .team .team-member a .profile-name:hover:after{text-decoration:underline;}
.Profile img {
width:44px;
height:44px;
}

Lưu ý : Thay độ to - nhỏ của ảnh trong profile của bạn tại width:44px và height:44px (Dòng cuối )

Lời Kết :

Nếu có thắc mắc gì hãy để lại comment phía dưới để được giải đáp !