أهلاً بك, ضيف! التسجيل RSS

منتدى ربحني

السبت, 2024-04-20
 أكواد FBML,Html ipiwa ,تطبيقات ,خلفيات

بسم الله الرحمن الرحيم




والصلاة والسلام على أشرف المرسلين


سيدنا محمد وعلى آله وصحبه أجمعين

دائمًا يحتاج أصحاب المواقع والمدونات إلى إضافة عارض للصور (سلايدر) لعرض الصور الهامة لموضوعات الموقع على الصفحة الرئيسية أو إستخدامه كبانر أو ألبوم للصور.و



وتوجد العديد من الطرق والأكواد التى تضاف للمواقع والمدونات بطرق عديدة ولكن هذه الإضافة الرائعة هى لعرض الصور بطريقة ثلاثية الأبعاد (Piecemaker 2 slider) وهى 



إضافة مجانية متاحة لمواقع ووردبريس wordpress  ولكن هذه الطريقة تمكنا من إضافة السلايدر إلى مدونات البلوجر .

3d-slideshow


طريقة تركيب  Piecemaker 2 slider  بمدونات بلوجر:

فى البداية تحميل  الملف الملف الخاص بالإضافة Piecemaker 2 

رفع الملف إلى dropbox أو Googledrive


ثم التعديل عليه بما يناسب موقعك كما يلى:

أولا : أضف أداة Html/javascript إلى مدونات بلوجر ثم إنسخ بها الكود التالى


يوجد داخل الملف الذى تم تحميله ورفعه إلى dropbox أو Googledrive صفحة الويب بعنوان  index إنسخ الرابط المباشر لها ثم ضعه بهذا الكود مكان الرابط الملون بالأزرق:


<center/> <iframe src="http://3sat.ucoz.com//u/80212138/%D9%85%D8%AF%D9%88%D9%86%D8%A9%20%D9%83%D9%86%20%D8%AF%D8%A7%D8%B9%D9%8A%D8%A7%20%D9%84%D9%84%D8%AE%D9%8A%D8%B1/3d%20slideshow/index.html" style="border:0px #FFFFFF none;" name="My iFrame" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="500px" width="900px"></iframe> <center/></center></center>
<center>
http://conda3ianllkhir.blogspot.com/" target="_blank"><img alt="Blogger widget" src="https://lh3.googleusercontent.com/-6r0Z0Nh4mjE/T6wLjVKJLwI/AAAAAAAABSo/k8v-Fiz1l_4/s89/%25D8%25A8%25D8%25A7%25D8%25AF%25D8%25AC%2520%25D8%25A7%25D9%2584%25D9%2585%25D8%25AF%25D9%2588%25D9%2586%25D8%25A9%2520%25D9%2584%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B1.png" title="Blogger widget" /></a></center> </center
<a href=
">
enter>
</
c

ثانيًا: يوجد ملف يإسم piecemakerXML


يتم تغيير روابط الصور الخاصة بموقعك وتغيير النص بكتابة ملخص للموضوع

يفتح ملف Xml  عن طريق Notepade  والبحث عن مسارات الصور وإستبدالها بالروابط المباشرة الصور الخاصة بموقعك هكذا



<Image Filename="image1.jpg">
<Text>
<headline>Description Text</headline>
<break>Ӂ</break>
<paragraph>Here you can add a description text for every single image.</paragraph>
<break>Ӂ</break>
<inline>This is HTML text loaded from the external XML file and formatted with an external CSS file. So it's pretty simple to set this text. You can also easily add</inline>
<a href="http://www.modularweb.net/piecemaker" target="_blank">Ӂhyperlinks</a>
</paragraph>
<paragraph>. This one leads you to the official Piecemaker website, by the way
.


تغيير الجزء الملون باللون الأزرق برابط مباشر للصورة الأولى

تغيير الجزء الملون باللون الأحمر بعنوان الموضوع

تغيير الجزء الملون باللون الأخضر بملخص

***************************************************************







بسم الله الرحمن الرحيم
والصلاة والسلام على أشرف المرسلين
سيدنا محمد وعلى آله وصحبه أجمعين

 هذا الكود المميز فهو طريقة ذكية لزيادة أبعاد الصور بمجرد مرور الماوس على مصغرات الصور.
صورة واحدة فقط نحتاجها فى هذه الحالة وهذا ما يميز الكود بعكس ما كان يطبق فى أكواد Css من تجهيز صورتين واحدة مصغرة وواحدة أخرى بأبعاد أخرى أكبر قليلا تظهر بمرور مؤشر الماوس. فهذا الكود يوفر الوقت والجهد الذى كان يحدث سابقا.
من مميزات هذا الكود أيضا هو إمكانيا إضافة نص يظهر تحت الصورة .
بالإضافة إلى ذلك هو إمكانية إضافة رابط على النص والصورة المكبرة تؤدى إلى صفحة ويب أخرى
الصورة الكبرى تظهر معها إطار أو خلفية بلون أسود لتوضيح وتحديد الصورة.
يمكن تجربة الإضافة






<style type="text/css">

/* smart image enlarger starts here */
/* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */

.ienlarger {
 float: left;
 clear: none; /* set to left or right if needed */
 padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
 padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
}

.ienlarger a { 
 display:block;
 text-decoration: none;
/* add cursor:default; to this rule to disable the hand cursor */
}

.ienlarger a:hover{ /* don't move this positioning to normal state */
 position:relative;
}

.ienlarger span img {
 border: 1px solid #FFFFFF; /* adds a border around the image */
 margin-bottom: 8px; /* pushes the text down from the image */
}

.ienlarger a span { /* this is for the large image and the caption */
 position: absolute;
 display:none;
 color: #FFCC00; /* caption text colour */
 text-decoration: none;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px; /* caption text size */
 background-color: #000000;
 font-weight: bold;
 padding-top: 10px;
 padding-right: 10px;
 padding-bottom: 13px;
 padding-left: 10px;
}

.ienlarger img { /* leave or IE puts a border around links */
border-width: 0;
}

.ienlarger a:hover span { 
 display:block;
 top: 50px; /* means the pop-up's top is 50px away from thumb's top */
 left: 90px; /* means the pop-up's left is 90px far from the thumb's left */
 z-index: 100;
 
/* If you want the pop-up open to the left of thumb, remove the left: 90px; and add 
right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */ 

/* If you want the pop-up open above the thumb, remove the top: 50px; and add 
bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */ 

/* add cursor:default; to this rule to disable the hand cursor only for the large image */
}

.resize_thumb {
 width: 150px; /* enter desired thumb width here */
 height : auto;
}

/* smart image enlarger ends here */

</style>

 <div class="ienlarger"><a href=""><img src="http://4.bp.blogspot.com/-t_lsgqlM52Q/T67P8nO5CpI/AAAAAAAABV8/-zVVTfYVmVo/s320/46710.jpg" alt="thumb" class="resize_thumb" /><span>
 <img src="http://4.bp.blogspot.com/-t_lsgqlM52Q/T67P8nO5CpI/AAAAAAAABV8/-zVVTfYVmVo/s320/46710.jpg" alt="large" /><br />
 درس الماسك فى الفوتوشوب</span></a></div>

 <div class="ienlarger"><a href="#.T_TM25GiGko"><img src="http://4.bp.blogspot.com/-_1TMvrbjNUU/Tnt9XhQOxTI/AAAAAAAAAU4/iHCL2rmHeqc/s400/2222760.jpg" alt="thumb" class="resize_thumb" /><span>
 <img src="http://4.bp.blogspot.com/-_1TMvrbjNUU/Tnt9XhQOxTI/AAAAAAAAAU4/iHCL2rmHeqc/s400/2222760.jpg" alt="large" /><br />
 دمج الصور بالفوتوشوب</span><;/a></div>


HTML Hit Counter
HTML Hit Counter
عزيزي الزائر
اهلا وسهلا بك في موقع يتوجب عليك الدخول او التسجيل من اجل تصفح جيد للموقع
@ 3SAT.ucoz.com

جميع الحقوق محفوظة لموقع _ مدير الموقع _ © 2015