Again, this is one of the tips for Blogger template creators. So that template users no longer go to the Themes> Edit HTML menu, just to simply change the menu on their blog's social media widgets. Changing and adding links to social media accounts can be done directly from the Blogger / Blogspot Layout menu. We just need to manipulate the PageList widget (the default widget), with a few tweaks and some CSS additions. How it works, users only need to add or edit the social media name (in lowercase) and the link from their social media on the widget. As in the following picture.
Here's the tutorial!
Step 1
Go to the Themes menu> Edit HTML.
Step 2
Change or add the social media widget to your template with the following code:
<div itemprop = 'mainEntity' itemscope = 'itemscope' itemtype = 'http: //schema.org/Person'>
<link expr: href = 'data: blog.homepageUrl' itemprop = 'url' />
<b: section class = 'social-bar' id = 'iconx Widgets' maxwidgets =' 1 'name =' Social Bar Widget 'icon preferred =' no 'showaddelement =' no '>
<b: widget id =' LinkList199 'locked =' true 'title =' Social Media Icons' type = 'LinkList' version = '1'>
<b: widget-settings>
<b: widget-setting name = 'link-5'> # </ b: widget-setting>
< b: widget-setting name = 'link-6'> https://www.facebook.com/ </ b: widget-setting>
<b: widget-setting name = 'link-3'> # </ b: widget-setting>
<b: widget-setting name = 'link-4'> # </ b: widget-setting>
<b: widget-setting name = 'text-1'> follow our instagram </ b: widget-setting>
<b: widget-setting name = 'text-0'> whatsapp </ b: widget-setting>
<b: widget-setting name = 'text-3'> youtube </ b: widget-setting>
<b: widget -setting name = 'text-2'> pinterest </ b: widget-setting>
<b: widget-setting name = 'text-5'> twitter </ b: widget-setting>
<b: widget-setting name = 'text-4'> gplus </ b: widget-setting>
<b: widget-setting name = 'text-6'> facebook </ b: widget-setting>
<b: widget-setting name = 'sorting'> NONE </ b: widget-setting>
<b: widget-setting name = 'link-1'> # </ b: widget-setting>
<b: widget-setting name = 'link-2'> # </ b : widget-setting>
<b:widget-setting name = 'link-0'> http: // </ b: widget-setting>
</ b: widget-settings>
<b: includable id = 'main'>
<div class = 'widget-content'>
<ul id = 'iconx'>
<b: loop values = 'data: links' var =' link '>
<li> <a expr: class =' data: link.name 'expr: href =' data: link.target 'expr: title =' data: link.name 'itemprop =' sameAs' rel = 'nofollow noopener' target = '_ blank' /> </li>
</ b: loop >
</ul>
</div>
</ b: includable>
</ b: widget>
</ b: section>
</div>
Step 3
Look for the code
</style>then add the following CSS above it:/ * Social Bar Icon * /
.social-bar {float: right; padding: 5px 0; margin: 0 auto; background: # 5a5666}
.social-bar li {display: inline; padding: 0; float: left; margin -right: 5px}
.social-bar .widget ul {padding: 0}
.social-bar .LinkList ul {text-align: center; margin: 0 20px 0 0}
.social-bar #iconx a {display: block; font-size: 95%; color: #fff; width: 35px; height: 35px; line-height: 35px; transition: background .3s linear; -moz-transition: background .3s linear; -webkit-transition: background. 3s linear; -o-transition: background .3s linear}
.social-bar #iconx a: before {font-family: FontAwesome; display: inline-block; font-size: inherit; font-style: normal; font-weight : 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale}
.social-bar .android: before {content: & quot; \ f17b & quot;}
.social-bar .app: before {content: & quot; \ f36f & quot;} / * app store * /
.social-bar .bloglovin: before {content : & quot; \ f004 & quot;}
.social-bar .facebook: before {content: & quot; \ f09a & quot;}
.social-bar .twitter: before {content: & quot; \ f099 & quot;}
.social-bar .gplus: before { content: & quot; \ f0d5 & quot;}
.social-bar .telegram: before {content: & quot; \ f2c6 & quot;}
.social-bar .rss: before {content: & quot; \ f09e & quot;}
.social-bar .youtube: before {content: & quot; \ f167 & quot;}
.social-bar .line: before {content: & quot; \ f3c0 & quot;}
.social-bar .skype: before {content: & quot; \ f17e & quot;}
.social-bar .stumbleupon:before {content: & quot; \ f1a4 & quot;}
.social-bar .tumblr: before {content: & quot; \ f173 & quot;}
.social-bar .vine: before {content: & quot; \ f1ca & quot;}
.social-bar .stack-overflow: before {content: & quot; \ f16c & quot;}
.social-bar .linkedin: before {content: & quot; \ f0e1 & quot;}
.social-bar .dribbble: before {content: & quot; \ f17d & quot;}
.social-bar .soundcloud: before {content: & quot; \ f1be & quot;}
.social-bar .behance: before {content: & quot; \ f1b4 & quot;}
.social-bar .digg: before {content: & quot; \ f1a6 & quot;}
.social-bar .instagram: before {content: & quot ; \ f16d & quot;}
.social-bar .pinterest: before {content: & quot; \ f0d2 & quot;}
.social-bar .delicious: before {content: & quot; \ f1a5 & quot;}
.social-bar .codepen:before {content: & quot; \ f1cb & quot;}
.social-bar .vimeo: before {content: & quot; \ f27d & quot ;;}
.social-bar .wordpress: before {content: & quot; \ f19a & quot ;;}
.social-bar .dropbox: before {content: & quot; \ f16b & quot ;;}
.social-bar .slideshare: before {content: & quot; \ f1e7 & quot ;;}
.social-bar .vk: before {content: & quot; \ f189 & quot ;;}
.social-bar .yahoo: before {content : & quot; \ f19e & quot ;;}
.social-bar .reddit: before {content: & quot; \ f281 & quot ;;}
.social-bar #iconx a {transition: .2s all ease-in-out;}
.social-bar #iconx a: hover {transition: .2s all ease-in-out;}
.social-bar #iconx a.android:hover(color:#29d886;}
.social-bar #iconx a.app:hover(color: # 2ddfff;}
.social-bar #iconx a.facebook: hover {color: # 3b5999;}
.social-bar #iconx a.twitter: hover {color: # 55acee;}
.social-bar #iconx a.gplus: hover {color: # dd4b39;}
.social-bar #iconx a.telegram: hover {color: # 4db5f2;}
.social-bar #iconx a.youtube:hover(color:#cd201f;}
.social-bar #iconx a.pinterest: hover {color: # bd081c;}
.social-bar #iconx a.instagram: hover {color: # e4405f;}
.social-bar #iconx a.codepen: hover {color: # 222;}
.social-bar #iconx a.linkedin: hover {color: # 0077B5;}
.social-bar #iconx a.skype:hover(color:#00AFF0;}
.social-bar #iconx a.line: hover {color: # 12e543;}
.social-bar #iconx a.dropbox: hover {color: # 007ee5;}
.social -bar #iconx a.wordpress: hover {color: # 21759b;}
.social-bar #iconx a.vimeo: hover {color: # 1ab7ea;}
.social-bar #iconx a.slideshare: hover {color: # 0077b5;}
.social-bar #iconx a.vk: hover {color: # 4c75a3;}
.social-bar #iconx a.tumblr: hover {color: # 34465d;}
.social-bar #iconx a.yahoo:hover(color:#410093;}
.social-bar #iconx a.stumbleupon: hover {color: # eb4924;}
.social-bar #iconx a.reddit: hover {color: # ff5700;}
.social-bar #iconx a.quora: before {content: & quot; \ f2c4 & quot ;;}
.social-bar #iconx a.quora: hover {color: # b92b27;}
.social- bar #iconx a.yelp: before {content: & quot; \ f1e9 & quot ;;}
.social-bar #iconx a.yelp: hover {color: # af0606;}
.social-bar #iconx a.weibo:before(content: & quot; \ f18a & quot ;;}
.social-bar #iconx a.weibo:hover(color:#df2029;}
.social-bar #iconx a.phunt: before {content: & quot; \ f288 & quot ;;}
.social-bar #iconx a.phunt: hover {color: # da552f;}
.social-bar #iconx a.hackernews: before {content: & quot; \ f1d4 & quot ;;}
.social-bar #iconx a.hackernews: hover {color: # ff6600;}
.social-bar #iconx a.soundcloud: hover {color: # ff3300;}
.social-bar #iconx a.whatsapp: before {content: & quot; \ f232 & quot ;;}
.social-bar #iconx a.whatsapp: hover {color: # 25D366;}
.social-bar #iconx a.wechat: before {content: & quot ; \ f1d7 & quot ;;}
.social-bar #iconx a.wechat: hover {color: # 09b83e;}
.social-bar #iconx a.vine: hover {color: # 00b489;}
.social-bar #iconx a. slack: before {content: & quot; \ f198 & quot ;;}
.social-bar #iconx a.slack: hover {color: # 3aaf85;}
.social-bar #iconx a.dribbble: hover {color: # ea4c89;}
.social-bar #iconx a.dribbble: hover {color: # ea4c89;}
.social-bar #iconx a.flickr:before(content: & quot; \ f16e & quot ;;}
.social-bar #iconx a.flickr:hover(color:#ff0084;}
.social-bar #iconx a.foursquare: before {content: & quot; \ f180 & quot ;;}
.social-bar #iconx a.foursquare: hover {color: # f94877;}
.social-bar #iconx a.behance: hover {color: # 131418;}
.social-bar #iconx a.rss: hover {color: # f57d00;}
.social-bar #iconx a.stack-overflow: hover {color: # f57d00;}
.social-bar #iconx a.digg: hover {color: # 131418;}
.social-bar #iconx a.delicious: hover { color: # 0084ff;}
.social-bar ul # social a: hover {opacity: 1}
Step 4
Save the theme
It should be understood that the above tutorial is the basics only. For further widget layout settings, for example if you want to respond to widgets on different devices, please customize the CSS again for certain media queries.
This is the tutorial on how to make a social bar widget that can be edited directly on the Blogger layout menu . Hopefully useful and good luck!