کد جاوا اسکریپ و وبلاگ نویسی1

تمامی کدهایی که شما در این صفحه مشاهده میکنید مربوط به جاوا اسکریپ می باشد و برای « سورس های  اچ تی ام ال » ( html source ) کارایی دارد.

هدف من برای ارائه این اسکریپ ها ، قرار دادن در قالب وبلاگ دوستان است که مستقیمآ از قالب html استفاده میکنند .  تمامی قالبهای تحت سلطه ی پرشین بلاگ و یا سایر وبلاگ های موجود از قبیل بلوگ اسپات و غیره از این قبیلند .


پرشین بلاگ یک Template Based

 

پرشین بلاگ از یک ادیتور استفاده میکند که در واقع کار ترجمه متون شما را به اچ تی ام ال به عهده دارد و یا با کلید های میانبر امکان قرار دادن عکس و یا شکلک های یاهو را برای شما ایجاد میکند . شما در واقع برای گذاشتن یک عکس در وبلاگ خود تنها با کلیک روی کلید مخصوص عکس و وارد کردن آدرس عکس خود و سایر تنظیمات می توانید یک تصویر در وبلاگ خود بگنجانید و بر زیبایی وبلاگ بیافزایید . در صورتی که ادیتور پرشین بلاگ این کار شما را به صورت یک کد ترجمه میکند تا برای server قابل درک باشد . برای مثال کدی که برای قرار دادن یک عکس به صورت دستی و ساده در یک قالب html لازم است به شرح زیر میباشد :

می بینید که پرشین بلاگ کارهای شما را بسیار آسانتر کرده است .


ادیتور پرشین بلاگ

در این زمینه فکر کنم تجربه کردن برای شما دوستان بهتر باشد تا توضیح دادن ولی من با بعضی دوستان برخورد کرده ام که اصولآ با ادیتور پرشین بلاگ آشنایی درستی ندارند . در واقع پرشین بلاگ از اواسط سال 82 ادیتور جدید خودش را ارائه داد که نسبت با قبلی نکات جالب و قابل توجهی داشت و تقریبآ محیطی با کارایی ها مختلف و البته به نظر من لازم برای وبلاگ نویسی را شامل بود .

ایجاد جدول (insert table)

 قرار دادن عکس (insert image)

شکلک های یاهو (insert smiley)

رنگ کردن نوشته و هایلایت

امکانات فونت از قبیل 7 نوع قلم با 7 سایز مختلف و امکان زیر خط و یا ایتالیک و همچنین بولد  و 13 نوع استیل

 امکان اضافه کردن کارکتر به صورت دستی ( special characters )  

 اضافه کردن خط افقی (horizontal line)

لینک کردن یک نوشته (insert or edit hyperlink)

جستجو و جایگزینی (find & replace)

امکان ذخیره کردن نوشته روی هارد دیسک به صورت سورس اچ تی ام ال

مشاهده پیش نمایش _ مشاهده سورس اچ تی ام ال

و چندین امکان دیگر...

میبینید که محیطی شبیه microsoft word با محیطی ساده تر در اختیار شماست تا مطالب خود را در قالب یک وبلاگ به دیگران ارائه دهید .


انتخاب قالب

بعد از عضویت شما در پرشین بلاگ به شما پیشنهاد میشود که یکی از قالب های پرشین بلاگ که از پیش ساخته شده اند را برای خود برگزینید و جلوه ای به وبلاگ خود بدهید . در صورت عدم انتخاب شما به صورت معمول یک قالب ساده به شما داده میشود که شامل یک نوار آبیست که در آن blog tittle شما نوشته میشود و چند لینک ساده که معمولآ خانه ، آرشیو و پست الکترونیک نام داردند. در ضمن یک لوگو هم از پرشین بلاگ به شما داده میشود که در وبلاگ شما قرار خواهد گرفت . اگر شما با قسمت ویرایش قالب وبلاگ آشنا شوید میتوانید با استفاده از کدهای اچ تی ام ال این موارد را تغییر دهید و یا قالبی برای خود بسازید .


ویرایش قالب

در این قسمت شما می توانید سورس اچ تی ام ال مربوط به قالب وبلاگ خود را مشاهد کنید و در صورت آشنایی با آن تغییراتی اعمال کنید . البته من به شما توصیه میکنم که اگر با جاوا اسکریپ آشنایی ندارید این کار را نکنید و در عوض روشی که در پایین برای شما نوشته ام را برگزینید که تا هم با این سورس آشنا شوید و هم برای خود تمرینی کرده باشید .

روش من به این صورت است که :

بعد از وارد شدن به قسمت ویرایش قالب در قسمت text box متنی که مشاهده میکنید و با یکسری کد(شامل نوشته و عدد) در هم آمیخته شده است را با استفاده از کلیک راست و انتخاب گزینه  select all به صورت هایلایت در آورده و بعد گزینه copy را زده و در یک فایل متنی با پسوند txt که قبلآ ایجاد کرده اید past کنید . این کار شما باعث میشود که شما در زمانی هم که کامپیوترتان به اینترنت وصل نیست و یا در اصطلاح آنلاین نیستید بتوانید روی قالب وبلاگ خود تغیراتی اعمال کنید . البته این کار با برنامه ی front Page نیز میسر است ولی چون این برنامه گاه حرف فارسی را در ترجمه ی Encoding تغییر میدهد مشکلاتی پیش می آید و بعضی از تگها برای سرور قابل تشخیص نخواهند بود . پس اگر به فرونت پیج مسلط نیستید از همین روش notepad استفاده کنید .

ایجاد یک محیط مجازی برای دیدن قالب وبلاگ به صورت آفلاین

حال از فایل متنی که ایجاد کرده اید یک کپی بگیرید (برای محکم کاری تا اگر فایل شما به علت کد اشتباه خراب شد اصلی را داشته باشید) . فایل متنی خود را در محیط ویندوز rename کنید و پسوند آنرا از txt به htm تغییر دهید . توجه داشته باشید که باید آیکون فایل از حالت متنی به آیکون برنامه اینترنت اکسپلورر تغییر شکل دهد . اگر این عمل صورت نگرفت زیاد ناراحت نشوید چون در صورت معمول بعد از نصب ویندوز 98 و ویندوز XP این حال اجتناب ناپذیر است . اگر توجه کرده باشد در این حالت پسوند هیچ فایلی مشاهد نمیشود و فقط وجه تمایز آنها آیکون های مختلف فایلهایست .  برای انجام این کار شما برای مثال در ویندوز XP که البته سیستم عامل مورد علاقه من هم هست باید در قسمت folder options گزینه view را برگزینید . در این قسمت تیکی که در مقابل جمله زیر است را بردارید

hide extensions for known file types

این تیک باعث میشود که پسوند فایل ها نمایش داده نشود . در ضمن با این روش شما میتوانید فایل های تصویری با پسوند DAT  خود را به MPG تغییر دهید تا media player راحت تر بتواند آنرا شناسایی کند و در ضمن امکانات دیگری هم به شما بدهد .

بعد از برداشتن تیک میتوانید فایل خود را rename کنید .

حال شما یک سورس اچ تی ام ال در هارد دیسک خود دارید که آماده تغییرات است .

Source HTML

قالبی که در پرشین بلاگ استفاده می شود از یکسری کد html تشکیل شده است که در واقع شامل یکسری تگ (tag) جفتی می باشد . تگهایی که معمولآ به صورت اصلی در یک سورس اچ تی ام ال وجود دارند برای مثال عبارتند از :

<html> </html>

<body>  </body>

<head>  </head>

و تگهایی از قبیل <persianblog> و <persianblog/>مخصوص قالب های پرشین بلاگ میباشند .

البته ترتیب قرار گرفتن تگهای بالا به صورت زیر است .

<html>

<head>

<body>

<persianblog>

</persianblog>

</body>

</head>

</html>

البته در میان این تگها کدهای خاصی قرار دارد . برای مثال در بین تگهای پرشین بلاگ چیزی شبیه این قرار میگیرد:

<persianblog>

<A id="<#postid#>"></a>
<DIV style="DIRECTION: rtl">
<DIV class="date"><#date#></DIV><BR>
<DIV class="posts" style="FONT-WEIGHT: bold"><#title#></DIV>
<DIV class="posts"><#body#></DIV>
<A class="postFooter" href="<#PostArchiveFile#>#<#postid#>">
¤ نوشته شده در ساعت <#time#> توسط <#author#></A><BR>
<DIV style="TEXT-ALIGN: left"><A href="JavaScript:void(0)" class="links" onclick="window.open
('ucomments.asp?id=<#postid#>',null,'width=600, height=500, scrollbars=yes, resizable=yes');">
پیام های دیگران <script>document.write(get_cc(<#postid#>))</script></A></DIV>
<DIV style="BACKGROUND-IMAGE: url('images/dotted_hor_border_gray.gif'); BACKGROUND-REPEAT: repeat-x"></DIV>

</persianblog>

البته در میان تگ پرشین بلاگ تگهای تنهای خاصی قرار میگیرند که عبارتند از :

<#postid#>

<#date#>

<#title#>

<#body#>

<#time#>

<#author#>

<#archivedate#>

<#PostArchiveFile#>

 (شروع کار)

خب بعد از ایجاد یک سورس اچ تی ام ال در هارد دیسک خود آنرا اجرا کنید. فایل با پسوند htm شما از طریق برنامه microsoft internet explorer در حال معمولی ویندوز اجرا میشود. برای مشاهده سورس اچ تی ام ال آن میتواند از کلیک راست و برگزیدن view source استفاده کنید و یا از منوی view  در برنامه اینترنت اکسپلورر گزینه  source را انتخاب کنید . این کار باعث میشود فایل متنی با برنامه notepad باز شود که شامل یکسری کد و رقم است . این همان سورس اچ تی ام ال شماست. برنامه اینتر اکسپلورر را نبندید . در فایل متنی (در صورت وارد بودن به جاوا) تغیراتی اعمال کنید . بعد از طریق منوی file  و گزینه save آنرا ذخیره کنید . اکنون به برنامه اینترنت اکسپلورر خود رفته و کلید f5 یا refresh را بفشارید تا صفحه ی شما دوباره بازسازی شود . مبینید که تغییرات اعمال شده اند . برای مثال من توصیه میکنم اگر با جاوا آشنایی ندارید با رنگها کار کنید .

رنگها    

رنگها در html به صورت کدهای خاصی ترجمه شده اند که معادل هر کدامشان عددی است 6 حرفی شامل حرف و عدد که به ترتیب درصد رنگهای قرمز ، سبز و آبی را شامل میشود . برای مثال کد رنگ سیاه به صورت 000000 میباشد و کد رنگ سفید FFFFFF . در زیر برای شما کد چند رنگ را مینویسم که برای شروع استفاده کنید در ضمن اگر کد رنگ خاصی را خواستید میتوانید با وبلاگ من تماس بگیرید و از من بخواهید تا برایتان کد را ارائه دهم .

FF0000 قرمز

00FF00 سبر

0000FF آبی

000000 سیاه

FFFFFF سفید

C0C0C0 نقره ای

FFFF00 زرد

800080 بنفش

FF00FF صورتی

FF8000 نارنجی


 

 قرار دادن فلش در وب لاگ و سایت

<<embed width="128" height="128" src="ادرس فلش مورد نظر.swf"></p> </body> </html>


 

 

 قرار دادن ساعت عقربه دار در وب لاگ و سایت نمایید.


این کد هم یه سایت عقربه دار در وبلاگتان بوجود میاره که خیلی سمجه و اصلا بازدید کننده رو ول نمی کنه ! 
</SCRIPT> <SCRIPT language=JavaScript> fCol='444444'; //face colour. sCol='FF0000'; //seconds colour. mCol='444444'; //minutes colour. hCol='444444'; //hours colour. Ybase=30; //Clock height. Xbase=30; //Clock width. H='...'; H=H.split(''); M='....'; M=M.split(''); S='.....'; S=S.split(''); NS4=(document.layers); NS6=(document.getElementById&&!document.all); IE4=(document.all); Ypos=0; Xpos=0; dots=12; Split=360/dots; if (NS6){ for (i=1; i < dots+1; i++){ document.write('<div id="n6Digits'+i+'" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:10px;color:#'+fCol+';text-align:center;padding-top:10px">'+i+'</div>'); } for (i=0; i < M.length; i++){ document.write('<div id="Ny'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+mCol+'"></div>'); } for (i=0; i < H.length; i++){ document.write('<div id="Nz'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+hCol+'"></div>'); } for (i=0; i < S.length; i++){ document.write('<div id="Nx'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+sCol+'"></div>'); } } if (NS4){ dgts='1 2 3 4 5 6 7 8 9 10 11 12'; dgts=dgts.split(' ') for (i=0; i < dots; i++){ document.write('<layer name=nsDigits'+i+' top=0 left=0 height=30 width=30><center><font face=Arial size=1 color='+fCol+'>'+dgts[i]+'</font></center></layer>'); } for (i=0; i < M.length; i++){ document.write('<layer name=ny'+i+' top=0 left=0 bgcolor='+mCol+' clip="0,0,2,2"></layer>'); } for (i=0; i < H.length; i++){ document.write('<layer name=nz'+i+' top=0 left=0 bgcolor='+hCol+' clip="0,0,2,2"></layer>'); } for (i=0; i < S.length; i++){ document.write('<layer name=nx'+i+' top=0 left=0 bgcolor='+sCol+' clip="0,0,2,2"></layer>'); } } if (IE4){ document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=1; i < dots+1; i++){ document.write('<div id="ieDigits" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:10px;color:'+fCol+';text-align:center;padding-top:10px">'+i+'</div>'); } document.write('</div></div>') document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=0; i < M.length; i++){ document.write('<div id=y style="position:absolute;width:2px;height:2px;font-size:2px;background:'+mCol+'"></div>'); } document.write('</div></div>') document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=0; i < H.length; i++){ document.write('<div id=z style="position:absolute;width:2px;height:2px;font-size:2px;background:'+hCol+'"></div>'); } document.write('</div></div>') document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=0; i < S.length; i++){ document.write('<div id=x style="position:absolute;width:2px;height:2px;font-size:2px;background:'+sCol+'"></div>'); } document.write('</div></div>') } function clock(){ time = new Date (); secs = time.getSeconds(); sec = -1.57 + Math.PI * secs/30; mins = time.getMinutes(); min = -1.57 + Math.PI * mins/30; hr = time.getHours(); hrs = -1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360; if (NS6){ Ypos=window.pageYOffset+window.innerHeight-Ybase-25; Xpos=window.pageXOffset+window.innerWidth-Xbase-30; for (i=1; i < dots+1; i++){ document.getElementById("n6Digits"+i).style.top=Ypos-15+Ybase*Math.sin(-1.56 +i *Split*Math.PI/180) document.getElementById("n6Digits"+i).style.left=Xpos-15+Xbase*Math.cos(-1.56 +i*Split*Math.PI/180) } for (i=0; i < S.length; i++){ document.getElementById("Nx"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(sec); document.getElementById("Nx"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(sec); } for (i=0; i < M.length; i++){ document.getElementById("Ny"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(min); document.getElementById("Ny"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(min); } for (i=0; i < H.length; i++){ document.getElementById("Nz"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(hrs); document.getElementById("Nz"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(hrs); } } if (NS4){ Ypos=window.pageYOffset+window.innerHeight-Ybase-20; Xpos=window.pageXOffset+window.innerWidth-Xbase-30; for (i=0; i < dots; ++i){ document.layers["nsDigits"+i].top=Ypos-5+Ybase*Math.sin(-1.045 +i*Split*Math.PI/180) document.layers["nsDigits"+i].left=Xpos-15+Xbase*Math.cos(-1.045 +i*Split*Math.PI/180) } for (i=0; i < S.length; i++){ document.layers["nx"+i].top=Ypos+i*Ybase/4.1*Math.sin(sec); document.layers["nx"+i].left=Xpos+i*Xbase/4.1*Math.cos(sec); } for (i=0; i < M.length; i++){ document.layers["ny"+i].top=Ypos+i*Ybase/4.1*Math.sin(min); document.layers["ny"+i].left=Xpos+i*Xbase/4.1*Math.cos(min); } for (i=0; i < H.length; i++){ document.layers["nz"+i].top=Ypos+i*Ybase/4.1*Math.sin(hrs); document.layers["nz"+i].left=Xpos+i*Xbase/4.1*Math.cos(hrs); } } if (IE4){ Ypos=document.body.scrollTop+window.document.body.clientHeight-Ybase-20; Xpos=document.body.scrollLeft+window.document.body.clientWidth-Xbase-20; for (i=0; i < dots; ++i){ ieDigits[i].style.pixelTop=Ypos-15+Ybase*Math.sin(-1.045 +i *Split*Math.PI/180) ieDigits[i].style.pixelLeft=Xpos-15+Xbase*Math.cos(-1.045 +i *Split*Math.PI/180) } for (i=0; i < S.length; i++){ x[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(sec); x[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(sec); } for (i=0; i < M.length; i++){ y[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(min); y[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(min); } for (i=0; i < H.length; i++){ z[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(hrs); z[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(hrs); } } setTimeout('clock()',100); } clock(); //--> </SCRIPT> <SCRIPT language=JavaScript> fCol='444444'; //face colour. sCol='FF0000'; //seconds colour. mCol='444444'; //minutes colour. hCol='444444'; //hours colour. Ybase=30; //Clock height. Xbase=30; //Clock width. </body> </html> <p align="center"><a href="http://sarbaz-jahani.persianblog.com"> <font face="Tahoma" size="2">sarbaz-jahani blog</font></a></p>

امیدواریم وبلا گ تان جذابیت پیدا کند

  
نویسنده : ali gooliof ; ساعت ۱۱:٥٥ ‎ق.ظ روز ۱۳۸٧/٢/٢
تگ ها :