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

[نبیل]

السلام علیکم،

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

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

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

اپڈیٹ: بلاگ ٹیمپلیٹ کو ایڈٹ کرنے سے پہلے 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>

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

<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>

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

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

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

<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;   
}

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

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

 

[ابن سعید]

بارک اللہ!

 

[گرائیں]

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

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

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

 

[محمد وارث]

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

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

 

[محمد وارث]

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

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 "".

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

 

[خورشیدآزاد]

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

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

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

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

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

 

[محمد وارث]

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

 

[گرائیں]

خورشید،

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

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

 

[محمد وارث]

تازہ فیڈ بیک

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

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

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

 

[گرائیں]

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

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

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

 

[محمد وارث]

وہ تو اب لے لیا

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

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

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

 

[خورشیدآزاد]

خورشید،

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

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

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

 

[نبیل]

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

 

[خواجہ طلحہ]

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

 

[باذوق]

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

Expand Widget Templates پر چیک مارک لگانے کے بعد ڈھونڈیں۔

 

[باذوق]

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

بلاگر ڈاٹ کام کے نئے سٹائل کی ٹیمپلیٹس میں اردو ایڈیٹر شامل کرنے کے لیے سب سے پہلے اپنے بلاگ کی ٹیمپلیٹ میں 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]

 

[محمد وارث]

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

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

 

[مغزل]

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

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

 

[نبیل]

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

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

 

[محمد وارث]

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

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