{"id":5390,"date":"2023-06-02T12:42:25","date_gmt":"2023-06-02T11:42:25","guid":{"rendered":"https:\/\/www.webhostingsrbija.rs\/?p=5390"},"modified":"2023-06-02T13:02:19","modified_gmt":"2023-06-02T12:02:19","slug":"dodavanje-lebdecih-ikonica","status":"publish","type":"post","link":"https:\/\/www.webhostingsrbija.rs\/en\/dodavanje-lebdecih-ikonica\/","title":{"rendered":"Adding floating icons"},"content":{"rendered":"<p class=\"wp-block-paragraph\">How we would add floating icons on our site, whether social networks or contact phone and viber, the procedure is explained in the rest of this article. In order to make modifications, knowledge of basic html\/css technology is required.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">First of all, we enter our Site creator and there we do not have a direct &quot;drag and drop&quot; option, but we do it with two clicks. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">First we go to Settings and then to Pages<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"304\" src=\"https:\/\/www.webhostingsrbija.rs\/wp-content\/uploads\/2023\/06\/sajtkreatorprevod-1024x304.png\" alt=\"\" class=\"wp-image-5391\" title=\"\" srcset=\"https:\/\/www.webhostingsrbija.rs\/wp-content\/uploads\/2023\/06\/sajtkreatorprevod-1024x304.png 1024w, https:\/\/www.webhostingsrbija.rs\/wp-content\/uploads\/2023\/06\/sajtkreatorprevod-300x89.png 300w, https:\/\/www.webhostingsrbija.rs\/wp-content\/uploads\/2023\/06\/sajtkreatorprevod-768x228.png 768w, https:\/\/www.webhostingsrbija.rs\/wp-content\/uploads\/2023\/06\/sajtkreatorprevod.png 1109w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">After that, a popup window will appear as in the following screenshot, where we go to Scripts and then enter the code given below in the first two fields. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"859\" height=\"531\" src=\"https:\/\/www.webhostingsrbija.rs\/wp-content\/uploads\/2023\/06\/Sajt-kreator-2.png\" alt=\"\" class=\"wp-image-5392\" title=\"\" srcset=\"https:\/\/www.webhostingsrbija.rs\/wp-content\/uploads\/2023\/06\/Sajt-kreator-2.png 859w, https:\/\/www.webhostingsrbija.rs\/wp-content\/uploads\/2023\/06\/Sajt-kreator-2-300x185.png 300w, https:\/\/www.webhostingsrbija.rs\/wp-content\/uploads\/2023\/06\/Sajt-kreator-2-768x475.png 768w\" sizes=\"(max-width: 859px) 100vw, 859px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The code we enter into the style: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>      <style>\r\n.content {\r\n  margin-left: 75px;\r\n  font-size: 30px;\r\n}\r\n.icon-bar {\r\n    z-index:1;\r\n  position: fixed;\r\n  top: 50%;\r\n  -webkit-transform: translateY(-50%);\r\n  -ms-transform: translateY(-50%);\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.icon-bar a {\r\n  display: block;\r\n  text-align: center;\r\n  padding: 16px;\r\n  transition: all 0.3s ease;\r\n  color: white;\r\n  font-size: 20px;\r\n}\r\n\r\n.icon-bar a:hover {\r\n  background-color: #000;\r\n}\r\n\r\n.facebook {\r\n  background: #3B5998;\r\n  color: white;\r\n}\r\n\r\n.twitter {\r\n  background: #55ACEE;\r\n  color: white;\r\n}\r\n\r\n.google {\r\n  background: #dd4b39;\r\n  color: white;\r\n}\r\n\r\n.linkedin {\r\n  background: #007bb5;\r\n  color: white;\r\n}\r\n\r\n.youtube {\r\n  background: #bb0000;\r\n  color: white;\r\n}\r\n\r\n.viber {\r\n  background: #7360F2;\r\n  color: white;\r\n}\r\n.phone {\r\n  background: #059862;\r\n  color: white;\r\n}\r\n.whatsapp {\r\n  background: #25D366;\r\n  color: white;\r\n}\r\n<\/style><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In the second field for the code, we enter:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=&quot;icon-bar&quot;&gt;\r\n  &lt;a href=&quot;#&quot; class=&quot;facebook&quot;&gt;&lt;i class=&quot;fab fa-facebook&quot;&gt;&lt;\/i&gt;&lt;\/a&gt; \r\n  &lt;a href=&quot;#&quot; class=&quot;twitter&quot;&gt;&lt;i class=&quot;fab fa-twitter&quot;&gt;&lt;\/i&gt;&lt;\/a&gt; \r\n  &lt;a href=&quot;#&quot; class=&quot;google&quot;&gt;&lt;i class=&quot;fab fa-google&quot;&gt;&lt;\/i&gt;&lt;\/a&gt; \r\n  &lt;a href=&quot;#&quot; class=&quot;linkedin&quot;&gt;&lt;i class=&quot;fab fa-linkedin&quot;&gt;&lt;\/i&gt;&lt;\/a&gt;\r\n  &lt;a href=&quot;#&quot; class=&quot;youtube&quot;&gt;&lt;i class=&quot;fab fa-youtube&quot;&gt;&lt;\/i&gt;&lt;\/a&gt;\r\n  &lt;a href=&quot;#&quot; class=&quot;viber&quot;&gt;&lt;i class=&quot;fab fa-viber&quot;&gt;&lt;\/i&gt;&lt;\/a&gt; \r\n  &lt;a href=&quot;#&quot; class=&quot;phone&quot;&gt;&lt;i class=&quot;fas fa-phone-alt&quot;&gt;&lt;\/i&gt;&lt;\/a&gt; \r\n  &lt;a href=&quot;#&quot; class=&quot;whatsapp&quot;&gt;&lt;i class=&quot;fab fa-whatsapp&quot;&gt;&lt;\/i&gt;&lt;\/a&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#039;s go to Post and get the social icons like in the screenshot below<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"560\" src=\"https:\/\/www.webhostingsrbija.rs\/wp-content\/uploads\/2023\/06\/socialfloating-1024x560.png\" alt=\"\" class=\"wp-image-5393\" title=\"\" srcset=\"https:\/\/www.webhostingsrbija.rs\/wp-content\/uploads\/2023\/06\/socialfloating-1024x560.png 1024w, https:\/\/www.webhostingsrbija.rs\/wp-content\/uploads\/2023\/06\/socialfloating-300x164.png 300w, https:\/\/www.webhostingsrbija.rs\/wp-content\/uploads\/2023\/06\/socialfloating-768x420.png 768w, https:\/\/www.webhostingsrbija.rs\/wp-content\/uploads\/2023\/06\/socialfloating.png 1519w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can change, add and delete these as you want them to be. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Linking<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">As we inserted them, when clicked they do nothing. We achieve this by having href=&quot;#&quot; in our CODE, it generates a link, and the taraba is actually a link. Therefore, if we want to link our Instagram page in the line for YouTube it should say for example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=&quot;https:\/\/www.youtube.com\/@WebHostingSrbija\/&quot; class=&quot;youtube&quot;&gt;&lt;i class=&quot;fab fa-youtube&quot;&gt;&lt;\/i&gt;&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Here, for example, there are special links when it comes to phone, viber and whatsapp. Here are sample links<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Viber: href=\u201cviber:\/\/chat?number=+38111111111\u2033<br>WhatsApp: href=&quot;https:\/\/wa.me\/+3811111111&quot;<br>Phone: href=\u201ctel:+38111111111\u2033<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Of course, in the examples above, you enter your phone numbers. The final code for these three icons with numbers and links:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=&quot;icon-bar&quot;&gt;\r\n  &lt;a href=&quot;viber:\/\/chat?number=+38111111111&quot; class=&quot;viber&quot;&gt;&lt;i class=&quot;fab fa-viber&quot;&gt;&lt;\/i&gt;&lt;\/a&gt; \r\n  &lt;a href=&quot;https:\/\/wa.me\/+3811111111&quot; class=&quot;phone&quot;&gt;&lt;i class=&quot;fas fa-phone-alt&quot;&gt;&lt;\/i&gt;&lt;\/a&gt; \r\n  &lt;a href=&quot;tel:+38111111111&quot; class=&quot;whatsapp&quot;&gt;&lt;i class=&quot;fab fa-whatsapp&quot;&gt;&lt;\/i&gt;&lt;\/a&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Horizontally in the middle<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you still want it to be horizontal in the middle, here is a small change to the style code (the first square you copy):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>      <style>\r\n.content {\r\n  margin-left: 75px;\r\n  font-size: 30px;\r\n}\r\n.icon-bar {\r\n    z-index:1;\r\n  position: fixed;\r\n  bottom:0;\r\n  left:50%;\r\n  -webkit-transform: translateX(-50%);\r\n  -ms-transform: translateX(-50%);\r\n  transform: translateX(-50%);\r\n}\r\n\r\n.icon-bar a {\r\n  display: inline;\r\n  text-align: center;\r\n  padding: 16px;\r\n  transition: all 0.3s ease;\r\n  color: white;\r\n  font-size: 20px;\r\n}\r\n\r\n.icon-bar a:hover {\r\n  background-color: #000;\r\n}\r\n\r\n.facebook {\r\n  background: #3B5998;\r\n  color: white;\r\n}\r\n\r\n.twitter {\r\n  background: #55ACEE;\r\n  color: white;\r\n}\r\n\r\n.google {\r\n  background: #dd4b39;\r\n  color: white;\r\n}\r\n\r\n.linkedin {\r\n  background: #007bb5;\r\n  color: white;\r\n}\r\n\r\n.youtube {\r\n  background: #bb0000;\r\n  color: white;\r\n}\r\n\r\n.viber {\r\n  background: #7360F2;\r\n  color: white;\r\n}\r\n.phone {\r\n  background: #059862;\r\n  color: white;\r\n}\r\n.whatsapp {\r\n  background: #25D366;\r\n  color: white;\r\n}\r\n<\/style><\/code><\/pre>","protected":false},"excerpt":{"rendered":"<p>Kako bi smo dodavali lebde\u0107e ikonice na na\u0161em sajtu da li socijalne mre\u017ee ili kontakt telefon i viber postupak je obja\u0161njen u nastavku ovog \u010dlanka. Kako bi se radila modifikacije potrebno je poznavanje osnovne html\/css tehnologije. Pre svega u\u0111emo u na\u0161 Sajt kreator i tu nemamo direktnu &#8222;drag and drop&#8220; opciju ve\u0107 to radimo iz [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5394,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[146],"tags":[],"class_list":["post-5390","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sajt-kreator"],"_links":{"self":[{"href":"https:\/\/www.webhostingsrbija.rs\/en\/wp-json\/wp\/v2\/posts\/5390","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhostingsrbija.rs\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhostingsrbija.rs\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhostingsrbija.rs\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhostingsrbija.rs\/en\/wp-json\/wp\/v2\/comments?post=5390"}],"version-history":[{"count":6,"href":"https:\/\/www.webhostingsrbija.rs\/en\/wp-json\/wp\/v2\/posts\/5390\/revisions"}],"predecessor-version":[{"id":5403,"href":"https:\/\/www.webhostingsrbija.rs\/en\/wp-json\/wp\/v2\/posts\/5390\/revisions\/5403"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webhostingsrbija.rs\/en\/wp-json\/wp\/v2\/media\/5394"}],"wp:attachment":[{"href":"https:\/\/www.webhostingsrbija.rs\/en\/wp-json\/wp\/v2\/media?parent=5390"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhostingsrbija.rs\/en\/wp-json\/wp\/v2\/categories?post=5390"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhostingsrbija.rs\/en\/wp-json\/wp\/v2\/tags?post=5390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}