Scrollbar Customization Code for GeneratePress

హలో ఫ్రెండ్స్ తెలుగు టెక్ గైడ్ కి స్వాగతం. మన చూసుకున్నట్లయితే నేను ప్రతిరోజు మంచి వెబ్ సైట్ ఎలా డిజైన్స్ దానికి సంబంధించిన ప్రతి ఒక్క వీడియో ఏవిధంగా చేయాలి ఏవిధంగా ఎక్కడ ఈ యొక్క కోడింగ్ అయితే వాడతాం ఇటువంటి ప్రతి ఒక్క విషయాన్ని అయితే నేను నిదానంగా చెప్పుకుంటూ మీకు అర్థమయ్యేలా చూపిస్తూ వస్తున్నాను.

అలాగే ఈరోజు మనం Scrollbar ఎలా మార్చాలి అనేదాని గురించి తెలుసుకుందాం. మీరు చూసుకున్నట్లయితే scroll bar అంటే ఏంటి స్క్రోల్ వారు మనకు ఎక్కడా కనిపించదు ఇవన్నీ మీకు ఒక అవగాహన ఉంది అనుకుంటున్నాను వెబ్ సైట్ కి వెళ్ళినప్పుడు ఆ వెబ్ సైట్ లో ఎంత కంటెంట్ ఉంది లేదా మీరు ఒక వెబ్ సైట్ లో పై నుంచి కిందకి అయితే Scrollbar వాడతారు.

మా చూసుకున్నట్లయితే ఈ యొక్క scrollbar అనేది నార్మల్గా సింపుల్ గా అయితే ఉంటది ఇటువంటి కలర్స్ ఉండవు ఎటువంటి స్థాయిలో ఉండదు నార్మల్గా అయితే ఒక రెక్టాంగిల్ బాక్స్ ఎలా ఉంటది. యొక్క సింపుల్ అండ్ ఎటువంటి స్టైల్ హుస్సేన్ వెబ్ సైట్ కి తగ్గట్టు మన వెబ్సైట్లో మనం ఏదైతే భీమ్ వాడుతున్నాము అయితే మనం మార్చుకుంటాం. Check WordPress Post Customization in Telugu.

నేనెప్పుడూ చెప్పినట్లే మీకు నేనైతే ఈ యొక్క కోడ్లు ఉచితంగా అయితే ఇస్తున్నాను, నేను మీ దగ్గర నుంచి ఆశిస్తున్నది ఇటువంటి మంచి మంచి విషయాలు మీరు ఇంకా పొందాలంటే ఉచితంగా, తెలుగు టెక్ గైడ్ ఛానల్ కి సబ్స్క్రైబ్ చేసుకోండి. అలాగే ఈ యొక్క వీడియోస్ కానీ నేను మీకు అందిస్తున్న కోడ్ మీకు నచ్చినట్లయితే మీయొక్క ఫ్రెండ్స్ లేదా ఎవరైతే బ్లాగింగ్ జర్నీ స్టార్ట్ చేయాలనుకుంటున్నారో వాళ్లకైతే షేర్ చేయండి.

Scrollbar Customization Code for GeneratePress

/*---- Webkit Scroll Start ----*/
*::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	background-color: #F5F5F5;
	border-radius: 10px;margin-left:-10px!important;
}

*::-webkit-scrollbar
{
	width: 10px;
	margin-left:-10px;
	background-color: #F5F5F5!important;
}

*::-webkit-scrollbar-thumb
{
	border-radius: 6px;
	background-color: #fff;
	background-image: linear-gradient(to right, #0300ff 0%, #00f1ff 55%, #0300ff 100%);
}
/*---- Webkit Scroll End ----*/

మీరు ఈ కోడ్ ని ఎక్కడ వాడాలి ఎలా వాడాలి అని తెలుసుకోవాలంటే కింద ఉన్న వీడియోని చూడాల్సి వస్తుంది ఈ వీడియోలో ఎక్కడ ఏ విధంగా పై ఉన్న కోడ్ ని వాడాలో క్లియర్ గా అయితే చేశాను.

Promotion:
Lets Explore Tech – Get Latest Technology News

Leave a Comment