ப்ளாக்கரில் நீளமான விட்ஜெட்களை Scrolling முறையில் வைப்பது எப்படி?

நமது ப்ளாக்கில் பல வகையான விட்ஜெட்களை (Widgets) வைத்திருப்போம். உதாரணத்திற்கு Blog Archive, Labels, Popular Posts, Recent Posts போன்றவற்றைச் சொல்லலாம். இவைகளை வலது ஒர சைட்பாரில் (Sidebar) வைப்போம். குறைந்த பதிவுகள் உடையவர்களுக்கு Labels மற்றும் Blog Archive பகுதிகள் சரியான அளவில் இருக்கும். இதே அதிக வருடங்கள் எழுதி வரும் பதிவர்களின் ப்ளாக்கில் இவை நீளமாகத் தோன்றும். மேலும் இடத்தையும் அடைத்துக் கொள்ளும். இதனை சரி செய்து அழகாக மாற்றுவது எப்படி என்று பார்ப்போம்.

சில பதிவர்கள் 500 க்கு மேற்பட்ட பதிவுகளை எழுதியிருப்பார்கள். அதே போல Labels எனப்படும் வகைகள் 100 க்கு மேற்பட்டதை பயன்படுத்தியிருப்பார்கள். இவை ப்ளாக்கில் நீளமாகத் தோன்றி எரிச்சலூட்டும். இதனை List View இல் வைத்து தேவைப்பட்டால் Scrolling இல் வருவது போல செய்து விட்டால் ப்ளாக்கில் இட வசதியும் மிச்சமாகும். வாசகர்களுக்கும் எளிதாக இருக்கும்.

இதற்கு முதலில் உங்களின் விட்ஜெட் என்ன ஐடியில் / பெயரில் இருக்கிறது என்று கண்டுபிடிக்க வேண்டும். வழக்கமாக பழைய பதிவுகள் #BlogArchive1 என்றும், வகைகள் #Label1 என்றும் இருக்கும். ஒரு சிலர் இரண்டு இடத்தில் Labels வைத்திருப்பார்கள். அல்லது ப்ளாக்கர் டெம்ப்ளேட் மாற்றும் போது அழித்து விட்டு புதிய விட்ஜெட்களை வைத்திருப்பார்கள். சரியான பெயரைக் கண்டுபிடிக்க Blogger Template சென்று Jump to Widget பட்டனைக் கிளிக் செய்தால் ப்ளாக்கின் அனைத்து விட்ஜெட்களின் பெயரும் தோன்றும்.

Also Read: தமிழ் பதிவர்களுக்கான Floating Sharing ஓட்டுப்பட்டையை இணைக்க

அடுத்து CSS நிரல் ஒன்றைச் சேர்க்க வேண்டும். இதில் உயரம் நீங்கள் விரும்பியவாறு வைத்துக்கொள்ளலாம். அந்த உயரத்திற்கு மேல் விட்ஜெட்கள் இருப்பின் Scrolling முறையில் காட்டப்படும். கீழே இருக்கும் நிரல்கள் பொதுவாக அனைத்து ப்ளாக்கிலும் செயல்படும். செயல்படாவிட்டால் விட்ஜெட்டின் சரியான பெயரைக் கண்டுபிடித்து மாற்றவும்.

#BlogArchive1 .widget-content{height:200px; width:auto;overflow:auto;}
#Label1 .widget-content{height:200px; width:auto;overflow:auto;}

இந்த முறையை எந்த விட்ஜெட்க்கும் பயன்படுத்தலாம். அதற்கு  சிவப்பு வண்ணத்திலிருக்கும் விட்ஜெட் பெயரை மாற்றி பயன்படுத்தலாம். மேலும் இதனை பதிவிற்குள்ளும் நீளமான நிரல்வரிகளை குறிப்பிடும் போதும் பயன்படுத்தலாம்.

இந்த நிரல்வரியைச் சேர்க்க Blogger Layout -> Template Designer -> Advanced -> Add Custom CSS சென்று நிரல்வரிகளை பேஸ்ட் செய்து Apply to Blog என்ற பட்டனைக் கிளிக் செய்தால் போதும்.  இதன் விளக்கமான வழிமுறைகளை CSS நிரல்களைச் சேர்க்க எளிய வழி என்ற பதிவில் பார்க்கவும்.

Tweet