بلاگر ڈاٹ کام پر اردو ایڈیٹر اور مصنف کے تبصروں کا سٹائل

نبیل

تکنیکی معاون
السلام علیکم،

اپڈیٹ: اپنے بلاگ پر ذیل کی تبدیلیاں بروئے کار لانے سے قبل بلاگ کی موجودہ ٹیمپلیٹ کو احتیاطاً علیحدہ محفوظ کر لیں۔

چند روز قبل میں نے بلاگر ڈاٹ کام پر اردو میں تبصرہ جات لکھنے کے لیے علیحدہ اردو ایڈیٹر شامل کرنے کا طریقہ فراہم کیا تھا جو کہ بلاگر ڈاٹ کام کی پرانے سٹائل کی ٹیمپلیٹس پر کام کرتا ہے۔ کچھ تبدیلیوں کے ساتھ اس طریقے کو نئے سٹائل کی ٹیمپلیٹس کے لیے بھی قابل عمل بنایا جا سکتا ہے۔ میں اس پوسٹ میں بلاگر ڈاٹ کام کے نئے سٹائل کی ٹیمپلیٹس میں ایکسٹرا اردو ایڈیٹر شامل کرنے کا طریقہ پیش کروں گا۔ علاوہ ازیں بلاگر ڈاٹ پر مصنف کے تبصروں کو علیحدہ سے سٹائل کرنے کا طریقہ بھی اس ماخذ کے حوالے سے بیان کروں گا۔

بلاگر ڈاٹ‌ کام پر اردو ایڈیٹر

اپڈیٹ: بلاگ ٹیمپلیٹ کو ایڈٹ کرنے سے پہلے Expand Widget Templates چیک باکس کو چیک کر دیں (شکریہ باذوق)

بلاگر ڈاٹ کام کے نئے سٹائل کی ٹیمپلیٹس میں اردو ایڈیٹر شامل کرنے کے لیے سب سے پہلے اپنے بلاگ کی ٹیمپلیٹ میں title ٹیگ کے عین نیچے ذیل کا کوڈ شامل کر لیں:

کوڈ:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://dev.urduweb.org/jquery/jquery.UrduEditor.js"></script>
  <script type="text/javascript">
	   $.fn.UrduEditor.defaults.EditorFont = 'Jameel Noori Nastaleeq';   
	   $(document).ready(function() {     
        $("#commentseditor").UrduEditor("14px");    
      });
</script>
اس طرح آپ کے بلاگ کی ٹیمپلیٹ میں ضروری جاواسکرپٹس امپورٹ ہو جائیں گی۔ اس کے بعد اپنے بلاگ کی ٹیمپلیٹ میں ذیل کا ٹیکسٹ تلاش کریں:

کوڈ:
]]></b:skin>

اور اس سے پہلے ذیل کے سٹائل شامل کر دیں:


کوڈ:
.btnHelp {
background:#ECECEC none repeat scroll 0 0;
border:1px solid #888888;
cursor:pointer;
font-family:Jameel Noori Nastaleeq,Urdu Naskh Asiatype,Tahoma;
font-size:14px;
text-align:center;
}
.btnFlat {
background:#ECECEC none repeat scroll 0 0;
border:1px solid #888888;
cursor:pointer;
font-family:Jameel Noori Nastaleeq,Urdu Naskh Asiatype,Tahoma;
font-size:14px;
text-align:center;
}
.btnRaised, .btnFlat:hover {
background:#D3D3D3 none repeat scroll 0 0;
border:1px outset;
cursor:pointer;
font-family:Jameel Noori Nastaleeq,Urdu Naskh Asiatype,Tahoma;
font-size:14px;
font-weight:bold;
text-align:center;
}
.btnLowered, .btnFlat:active {
background:#D3D3D3 none repeat scroll 0 0;
border:1px inset;
cursor:pointer;
font-family:Jameel Noori Nastaleeq,Urdu Naskh Asiatype,Tahoma;
font-size:14px;
text-align:center;
}
.btnSysFlat {
background:#808080 none repeat scroll 0 0;
border:1px solid #888888;
cursor:pointer;
font-family:Jameel Noori Nastaleeq,Urdu Naskh Asiatype,Tahoma;
font-size:14px;
text-align:center;
}
.btnSysRaised, .btnSysFlat:hover {
background:#333333 none repeat scroll 0 0;
border:1px outset;
cursor:pointer;
font-family:Jameel Noori Nastaleeq,Urdu Naskh Asiatype,Tahoma;
font-size:14px;
font-weight:bold;
text-align:center;
}
.btnSysLowered, .btnSysFlat:active {
background:#333333 none repeat scroll 0 0;
border:1px inset;
cursor:pointer;
font-family:Jameel Noori Nastaleeq,Urdu Naskh Asiatype,Tahoma;
font-size:14px;
text-align:center;
}
.hiddentext {
display:none;
}
.outline {
text-decoration:underline;
}

اس کے بعد اپنے بلاگ کے ٹیمپلیٹ میں ذیل کا کوڈ تلاش کریں:

کوڈ:
<p><data:blogCommentMessage/></p>

اور اس کے نیچے ذیل کا کوڈ شامل کر دیں:

HTML:
<h2 style="font:20px Jameel Noori Nastaleeq; color:#FF0000; text-align:center">اردو میں تبصرہ پوسٹ کرنے کے لیے ذیل کے اردو ایڈیٹر میں تبصرہ لکھ کر اسے تبصروں کے خانے میں کاپی پیسٹ کر دیں۔</h2>
	<textarea cols="60" rows="8" id="commentseditor" name="commentseditor" ></textarea><br />
	<script type="text/javascript">   
    	$(this).UrduEditor.writeKeyboard();   
	</script>

اس کے بعد بلاگ کی ٹیمپلیٹ کو اپڈیٹ کرنے کے لیے اسے محفوظ کر لیں۔ اگر آپ نے تمام سٹیپ درست انداز میں کیے ہیں تو اس کے بعد آپ کے بلاگر ڈاٹ کام بلاگ میں ذیل کی تصویر کے مطابق اردو ایڈیٹر شامل ہو جائے گا:


attachment.php

مصنف کے تبصروں کو علیحدہ سٹائل دینا

اس ربط پر بلاگر ڈاٹ کام کے بلاگز میں مصنف کے تبصروں کو علیحدہ انداز میں دکھانے کا طریقہ موجود ہے۔ اس کے لیے اپنے بلاگ کی ٹیمپلیٹ میں ذیل کا ٹیگ تلاش کریں:

کوڈ:
<b:widget id='Profile1' locked='false' title='xxx' type='Profile'>

اسی ٹیگ میں ذیل کی لائن موجود ہوگی:

کوڈ:
<b:else/> <!-- normal blog profile -->

عین اس کے نیچے ذیل کا کوڈ شامل کر لیں:

کوڈ:
<script type='text/javascript'>   
$().ready(function() {   
 $('dl#comments-block dt a').each(function(i) {   
  if($(this).attr('href') == '<data:userUrl/>') {   
   $(this).parent('dt').addClass('author-comment').next('dd.comment-body').addClass('author-comment').next('dd.comment-footer').addClass('author-comment');   
  }   
 });   
});   
</script>

اس کے بعد اپنے بلاگ کی ٹیمپلیٹ میں ذیل کے اضافی سٹائل شامل کر لیں:

کوڈ:
dl#comments-block dt.author-comment {   
  background-image: none;   
  background-color: #EDE5BE;   
  margin-bottom: 0px;   
  padding: 6px 0 6px 10px;   
  border: 1px solid #ccc;   
  border-bottom: 1px solid #FFF7CF;   
}   
  
dl#comments-block dd.comment-body.author-comment {   
  color: #593622;   
  background-color: #EDE5BE;   
  margin-top: 0px;   
  margin-bottom: 0px;   
  padding: 10px;   
  border: 1px solid#ccc;   
  border-top: 1px solid #CBC4AC;   
}   
  
dl#comments-block dd.comment-footer.author-comment {   
  font-size: .8em;   
  background-color: #CBC39C;   
  padding: 3px;   
  margin-top: 0px;   
  float: right;   
  border: 1px solid #ccc;   
  border-top: none;   
}

اس کے بعد اپنے بلاگ کی ٹیمپلیٹ کو سیو کر لیں۔ اس کے بعد آپ کے بلاگ پر ذیل کی تصویر کے مطابق آپ کے تبصرہ جات باقیوں کے تبصروں سے ممتاز نظر آئیں گے:

attachment.php

آپ دوستوں کی سہولت کے لیے میں نے بلاگر ڈاٹ کام کی راؤنڈر ٹیمپلیٹس میں اردو ایڈیٹر اور مصنف کے تبصروں کے سٹائل کے حوالے سے تبدیلیاں کرکے انہیں یہاں ایک زپ فائل میں فراہم کر دیا ہے۔
والسلام
 

Attachments

  • Rounder_templates_with_editor_and_author_comment_style.zip
    38.4 KB · مناظر: 160
  • blogger_urdu_editor2.gif
    blogger_urdu_editor2.gif
    14.9 KB · مناظر: 564
  • blogger_author_comment_style.gif
    blogger_author_comment_style.gif
    14.3 KB · مناظر: 559

گرائیں

محفلین
نبیل ، آپ کا بہت بہت شکریہ۔

پہلے تو میں نے خود یہ تمام مشق کرنے کی کوشش کی مگر ناکامی پر مجھے آپ کے فراہم کردہ سانچے کو ہی لینا پڑا۔

ایک مرتبہ پھر شکریہ۔
 

محمد وارث

لائبریرین
جزاک اللہ برادرم! ہم جیسے نکموں کیلیے آپ کی یہ محبت اور محنت قابلِ ستائش ہے :)

میں انشاءاللہ جلد ہی اس کو 'ٹیسٹ' کرونگا!
 

محمد وارث

لائبریرین
برادرم، میں نے اردو ایڈیٹر انسٹال کرنے کیلیے، اوپر دیئے گئے کوڈز آپ کی ہدایات کے مطابق ٹیمپلیٹ میں اضافہ کر کے، ٹیمپلیٹ کو محفوظ کیے بغیر صرف 'پری ویو' دیکھنا چاہا تو مندرجہ ذیل 'ایرر' ملا:

We were unable to preview your template

Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "script" must be terminated by the matching end-tag "".

کیا آپ پلیز اسے دیکھ سکتے ہیں، نوازش!
 

خورشیدآزاد

محفلین
سب سے پہلے تو نبیل صاحب آپ کا بہت بہت شکریہ ۔ :applause::applause:

بدقسمتی سے دو بار کوشش کرنے کے باوجود ابھی تک کامیابی نہیں ہوئی۔ پہلے تو ایرور آرہا تھا۔ اور اسکی وجہ تھی بندش ٹیگ </script> جو آپ کے فراہم کردا سکرپٹ میں نہیں تھا اور میں نے بھی کاپی پیسٹ کے دوران دیہان نہیں دیا۔

پھر یہ کوڈ میری ٹیمپلیٹ میں نہیں مل رہا ہے <p><data:blogCommentMessage/></p>

اب اگر آپ کا فراہم کردا سانچا لوں تو بہت ساری محنت جو گیجٹس پر کی ہے وہ ضائع ہوجائے گی۔ سمجھ نہیں آرہی کہاں کوڈ میں الٹ پھیر ہورہا ہے۔ آپ کی راہنمائی کی ضرورت ہے۔ برائے کرم مندرجہ ذیل اسکرپٹ دیکھ کر کوئی حل بتادیں کہ کیا کروں؟

میرا مسلہ ہے سب کچھ آپ کی ہدایات کے مطابق کیا لیکن اردو ایڈیٹر کا کمنٹس باکس نظر نہیں آرہا۔ ایکسپلورر اور فائرفوکس دونوں ٹرائی کر چکا ہوں۔
 

محمد وارث

لائبریرین
پہلے جاوا اسکرپٹ میں ایک کلوزنگ ٹیگ مس ہے (تیسری لائن) اسکے اضافے کے بعد اوپر والا مسئلہ حل ہو گیا ہے، میں انشاءاللہ جلد ہی باقی فیڈ بیک دیتا ہوں آپ کو :)
 

گرائیں

محفلین
خورشید،

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

مرتا کیا نہ کرتا؟
 

محمد وارث

لائبریرین
تازہ فیڈ بیک :)

کوڈز صحیح کاپی ہو گئے ہیں، ٹیمپلٹ محفوظ کی تو اب دو مسئلے ہیں:

اول: اردو لکھنے کیلیے اضافی خانہ تو بن گیا ہے لیکن وہ 'اردو ایڈیٹر' کا نہیں ہے، یعنی نہ تو 'سبز' ہے اور نہ اس میں اردو لکھی جا رہی ہے بلکہ اردو لکھنے کیلیے 'فونیٹک' یا دیگر کسی کی بورڈ کی ہی ضرورت رہتی ہے!

دوم: پوسٹ کے بیچوں بیچ ایک عمودی لائن نمودار ہو گئی ہے!
 

گرائیں

محفلین
وارث، آپ کے بلاگ میں ہیڈر سے اوپر بھی ایک تحریر آ رہی ہے۔

$.fn.UrduEditor.defaults.EditorFont = 'Alvi Nastaleeq'; $(document).ready(function() { $("#commentseditor").UrduEditor("14px"); });

ذرا احتیاط سے پنگا لیجئے گا۔ :tongue:
 

محمد وارث

لائبریرین
وہ تو اب لے لیا :)

لیکن شکر ہے کہ اتنی عقل، یہاں کے دانشوروں کے ساتھ رہتے ہوئے آ گئی ہے کہ ٹمپلیٹ کو پہلے محفوظ کر لیا تھا۔

تبصروں کو ممتاز کرنے والے کوڈز سے 'صورتحال' کافی خراب ہو گئی تھی کہ سارا کوڈ سائیڈ بار میں لکھا آرہا تھا، سو پرانی ٹمپلیٹ کو پھر اپ لوڈ کر لیا ہے۔

باقی پنگے کل، انشاءاللہ!
 

خورشیدآزاد

محفلین
خورشید،

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

مرتا کیا نہ کرتا؟

ایک گھنٹہ سے زیادہ سر کھپانے کے بعد میں نے بھی گرائیں والا طریقہ اپناکر مسلہ حل کردیا ہے۔ میرا مشورہ ہے تمام دوستوں کو جن کی تیکنیکی معلومات اتنی زیادہ نہیں، وہ نبیل والے سانچے کو ہی استعمال کریں۔ آپکے وقت اور محنت دونوں کی بچت ہوگی۔
 

نبیل

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

باذوق

محفلین
بلاگر ڈاٹ‌ کام پر اردو ایڈیٹر

بلاگر ڈاٹ کام کے نئے سٹائل کی ٹیمپلیٹس میں اردو ایڈیٹر شامل کرنے کے لیے سب سے پہلے اپنے بلاگ کی ٹیمپلیٹ میں title ٹیگ کے عین نیچے ذیل کا کوڈ شامل کر لیں:

[SYNTAX="javascript"]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://dev.urduweb.org/jquery/jquery.UrduEditor.js"></script>
<script type="text/javascript">
$.fn.UrduEditor.defaults.EditorFont = 'Alvi Nastaleeq';
$(document).ready(function() {
$("#commentseditor").UrduEditor("14px");
});
</script>[/SYNTAX]
نبیل ! بالا quote میں ڈبل کوٹیشن مارکس کی گڑبڑ ہے ;)
یہی وجہ ہے کہ کل مجھ سے ممکن نہیں ہو پا رہا تھا۔ لیکن اب اردو پیڈ شامل ہو گیا ، بہت شکریہ !!

اصل سینٹکس یوں ہوگا :
[SYNTAX="javascript"]<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

<script src='http://dev.urduweb.org/jquery/jquery.UrduEditor.js' type='text/javascript'></script>
<script type='text/javascript'>
$.fn.UrduEditor.defaults.EditorFont = 'Alvi Nastaleeq';
$(document).ready(function() {
$("#commentseditor").UrduEditor("14px");
});
</script>[/SYNTAX]
 

محمد وارث

لائبریرین
بہت شکریہ برادرم نبیل، اب بالکل صحیح کاپی ہو گیا ہے اور اردو ایڈیٹر بہترین چل رہا ہے

"اردو میں تبصرہ پوسٹ کرنے کے لیے ذیل کے اردو ایڈیٹر میں تبصرہ لکھ کر اسے تبصروں کے خانے میں کاپی پیسٹ کر دیں، اردو ایڈیٹر بشکریہ نبیل حسن نقوی۔" :)
 

مغزل

محفلین
بہت بہت شکریہ جناب ، پہلے ہمارے ساتھ بھی مسئلہ آرہا تھا ، مگر اب تنصیب مکمل ہوگئی ہے ، بہت شکریہ

"اردو میں تبصرہ پوسٹ کرنے کے لیے ذیل کے اردو ایڈیٹر میں تبصرہ لکھ کر اسے تبصروں کے خانے میں کاپی پیسٹ کر دیں،
اردو ایڈیٹر بشکریہ نبیل حسن نقوی۔"
 

نبیل

تکنیکی معاون
یہ جان کر خوشی ہوئی کہ اردو ایڈیٹر آپ کے بلاگز پر کام کر رہا ہے۔ آن سکرین کی بورڈ پر بیک گراؤنڈ کلر کو ایڈجسٹ کرنے کی ضرورت ہے۔

باذوق، آپ نے کس بلاگ پر اردو ایڈیٹر شامل کیا ہے؟
 

محمد وارث

لائبریرین
یہ جان کر خوشی ہوئی کہ اردو ایڈیٹر آپ کے بلاگز پر کام کر رہا ہے۔ آن سکرین کی بورڈ پر بیک گراؤنڈ کلر کو ایڈجسٹ کرنے کی ضرورت ہے۔

برادرم یہ بھی بتا دیں کہ آن سکرین کی بورڈ کا کلر تبدیل کرنے کیلیے کس چیز کے ساتھ 'چھیڑ خوانی' کرنی ہوگی :)
 
Top