WMI

   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/>)

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

save the following CSS styles above </head> <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> /*<![CDATA[*/ .share_responsive{position:relative;height:40px;margin:20px 0!important;padding:0} .share-btn,.share-btn li,.share_responsive h4{margin:0;padding:0} .share_responsive h4{height:40px;width:10%;position:absolute;top:0;left:0;z-index:2} .share-btn{height:40px;padding:0;margin:0!important;width:100%;} .share-btn:after{clear:both} .share-btn:after,.share-btn:before{content:' ';display:table} .share-btn li{box-sizing:border-box;width:10%;height:100%;line-height:40px;padding:0!important;margin:0!important;list-style-type:none!important;transition:all .3s ease-in-out;float:left;border:0!important} .share-btn li.btn-line a,.share-btn li.btn-line a:hover{background-color:#00C300} .share-btn li.btn-facebook a{background-color:#306199} .share-btn li.btn-facebook a:hover{background-color:#244872} .share-btn li.

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

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"

How to Remove Screwdriver Icons and Pliers (Quick Edit and Wrench). Quick Edit Icon and Wrench Icon ( icon screwdrivers and pliers ) usually appear on Blogspot Blog when we login. The Quick Edit icon (pencil drawing) usually appears at the end of the post. Its function is to make it easier for bloggers to edit the post. Just click the pencil icon or image, then bloggers can edit or update posts. Icon Wrench or Screwdriver & Tang appear on every Gadget / Widget in the sidebar.Functions the same as the quick edit icon, which allows bloggers to edit the widget on his blog. The problem is, some bloggers feel annoyed with these icons. After all we can edit the widget and post directly on the dashboard. After all, the existence of these two icons seems to make our blog so "less SEO Friendly". The proof, please check in Chkme , it will appear Image Missing Description & Title, among which Wrench icon is

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

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;

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

Salah satu sifat CSS3 yang paling ditunggu adalah  border-radius  .   Perancang web tidak lagi harus menggunakan struktur tabel yang rumit menggunakan grafik sudut khusus atau termasuk file JavaScript misterius untuk menghasilkan desain dengan sudut yang membulat. Sementara Internet Explorer sebelum IE9 tidak mendukung banyak (atau ada) sifat CSS lanjutan, Mozilla (Firefox dan peramban terkait) dan WebKit (  mesin peramban web  Apple yang digunakan di  Safari  dan  Chrome  ) dan Opera telah mendukungnya selama bertahun-tahun. Awalan vendor (  -moz  ,  -webkit  ) sekarang tidak lagi diperlukan untuk rilis peramban terbaru karena mereka semua mengadopsi sintaks CSS3 resmi. 1.  Definisi dan sintaks untuk border-radius Seperti banyak properti CSS yang berkaitan dengan margin, padding dan border, ada empat properti individual - satu untuk setiap sudut elemen kotak - dan satu properti singkat.   Masing-masing atribut sudut akan menerima satu atau dua nilai. Properti  border-radius