Fancy Ribbon Backgrounds For Blogger Sidebars

آج میں آپ کو بتاؤں گا کہ کس طرح آپ اپنے بلاگ کے سائڈ  بار لئے خوبصورت ربن تیار کرسکتے ہیں۔  اس ربن کا استعمال آپ مختلف جگہوں پر کرسکتے ہیں چاہیں تو نیوز بار میں لگائیں ، ریسنٹ  پوسٹس میں لگائیں یا ہیڈلائن کے بار کے طور پر استعمال کریں۔ اس ربن کو بنانے کے لئے ہم سی ایس ایس 3 کا استعمال کریں گے۔









ربن بنانے کے لئے ہمیں سب سے پہلے اپنے سائڈ بار کے ویجٹ کی آئی ڈی معلوم کرنا ہوگی۔ اس کام کے لئے آپ سب سے پہلے اپنے بلاگر پر جائیں۔


1: سب سے پہلے آپ بلاگر پر جائیں پھر اس کی layout کو اوپن کریں۔ 
2: اس کے بعد آپ  اپنے کسی بھی Widget پر جا کر edit پر کلک کریں۔
3: اب آپ دیکھ سکتے ہیں کہ یہاں پر ایڈرس بار کے اندر HTML13 لکھا ہوا نظر آرہا ہوگا یہی ہے اس widget کیا  آئی ڈی ہمیں اسی کا استعمال کرنا ہے زیادہ تر کی آئی ڈی اسی طرح کی ہوگی۔

    widget ID




    4: اب آپ کو صرف اتنا کرنا ہے کہ اس کو بلکل ایسا ہی copy کرلیں جیسا کہ اوپر تصویر میں دیکھایا گیا ہے۔
    5: اب ہمیں اگلے step کی طرف بڑھنا ہے اس کے لئے اسے دوبارہ سیو کردیں۔

    اب ہمیں CSS3  کے اندر اپنا ربن تیار کرنا ہے۔


    1: سب سے پہلے بلاگر کو اوپن کریں اور اس میں Template پر کلک کریں۔
    2: اپنی پرانی Template کا backup بنالیں تاکہ کسی غلطی کی صورت میں آپ کی original template خراب نہ ہو۔
    3: اس کے بعد Edit HTML پر کلک کریں۔
    4: جہاں HTML کا کوڈ لکھا ہے وہاں کلک کریں اور CTRL+F دبائیں تو سرچ بار کھل جائے گا۔
    5: اس کوڈ  <b:skin/><[[ کو سرچ کریں۔
    6: اس کے بعد نیچے درج کوڈ کو اس کوڈ سے بلکل اوپر paste کردیں۔  



    /*####### FANCY RIBBON BACKGROUNDS BY Danish Irshad #######*/
    #HTML13 h2
    {
    position: relative;
    padding: 10px 0px 15px !important;
    margin: 0px 0px 10px 27px !important;
    color: #ffffff;
    background-color: #282C2F;
    box-shadow: 0px 2px 4px rgb(136, 136, 136);
    border-top: 3px solid #000000;
    background-image: none !important;
    height: auto !important;
    width: 338px;
    }
    #HTML13 h2:before
    {
        content: ' ';
        position: absolute;
        width: 30px;
        height: 0;
        left: -30px;
        top: 16px;
        border-width: 20px 10px;
        border-style: solid;
        border-color: #282C2F #282C2F #282C2F transparent;

    }
    #HTML13 h2:after
    {
        content: ' ';
        position: absolute;
        width: 30px;
        height: 0;
        right: -30px;
        top: 16px;
        border-width: 20px 10px;
        border-style: solid;
        border-color: #282C2F transparent #282C2F #282C2F;
    }
    #HTML13 h2 span:before
    {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        left: 0px;
        top: 100%;
        border-width: 5px 10px;
        border-style: solid;
        border-color: #353A3D #353A3D transparent transparent;
            z-index:99999;
    }
    #HTML13 h2 span:after
    {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        right: 0px;
        top: 100%;
        border-width: 5px 10px;
        border-style: solid;
        border-color: #353A3D transparent transparent #353A3D;
            z-index:99999;
    }
    اب اس کوڈ کے اندر اگر آپ تبدیلی لانا چاہتے ہیں اور اپنی مرضی سے کلرز کو تبدیل کرنا چاہتے ہیں تو  Background کے کلر کے لئے  #282C2F  اس کوڈ کو تبدیل کرسکتے ہیں ۔ یہ کلر کا کوڈ ہے آپ گوگل سے متعدد کلر کوڈ حاصل کرسکتے ہیں۔
    اس کے علاوہ اگر آپ  ربن کی دم کا کلر تبدیل کرنا چاہتے ہیں تو آپ  #353A3D اس کوڈ کو تبدیل کرسکتے ہیں ۔

      ribbon tails

      اس کے ساتھ ساتھ اگر آپ ربن کے اند جو لکھائی ہے اس کا رنگ تبدیل کرنا چاہتے ہیں تو  #ffffffاس کوڈ کو تبدیل کردیں یہ کوڈ 
      سفید رنگ کا ہے۔
      اگر آپ اس کے Border کا رنگ تبدیل کرنا چاہتے ہیں تو آپ  #000000;  اس کوڈ کو تبدیل کردیں۔  اور اگر آپ  Border نہیں چاہتے تو  پھر اس پروپرٹی کو Delete کردیں۔   border-top: 3px solid #000000اس پروپرٹی  سے آپ کا Border ختم ہوجائے گا۔ 
       
      ribbon top border

      اگر آپ چاہتے ہیں کہ ربن کے background کا سائز بڑھ جائے یا چھوٹا ہوجائے تو اس کے لئے آپ 338pxاس کوڈ میں نمبرز کو تبدیل کردیں۔ یہ کوڈ پکسل کا ہے۔

      7: اب ہمیں اگلے step کی طرف جانا ہے۔ اب آپ Jump to widget کے بٹن پر کلک کر کے HTML13 کو سلیکٹ کریں ۔

      jump to widget


      8: اب آپ اپنے سارے کوڈ کو نیچے درج تصویر کی مدد سے Expand کردیں۔
      .
      expand widget


      9: اب اس کوڈ کے اندر آپ اس کوڈ کو سرچ کی مدد سے تلاش کریں۔ 
      <h2 class='title'><data:title/></h2>
      اور اس  کوڈ سے تبدیل کردیں۔
      <h2 class='title'><span><data:title/></span></h2>
      یہاں تک آپ کا کام مکمل ہوگیا  اب آپ اپنی Template کو سیو کرسکتے ہیں۔

      نوٹ: یہاں ایک بات آپ کے علم میں لادوں اگر یہ آپ کوئی Custom template کا استعمال کر رہے ہیں تو ہوسکتا ہے کہ یہ کوڈ صحیح طور پر کام نہ کرے اس کی وجہ یہ ہے کہ بعض  Custom templates کے اندر ہیڈنگ کے لئے<h1> , <h2> یا  <h3> کا ٹیگ بھی استعمال ہوتا ہے اس وقت آپ اپنے کوڈ کے اندر بھی آپ کو ان ٹیگز کو تبدیل کرنا ہوگا۔