Haan, bilkul! Yeh 100% possible hai aur yeh ek bahut hi professional tarika hai. Jab hum isme HTML ki jagah Blogger ke PageList aur LinkList widgets ka use karenge, toh aap jab chahein bina code chhede seedhe Blogger ke Layout dashboard se naye pages aur social links jod ya hata sakenge.
Saath hi, hum CSS me special body#layout tag ka use karenge, jisse live site par toh yeh ultra-thin horizontal bar dikhega hi, par aapke Layout editor me bhi yeh do alag-alag columns me ek hi row ke andar perfectly set dikhega taaki aapko edit karne me aasaani ho.
Kyunki humne pichle step me sabhi widgets ke liye ek universal heavy stylizer (inset shadow waala) lagaya tha, isliye hum is top-bar ke andar waale widgets ke liye ek 'Reset CSS' bhi jodenge taaki iska look bilkul patla aur transparent rahe.
Ise set karne ke liye niche diye gaye do steps follow karein:
Step 1: CSS Code Update Karein (Live Layout + Dashboard Layout Dono ke Liye)
Apni theme ke Edit HTML me jayein, Ctrl + F dabakar pichli baar joda gaya /* --- Ultra Thin Top Header Bar --- */ waala CSS dhoodhein aur us pure hisse ko delete karke yeh naya advanced CSS paste kar dein:
/* ==========================================================================
Ultra Thin Top Header Bar (Complete & Fixed Layout)
========================================================================== */
/* --- 1. Base Design for Live Site --- */
.top-thin-bar {
width: 100%;
background-color: var(--bg-color);
border-bottom: 1px solid var(--border-color);
padding: 4px 15px;
box-sizing: border-box;
transition: background-color 0.3s, border-color 0.3s;
}
.top-bar-inner {
display: flex;
justify-content: space-between;
align-items: center;
max-width: var(--main-max-width, 1200px);
margin: 0 auto;
width: 100%;
white-space: nowrap;
overflow: hidden;
}
/* 2. RESET Universal Widget Styles for this specific bar */
.top-thin-bar .widget {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
.top-thin-bar .widget h2,
.top-thin-bar .widget h3,
.top-thin-bar .widget .title {
display: none !important;
}
.top-thin-bar .widget-content,
.top-thin-bar ul {
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* 3. Left Side (PageList Widget) Styling */
#top-bar-left-sec {
overflow: hidden;
max-width: 70%;
}
#top-bar-left-sec .widget-content {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.top-thin-bar #top-bar-left-sec ul {
gap: 12px;
}
.top-thin-bar #top-bar-left-sec li a {
color: var(--text-muted);
font-size: 10px;
font-weight: 600;
text-decoration: none;
transition: color 0.2s;
}
.top-thin-bar #top-bar-left-sec li a:hover {
color: var(--accent-color);
}
/* 4. Right Side (LinkList Widget) Styling */
#top-bar-right-sec {
flex-shrink: 0;
}
.top-thin-bar #top-bar-right-sec ul {
gap: 10px;
}
.top-thin-bar #top-bar-right-sec li a {
color: var(--text-muted);
font-size: 10px;
background: transparent !important;
border: none !important;
padding: 2px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: color 0.2s, transform 0.2s;
}
.top-thin-bar #top-bar-right-sec li a:hover {
color: var(--accent-color);
transform: scale(1.1);
}
/* 5. Small Screen Overlap Prevention */
@media screen and (max-width: 480px) {
.top-thin-bar { padding: 4px 8px; }
.top-bar-inner { gap: 8px; }
#top-bar-left-sec {
border-right: 1px solid var(--border-color);
padding-right: 8px;
}
}
/* ==========================================================================
6. BLOGGER LAYOUT DASHBOARD VIEW (Side-by-Side Fix)
========================================================================== */
body#layout .top-thin-bar {
display: block !important;
width: 100% !important;
margin-bottom: 15px !important;
clear: both !important;
background: #fdfdfd !important;
border: 1px dashed #b5b5b5 !important;
padding: 8px !important;
box-sizing: border-box !important;
}
body#layout .top-bar-inner {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
width: 100% !important;
gap: 15px !important;
}
body#layout #top-bar-left-sec,
body#layout #top-bar-right-sec {
width: 49% !important;
box-sizing: border-box !important;
margin: 0 !important;
background: #fdfdfd !important;
border: 1px dashed #b5b5b5 !important;
padding: 10px !important;
float: none !important;
display: block !important;
}
body#layout .top-thin-bar .widget {
border: 1px solid #e0e0e0 !important;
background: #f9f9f9 !important;
padding: 5px !important;
}
body#layout .top-thin-bar .widget h2,
body#layout .top-thin-bar .widget h3 {
display: block !important;
font-size: 11px !important;
color: #333 !important;
margin: 0 0 5px 0 !important;
padding: 3px !important;
background: #e6e6e6 !important;
text-align: left !important;
border-bottom: 1px solid #ccc !important;
}Step 2: HTML/XML Framework Update Karein
Ab usi HTML editor me jahan aapne pichla hardcoded top-thin-bar lagaya tha (<header id='header-wrapper'> ke thik niche), use hatayein aur uski jagah yeh pure Blogger Sections aur Widgets waala code daal dein:
<div class='top-thin-bar'>
<div class='top-bar-inner'>
<b:section class='top-bar-left-sec' id='top-bar-left-sec' maxwidgets='1' showaddelement='no'>
<b:widget id='PageList101' locked='false' title='Top Bar Pages' type='PageList' version='2' visible='true'/>
</b:section>
<b:section class='top-bar-right-sec' id='top-bar-right-sec' maxwidgets='1' showaddelement='no'>
<b:widget id='LinkList101' locked='false' title='Top Bar Social Links' type='LinkList' version='2' visible='true'/>
</b:section>
</div>
</div>
Ise Save kar dein.
Layout me use kaise karein (Pro Tip):
Ab aap jab Blogger ke Layout panel me jayenge, toh aapko Header ke thik upar do aamne-saamne (Side-by-side) boxes dikhenge: Top Bar Pages aur Top Bar Social Links।
Left Side (Pages): Edit par click karke aap apne banae gaye naye static pages ko tik karke jod sakte hain.
Right Side (Social Icons): Isme icons laane ke liye jab aap 'Add New Item' karenge, toh Site Name waale box me seedhe Font Awesome ka icon code likh dein, jaise:
<i class="fab fa-facebook-f"></i><i class="fab fa-instagram"></i><i class="fab fa-youtube"></i>
Aur Site URL me apna link daal dein. Yeh bina kisi background ke bilkul bar ke saath transparent set ho jayenge!
Chhoti screens par aate hi left ke pages aapas me overlap nahi karenge, balki bich me ek divider line ban jayegi aur extra links ke end me automatic teen dots (...) show hone lagenge!
0 Comments
Post a Comment