آج میں آپ کو بتاؤں گا کہ کس طرح آپ اپنے بلاگ کے سائڈ بار لئے خوبصورت ربن تیار کرسکتے ہیں۔ اس ربن کا استعمال آپ مختلف جگہوں پر کرسکتے ہیں چاہیں تو نیوز بار میں لگائیں ، ریسنٹ پوسٹس میں لگائیں یا ہیڈلائن کے بار کے طور پر استعمال کریں۔ اس ربن کو بنانے کے لئے ہم سی ایس ایس 3 کا استعمال کریں گے۔
ربن بنانے کے لئے ہمیں سب سے پہلے اپنے سائڈ بار کے ویجٹ کی آئی ڈی معلوم کرنا ہوگی۔ اس کام کے لئے آپ سب سے پہلے اپنے بلاگر پر جائیں۔
1: سب سے پہلے آپ بلاگر پر جائیں پھر اس کی layout کو اوپن کریں۔
2: اس کے بعد آپ اپنے کسی بھی Widget پر جا کر edit پر کلک کریں۔
3: اب آپ دیکھ سکتے ہیں کہ یہاں پر ایڈرس بار کے اندر HTML13 لکھا ہوا نظر آرہا ہوگا یہی ہے اس widget کیا آئی ڈی ہمیں اسی کا استعمال کرنا ہے زیادہ تر کی آئی ڈی اسی طرح کی ہوگی۔
4: اب آپ کو صرف اتنا کرنا ہے کہ اس کو بلکل ایسا ہی copy کرلیں جیسا کہ اوپر تصویر میں دیکھایا گیا ہے۔
5: اب ہمیں اگلے step کی طرف بڑھنا ہے اس کے لئے اسے دوبارہ سیو کردیں۔
اب ہمیں CSS3 کے اندر اپنا ربن تیار کرنا ہے۔
1: سب سے پہلے بلاگر کو اوپن کریں اور اس میں Template پر کلک کریں۔
2: اپنی پرانی Template کا backup بنالیں تاکہ کسی غلطی کی صورت میں آپ کی original template خراب نہ ہو۔
3: اس کے بعد Edit HTML پر کلک کریں۔
4: جہاں HTML کا کوڈ لکھا ہے وہاں کلک کریں اور CTRL+F دبائیں تو سرچ بار کھل جائے گا۔
5: اس کوڈ <b:skin/><[[ کو سرچ کریں۔
6: اس کے بعد نیچے درج کوڈ کو اس کوڈ سے بلکل اوپر paste کردیں۔
اب اس کوڈ کے اندر اگر آپ تبدیلی لانا چاہتے ہیں اور اپنی مرضی سے کلرز کو تبدیل کرنا چاہتے ہیں تو Background کے کلر کے لئے #282C2F اس کوڈ کو تبدیل کرسکتے ہیں ۔ یہ کلر کا کوڈ ہے آپ گوگل سے متعدد کلر کوڈ حاصل کرسکتے ہیں۔
اس کے علاوہ اگر آپ ربن کی دم کا کلر تبدیل کرنا چاہتے ہیں تو آپ #353A3D اس کوڈ کو تبدیل کرسکتے ہیں ۔
اس کے ساتھ ساتھ اگر آپ ربن کے اند جو لکھائی ہے اس کا رنگ تبدیل کرنا چاہتے ہیں تو #ffffffاس کوڈ کو تبدیل کردیں یہ کوڈ
سفید رنگ کا ہے۔
اگر آپ اس کے Border کا رنگ تبدیل کرنا چاہتے ہیں تو آپ #000000; اس کوڈ کو تبدیل کردیں۔ اور اگر آپ Border نہیں چاہتے تو پھر اس پروپرٹی کو Delete کردیں۔ border-top: 3px solid #000000اس پروپرٹی سے آپ کا Border ختم ہوجائے گا۔
اگر آپ چاہتے ہیں کہ ربن کے background کا سائز بڑھ جائے یا چھوٹا ہوجائے تو اس کے لئے آپ 338pxاس کوڈ میں نمبرز کو تبدیل کردیں۔ یہ کوڈ پکسل کا ہے۔
7: اب ہمیں اگلے step کی طرف جانا ہے۔ اب آپ Jump to widget کے بٹن پر کلک کر کے HTML13 کو سلیکٹ کریں ۔
8: اب آپ اپنے سارے کوڈ کو نیچے درج تصویر کی مدد سے Expand کردیں۔
.
9: اب اس کوڈ کے اندر آپ اس کوڈ کو سرچ کی مدد سے تلاش کریں۔
اور اس کوڈ سے تبدیل کردیں۔
یہاں تک آپ کا کام مکمل ہوگیا اب آپ اپنی Template کو سیو کرسکتے ہیں۔
نوٹ: یہاں ایک بات آپ کے علم میں لادوں اگر یہ آپ کوئی Custom template کا استعمال کر رہے ہیں تو ہوسکتا ہے کہ یہ کوڈ صحیح طور پر کام نہ کرے اس کی وجہ یہ ہے کہ بعض Custom templates کے اندر ہیڈنگ کے لئے<h1> , <h2> یا <h3> کا ٹیگ بھی استعمال ہوتا ہے اس وقت آپ اپنے کوڈ کے اندر بھی آپ کو ان ٹیگز کو تبدیل کرنا ہوگا۔
