الخطوات:
1- اذهب الى لوحة التحكم ثم القالب ثم تحرير HTML
2- ابحث عن الوسم التالى
</head>
3- ضع الكود التالى قبله أو فوقه
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'/>
<script src='https://abuiyadblog.googlecode.com/svn/trunk/colorbox-master/colorbox.js' type='text/javascript'/>
<link href='https://abuiyadblog.googlecode.com/svn/trunk/colorbox-master/example1/colorbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script>
$(document).ready(function(){
$("a[rel='images']").colorbox({transition:"fade"});
$("a[rel='imagessamesize']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='slideshow']").colorbox({slideshow:true});
$(".youtube").colorbox({iframe:true, innerWidth:760, innerHeight:520});
$(".vimeo").colorbox({iframe:true, innerWidth:760, innerHeight:520});
$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
$(".soundcloud").colorbox({width:"70%", height:"300", iframe:true});
$('a[href$=pdf]').colorbox({iframe:true, innerWidth:760, innerHeight:520});
$('a[href$=swf]') .colorbox({iframe:true, innerWidth:660, innerHeight:420});
});
</script>
<script src='https://abuiyadblog.googlecode.com/svn/trunk/colorbox-master/colorbox.js' type='text/javascript'/>
<link href='https://abuiyadblog.googlecode.com/svn/trunk/colorbox-master/example1/colorbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script>
$(document).ready(function(){
$("a[rel='images']").colorbox({transition:"fade"});
$("a[rel='imagessamesize']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='slideshow']").colorbox({slideshow:true});
$(".youtube").colorbox({iframe:true, innerWidth:760, innerHeight:520});
$(".vimeo").colorbox({iframe:true, innerWidth:760, innerHeight:520});
$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
$(".soundcloud").colorbox({width:"70%", height:"300", iframe:true});
$('a[href$=pdf]').colorbox({iframe:true, innerWidth:760, innerHeight:520});
$('a[href$=swf]') .colorbox({iframe:true, innerWidth:660, innerHeight:420});
});
</script>
4- قم بحفظ القالب وركز جيدا فى الخطوات التالية :)
الأكواد المستخدمة فى إدراج الملفات (PDF,فلاش,يوتيوب,فيميو,ساوندكلاود,انستجرام)
كل ما عليك هو نسخ الكود ووضعه كما شرحنا بالفيديو (فى وضع HTML) وتغيير رابط الملف كما وضحنا كيفية استخراجه وكذلك قم بتغيير رابط الصورة ووصف الفيديو كما تُحب. يجب الانتباه جيدا عند تنفيذ خطوة استخراج رابط الملف بالطريقة التى تم شرحها بالفيديو- ومعنى مباشر انه ينتهى بامتداد الصورة وموقع tinypic.com سيفيدك فى الحصول على رابط مباشر لصورك بسهولة-
قائمة الأكواد
كود ملفات بى دى إف
<a class="cboxElement" href="http://live.islamweb.net/quran_list/hafs/s1.pdf" title="وصف"><img border="0" src="رابط الصورة المباشر" /></a>
كود ملفات الفلاش
<a class="cboxElement" href="http://www.saaid.net/flash/fate7h2.swf" title="وصف"><img border="0" src="رابط الصورة المباشر" /></a>
كود ملفات فيديوهات اليوتيوب
<a class="youtube cboxElement" href="http://www.youtube.com/embed/HguSbjXYRpE?rel=0" title="وصف">
<img src="رابط الصورة المباشر" /></a>
كود ملفات فيديوهات فيميو
<a class="vimeo cboxElement" href="http://player.vimeo.com/video/54582427" title="وصف"><img border="0" src="رابط الصورة المباشر" /></a>
كود ملفات صوتيات ساوند كلاود
<a class="soundcloud cboxElement" href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/83497224&auto_play=false&hide_related=false&visual=true" title="وصف"><img border="0" src="رابط الصورة المباشر" /></a>
كود ملفات صور انستجرام
<a class="vimeo cboxElement" href="http://instagram.com/p/lbtDdliNfL/embed/" title="وصف"><img border="0" src="رابط الصورة المباشر" /></a>
يجب الانتباه جيدا للرابط المستخدم وطريقة استخراجه من خلال الفيديو الذى تم عرضه
مدونة عراقي محترف
http://iq7tech.blogspot.com/
كود ملفات بى دى إف
<a class="cboxElement" href="http://live.islamweb.net/quran_list/hafs/s1.pdf" title="وصف"><img border="0" src="رابط الصورة المباشر" /></a>
كود ملفات الفلاش
<a class="cboxElement" href="http://www.saaid.net/flash/fate7h2.swf" title="وصف"><img border="0" src="رابط الصورة المباشر" /></a>
كود ملفات فيديوهات اليوتيوب
<a class="youtube cboxElement" href="http://www.youtube.com/embed/HguSbjXYRpE?rel=0" title="وصف">
<img src="رابط الصورة المباشر" /></a>
كود ملفات فيديوهات فيميو
<a class="vimeo cboxElement" href="http://player.vimeo.com/video/54582427" title="وصف"><img border="0" src="رابط الصورة المباشر" /></a>
كود ملفات صوتيات ساوند كلاود
<a class="soundcloud cboxElement" href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/83497224&auto_play=false&hide_related=false&visual=true" title="وصف"><img border="0" src="رابط الصورة المباشر" /></a>
كود ملفات صور انستجرام
<a class="vimeo cboxElement" href="http://instagram.com/p/lbtDdliNfL/embed/" title="وصف"><img border="0" src="رابط الصورة المباشر" /></a>
يجب الانتباه جيدا للرابط المستخدم وطريقة استخراجه من خلال الفيديو الذى تم عرضه
مدونة عراقي محترف
http://iq7tech.blogspot.com/
https://abuiyadblog.googlecode.com/svn/trunk/colorbox-master/example1/colorbox.css
محول الأكوادإخفاء محول الأكواد الإبتساماتإخفاء الإبتسامات