Posts

Showing posts with the label HTML

Search Box With Pure CSS Simple

Simple Widget Blogger search box with pure CSS. Here the HTML: <form id="searchthis" action="/search" style="display:inline;" method="GET" target="_top"> <!-- Search box for blogger by Namanyay Goel //--> <input id="namanyay-search-box" name="q" size="40" type="text" placeholder=" Type Keywords... "/> <input id="namanyay-search-btn" value="Search" type="submit"/> </form> The Pure CSS #namanyay-search-btn { background:#0099ff; color:white; font: 'trebuchet ms', trebuchet; padding:10px 20px; border-radius:0 10px 10px 0; -moz-border-radius:0 10px 10px 0; -webkit-border-radius:0 10px 10px 0; -o-border-radius:0 10px 10px 0; border:0 none; font-weight:bold; } #namanyay-search-box { background: #eee; padding:10px; border-radius:10px 0 0 10px; -moz-border-radius:10px 0 0 10px; -webkit-border-radius:10px 0 0 10px; -o

(JS) Javascript Function Remove Slash From String

Image
All I needed was to expel every single forward slice in a string utilizing Javascript. Remove Forward Slash (/) Using JavaScript Function function FSlash(func){ var x = func,    n = x.replace(/\//g,''); return n  } //Usage Using Variable var nx = "4x/4/4/5/6/7//532///45/"; //Call Variable Into Function Name    document.write(FSlash(nx)); //You can combine from function too Demo : CodePen The vital part to note here is the consistent articulation /\//g . The bit of the string you need supplanting is composed between the first and last forward cuts – so on the off chance that you needed the word 'work area' supplanted you would compose/work area/g. As the character we need to expel is an uncommon case you need to escape it utilizing an oblique punctuation line, generally the code will read the twofold forward cut as a remark thus quit preparing the line. At last, the g implies apply the substitution internationally to the string with the goa

Random Posts Widget Blogger

Image
How to create random posts widget blogger (simple and stylish). 1. Login to dashboard blogger -> navigate to layout tab -> create widget html/javascript -> insert this code to the widget. <style scoped='' type="text/css"> #arlina-random ul{list-style:none;margin:0;padding:0}#arlina-random li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;} #arlina-random li:last-child{border-bottom:0;} #arlina-random li a{color:#444;}#arlina-random li a:hover{color:#444;text-decoration:underline} </style> <div id='arlina-random'>Memuat...</div> <script> //<![CDATA[ // Random Post Widget var homePage = ' https://www.web-development.cf ',     maxResults = 10 ,     containerId = 'arlina-random'; function getRandomInt(min, max) {     return Math.floor(Math.random() * (max - min + 1)) + min; } function shuffleArray(arr) {     var i = a

SCSS Animate Hover Scale Letters

Demo HTML Full Page <!DOCTYPE html><html><head> <link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet" /> <style>html, body { height: 100%; } body { background: #e74c3c; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: 'Passion One', cursive; } .scale { font-size: 10vw; text-transform: uppercase; letter-spacing: 4px; color: #fff; cursor: pointer; } .scale span { display: inline-block; -webkit-transition: -webkit-transform 0.1s; transition: -webkit-transform 0.1s; transition: transform 0.1s; transition: transform 0.1s, -webkit-transform 0.1s; } .scale span:hover { -webkit-animation: rotate-scale-up 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both; anim

LESS CSS Animasi Ajaib (Magic Sphere)

Image
Demo Full Page Code <!DOCTYPE html><html class=''> <head><script src='console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="nofollow"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111&q

Replacing the Label Widget Blogger Function to Be Dropdown

Image
   I will provide another option of the label widget that can be made dropdown, it looks exactly the same as the dropdown in the archive widget. The purpose of changing the look of this label widget is to save space on the blog page if in my blog there are many labels that make the blog look narrow because it is not just a label widget that is on the blog. In addition your blog will look more tidy and professional. For those who want to mecobanya, please follow the following tutorial: Replacing the Label Widget Function to Be Dropdown 1. Go to Blogger> Template> Then find this code <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'> <data:label.name/> </a> </b:if> ( <data:label.count/>)

Search Box With Pure CSS Simple

Simple Widget Blogger search box with pure CSS. Here the HTML: <form id="searchthis" action="/search" style="display:inline;" method="GET" target="_top"> <!-- Search box for blogger by Namanyay Goel //--> <input id="namanyay-search-box" name="q" size="40" type="text" placeholder=" Type Keywords... "/> <input id="namanyay-search-btn" value="Search" type="submit"/> </form> The Pure CSS #namanyay-search-btn { background:#0099ff; color:white; font: 'trebuchet ms', trebuchet; padding:10px 20px; border-radius:0 10px 10px 0; -moz-border-radius:0 10px 10px 0; -webkit-border-radius:0 10px 10px 0; -o-border-radius:0 10px 10px 0; border:0 none; font-weight:bold; } #namanyay-search-box { background: #eee; padding:10px; border-radius:10px 0 0 10px; -moz-border-radius:10px 0 0 10px; -webkit-border-radius:10px 0 0 10px; -o-bo

How To Create a Blogger Contact Popup Comes With Google Maps

Image
The function of the contact form on a blog is to make it easier for blog visitors to contact the blog admin.   Blogger itself has provided a contact form that is already connected with the Gmail account admin blog.   Well this time I will share how to create a contact form Blogger popup with Google Maps equipped, so this (Google Maps) will be more to give visitors trust to the blog admin, especially if the blog is used for business or online store.   Visitors or consumers will be more confident because the business location is clear.   DEMO Please try on the menu " Contact " Interested to try it?   Please follow the steps below.   The first thing to do is to register your business location on Google My Business by storing our business location on Google Maps.   If you have not yet saved your business location on Google Maps, please follow the following tutorial:   How to Spot Your Places In Google Maps   And it will be better, verify also where your business is

Pure CSS3 3D Icons Using Font Awesome 4.7.0

Image
HTML <h1>Pure CSS3 3D Icons - Using Font Awesome 4.7 </h1> <div class="icon-block"> <i class="fa fa-film fa-5 fa-3dicon"> </i> <i class="fa fa-briefcase fa-5 fa-3dicon"> </i> <i class="fa fa-camera-retro fa-5 fa-3dicon"> </i> <i class="fa fa-flash fa-5 fa-3dicon"> </i> <i class="fa fa-info-circle fa-5 fa-3dicon"> </i> </div> <div class="icon-block"> <i class="fa fa-android fa-5 fa-3dicon"> </i> <i class="fa fa-info fa-5 fa-3dicon"> </i> <i class="fa fa-home fa-5 fa-3dicon"> </i> <i class="fa fa-dollar fa-5 fa-3dicon"> </i> <i class="fa fa-lock fa-5 fa-3dicon"> </i> </div> <br /> <a rel="nofollow" rel="noreferrer"class="copy"

Responsive Animate Demo And Download Button

How to make Sliding Demo and Download Button Here the Demo: Here The Html Here the CSS This helpful ? Please share this.

CSS Spoiler Only With Label And Input

Image
unfortunately the  details  and  summary tags are not allowed in AMP HTML.   So the CSS spoiler only with details and summary can only be used for HTML5 templates only.   For CSS only spoilers to be used in HTML5 and AMP HTML then we need another way to create them.   Still remember with my post about fixed slide Blogger popular posts AMP HTML ?   There I used the  label label  and  input  for the  close  widget button.   From there I can idea to make CSS spoiler only with label and input .   The Demo can be tried in  amp-iframe  Codepen.io below.   How cool is not it?   If you want to try it on your blog, please follow the steps below.   Please save the CSS code below in your blog's CSS style .   .spoiler .spoiler_title {  display: inline;  float: left;  margin: 3px 10px 0 0;  padding: 4px 0;  font-size: 16px;  line-height: 1;  }  .spoiler label {  cursor: pointer;  background: #26272a;  margin: 0;  padding: 4px 18px 4px 22px;  outline: none;  border-radius: 3px;

Cara convert HTML ke Javascript document.write otomatis

Image
Bagaimana cara convert HTML ke Javascript document.write secara otomatis Biasanya orang yang membuat website atau blog yang menggunakan fitur javascript biasanya bingung dalam membuat LIKE BOX maupun SOCIAL SHARE BOX untuk website nya. Agar tombol like atau share dapat tepat merujuk like atau share terhadap artikel yang dikunjungi visitor. Nah berikut cara nya: 1. Masuk ke website berikut ini : HTML to Javascript Converter 2. Copy Kode HTML yang anda ingin terapkan dalam penerjemahan javascript. Kemudian paste Kode HTML tersebut ke dalam box yang sudah di sediakan. Kemudian klik Convert to javascript syntax . Selesai. HTML anda sudah siap untuk di terapkan di javascript untuk di print secara dinamis.

MAKE A HORIZONTAL MENU NAVIGATION

Image
Maybe my friend already familiar with the name of the menu horizontally. Here I will make a simple horizontal navigation menu which is more easily applied to a template. The menu is usually located below the header. Below is a picture of a horizontal navigation menu that we will create. We just toward how to make it. Sign in to your blog Choose a layout or design. Click add gadgets. Choose HTML / Java Script. Then enter the code below. <style type="text/css"> /*----------------------------------*/ .Nav a { width: auto; height: auto; text-decoration: none; } .Nav a { text-align: center; text-decoration:none;color:#ffffcc; padding:1px 20px 1px 20px;font-weight:bold; font-size:12px; } .Nav a:hover {padding:3px 20px 3px; 20px; text-align:center; text-decoration:none; color:#000033; font-weight:bold; border:3px; background-color: #000000;} </style> <div style="border: 3px solid #ffcc99; height:px;background-color:#FF3366;"> <div