ایجاد راهنمای سایت با Bootstrap Tour

[motahhari]

سلام

احتمالا تاحالا راهنمای سایت های مختلف رو دیدید. یک راهنما که وقتی اولین بار وارد یک سایت میشید یک سری توضیحات نشون میده و میگه فلان کارو بکنید و دکمه next اینا داره. من دنبال اینم که چنین چیزی برای وب سایت (php) راه اندازی کنم. توی صفحات فارسی گشتم چیزی پیدا نکردم. اما توی صفحات انگلیسی به بوت استرپ تور برخوردم. توضیحاتش ولی خیلی کوتاه بود و من دقیق متوجه نشدم چیکار بکنم. یک نگاه بهش بندازید:

http://bootstraptour.com

خب این یک دکمه گذاشته که وقتی روش کلیک می کنی راهنما نشون داده میشه. من میخوام بدون دکمه و به صورت خودکار بیاد رو صفحه. چندتا سوال داشتم.

اول اینکه من بعد از دانلود کدوم فایل ها رو باید آپلود کنم؟ چون پکیجی که از گیت هاب دانلود میشه فایل هاش زیاده.

دوم اینکه من چه کدی رو کجا باید قرار بدم؟ این سه خط رو چجوری کجای فایل php بگذارم؟

<link href="bootstrap-tour-standalone.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap-tour-standalone.min.js"></script>

سوم اینکه این کد رو کجا چجوری بگذارم؟ میدونم باید id اون قسمت مورد نظر رو بنویسم و تیتر و توضیح. ولی خود این کد رو چجوری باید کجا بگذارم؟

​

[COLOR=#006600][I]// Instance the tour[/I][/COLOR]
[COLOR=#003366][B]var[/B][/COLOR] tour [COLOR=#339933]=[/COLOR] [COLOR=#003366][B]new[/B][/COLOR] Tour[COLOR=#009900]([/COLOR][COLOR=#009900]{[/COLOR]
  steps[COLOR=#339933]:[/COLOR] [COLOR=#009900][[/COLOR]
  [COLOR=#009900]{[/COLOR]
    element[COLOR=#339933]:[/COLOR] [COLOR=#3366CC]"#my-element"[/COLOR][COLOR=#339933],[/COLOR]
    title[COLOR=#339933]:[/COLOR] [COLOR=#3366CC]"Title of my step"[/COLOR][COLOR=#339933],[/COLOR]
    content[COLOR=#339933]:[/COLOR] [COLOR=#3366CC]"Content of my step"[/COLOR]
  [COLOR=#009900]}[/COLOR][COLOR=#339933],[/COLOR]
  [COLOR=#009900]{[/COLOR]
    element[COLOR=#339933]:[/COLOR] [COLOR=#3366CC]"#my-other-element"[/COLOR][COLOR=#339933],[/COLOR]
    title[COLOR=#339933]:[/COLOR] [COLOR=#3366CC]"Title of my step"[/COLOR][COLOR=#339933],[/COLOR]
    content[COLOR=#339933]:[/COLOR] [COLOR=#3366CC]"Content of my step"[/COLOR]
  [COLOR=#009900]}[/COLOR]
[COLOR=#009900]][/COLOR][COLOR=#009900]}[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
 
[COLOR=#006600][I]// Initialize the tour[/I][/COLOR]
tour.[COLOR=#660066]init[/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
 
[COLOR=#006600][I]// Start the tour[/I][/COLOR]
tour.[COLOR=#660066]start[/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]

چهارم هم اینکه برای اتوماتیک بالا اومدنش چیکار کنم؟

ممنون میشم اگر کسی بلده یک توضیح کامل بده. چون طبیعتا بعد خیلی ها با سرچ کردن به این تاپیک میرسن بعدن و میتونه یک تاپیک مرجع باشه.