Header ke just niche Pages ke liye ek single-row tabular layout (Tab bar) banana ek accha design decision hai. Aapki requirement ke mutabik, maine iska pura setup taiyar kiya hai jisme hidden widget title, dynamic pressed (daba hua) effect, navigation buttons, aur mouse drag/mobile swipe gestures shamil hain.
Aapki theme file me pahle se hi applyDrag naam ka ek function mojood hai (jo aapke label carousel ke liye kaam kar raha hai), hum usi function ka istemal is Pages navigation ke liye bhi karenge taaki gesture control smoothly kaam kare.
Ise apni theme me add karne ke liye niche diye gaye 3 steps ko follow karein:
Step 1: XML Layout Code (Header ke niche add karein)
Apni theme file me <header class='site-header'...> ya jo bhi aapka header container hai, uske khatam hone ke thik niche (aur main-wrapper ya posts section shuru hone se pahle) niche diya gaya XML code paste karein:
<div class='pages-navbar-wrapper'>
<button aria-label='Previous Page' class='pages-nav-btn prev-btn' id='pages-prev-btn'>
<i class='fa-solid fa-chevron-left'/>
</button>
<div class='pages-track' id='pages-scroll-track'>
<b:section class='pages-nav-sec' id='pages-nav-section' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
<button aria-label='Next Page' class='pages-nav-btn next-btn' id='pages-next-btn'>
<i class='fa-solid fa-chevron-right'/>
</button>
</div>
Step 2: CSS Code (Styling aur "Daba hua" Effect)
Is CSS code ko aap apni theme me <b:skin><![CDATA[ ke andar sabse niche, jahan baaki CSS khatam ho rahi ho (]]></b:skin>), wahan paste karein.
Yeh code Widget Title ko hide karega, pages ko ek single row table ki tarah dikhayega, aur click karne par ya active hone par daba hua look (inset shadow) dega:
/* --- Tabular Pages Navigation CSS --- */
.pages-navbar-wrapper {
position: relative;
display: flex;
align-items: center;
background-color: #ffffff; /* Aap apni theme ke hisab se badal sakte hain */
border-top: 1px solid #eee;
border-bottom: 2px solid #ddd;
padding: 5px 40px; /* Left-Right buttons ke liye space */
box-sizing: border-box;
width: 100%;
}
/* 1. Hiding the Widget Title completely */
#pages-nav-section h2,
#pages-nav-section .title {
display: none !important;
}
/* 2. Single Row Tabular Setup */
.pages-track {
overflow-x: auto;
width: 100%;
display: flex;
scroll-behavior: smooth;
white-space: nowrap;
-webkit-overflow-scrolling: touch; /* Smooth swipe for iOS/Android */
}
.pages-track::-webkit-scrollbar {
display: none; /* Scrollbar ko chhipane ke liye */
}
.pages-track ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
}
.pages-track li {
flex: 1 0 auto; /* Tabular cells ki tarah behave karega */
text-align: center;
margin: 0 2px;
}
/* Base style for Page links */
.pages-track li a {
display: block;
padding: 12px 20px;
color: #333;
text-decoration: none;
font-weight: 600;
background-color: #f8f9fa;
border: 1px solid #e0e0e0;
border-radius: 4px;
transition: all 0.15s ease-in-out;
box-sizing: border-box;
}
/* 3. Click Effect (Jo cell click ho wo thoda dab jaye) */
.pages-track li a:active {
transform: scale(0.96);
box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2);
background-color: #e9ecef;
}
/* 4. Active/Open Page Effect (Jo open ho wo daba hua hi rahe) */
/* Blogger default PageList widget current page par 'selected' class lagata hai */
.pages-track li.selected a,
.pages-track li.current a {
background-color: #e2e6ea !important;
border-color: #bdc3c7 !important;
color: #000 !important;
box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.15) !important;
pointer-events: none; /* Kyunki user usi page par hai */
}
/* 5. Navigation Buttons Styling */
.pages-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: #ffffff;
border: 1px solid #ccc;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: background 0.2s;
}
.pages-nav-btn:hover {
background: #f1f1f1;
}
.pages-nav-btn:active {
transform: translateY(-50%) scale(0.9);
}
.prev-btn { left: 5px; }
.next-btn { right: 5px; }
/* Layout Mode Adjustment */
body#layout .pages-navbar-wrapper {
padding: 10px;
background: #fff3cd;
border: 1px dashed #ffc107;
}
body#layout .pages-nav-btn { display: none; }
Step 3: JavaScript Code (Buttons aur Swipe/Drag Gestures)
Apni theme me bilkul neeche jaen jahan script tags khatam ho rahe hain (</body> se thik pahle). Wahan par aapko pahle se likha hua aapka applyDrag ka function dikhega. Us function ke thik niche, yeh naya script code jod dein:
// ====== Script for Pages Navigation & Gestures ======
document.addEventListener("DOMContentLoaded", function() {
const pagesTrack = document.getElementById('pages-scroll-track');
const prevBtn = document.getElementById('pages-prev-btn');
const nextBtn = document.getElementById('pages-next-btn');
if (pagesTrack && prevBtn && nextBtn) {
// Left Button Click
prevBtn.addEventListener('click', function() {
pagesTrack.scrollLeft -= 180; // Kitna scroll karna hai
});
// Right Button Click
nextBtn.addEventListener('click', function() {
pagesTrack.scrollLeft += 180;
});
// Gesture Control (Reusing your existing drag logic for Desktop mouse drag + Mobile Swipe)
if (typeof applyDrag === "function") {
applyDrag(pagesTrack);
}
}
});
Iske baad kya karein?
Apni theme ko Save karein.
Blogger Dashboard me Layout tab par jaen.
Ab aapko aapke Header ke thik niche ek naya box dikhega jiska naam "pages-nav-section" hoga.
Usme Add a Widget par click karke Pages widget ko select karke save kar dein.
Ab aapki website par Pages bilkul tabular buttons ki tarah dikhenge aur aapke bataye anusar click karne par unme dynamic push-down (dabne wala) effect aane lagega!
0 Comments
Post a Comment