ديزاين فور دي: بلوجر

‏إظهار الرسائل ذات التسميات بلوجر. إظهار كافة الرسائل

سلايدر Piecemaker2 ثلاثي الابعاد على بلوجر رائع كما في الووردبريس

السلايدر او السلايدشو، مهم لدى البعض، و لا وجود للمدونة بدونه، لكن اغلبها متشابهة جدا، و خاصة في منصة بلوجر، فكلها بسيطة جدا، و ليست بتاثرات رائعة، لكن ليس بعد الان، لانني احضرت لكم سلايدر رائع بمعنا الكلمة، الوودربريس يملك سلايدر Cu3er، و بلوجر اصبح يملك Piecemaker2 اعرف انك لن تصدق لكن انظر الى الصورة اسفله لترى عن ماذا اتحدث:

بالتاكيد بعد روئيتك للصورة سوف ترغب حتما في رويته يعمل، و انا ايضا بالتاكيد لن امنعك، تفضل هنا:

هذا السلايدر رائع يدعم صيغ عديدة لاظهارها، ليس الصور وحدها كما في كل السلايدرات العادية المتوافرة لبلوجر، يمكنك بواسطة هذا السلايدر اظهار:

مقاطع فيديو
ملفات فلاشية
صور

انها لتجربة رائعة ان يظهر مثل هذا السلايدر على منصة بلوجر. اذا كنت متحمسا لنبدأ،،

بسم الله،،

قبل ان نبدأ بعملية ادراج السلايدر علينا تحميل الملفات الخاصة به.

- بعد التحميل ادخل الى الفولدر لتجد مجموعة من الملفات، افتح الملف المسمى “piecemaker.xml“ بعد فتحه ستجد ما يلي:

<?xml version="1.0" encoding="utf-8"?>

<Piecemaker>

  <Contents>

  <Image Source="http://www.bloggertheme.net/piecemaker/contents/1.jpg" Title="The Piecemaker 2">

  <Text><h1>New hot Features</h1><p>The all new Piecemaker comes with lots of new features, making it even more slick.</p><p>Just to mention a few - you can now specify unlimited transition styles, include your own SWF and Video files, add hyperlinks to images and info texts with all special characters.</p><p>We also impoved the navigation and the animation with animated shadows and pixel-perfect transitions.</p></Text>

  <Hyperlink URL="http://www.bloggertheme.net" Target="_blank" />

  </Image>

  <Image Source="http://www.bloggertheme.net/piecemaker/contents/2.jpg" Title="Lots of new Features">

  <Text><h1>New hot Features</h1><p>The all new Piecemaker comes with lots of new features, making it even more slick.</p><p>Just to mention a few - you can now specify unlimited transition styles, include your own SWF and Video files, add hyperlinks to images and info texts with all special characters.</p><p>We also impoved the navigation and the animation with animated shadows and pixel-perfect transitions.</p></Text>

  <Hyperlink URL="http://www.bloggertheme.net" Target="_blank" />

  </Image>

  <Flash Source="http://www.bloggertheme.net/piecemaker/contents/flash.swf" Title="Loaded SWF File">

  <Image Source="http://www.bloggertheme.net/piecemaker/contents/flash-preview.png" />

  </Flash>

  <Image Source="http://www.bloggertheme.net/piecemaker/contents/piecemaker3.png" Title="Editing made Easy"></Image>

  <Video Source="http://www.bloggertheme.net/piecemaker/contents/video.mp4" Title="Video Example"Width="910" Height="365" Autoplay="true">

  <Image Source="http://www.bloggertheme.net/piecemaker/contents/video-preview.jpg" />

  </Video>

  </Contents>

  <Settings ImageWidth="900" ImageHeight="360" LoaderColor="0x333333" InnerSideColor="0x222222"SideShadowAlpha="0.8" DropShadowAlpha="0.7" DropShadowDistance="25" DropShadowScale="0.95"DropShadowBlurX="40" DropShadowBlurY="4" MenuDistanceX="20" MenuDistanceY="50" MenuColor1="0x999999"MenuColor2="0x333333" MenuColor3="0xFFFFFF" ControlSize="100" ControlDistance="20"ControlColor1="0x222222" ControlColor2="0xFFFFFF" ControlAlpha="0.8" ControlAlphaOver="0.95"ControlsX="450" ControlsY="280
" ControlsAlign="center" TooltipHeight="30"TooltipColor="0x222222" TooltipTextY="5" TooltipTextStyle="P-Italic" TooltipTextColor="0xFFFFFF"TooltipMarginLeft="5" TooltipMarginRight="7" TooltipTextSharpness="50" TooltipTextThickness="-100"InfoWidth="400" InfoBackground="0xFFFFFF" InfoBackgroundAlpha="0.95" InfoMargin="15" InfoSharpness="0"InfoThickness="0" Autoplay="10" FieldOfView="45"></Settings>

  <Transitions>

  <Transition Pieces="9" Time="1.2" Transition="easeInOutBack" Delay="0.1" DepthOffset="300"CubeDistance="30"></Transition>

  <Transition Pieces="15" Time="3" Transition="easeInOutElastic" Delay="0.03" DepthOffset="200"CubeDistance="10"></Transition>

  <Transition Pieces="5" Time="1.3" Transition="easeInOutCubic" Delay="0.1" DepthOffset="500"CubeDistance="50"></Transition>

  <Transition Pieces="9" Time="1.25" Transition="easeInOutBack" Delay="0.1" DepthOffset="900"CubeDistance="5"></Transition>

  </Transitions>

</Piecemaker>

استبدل اذن الروابط الموجودة في الملف بروابطك انت، كما انها يجب ان تكون مباشرة.
- احفظ الملف بعد الانتهاء من التعديل، ثم ارفعها على اي موقع رفع يوفر روابط مباشرة، كـDropbox،
- بعد ان ترفعه، ادخل الى لوحة التحكم لمدونتك و اذهب الى تحرير HTML، ثم ابحث عن:

</head>

- لتصلق قبله/فوقه الكود التالي:

<script src='http://www.bloggertheme.net/piecemaker/scripts/swfobject/swfobject.js' type='text/javascript'>

</script>

<script type='text/javascript'>

var flashvars = {};

flashvars.cssSource = "http://www.bloggertheme.net/piecemaker/piecemaker.css";

flashvars.xmlSource = "http://www.bloggertheme.net/piecemaker/piecemaker.xml";

var params = {};

params.play = "true";

params.menu = "false";

params.scale = "showall";

params.wmode = "transparent";

params.allowfullscreen = "true";

params.allowscriptaccess = "always";

params.allownetworking = "all";

swfobject.embedSWF('http://www.bloggertheme.net/piecemaker/piecemaker.swf', 'piecemaker', '970', '450', '10', null, flashvars,

params, null);

</script>

- استبدل ثانية الروابط الزرقاء بروابطك، ثم احفظ القالب، يجب ان تكون قد اخذت نسخة احتياطية قبل تطبيق هذا التغيير.
- بعد ذلك اذهب الى تخطيط ثم اختر اداة “HTML/JavaScript” و الصق بها هذا الكود:

<center>

<div id="piecemaker">

Put your alternative Non Flash content here.

</div>

</center>

و بهذا تكون قد انتهيت.
اتمنى ان يكون مفيدا، و الى اللقاء :-)

اضافة الاشتراك في قناتي على اليوتيوب .. لبلوجر

لطالما شاهدت الاضافات او الويدجتس الخاصة بالاشتراك في الفيسبوك و تويتر و جوجل و حتى جوجل+، لكنني لا اظن انك رائيت يوما اضافة الاشتراك في قناة على اليوتيوب، نعم اضافة كاملة و ليس مجرد ايقونة، اظن ان الامر جديد قليلا او حتى مبهم، ادخل لتعرف عما اتحدث،،

بما انك دخلت، فانت تريد ان ترى ما اقصد، حسنا تفضل:

لنبدأ على بركة الله،،
- في هذا الشرح ليس هناك اولا او ثانيا، كل ما عليك هو لصق هذا الكود اينما تريد:

كود بلغة HTML:

<iframe src="http://www.youtube.com/subscribe_widget?p=YOUTUBE USERAME"style="overflow:hidden; height: 105px; width: 300px; border: 0;" scrolling="no" frameBorder="0"> </iframe>

- استبدل YOUTUBEUSERNAME باسمك الذي تستخدمه في اليوتيوب الذي يكون هنا:

و مبروك عليك الاضافة :-)
انتهى الشرح و الى اللقاء،،

كيف تضيف صندوق المعجبين بصفحتك على الفيس بوك إلى مدونتك

السلام عليكم
هل تريد اضافة صندوق معجبي صفحتك إلى مدونتك مثل صندوقي:

إليك الطريقة:

الطريقة سهلة للغاية ، كل ما عليك هو تعديل بعض الأشياء في الكود التالي ثم نسخه ووضعه في مدونتك:

أولا:- تعديل الكود

سنقوم بتعديل الجزء الملون في الكود السابق:

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/dbl0click&width=200&colorscheme=light&show_faces=true&stream=false&header=true&height=280" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:280px;" allowtransparency="true"></iframe>

الجزء المارد تعديله: http://www.facebook.com/dbl0click
التعديل: ضع عنوان صفحتك على الفيس بوك بدلا منه

الجزء المارد تعديله: width=200
التعديل: يمكنك تغيير عرض الصندوق (لا حظ أن width مكرر مرتين في الكود ، ويجب تغيير كلا الموضعين)

الجزء المارد تعديله: height=280
التعديل: يمكنك تغيير ارتفاع الصندوق (لا حظ أن height مكرر مرتين في الكود ، ويجب تغيير كلا الموضعين)

الجزء المارد تعديله: light
التعديل: يمكنك تغييرها إلى dark إذا أردت جعل خلفية الصندوق سوداء بدلا من اللون الابيض

هناك تعديلات أخرى في الكود يمكنك تجربتها بنفسك عن طريق تغيير true الى false والعكس

ثانيا: وضع الكود في مدونتك:

ادخل على blogger.com

اضغط على تصميم design

ثم اضغط على " إضافة أداة" في الشريط الجانبي

ثم اختر HTML/Javascript

الصق الكود .... ثم حفظ

مبروووووووك

نسعد بتعليقاتكم على الموضوع

إخفاء عنوان الأداة من المدونة وإظهاره في تصميم القالب

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

ولتطبيق هذه الفكرة ،توجه إلى "تصميم" ثم حدد أحد الأدوات الجانبية التي ليس لها عنوان ،بطبيعة الحال سوف يكون العنوان الإفتراضي هو HTML/JavaScript ،إضغط على تحرير هذه الأداة ثم ضع لها عنوان مناسب .

لحد الآن سوف يظهر عنوان الأداة في تصميم القالب وكذلك يظهر في المدونة ،لكننا نود حذف العنوان من المدونة مع الإحتفاض به في تصميم القالب لذلك سوف نقوم بالتوجه لتحرير Html ثم ضع علامة في المربع الصغير لتوسيع القالب ثم إبحث عن العنوان الجديد الذي أضفته للأداة ،سوف تجد أن هذا العنوان يوجد داخل كود على هذا الشكل :

<b:widget id='HTML5' locked='false' title='عنوان الأداة' type='HTML'>
<b:includable id='main'>  <b:if cond='data:title != ""'> <h3 class='title'><data:title/></h3> </b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

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

إضافة الإبتسامات Onion Emoticons على مدونات بلوجر

السلام عليكم ورحمة الله تعالى وبركاته ، بمناسبة العيد الأضحى المبارك سوف أقدم لكم إضافة جميلة لمدوناتكم تتيح لكم فرصة التعبير عن مشاعركم و أرائكم بواسطة صور معبرة , والتي تعطي نفسا جميلا لمشاركاتكم ،فكما نعلم أن الصورة أحيانا تكون أكثر تعبيرا من الكلام وحيث أنها تعمل فقط على المتصفح Firefox. من الآن فصاعدا ، عبر كما شئت بهذه الاضافة وكن السباق في تطبيقها والجميل في ذلك هو أن هذه الإبتسامات تصبح مدرجة مع أدوات تأليف الرسائل في مدونتك

وهذه بعض الأمثلة :

ما عليك سوى تتبع المراحل الآتية :

قم بفتح المتصفح فاير فوكس ، فإن لم يكن لديك ، حمله من هنا
الآن سوف نقوم بتثبيت برنامج Grease monkey على فايرفوكس وذلك بالضغط على add toFirefox .

3.بعد أن ينتهي التحميل و التثبيت وافق على إعادة تشغيل الفايرفوكس,وسوف تظهر أيقونة رأس قرد فوق ساعة الكومبيوتر في الأسفل.

4.أما الآن يجب تثبيت الكود java script في البرنامج Grease monkey بالضغط هنا .

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F).

]]></b:skin>

ثم قم بلصق الكود التالي قبله :

img.emoticon { padding: 0; margin: 0; border: 0;
}

قم بحفظ القالب
والآن لنذهب لمعاينة النتيجة وذلك بالدخول موقع بلوجر وليس بلوجر المسودة و من إرسال--> رسالة جديدة--> تأليف .سوف تظهر الأيقونات الإبتسامة كما هو موضح في الصورة أسفلة ،ولإضافة أحد الابتسامات ، ما عليك سوى نقر على الصورة التي تريد إظهارها.

إضافة العيد مع صوت التكبير و التهليل .. احتفل بالعيد في موقعك.

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

طريقة تركيب الإضافة في مدونات بلوجر

أولا من لوح تحكم مدونتك توجه إلى عناصر الصفحة ثم اضغط إضافة أداة و من النافدة المنبثقة اختر أداة HTML/Javascript ثم ألصق أحد الكودين الموالين في حقل النص و ابق على حقل العنوان فارغا و اضغط زر الحفظ.

<b:if cond='data:blog.url == data:blog.homepageurl'>
<embed name="takbir"
src="http://sites.google.com/site/simoxooorg/Home/takbir-aid-said.mp3"
volume="60"
loop="false"
hidden="true"
autostart="true">
</embed>
</b:if> 
<div style="float:top right; position:absolute; overflow:visible; right:0px; top:0px; height:215px; width:214px;">
<a href="http://doaib.blogspot.com/2010/09/blog-eid-widget.html" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ZVTvLtbkWTCrSEwEe3i2wkp_oNshrCfdgC3ZBMJPYbU5IEDcdDghBqfvWwJN2dT9L-0WgpTTzGHyOWn6mjbb5rsm2nYG7oN0KfpkzcrBCw4ffHx0779wSAZOAG3j1HuseFSkVaEZKPQ/" alt="عيد مبارك سعيد" title="احصل على هذه الإضافة" border="0" />
</a></div>

<b:if cond='data:blog.url == data:blog.homepageurl'>
<embed name="takbir"
src="http://sites.google.com/site/simoxooorg/Home/tkber_alafasy.mp3"
volume="60"
loop="false"
hidden="true"
autostart="true">
</embed>
</b:if> 
<div style="float:top left; position:absolute; overflow:visible; left:0px; top:0px; height:116px; width:116px;">
<a href="http://doaib.blogspot.com/2010/09/blog-eid-widget.html" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCP2ykHA-hgw_EvRSioDpLPMVXKqVwnco2bBm_gSAofOAN4ut0G1UT-Ld6rcCOn48kkBk7b_d-wN4uNKL93q4G67H4feYN2aR55tzO8WnsTNpv4VZphVwZxy5hIkT8-cAkacfMZQ39ruc/" alt="عيد مبارك سعيد" title="احصل على هذه الإضافة" border="0" />
</a></div>

طريقة تركيب الإضافة في باقي المدونات و المواقع

فقط ألصق أحد الكودين في مربع أو بلوك أو في ملف القالب.

<embed name="takbir"
src="http://sites.google.com/site/simoxooorg/Home/takbir-aid-said.mp3"
volume="60"
loop="false"
hidden="true"
autostart="true">
</embed> 
<div style="float:top right; position:absolute; overflow:visible; right:0px; top:0px; height:215px; width:214px;">
<a href="http://doaib.blogspot.com/2010/09/blog-eid-widget.html" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ZVTvLtbkWTCrSEwEe3i2wkp_oNshrCfdgC3ZBMJPYbU5IEDcdDghBqfvWwJN2dT9L-0WgpTTzGHyOWn6mjbb5rsm2nYG7oN0KfpkzcrBCw4ffHx0779wSAZOAG3j1HuseFSkVaEZKPQ/" alt="عيد مبارك سعيد" title="احصل على هذه الإضافة" border="0" />
</a></div>

<embed name="takbir"
src="http://sites.google.com/site/simoxooorg/Home/tkber_alafasy.mp3"
volume="60"
loop="false"
hidden="true"
autostart="true">
</embed> 
<div style="float:top left; position:absolute; overflow:visible; left:0px; top:0px; height:116px; width:116px;">
<a href="http://doaib.blogspot.com/2010/09/blog-eid-widget.html" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCP2ykHA-hgw_EvRSioDpLPMVXKqVwnco2bBm_gSAofOAN4ut0G1UT-Ld6rcCOn48kkBk7b_d-wN4uNKL93q4G67H4feYN2aR55tzO8WnsTNpv4VZphVwZxy5hIkT8-cAkacfMZQ39ruc/" alt="عيد مبارك سعيد" title="احصل على هذه الإضافة" border="0" />
</a></div>

عيدكم مبارك سعيد.

سلايدر Piecemaker2 ثلاثي الابعاد على بلوجر رائع كما في الووردبريس

اضافة الاشتراك في قناتي على اليوتيوب .. لبلوجر

كيف تضيف صندوق المعجبين بصفحتك على الفيس بوك إلى مدونتك

إخفاء عنوان الأداة من المدونة وإظهاره في تصميم القالب

إضافة الإبتسامات Onion Emoticons على مدونات بلوجر

إضافة العيد مع صوت التكبير و التهليل .. احتفل بالعيد في موقعك.

طريقة تركيب الإضافة في مدونات بلوجر

طريقة تركيب الإضافة في باقي المدونات و المواقع

إشترك معنا في اليوتيوب

تابعنا عبر الفيس بوك

المتابعون

أقسام المدونة

أرشيف المدونة الإلكترونية

المتواجدون الآن

زوار المدونة

إعلانات

أكثر المعلقين تفاعلا

آخر المعلقين

اختر اللغة