codebox club

Bloggers Condittonal Tag

<b:if cond='data:blog.pageType == "item"'>

<b:remove/>

</b:if>

The Autocomplete feature of a we browser can be removed by using " autocomplete" attribute , It can be removed from whole form or from all Input field or specific input field as per required or choice.. code is given below :

Remove auto complete from whole from by using below code.

Remove auto complete from all specific input type by using below code.

Google form customization for website to look professional

Google Forms is one of the ideal option to integrate in our website , specially for collecting different kind of data , As there is so many options which can be inert in form offered by google, the best part about google form , the it stored the collected data in google sheets, so we do not need to save data in order. but the structure of google form doesn't have professional look to add a static website page. And it comes with google branding at the bottom.

No worries , here we learn how we can customize the google form , give it a professional look , remove google branding and add in our professional website page.

step 1

create a google form , go to google form https://docs.google.com/forms/
and create a form , I am avoiding here the process to create google form , As you can do yourself to giving some time....

step 2 create a simler form at your own

<label>Email Address*</label>

<label>Subject</label>

<label>Message*</label>

</form>

NOTE : The HTML doesn’t have to be exactly the same as Google’s, but it needs to have exactly the same form fields. You can add your own CSS classes to the form so that it’ll match your site’s design.

step -3 Add Action & Name value to your onsite form.

Google uses custom name and action values to identify each form. The action attribute belongs to the <form> tag, while the name attributes belong to the input fields. So, you need to find these custom values and add it to the HTML.

Log out of Google (or use a different browser), as if you stay logged in it’ll be hard to do the code inspection (Google adds a lot of extra stuff to logged-in users). Load your Google Form using the form’s URL and inspect it using your browser’s developer tools.

You need to find the <form> tag in the HTML inspector and copy the value of the action attribute into your custom HTML.

You need to do the same thing with your four input fields, too. But now, you don’t have to copy the action attribute but the name attribute of each input field.

Insert the custom action and name values into your HTML code similarly look like given below:

200

<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSf2soY4CKBVRJoJ6d7NJUr3DrK1WXvwyNtS1Wn0HDyc0VwSQw/formResponse" method="post" target="hidden_iframe"

onsubmit="submitted=true;">

<label>Email Address*</label>

<label>Subject</label>

<label>Message*</label>

</form>

300

step -3 Redirect to custom thank you page

While doing the test, you’ve surely noticed that your site has redirected the user to Google’s default thank you page. If you’d rather send your respondents to your custom thank you page add the following code to the top of your form, right before the <form> tag:

400

onload="if(submitted) {window.location='Redirect thankyou link goes here';}"></iframe>

<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSf2soY4CKBVRJoJ6d7NJUr3DrK1WXvwyNtS1Wn0HDyc0VwSQw/formResponse"

method="post" target="hidden_iframe" onsubmit="submitted=true;">

<label>Email Address*</label>

<label>Subject</label>

<label>Message*</label>

</form>

500

Change navbar dropdown icon bootstrap

Bootstrap using caret icon by default for their navbar drop down menu , we can change the dropdown menu icon in our favorite icons , also can set the different icon with show and hide dropdown menu effect using CSS code ,

Just add the given code below in CSS to see the effect,

.dropdown-toggle[data-toggle="dropdown"]:after {

font-family: 'Material Icons outlined';

font-weight: 900;

content:"\e065";

}

.dropdown-toggle[data-toggle="dropdown"] {

display: flex;

}

.dropdown-toggle[data-toggle="dropdown"]:after {

border: none;

}

Suggested for mobile Version on click function

.show > .dropdown-toggle[data-toggle="dropdown"]:after {

content:"\e03b";

}

May use for Desktop Version if need on hover function

:hover > .dropdown-toggle[data-toggle="dropdown"]:after {

content:"\e03b";

To get the above result , don't forget to add the Google material icon CDN to get the desired icons. Also may use fontawasome icon but process is same to add the CDN link of desired icon and use Unicode as per the above example..

Google Material icons

Google material icons are one of the reliable source to use it free in your website or projects. it is available thorough CDN or one can download to use it easily on their official site , link is given below :

Google Icons

Add in your online project or website through CDN path :

How to Add HTML :

Add the icon directly in HTML page in below given format, Normal solid view

use material-icons class , if you want add outlined view use material-icons-outlined class

Example are given below :

<i class = "material-icons myclassname"> place</i>

<i class = "material-icons-outlined myclassname"> place</i>

Must include your specific class , myclassname is the specific class given in above example , which can help to decorate the icon through css

Decorate the icon through CSS :

i.myclassname {

font size: 20px;

color:#A500000;

margin-left:-21px;

padding-right:4px;

padding-top:-10px;

margin-top:0px;

position: absolute;

}

Add icon using content unicode in CSS :

.myclassname ::before {

font-family: 'Material Icons';
content: "\e876";
margin-left:-21px;
padding-right:4px;
padding-top:-10px;
margin-top:0px;
position:absolute;

}

303

test

Recent Post desgin

101

function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');

for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;

for(var o=0;o<n.link.length;

o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;

try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfN7fQltcNwW_QBv7GjXvq65IVyMmzKVNxE5jjjwqnw2rpKxVqHvzeUbEmzoGqtMUTBqRwGTEjb-aSSgtucZ6QE9HlqnAzlREI7URSahx5elYrvfbGIfzjMQm_BRntRsWv_XBvH-ef8FNv/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")} </script> <script type="text/javascript"> var posts_no = 5; var showpoststhumbs = true; var readmorelink = true; var showcommentslink = false; var posts_date = true; var post_summary = false; var summary_chars = 70; </script>

</script> <a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href=" " rel="nofollow"> </a>

img.recent-post-thumb {

width:90px;

height:90px;

float:left;

margin:5px 10px 0px 0px;

-webkit-border-radius:50%;

- moz-border-radius: 0em 0;

border-radius:10%;

padding:5px;

background: #fff;

}

ul.recent-posts-container {

list-style-type: none;

background: #fff;

padding: 20px 0px 20px 0px;

font:12px 'Ubuntu Condensed', sans-serif;

margin: 5px 0px 5px 0px;

background:#fff;

}

ul.recent-posts-container li:nth-child(1n+0) {

background: #fff;

width: 100%;

}

ul.recent-posts-container li:nth-child(2n+0) {

background: #fff;

width: 100%;

}

ul.recent-posts-container li:nth-child(3n+0) {

background: #fff ;

width: 100%;

}

ul.recent-posts-container li:nth-child(4n+0) {

background: #fff;

width: 100%;

}

ul.recent-posts-container li:nth-child(5n+0) {

background: #fff ; width: 100%;

}

ul.recent-posts-container li {

padding: 15px 15px 15px 15px;

list-style-type: none;

margin: 0 0 0 0px; color: #777;

}

.recent-posts-container a {

text-decoration:none;

}

.recent-posts-container a:hover { color: #222;}

.post-date {color:#e0c0c6; font-size: 11px; padding-left:20px;}

.recent-post-title a {

font-size: 17px;color: #444;

font-weight: bold;

padding-left:0px;

} .recent-post-title {padding: 6px 0px;}

.recent-posts-details a{ color: #222;}

.recent-posts-details {padding: 5px 0px 5px; }

</style>

102

more desgin https://bazzhood.blogspot.com/2020/01/new-recent-post-widget-for-blogger.html

Html css Accordin Menu

just workout the given code Aakash

Red accordion menu with plus -minus symbol

<!doctype html>

<style>

.accordion {

background-color: #ba1513;

color: #fff;

cursor: pointer;

padding: 10px 10px;

width: 100%;

border: 1px solid;

border-color:#820B09;

text-align: left;

outline: none;

font-size: 13.5px;

transition: 0.4s;

font-family: 'Cuprum', sans-serif;

font-weight: bold;

}

.active, .accordion:hover {

background-color: #700D0B;

}

.accordion:after {

content: '\002B';

color: #fff;

font-weight: bold;

float: right;

margin-left: 5px;

}

.active:after {

content: "\2212";

}

.panel {

padding: 10 5px;

background-color: #4F0706;

max-height: 0;

overflow: hidden;

transition: max-height 0.2s ease-out;

}

.panel li{

padding: 10px 2px 2px 10px;

text-decoration: none;

font-family: 'Cuprum', sans-serif;

font-size: 15px;

color: #818181;

display: block;

border-bottom: none;

border-color:#2E0403;

background: none;

width: 100%;

text-align: left;

cursor: pointer;

outline: 0px;

}

.panel a{

padding: 2px 2px 2px 0px;

text-decoration: none;

font-family: 'Cuprum', sans-serif;

font-size: 13.5px;

color: #C2A815;

display: block;

border-bottom: 1px solid;

border-color:#000000;

background: none;

width: 100%;

text-align: left;

cursor: pointer;

outline: 0px;

}

</style>

CODE FOR BLOGGERS </h2>

<li style=" line-height: 1.4em; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px;border:1px solid;border-color:#820B09;"><a href="https://codeboxclub.blogspot.com/2020/04/important-code-frequent-use.html" style="color: white;"> Important Code <i class="fa fa-angle-double-right" aria-hidden="true"style= float:right;margin: 0px 10px 0px 0px;"></i></a></li>

</ul></div>

<button class="accordion"> Template Customization </button>

<li class="panel-li"><a href="https://codeboxclub.blogspot.com/2020/04/make-blogger-template-responsive-with.html"style=margin-bottom:0px;text-color:#000000;><i class="fa fa-angle-double-right" aria-hidden="true"></i>  Make blogger Template Responsive with right sidebar </a></li>

<li class="panel-li"><a href="https://codeboxclub.blogspot.com/2020/06/make-blogger-template-responsive-with.html"style=margin-bottom:0px;text-color:#000000;><i class="fa fa-angle-double-right" aria-hidden="true"></i>  Make blogger Template Responsive with left sidebar </a></li>

<li class="panel-li"><a href="https://codeboxclub.blogspot.com/2020/06/make-blogger-template-responsive-with_6.html"style=margin-bottom:0px;text-color:#000000;><i class="fa fa-angle-double-right" aria-hidden="true"></i>  single full width main column Responsive templat </a></li>

<li class="panel-li"><a href="www.adclubads.com"style=margin-bottom:0px;text-color:#000000;><i class="fa fa-angle-double-right" aria-hidden="true"></i>  Add Responsive Footer </a></li>

<li class="panel-li"><a href="www.adclubads.com"style=margin-bottom:0px;text-color:#000000;><i class="fa fa-angle-double-right" aria-hidden="true"></i>  Styling Font </a></li>

</div>

<button class="accordion"> Fonts Customization </button>

<li class="panel-li"><a href="www.adclubads.com"style=margin-bottom:0px;text-color:#000000;><i class="fa fa-angle-double-right" aria-hidden="true"></i>  Submit your Story </a></li>

</div>

<button class="accordion">Add css/html Gadget </button>

<li class="panel-li"><a href="www.adclubads.com"style=margin-bottom:0px;text-color:#000000;><i class="fa fa-angle-double-right" aria-hidden="true"></i>  Submit your Story </a></li>

</div>

<button class="accordion">Section 3</button>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

</div>

</ul></div>

//<![CDATA[ //

var acc = document.getElementsByClassName("accordion");

var i;

for (i = 0; i < acc.length; i++) {

acc[i].addEventListener("click", function() {

this.classList.toggle("active");

var panel = this.nextElementSibling;

if (panel.style.maxHeight){

panel.style.maxHeight = null;

} else {

panel.style.maxHeight = panel.scrollHeight + "px";

}

});

}

//]]> </script>

</!doctype>

workout

Bloggers Condittonal Tag

Form

Remove auto complete from whole from by using below code.

Remove auto complete from all specific input type by using below code.

Google form customization for website to look professional

step -3 Add Action & Name value to your onsite form.

step -3 Redirect to custom thank you page

Change navbar dropdown icon bootstrap

Google Material icons

Add in your online project or website through CDN path :

How to Add HTML :

Decorate the icon through CSS :

Add icon using content unicode in CSS :

.myclassname ::before { font-family: 'Material Icons'; content: "\e876"; margin-left:-21px; padding-right:4px; padding-top:-10px; margin-top:0px; position:absolute;}303test

Recent Post desgin

Html css Accordin Menu

just workout the given code Aakash

Red accordion menu with plus -minus symbol

.myclassname ::before {

font-family: 'Material Icons';
content: "\e876";
margin-left:-21px;
padding-right:4px;
padding-top:-10px;
margin-top:0px;
position:absolute;

}

303

test