Connect with us

Development

Add Multi-Tabbed Widget in Blogger/Blogspot Blog

Published

on


Advertisement

The most space efficient widget for a blog is off course a multi-tabbed widget, which saves a lot of precious space for any blog. You can use it for merging number of gadgets in one widget.
Instead of showing Basic widgets for Blogger Blog like Popular posts, Archives, Tags , Recent Posts etc separately, you can merge them all in one multi-tabbed widget to save space.

See the Demo HERE

In other methods you have to upload some .css and/or javascript (.js) files to some hosted server and then add that link of the script back to your blog. FYI, this increases page load time.

So Unlike other methods that you have seen of any multi-tabbed widget, this method has all the css/scripts in your own blog’s template, thus reducing page load time noticeably.

Installation has three parts;

1. First part contains css/javascript code installation in template.
2. Second part explains installation of multi-tabbed widget in the template for your sidebar.
3. Third one is simple and tells adding the main gadgets from the layout section in the multi tab widget.


Part 1 – Installating css/script in Template

1. Navigate to Edit HTML page.

2. Download a backup of your template. (Dont skip this step!)

3. Search (Ctrl+F) for :


]]></b:skin>

and Just ABOVE it, copy and paste this entire css code block


<!-- Multi-Tabbed Widget CSS STARTS-->
.domtab{margin:0px; padding:0px; float:left; width:370px; font-size:1em}
.domtab li{overflow:hidden}
.domtabs{margin:0px; padding:0px; float:left; width:370px; list-style-type:none} <-- Change this width to change widget's widht -->
.domtab h2{margin:0px; padding:0px; float:left; width:370px; display:none}
.domtab .widget h2{display:none; visibility:hidden; herght:0px}
.domtabs li.active a:link, .domtabs li.active a:visited, .domtabs li.active a:active, .domtabs li.active a:hover{color:#000; text-decoration:none; display:block; float:left; padding-right:15px; padding-left:15px; text-align:center; margin:0px; height:33px; padding-top:0px; border-top:1px solid #CCC; border-right:1px solid #CCC; border-bottom:1px solid #EEE; border-left:1px solid #CCC;
background:url(https://bp0.blogger.com/_Zuzii37VUO4/R94sIU3jklI/AAAAAAAACr0/Huxdarz9Q8E/s1600/dom.gif) repeat-x bottom}
.domtabs a:link, .domtabs a:visited, .domtabs a:active, .domtabs a:hover{text-decoration:none; display:block; float:left; margin:0px; padding-right:15px; padding-left:15px; text-align:center; height:33px; background:#f9f9f9; border-top:1px solid #eee; border-right:1px solid #eee; border-left:1px solid #eee; color:#000; padding-top:0px; border-bottom:1px solid #E9E9E9}
.domtabs li{display:inline; float:left; line-height:30px; height:34px; font-weight:bold; padding:0px; margin:0px}
#tabs-wrap{float:left; width:370px}
#tabs-wrap object{margin:0px; padding:0px; float:left; height:200px; width:370px; border-width:0px}
#tabs-wrap embed{margin:0px; padding:0px; float:left; width:340px; border-width:0px; height:200px}
#tabs-wrap .widget{margin:0px; padding:5px 10px 10px; float:left; width:340px; list-style-type:none}
#tabs-wrap .widget ul{margin:0px; padding:0px; float:left; width:340px}
#tabs-wrap .widget li{margin:0px 0px 5px; padding:0px; float:left; width:340px; line-height:16px; color:#666}
#tabs-wrap .widget ul li{margin:5px 0px 0px; padding:0px; float:left; width:340px; color:#666}
#tabs-wrap .widget li a{color:#000; text-decoration:none; margin:0px; padding:0px 0px 0px 20px; background:url(https://bp2.blogger.com/_Zuzii37VUO4/R94sY03jkvI/AAAAAAAACtE/3aG3NUoYF50/s1600/radio.gif) no-repeat 4px 2px; float:left}
#tabs-wrap .widget li a:hover{color:#900; text-decoration:underline; margin:0px; padding:0px 0px 0px 20px; background:url(https://bp2.blogger.com/_Zuzii37VUO4/R94sY03jkvI/AAAAAAAACtE/3aG3NUoYF50/s1600/radio.gif) no-repeat 4px 2px; float:left}
#tabs-wrap .nolist{margin:0px; padding:10px; float:left; width:370px; list-style-type:none; font-size:1em; line-height:18px}
.nolist a{color:#C00; text-decoration:none}
#tabs-wrap .nolist ul{margin:0px; padding:0px; float:left; width:370px}
#tabs-wrap .nolist li{margin:0px 0px 5px; padding:0px; float:left; width:370px; line-height:24px; color:#000}
#tabs-wrap .nolist ul li{margin:5px 0px 0px; padding:0px; float:left; width:370px; color:#000}
#tabs-wrap .nolist li a{color:#000; text-decoration:none; margin:0px; padding:0px; float:left}
#tabs-wrap .nolist li a:hover{color:#900; text-decoration:none; margin:0px; padding:0px; float:left}
#tab_one{}
#tab_two{}
#tab_three{}
.BlogArchive #ArchiveList ul li{text-indent:0px !important}
.tab_one{float:left; width:370px; padding:5px 0px 10px; background:#E9E9E9; border-right:1px solid #CCC; border-bottom:1px solid #CCC; border-left:1px solid #CCC}
.tab_two{float:left; width:370px; padding:10px 0px 0px; background:#E9E9E9; border-right:1px solid #CCC; border-bottom:1px solid #CCC; border-left:1px solid #CCC}
.tab_three{float:left; width:370px; padding:10px 0px 0px; background:#E9E9E9; border-right:1px solid #CCC; border-bottom:1px solid #CCC; border-left:1px solid #CCC}
.tab_four{float:left; width:370px; padding:10px 0px 0px; background:#E9E9E9; border-right:1px solid #CCC; border-bottom:1px solid #CCC; border-left:1px solid #CCC}
<!-- Multi-Tabbed Widget CSS ENDS-->

4. Now come back to the same tag you searched in step 3


]]></b:skin>

and this time just BELOW it, copy paste this entire javascript :


<!-- Multi-Tabbed Widget JAVASCRIPT STARTS-->
<script defer='defer' type='text/javascript'>
/*
DOMtab Version 3.1415927
written by Christian Heilmann
check blog for updates: http://www.wait-till-i.com
free to use, not free to resell
*/
domtab={
tabClass:&#39;domtab&#39;, // class to trigger tabbing
listClass:&#39;domtabs&#39;, // class of the menus
activeClass:&#39;active&#39;, // class of current link
contentElements:&#39;div&#39;, // elements to loop through
printID:&#39;domtabprintview&#39;, // id of the print all link
showAllLinkText:&#39;show all content&#39;, // text for the print all link
prevNextIndicator:&#39;doprevnext&#39;, // class to trigger prev and next links
prevNextClass:&#39;prevnext&#39;, // class of the prev and next list
prevLabel:&#39;previous&#39;, // HTML content of the prev link
nextLabel:&#39;next&#39;, // HTML content of the next link
prevClass:&#39;prev&#39;, // class for the prev link
nextClass:&#39;next&#39;, // class for the next link
init:function(){
var temp;
if(!document.getElementById || !document.createTextNode){return;}
var tempelm=document.getElementsByTagName(&#39;div&#39;);
for(var i=0;i&lt;tempelm.length;i ){
if(!domtab.cssjs(&#39;check&#39;,tempelm[i],domtab.tabClass)){continue;}
domtab.initTabMenu(tempelm[i]);
domtab.removeBackLinks(tempelm[i]);
if(domtab.cssjs(&#39;check&#39;,tempelm[i],domtab.prevNextIndicator)){
domtab.addPrevNext(tempelm[i]);
}
domtab.checkURL();
}
if(document.getElementById(domtab.printID)
&amp;&amp; !document.getElementById(domtab.printID).getElementsByTagName(&#39;a&#39;)[0]){
var newlink=document.createElement(&#39;a&#39;);
newlink.setAttribute(&#39;href&#39;,&#39;#&#39;);
domtab.addEvent(newlink,&#39;click&#39;,domtab.showAll,false);
newlink.onclick=function(){return false;} // safari hack
newlink.appendChild(document.createTextNode(domtab.showAllLinkText));
document.getElementById(domtab.printID).appendChild(newlink);
}
},
checkURL:function(){
var id;
var loc=window.location.toString();
loc=/#/.test(loc)?loc.match(/#(w. )/)[1]:&#39;&#39;;
if(loc==&#39;&#39;){return;}
var elm=document.getElementById(loc);
if(!elm){return;}
var parentMenu=elm.parentNode.parentNode.parentNode;
parentMenu.currentSection=loc;
parentMenu.getElementsByTagName(domtab.contentElements)[0].style.display=&#39;none&#39;;
domtab.cssjs(&#39;remove&#39;,parentMenu.getElementsByTagName(&#39;a&#39;)[0].parentNode,domtab.activeClass);
var links=parentMenu.getElementsByTagName(&#39;a&#39;);
for(i=0;i&lt;links.length;i ){
if(!links[i].getAttribute(&#39;href&#39;)){continue;}
if(!/#/.test(links[i].getAttribute(&#39;href&#39;).toString())){continue;}
id=links[i].href.match(/#(w. )/)[1];
if(id==loc){
var cur=links[i].parentNode.parentNode;
domtab.cssjs(&#39;add&#39;,links[i].parentNode,domtab.activeClass);
break;
}
}
domtab.changeTab(elm,1);
elm.focus();
cur.currentLink=links[i];
cur.currentSection=loc;
},
showAll:function(e){
document.getElementById(domtab.printID).parentNode.removeChild(document.getElementById(domtab.printID));
var tempelm=document.getElementsByTagName(&#39;div&#39;);
for(var i=0;i&lt;tempelm.length;i ){
if(!domtab.cssjs(&#39;check&#39;,tempelm[i],domtab.tabClass)){continue;}
var sec=tempelm[i].getElementsByTagName(domtab.contentElements);
for(var j=0;j&lt;sec.length;j ){
sec[j].style.display=&#39;block&#39;;
}
}
var tempelm=document.getElementsByTagName(&#39;ul&#39;);
for(i=0;i&lt;tempelm.length;i ){
if(!domtab.cssjs(&#39;check&#39;,tempelm[i],domtab.prevNextClass)){continue;}
tempelm[i].parentNode.removeChild(tempelm[i]);
i--;
}
domtab.cancelClick(e);
},
addPrevNext:function(menu){
var temp;
var sections=menu.getElementsByTagName(domtab.contentElements);
for(var i=0;i&lt;sections.length;i ){
temp=domtab.createPrevNext();
if(i==0){
temp.removeChild(temp.getElementsByTagName(&#39;li&#39;)[0]);
}
if(i==sections.length-1){
temp.removeChild(temp.getElementsByTagName(&#39;li&#39;)[1]);
}
temp.i=i; // h4xx0r!
temp.menu=menu;
sections[i].appendChild(temp);
}
},
removeBackLinks:function(menu){
var links=menu.getElementsByTagName(&#39;a&#39;);
for(var i=0;i&lt;links.length;i ){
if(!domtab.backToLinks.test(links[i].href)){continue;}
links[i].parentNode.removeChild(links[i]);
i--;
}
},
initTabMenu:function(menu){
var id;
var lists=menu.getElementsByTagName(&#39;ul&#39;);
for(var i=0;i&lt;lists.length;i ){
if(domtab.cssjs(&#39;check&#39;,lists[i],domtab.listClass)){
var thismenu=lists[i];
break;
}
}
if(!thismenu){return;}
thismenu.currentSection=&#39;&#39;;
thismenu.currentLink=&#39;&#39;;
var links=thismenu.getElementsByTagName(&#39;a&#39;);
for(i=0;i&lt;links.length;i ){
if(!/#/.test(links[i].getAttribute(&#39;href&#39;).toString())){continue;}
id=links[i].href.match(/#(w. )/)[1];
if(document.getElementById(id)){
domtab.addEvent(links[i],&#39;click&#39;,domtab.showTab,false);
links[i].onclick=function(){return false;} // safari hack
domtab.changeTab(document.getElementById(id),0);
}
}
id=links[0].href.match(/#(w. )/)[1];
if(document.getElementById(id)){
domtab.changeTab(document.getElementById(id),1);
thismenu.currentSection=id;
thismenu.currentLink=links[0];
domtab.cssjs(&#39;add&#39;,links[0].parentNode,domtab.activeClass);
}
},
createPrevNext:function(){
// this would be so much easier with innerHTML, darn you standards fetish!
var temp=document.createElement(&#39;ul&#39;);
temp.className=domtab.prevNextClass;
temp.appendChild(document.createElement(&#39;li&#39;));
temp.getElementsByTagName(&#39;li&#39;)[0].appendChild(document.createElement(&#39;a&#39;));
temp.getElementsByTagName(&#39;a&#39;)[0].setAttribute(&#39;href&#39;,&#39;#&#39;);
temp.getElementsByTagName(&#39;a&#39;)[0].innerHTML=domtab.prevLabel;
temp.getElementsByTagName(&#39;li&#39;)[0].className=domtab.prevClass;
temp.appendChild(document.createElement(&#39;li&#39;));
temp.getElementsByTagName(&#39;li&#39;)[1].appendChild(document.createElement(&#39;a&#39;));
temp.getElementsByTagName(&#39;a&#39;)[1].setAttribute(&#39;href&#39;,&#39;#&#39;);
temp.getElementsByTagName(&#39;a&#39;)[1].innerHTML=domtab.nextLabel;
temp.getElementsByTagName(&#39;li&#39;)[1].className=domtab.nextClass;
domtab.addEvent(temp.getElementsByTagName(&#39;a&#39;)[0],&#39;click&#39;,domtab.navTabs,false);
domtab.addEvent(temp.getElementsByTagName(&#39;a&#39;)[1],&#39;click&#39;,domtab.navTabs,false);
// safari fix
temp.getElementsByTagName(&#39;a&#39;)[0].onclick=function(){return false;}
temp.getElementsByTagName(&#39;a&#39;)[1].onclick=function(){return false;}
return temp;
},
navTabs:function(e){
var li=domtab.getTarget(e);
var menu=li.parentNode.parentNode.menu;
var count=li.parentNode.parentNode.i;
var section=menu.getElementsByTagName(domtab.contentElements);
var links=menu.getElementsByTagName(&#39;a&#39;);
var othercount=(li.parentNode.className==domtab.prevClass)?count-1:count 1;
section[count].style.display=&#39;none&#39;;
domtab.cssjs(&#39;remove&#39;,links[count].parentNode,domtab.activeClass);
section[othercount].style.display=&#39;block&#39;;
domtab.cssjs(&#39;add&#39;,links[othercount].parentNode,domtab.activeClass);
var parent=links[count].parentNode.parentNode;
parent.currentLink=links[othercount];
parent.currentSection=links[othercount].href.match(/#(w. )/)[1];
domtab.cancelClick(e);
},
changeTab:function(elm,state){
do{
elm=elm.parentNode;
} while(elm.nodeName.toLowerCase()!=domtab.contentElements)
elm.style.display=state==0?&#39;none&#39;:&#39;block&#39;;
},
showTab:function(e){
var o=domtab.getTarget(e);
if(o.parentNode.parentNode.currentSection!=&#39;&#39;){
domtab.changeTab(document.getElementById(o.parentNode.parentNode.currentSection),0);
domtab.cssjs(&#39;remove&#39;,o.parentNode.parentNode.currentLink.parentNode,domtab.activeClass);
}
var id=o.href.match(/#(w. )/)[1];
o.parentNode.parentNode.currentSection=id;
o.parentNode.parentNode.currentLink=o;
domtab.cssjs(&#39;add&#39;,o.parentNode,domtab.activeClass);
domtab.changeTab(document.getElementById(id),1);
document.getElementById(id).focus();
domtab.cancelClick(e);
},
/* helper methods */
getTarget:function(e){
var target = window.event ? window.event.srcElement : e ? e.target : null;
if (!target){return false;}
if (target.nodeName.toLowerCase() != &#39;a&#39;){target = target.parentNode;}
return target;
},
cancelClick:function(e){
if (window.event){
window.event.cancelBubble = true;
window.event.returnValue = false;
return;
}
if (e){
e.stopPropagation();
e.preventDefault();
}
},
addEvent: function(elm, evType, fn, useCapture){
if (elm.addEventListener)
{
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent(&#39;on&#39; evType, fn);
return r;
} else {
elm[&#39;on&#39; evType] = fn;
}
},
cssjs:function(a,o,c1,c2){
switch (a){
case &#39;swap&#39;:
o.className=!domtab.cssjs(&#39;check&#39;,o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
break;
case &#39;add&#39;:
if(!domtab.cssjs(&#39;check&#39;,o,c1)){o.className =o.className?&#39; &#39; c1:c1;}
break;
case &#39;remove&#39;:
var rep=o.className.match(&#39; &#39; c1)?&#39; &#39; c1:c1;
o.className=o.className.replace(rep,&#39;&#39;);
break;
case &#39;check&#39;:
var found=false;
var temparray=o.className.split(&#39; &#39;);
for(var i=0;i&lt;temparray.length;i ){
if(temparray[i]==c1){found=true;}
}
return found;
break;
}
}
}
domtab.addEvent(window, &#39;load&#39;, domtab.init, false);
</script>
<!-- Multi-Tabbed Widget JAVASCRIPT ENDS-->


Part 2 – Installing the Multi-tabbed Widget

5. Now Search for


<div id='sidebar'>

or

<div id='sidebar-wrapper'>

or you may find similar tag names in your template.

6. Just BELOW the tag, copy and paste this code:


<div class='domtab'>
<!-- Tabs titles -->
<ul class='domtabs'>
<li><a href='#tabone'>TITLE- Tab1</a></li>
<li><a href='#tabtwo'>TITLE- Tab2</a></li>
<li><a href='#tabthree'>TITLE- Tab3</a></li>
<li><a href='#tabfour'>TITLE- Tab4</a></li>
<!-- END OF Tabs titles -->
</ul>
<!-- Tabs content -->
<div id='tabs-wrap'>
<div class='tab_one'>
<h2><a id='tabone' name='tabone'/></h2>
<b:section class='sidebar' id='mytab1' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tab_two'>
<h2><a id='tabtwo' name='tabtwo'/></h2>
<b:section class='sidebar' id='maytab2' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
<div class='tab_three'>
<h2><a id='tabthree' name='tabthree'/></h2>
<b:section class='sidebar' id='mytab3' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
<div class='tab_four'>
<h2><a id='tabfour' name='tabfour'/></h2>
<b:section class='sidebar' id='mytab4' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
<!-- End of Tabs -->
</div>
</div>

Before saving, don’t forget to make required changes.

– Text in red are the titles of the tabs, Replace them with the Titles that you want to give to each tab respectively.

7. After making required changes, Preview the template.

8. If you can see the multi-tabbed widget in your blog then Hit Save Button.
Double check for code you copied/pasted and their exact places if any error comes up while saving.


Part 3 – Adding the gadets in the Multi-Tabbed Widget

This part is fairly easy. After installing css/javascript part in the template save the template and open “Layout” page of your blog. You’ll see “Add a gadget” section under each (embedded) tab of the multi-tabbed widget. Click Tab Titles one by one and Click “Add a gadget” under it, to add gadget of your choice under each tab.


CUSTOMIZATION

– The widget automatically adjusts its width wherever it is placed.
– If you want to change the width of the tabs, change width size in blue in css code of Part 1.
– You can reduce or add as many tabs as you want in the widget.

1. To remove a tab, remove this line defining tab four in the end of css code (of step 3)

.tab_four{float:left; width:370px; padding:10px 0px 0px; background:#E9E9E9; border-right:1px solid #CCC; border-bottom:1px solid #CCC; border-left:1px solid #CCC}

2. And then remove Tab 4 from the the main widget code (of step 6) by removing:


<div class='tab_four'>
<h2><a id='tabfour' name='tabfour'/></h2>
<b:section class='sidebar' id='mytab4' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>

…this will remove Tab #4, leaving only 3 Tabs.

To Add a Tab:

1. Just add this line in the end of the code you placed in step 3.

.tab_five{float:left; width:370px; padding:10px 0px 0px; background:#E9E9E9; border-right:1px solid #CCC; border-bottom:1px solid #CCC; border-left:1px solid #CCC}

This will add Tab # 5 in the widget.
If you want to add more tabs, copy this line one more time and paste in the end and replace .tab_five with .tab_six and so on…

2. Now in main widget code (of step 6) search for <!– END OF Tabs titles –> and just ABOVE it paste this code:


<li><a href='#tabfive'>TITLE- Tab5</a></li>

3. In the same code, search for <!– End of Tabs –> and just ABOVE it, paste this code block for a new tab.


<div class='tab_five'>
<h2><a id='tabfive' name='tabfive'/></h2>
<b:section class='sidebar' id='mytab5' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>

…and Save the template again.


I’m sure you must be still looking at the large pieces of code above for the widget..Right? 😀
But this is how reducing page load strategy works – putting all the scripts inside template’s own body.

If you have your own hosting then you may put the code in a separate .js file.
You may check out Multi-Tabbed Widget by bloggerstop that uses external .js and .css files.

I Hope you got all the steps and procedure, if it’s still confusing leave the queries/comments below.

See the Demo of this widget HERE.

Continue Reading
Advertisement
Comments

Development

How To Fix 502 Bad Gateway Error in WordPress

Published

on

How To Fix 502 Bad Gateway Error in WordPress

We all have encountered the very frustrating 502 bad gateway error on our WordPress website many times. As speaking about WordPress, the platform often clusters with many irritating errors which all of us hates for many reasons. In which database connection issues, white screen of infinite pause are the most prominent one. But even more annoying is of the 502 bad gateway error which causes many headaches for developers on many occasions. And though finding various ways to fix 502 bad gateway error in WordPress, the developers not only waste serious time but also gets distracted with the other major issues during the website development.

So below we will be discussing few points on how to fix 502 bad gateway error in WordPress starting with the details about this error, and how it often emerges with the mishandling of the wrong code between the browser and the web server. While elaborating those, we will be then looking towards various ways about how to fix 502 bad gateway error in WordPress, as of how quickly the problem could be rectified just with the intrinsic knowledge of web Browser and sometimes DNS checkups.

How To Fix 502 Bad Gateway Error in WordPress

What is the 502 Bad Gateway Error?

Renowned by many, the 502 bad gateway error is an HTTP status code, which is then generated on browser screen when something goes wrong between the browser and web server. In other words, HTTP status codes come back with the response of web servers but are not visible on screen unless some problem arouses, and 502 bad gateway error is one of those.

The error has the specific meaning that one server while imitating as gateway or proxy, got an invalid reply-back from the inbound server. That is why the HTTP status code quickly shows the “Bad Gateway” message on the screen to notify the relevant authorities.

bad gateway error

How To Fix 502 Bad Gateway Error in WordPress

There are many ways to fix 502 bad gateway error in WordPress, in which some of the most popular and exact are given below. Trying out these can solve your problem within minutes, and you can gain back the control of your web work perfectly again.

1. Reloading the website URL from which you received the error sometimes solves the problem quickly. As this issue sometimes gets generated randomly and is temporary on the norms. Hence refreshing back the web page with the URL sometimes comes very handy in fixing the bad gateway error.

2. If the above problem persists, then closing all your active sessions of the browser and reopening it freshly could be another way to fix 502 bad gateway error in WordPress. This issue is sometimes associated with the network as well as with the internal browser metrics. Hence closing all the browser windows/tabs and reopening a new window could give you the desired results, and can luckily fix the temporary aroused lousy gateway issue.

3. Clearing your browser as a whole with all cookies and caches inside it could also fix 502 bad gateway error in WordPress. Because once your browser has crawled the bad gateway message, then it somehow gets stored in your cookies and thus can return even if there is no significant blockages are there. So making sure, that your browser is cleared with all cookies and caches is also essential in rectifying this annoying bad gateway message and can literally work for you cheaply.

4. If the bad gateway message has aroused due to some network problem, then restarting your WiFi or switch could be the next step you should follow. As it is mostly stated that the 502 bad gateway error is mainly associated with the network problem, therefore checking up your network devices and restarting them could also do wonders for you in eradicating this problem.

5. If you are using a third-party CDN, then it might also be the reason for bad gateway problem. So disabling the CDN on the temporary basis could also resolve the issue sometimes, especially when you up on the work with a free CDN. Trying out this simple step is also very cheap and gives smart solution sometimes.

6. Checking up your DNS and local DNS is also very important if you are facing this bad gateway irritation. Make sure that both your DNS and local DNS are correctly configured and the problem doesn’t lie in between those. Because it is widely stated that network issue is the main reason enlarging this problem. And DNS configuration is one of the critical aspects of your network metrics. Hence rechecking them is the right thing to do for eliminating this temporary carnage.

DNS configuration

So there are also many other ways of eradicating this problem out. In which checking your plugins configurations, themes internal metrics and other website dynamics sometimes become very prominent. But the above-defined points are termed as the most common and easy in discarding the issue cheaply and smartly. That is why all six of them have been elaborated with complete detail to give you ease finding the right solution.

Continue Reading

Development

Why WordPress Is The Best Platform to Setup your eCommerce Store Online

Published

on

By

best platform to setup your eCommerce store

Key role to the success of every online business is a professional and effective website. A well maintained and effective website can open door to earn unbelievable profits hence it’s a gateway to run any online business. WordPress has transformed over the years from a simple blogging platform to the world’s most dominant CMS. Nowadays, over 24% of all websites are managed by WordPress. It includes some of the most known brands like Bata, Mashable, CNN, BBC, and TechCrunch etc. In the past, most of the people used to avoid using WordPress for setting up an eCommerce store, but things have now completely changed. the time is not so far when WordPress will become the best platform to setup your eCommerce store.

 

WordPress The Best Platform To Setup your eCommerce Store

WordPress has become one the best platform to setup your eCommerce store for the large known online stores to new building in-house or small online stores. WordPress provides loads of resources and flexibility, which can help you to save lots of money in development.

Incredibly Easy to Install, Configure, Use, and Manage

It’s not necessary to be a coding expert to get started with a WordPress. Just spending a few hours on training, you will be able to set up and run an eCommerce site within minutes. Let it be the order management or sales monitoring, everything is very easy to manage with the help of WordPress. In most cases, it’s not even necessary to call a WordPress expert because with all the documentation provided, you can manage almost everything by yourself.

Offers a Wide Range of eCommerce Themes

WordPress works on the source of its theme system and architecture. The theme makes a site look more appealing and interesting. It helps the user to easily turn a regular WordPress blog into a multi-million dollar shopping site. WordPress offers a vast variety of eCommerce themes.

The user can not only makeover a WordPress with just a single click but also can add desired eCommerce functions to a site as well. While using WordPress it’s not even necessary to hire a professional developer for such tasks.

Open-source with a Massive Community

WordPress is open-sourced software that means you can modify and change the source code in any way to fit your required eCommerce business needs. With WordPress, you will not only have full control over your online shop but also it will be free from several commercial limitations and restrictions imposed by a regular eCommerce company.

On the other hand, the supportive and vibrant helpers behind WordPress are always ready to help users in case of getting stuck somewhere. Setting up an eCommerce business with WordPress virtually costs almost nothing. All you need to have a relevant domain name and a reliable web hosting service and you’re good to go.

Scalable, Flexible and Secure

It has mostly heard that WordPress isn’t secure enough to manage eCommerce exposures but actually, that’s not the case. The security of your online shopping business depends on how you use and set-up the WordPress. There are various numbers of dominant security solutions such as, (Security and Wordfence), which can be used to protect your WordPress based eStore against today’s ultra-advanced cyber-crimes. Hosting websites like Page, WP Engine, Microsoft Azure and Google App Engine make it possible easily for WordPress to handle huge headache of traffic. This makes WordPress the best platform to setup your eCommerce store

WordPress Plugins

Nowadays we have a wide range of eCommerce plugins available; they easily can improve your sales by placing your choice on the right eCommerce plugins for your online shops. Each of this plugin is designed to turn a normal blog into an eCommerce site.

A noble plugin comes with a great flexibility and functionality that keeps a website smooth in running and enhances your site performance. A good plugin enables the customers to experience an enjoyable online shopping and also enables the registration process more easy and comfortable.

One last thing you need is a hi-quality blogging that summarizes your products. And will help the probable customers to realize the products. A correctly written explanation of products will help the buyers. All these plugins make WordPress one of the best platform to setup your eCommerce store

No Ongoing Fees

Dissimilar other eCommerce stages, which charge a regular transaction fee along with the fixed monthly fees, WordPress ask you to pay only for what you really need. A small business owner may get hard to pay monthly subscription fee. WordPress understands it well and thus offers a comparatively a cheaper way to set-up an online store. WordPress eCommerce themes and plug-ins come with the one-time purchase you may just need to pay for a hosting company and the domain name you are using.

Conclusion

Since it’s understood, there have been a number of improvements and updates made to WordPress. With the achievement of WooCommerce, it is proved that WordPress is focusing more on selling than publishing. The dedicated team of developers behind WordPress is endlessly working hard to make it the world’s most powerful, multi-purpose Content Management System (CMS). That is the reason why anyone can create any website including eCommerce business websites with WordPress. It wouldn’t be wrong to say that soon WordPress will be known as the best platform to setup your eCommerce store.

Continue Reading

Development

10 Best WordPress Themes to Use For Your Creative Agency Business

Published

on

By

Best WordPress themes

We’re living in the world where competition between agencies, corporations and firms is getting tough. Everyone is trying to offer better products, better solutions, and better services. Online marketing is the modern times best methods of getting more customers, provided that your website is actually of high quality. Here are the ten best WordPress themes developed especially for a creative agency businesses websites.

These amazing WordPress business themes are custom-built to provide a wide range of features that you need for promoting and running an online business. If you are creating an engaging and striking website for creative agency business, check out some of the best WordPress themes. They are fully loaded with amazing features that will help you to create a website that stands out.

Best WordPress Themes For Creative Agency Business

Creative agencies are created to help you construct the brand, improving your company’s public reputation. Somewhat, a good creative agency may need help for website development. This is further highlighted due to the lack of resources, as new businesses rarely have the funds to hire an outsourced web development company.

Thankfully, networks as WordPress provide productive ground for innovation. Below are the ten best WordPress themes for creative agency business That I have gathered according to their rating and user ship all across the globe

Theme X

Theme X is an incredible multipurpose WordPress theme. It is suitable for all needs of the user. You can create millions of designs with the help of a single theme. It provides dozens of demo’s; this is the best example for designing a WordPress site according to your dreams.

best WordPress themes

Divi

Divi is a clean, reactive theme, which is versatile and easy to use. It is suitable for both creative and corporate businesses. This Theme’s elegant design gives you maximum flexibility. Even if the thought of customizing the theme makes you nervous, still you can be assured knowing that the Divi developer enables you to drag and drop aspects to build and maintain pages without any code.

best WordPress themes

Uncode

Uncode is conceptually designed, innovative, elegant, professional, attractive, imaginative and flexible best WordPress theme. It is technologically and profoundly functional. It features vibrant and responsive WordPress multi-concept, multipurpose website theme.

best WordPress themes

Agency

Let your photographs stand out and capture the attention of your target audience with the help of WPLook’s Agency WordPress theme. The Agency is a clean and minimalist designed theme, which will make your images or photographs stand out to capture the interest of visitors. This theme offers unlimited designs and customization options because it is developed on SASS, which offers wide-ranging features and capabilities.

Best WordPress themes

 

Jupiter

Just like its name of the planet, this theme is larger and better than life. If you are looking for one of the best WordPress themes, look no further than Jupiter. It offers many customizable options, ensuring that your site can eclipse your competitors. Its template varieties are divided into six categories, and in total it has 25 templates.

Best WordPress themes

Zerif Pro

Zerif Pro is the striking and clean theme for creative agency business which manages to offer a professional look to your website while maintaining a personality. The theme looks great with its straight out of the box idea. It also offers customizing options to make personalization a breeze.

Best WordPress themes

Enfold

Enfold is an outclass masterpiece developed by Kriesi, which is one of the best authors of ThemeForest. It is one of the best WordPress themes, and it is sizeable for any website. Enfold provides an easy setup predefined content, and that’s what saves quite a lot of your valuable time.

Best WordPress themes

Studio 8

Studio 8 is a top rated WordPress theme that allows everyone to built an impressive business website, due to their skill level. In the case of non-technical users, the configuration and installation will be handled by the developers. Its design never fails to impress.

Best WordPress themes

BeTheme

BeTheme provides the option for the user to get rid of the useless inner page’s background images. It also enables users to apply the parallax effect to jazz up your website. It has incredible functionality that will help you attract more visitors to your site without compromising the usability and responsiveness of your site.

Best WordPress themes

Stockholm

The developers pay great pride to themselves in developing a theme that is originally a multi-concept product. If you wish to check what Stockholm is all about, check their one of 20 stunning multi-concept demo themes, or the free live preview feature. It does not require any large amount of coding due to their easy admin panel facility.

Best WordPress themes

Above are the best available themes of WordPress for your creative business website. If you have any other best options, let me know. Your feedback is warmly welcome.

Continue Reading

Trending

Positive SSL