10/31/2016

create an alert box info box and the tips box

hey today im gonna share how to create an alert box, info box, and the tips box easily on your blog posting....

colorful alert box, info box, and the tips box
example

advantages :
  • colorful
  • responsive
  • easy to use
  • beautiful design
  • and manymore

how to use??

1. Go to a blogger dashboard
2. template - html
3. just paste the code below in the before </style>

.info {
 background: #F3F781 url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkep0YJJu0RfFXQ0q0aq3jg_o_-Trdd56Wa5i-KvQ76IxlHFOxqHZaVGmQrkA54b5NQHKrDcvtvCYfW8w7n3AEHh2AB4XQik2oQ48ve9j_8kle6fGuiQv0vsyLSpu7cXeRzxPiuCLe0pI/s1600/info.png&#39;) no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_34EWFNCsMcSErmPj0SLWoV6CPRWW5PuBMEtfHMaDbpxEQ_jCc7Q79w2zrTj_R0352ov0LcaaqqarCTlPe3Z-vGeZWNTZXdrkHirXMdl2m8TpBYUKmUAoBKzY3DhETHOWxl0gLqCfis/s1600/tips.png&#39;) no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBZLi4l8efhWTryx4hADeDlWI75IgQgzpzYrRMvi6c1XQUjQwmBcDFi22Kd-rJjI5Id8RTtlppyylNBmp-E-clMmoTWyaPdsZPY67ycSRSBncBwx-GatYpy8A_4k4uSexPHIotcijQbGU/s1600/warning.png&#39;) no-repeat 12px 8px;
 color: #fff;
}




how to using info, warning, and tips in your postingwhen writing a post, paste the above code in the HTML (don't paste on the compose mode)!!
and change the text, with your own writing

info box code
&lt;div class=&#039;info&#039;&gt;
... change this whit your teks info ...&lt;/div&gt;

tips box code
&lt;div class=&#039;tips&#039;&gt;
... change this whit your tips teks...&lt;/div&gt;

warning box code
&lt;div class=&#039;warning&#039;&gt;
... change this whit your warning teks ...&lt;/div&gt;


maybe just that's all, What can i share about how to create peringantan box, info box, and the box of colorful tips, hopefully useful..

10/30/2016

How to Delete a Widget That Can't be deleted or moved from Layout

Hey, if you're having trouble deleting or moving a widget on your layout, because there is no option to remove or can not be moved ??
Such events usually happen after you change the template, widget long that they had left the previous template will be locked (locked 'true'), or locking the widget being activated.

for his picture please see the picture below.

Delete a Widget That Can't be deleted or moved
locked gedget

if we look at the picture above, the words "delete" on a gadget I was not there when it was entered into the edit menu.

and how to remove them ??
How to Delete a Widget That Can't be removed through the layout is actually is very easy, here's how:

1. Go to Template - edit HTML.

2. Search for the title of the widget you want to delete by pressing Ctrl + F and enter the name of the widget can not be deleted earlier, such as "Attribution".
blue text with mark yelow light is the name or title of the widget you seacrh for.

How to Delete a Widget That Can't be deleted or moved from Layout easily
example i'll move attribution gedget layout


3. Replace the code locked = 'true' in your html, with = 'false'.
4. Click Save Template.
5. after finishing try to get back into the layout and then refresh the page,
then see your widgets that can not be deleted.

So now when you trying to edit gedget from layout the word "delete" will appear there, and the widget will be able to moved or deleted also.

note:
also work on onother widget just seach with widget name on html template editor, and then change value locked ='true' 
with locked = 'false'.

hope useful

10/29/2016

how to create simple table of contents or sitemap easily

how to create a simple table of contents like in my blog !!!
table of contents blog, simple, pretty responsive,

This sitemap has advantages:
  • responsive
  • grouped by label
  • allow visitors to view any article on your blog or website
  • easy to make
  • table of contents will automatically increase when you create a new article.
  • The most recent articles will be marked with new (on the side).
  • and many more

simple table of contents(sitemap blog) beautiful, responsive colored
how to create a simple table of contents or sitemap easily
code :
<style>
p.labels a {
    color: #242424;
    text-transform: uppercase;
    font-weight: 600;
    border: 5px solid #2E9AFE;
    display: block;
    padding: 8px;
    background: #DF0101;
    border-radius: 15px 1px 15px 1px;
    font-size: 15px;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:none;line-height:25px;}
</style>

<script>
//<![CDATA[
var postTitle=new Array();var postUrl=new Array();var postPublished=new Array();var postDate=new Array();var postLabels=new Array();var postRecent=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function bloggersitemap(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postPublished[ii]=o;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write()}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postPublished[e];postPublished[e]=postPublished[g];postPublished[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postPublished[f];postPublished[f]=postPublished[h];postPublished[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Post Title";var m="Click to sort by title";var d="Date";var k="Click to sort by date";var c="Category";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Click to view all"}h+="<table>";h+="
<tr>";h+='<td class="header1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="header2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="header3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="header4">';h+="Read all";h+="</td>";h+="</tr>
";for(var g=0;g<postTitle.length;g++){if(a==""){h+='
<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>
';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='
<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>
';l++}}}h+="</table>
";if(l==postTitle.length){var f='<span class="toc-note">Show All '+postTitle.length+" Posts<br/></span>"}else{var f='<span class="toc-note">Show '+l+" posts by category '";f+=postFilter+"' the "+postTitle.length+" Total Posts<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p class="labels">
<a href="/search/label/'+temp1+'">'+temp1+"</a></p>
<ol>");firsti=a;do{document.write("
<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">New!</span></strong>')}document.write("</li>
");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>
");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Display Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLcAzDKguglaM2kpKBXcYQEhjRq5x2yeGaADQzSxHcvgIIubmX-8vhOKEAjB3FjeX7omL1-gbEENtUu2VG6RtQFBTRLY8WQquSpQ29QELRz4hxnxPWA1YLc8tfz__z5NBlhTVs06ZyMLhi/s1600/new_icon.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Read all : <a href="'+postPublished[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};
//]]>
</script>
<script src="http://www.berwirausaha.net/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

  how to use it:

  1. sign in in your daskboard blogger
  2. pages - new pages
  3. choose html mode
  4. just paste the code above and dont forgate replace http://www.berwirausaha.net with your blog url
  5. save.
  6. done

 for the demo here

how to create favicon on blog easily

Favicon stands for "Favorite Icon", which is an icon of a website or a blog on the browser or bookmark section.
favicon can help provide icons for your website so easily recognize by your visitors.

favicon could also represent the name of your site to be known visitors, as the symbol of the letter G on the icon google or F on the facebook icon.
when you also open google in the top there is the letter G, right?
so letter it is what is called the favicon or favorites icon.

how to create a favicon is actually very easy you just have to make a picture with the box-shaped rectangular / squarenya equal sides, such as the size of 100x100px, 64x64px or 16x16px.
provided, however, the size of the file that is used does not exceed 150kb.

favicon for later in the show are very small indeed.
for those of you who are proficient with Photoshop or another image editor it certainly makes the size of images with pixel sizes as large as it may be very easy, but for the layman may be a little confusion to make the file size of photos / images accordingly.

so here I will share tips on how to create a simple favicon

easy steps to make favicon


1. open tools favicon here
2. click choose file, upload the images you want to use for an icon, size below 150 kb
3. then click Create Favicon
4. after a successful preview icon will appear that you have uploaded then you just click on the favicon download

5. Save the file namefavicon.Rar, in where you want


how to install a favicon on your blog

how to install a favicon is actually very easy, here's how it:
1. ekstrack favicon.RAR that you created earlier
2. enter into a layout - click edit in the favicon

3. Click browse and find where you store your favicon and then upload
4. usually gif format, so select the .gif file
 

5. Click save and take a look at your site, now you have a new favicon.

maybe just that I can share this time, hope useful.

recent post cool colorful and easy to make

This time I want to share how to make a recent post colors are super cool and rarely found ..
recent post is usually difficult in getting and if there is not active most of the code ....
maybe it had ever tasted. and he immediately wrote a recent post top coolest ...

advantages :
  • simple
  • colorful 
  • responsive
  • easy to use
  • handsome
  • cool

recent post beautiful recent post colored

cool recent post colorful and easy to make
source www.berwirausaha.anet

<div id="recentpostsae"></div>
    <div id="recentpostnavfeed"></div>
    <script type='text/javascript'>
    //<![CDATA[
        var numfeed = 7;
        var startfeed = 0;
        var urlblog = "http://www.berwirausaha.net";
        var charac = 0;
        var urlprevious, urlnext;
    function seocipsfeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfUScD1vZYWYicO_IPAxwSE1a4NaAneLicnEFYnYVs4hbOoGXAT1OCS0ZdbH-tl38E2ia5V4m5C_DeW6XM9YMMM8PgVSBsb8Sr8ga3fPPLJRaQPND02ufrtWI401mp_khR9Z5D_x5tdvC-/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+seocipsfeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Home</a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'>
</div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","seocipslabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("seocipslabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
    //]]>
    </script>
    <style>
    #recentpostnav{border:1px solid #000;width:100%;margin:0 auto;}
    #recentpostsae{margin:0}
    .recentpostel{background:#333;display:block;border:2px solid #111;margin:5px 0;padding:10px;height:79px;}
    .recentpostel img{background:#222;padding:5px;float:left;height:70px;margin-right:8px;width:70px;border-radius:5px;}
    .recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px!important;font-weight:700!important;margin:0;color:#000;}
    .recentpostel:nth-child(1n+0) {background: #F49A9A;}
    .recentpostel:nth-child(2n+0) {background: #FCD092;}
    .recentpostel:nth-child(3n+0) {background: #81F7BE;}
    .recentpostel:nth-child(4n+0) {background: #E1EFA0;}
    .recentpostel:nth-child(5n+0) {background: #B1DAEF;}
    #recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDMLA0KoJWtJBFqISwyWuKSKBa-cOn2oYEljdT1ikfoCotSD7_W5rtR5oHoLY_EqloM9HXtszJ3jWAFiA_M7NNMB0mRu3eYKFj18NnLwNpENXQzxzwdL7trEkQ9s-AjIG6dmfcH6r040Ht/s1600/loader.gif) 50% 50% no-repeat #F49A9A;height:470px;border:1px solid #111}
    #recentpostnavfeed{border:2px solid #000;color:#111;background:#F49A9A;font-family:Verdana;font-size:12px;text-align:center;margin:0}
    #recentpostnavfeed:hover{background-color:#FCD092;}
    #recentpostnavfeed a{color:#111!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
    #recentpostnavfeed span{padding:5px 10px}
    #recentpostnavfeed .next{float:right}
    #recentpostnavfeed .previous{float:left}
    #recentpostnavfeed .home{text-align:center}
    #recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important}
    </style>
 how to use it:
  1. sign in in your daskboard blogger
  2. layout - add a gadget
  3. html/java script
  4. just paste the code above and dont forgate replace http://www.berwirausaha.net with your blog url
  5. save.
  6. done

 for the demo here