DEV Community

ar.Tech Notice
ar.Tech Notice

Posted on • Edited on

1

Change the look of Google search

Don't you think that the look of Google search has become unfashionable?

So I thought to myself, why don't I change it a little?
And this is the result

Image description

If you like the look, just download the User JavaScript and CSS plugin on your Chrome browser and then add the following codes in the extension after pressing the add button and adding a Google search link

----------- js code -------------

// To Top
let New2 = document.createElement("div")
New2.setAttribute("class" , 'to-top')
document.querySelector('body').append(New2)

document.querySelector(".to-top").innerHTML = <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-up" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M7.646 2.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 3.707 2.354 9.354a.5.5 0 1 1-.708-.708l6-6z"/>
<path fill-rule="evenodd" d="M7.646 6.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 7.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
</svg>

document.querySelector(".to-top").addEventListener("click" , ()=>{window.scroll(0, 0)})

//Number of Title

document.querySelectorAll(".g .yuRUbf h3").forEach((ele , i)=>{
let newDiv = document.createElement('div')
newDiv.setAttribute('class' , 'counterNum')
ele.prepend(newDiv)

document.querySelectorAll(".counterNum").forEach((ele , i)=>{
    ele.innerHTML = 1 + i
})
Enter fullscreen mode Exit fullscreen mode

})

// left side

let LeftDive = document.createElement('div')
LeftDive.className = "LeftSide"
LeftDive.innerText = "No Result Fund"
let urlSite = "https://www.tech-notice.com"
document.querySelector(".GyAeWb").append(LeftDive)

let FilterNods = [...document.querySelectorAll('.g .jtfYYd .NJjxre .iUh30 span:nth-child(1)')]
let ResultFilter = FilterNods.filter(ele => ele.innerText == urlSite)

document.querySelector('.LeftSide').innerHTML =
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
<path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
<path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
</svg>
<span>${ResultFilter.length}</span>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-bar-chart-steps" viewBox="0 0 16 16">
<path d="M.5 0a.5.5 0 0 1 .5.5v15a.5.5 0 0 1-1 0V.5A.5.5 0 0 1 .5 0zM2 1.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5v-1zm2 4a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zm2 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-6a.5.5 0 0 1-.5-.5v-1zm2 4a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1z"/>
</svg>
<span>${ResultFilter[0].parentElement.parentElement.previousElementSibling.querySelector('.counterNum').innerText}</span>

----------- css code --------------

h3.LC20lb.MBeuO.DKV0Md {
display: flex;
align-items: center;
}

.counterNum {
width: 2rem;
height: 2rem;
background-color: #383a40;
margin-left: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: white;
}

/* Left Side */

.GyAeWb {
justify-content: space-between;
}

.LeftSide {
width: 25rem;
height: 5rem;
background-color: #ffffff24;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
position: sticky;
top: 4rem;
direction: ltr;
gap: 10px;
}

/* To top */

.to-top {
width: 3rem;
height: 3rem;
border-radius: 100%;
background: #313338;
position: fixed;
bottom: 5px;
right: 5px;
scroll-behavior: smooth;
z-index: 99999;
display: flex;
justify-content: center;
cursor: pointer;
align-items: center;
}

.Ww4FFb {
padding: 5px;
border-radius: 5px !important;
background-color: #2a2b2e !important;
}

If you have a site and want to know its rank in Google search, just change the link in the js code (urlSite) with your link

by: ar.Tech Notice

Retry later

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay