Notification texts go here. Contact Us Buy Now!
$10.00
10
$000

Get your blog ready With details you won't find anywhere.

Create Blog Admin Widget For Blogspot

abdalrahman
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Today I will show you how to create a beautiful blog Admin widget for Blog. Let's get started.


How to Create a Blog Admin Widget


Implementation steps:


Step 1: Go to Blogger -> Layout -> Add Widget -> Profile (If you already have a blog, skip this step.)

Step 2: You go to Theme -> Edit HTML Then find the closing tag ]]> /b :skin> and insert this CSS snippet above it

/* 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;}

Note: Change the size of the image in your profile at width:44px and height:44px (Last line)


Epilogue :

If you have any questions, please leave a comment below to be answered!

Read Also

Getting Info...

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.