طريقة إضافة "زر اشترك في قناتي على اليوتيوب" لمدونة بلوجر للمبتدئين

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

هذا هوشكل الأداة عنذ إضفتها:

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

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

&nbsp;<iframe frameborder="0" id="fr" name="fr" scrolling="no" src="http://www.youtube.com/subscribe_widget?p=V_7vmUb6bykUmDStyKHE_Q" style="overflow: hidden; height: 110px; width:290px; border: 0pt none;"></iframe>

ملاحظة: قم تغير V_7vmUb6bykUmDStyKHE_Q إلى معرف مستخدم يوتيوب الخاص بك ويمكنك الحصول على المعرف الخاص بك من (اضغط هنا ) بعد تسجيل الدخول الى قناتك.

ثم ضع الأداة الجديد في أي مكان تريد واضغط على حفظ الترتيب.

في انتظار استفساراتكم وتساؤلاتكم تقبلوا مني فاق الاحترام و التقدير، والى درس جديد من دروس بلوجر إنشاء الله.

Unknown

12:02 ص

اقرأ المزيد

تغيير رمز التفضيلات فى مدونات بلوجر

كما جرت العادة مازال القائمين على منصة بلوجر يقومون بعمل تطويرات متلاحقة لمنصتها المجانية واليوم تم اضافة خيار جديد الى قائمة التصميم في المدونة ألا وهو اختيار أيقونة للموقع تظهر أعلى المتصفح بدون هاكات وأكواد او تحرير فقط عن طريق اضافات البلوجر المعتمدة .

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

صورة عن الاضافة المقصودة .

طبعاً قبل أن أبدأ في الشرح أحب أن انبه عليكم أنني أستخدم مسودة بلوجر وليست الصفحة الرئيسية لبلوجر .

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

لذلك أي شخص لا يستطيع مشاهدة الإضافة من الرئيسية لبلوجر يتوجه مباشرة الى المسودة وتجربة هذه الاضافة .

كيف تقوم باضافة أيقونة " رمز تفضيل " لمدونتك .

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

- قم بالضغط على الخيار - تحرير - لتتمكن من الاستكمال .

ثم ستظهر لك هذه النافذة .

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

بعد اختيار الصورة والتي يتوجب ألا يزيد حجمها عن 10 كيلوبايت قم بالضغط على " حفظ . وستكون النتيجة النهائية كالتالي من داخل الاعداد .

وكالتالي من رئيسية المدونة .

انتهى .

بخصوص الأيقونات البعض لا يعرف كيف يحصل على أيقونات كما أن موقع جوجل للصور لا يدعم البحث بصيغة  لكنني أنصحكم بالتوجه الى هذا الموقع  (اضغط هنا موقع الايقونات) والذي يتيح لكم البحث في أكثر من155,756 أيقونة متوفره داخل الموقع .

Unknown

2:48 ص

اقرأ المزيد

إضافة ترقيم الصفحات لقوالب بلوجر

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

صفحة 1 من 41234الصفحة التالية

شرح طريقة التركيب
1. إبحث عن </body> وضع الكود التالي فوقه

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script type='text/javascript'>
/*<![CDATA[*/
var postperpage=8;var numshowpage=3;var upPageWord ='الصفحة السابقة';var downPageWord ='الصفحة التالية';var urlactivepage=location.href;var home_page="/";
/*]]>*/
</script>
<script src='https://googledrive.com/host/0B0LkZloPKBfWb2Vjbkk3LWxVVzQ' type='text/javascript'/>
</b:if>

* لتغيير عدد ظهور المواضيع في الصفحة غير المحدد بالبرتقاي "8" بما يناسبك
2.ابحث عن ]]></b:skin> وضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>

/* Page Navigation Ar1web.com */
#blog-pager{clear:both;display:inline-block;overflow:visible;width:auto;background-color:#fff;margin:40px 0 20px 20px;border:1px solid #EAEAEA;padding:0;text-align:right;line-height:normal;font-size:13px;font-weight:400;;}
.showpageOf{display:inline-block;font-size:90%;padding:7px 12px;vertical-align:top;line-height:20px;}
.showpagePoint{background:#30a8e6;color:#fff;display:inline-block;vertical-align:top;line-height:20px;padding:7px 12px;margin:0;font-size:14px;text-align:center;border-right:1px solid #f0f0f0;box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);transition:initial}
.showpage a,.showpageNum a{display:inline-block;vertical-align:top;line-height:20px;padding:7px 12px;margin:0;font-size:14px;text-align:center;border-right:1px solid #f0f0f0;transition:color .3s}
.showpage a:hover,.showpageNum a:hover{background-color:#fefefe;color:#454545;box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);transition:color .3s}

* لتغيير اللون الأزرق فكوده محدد بالبرتقالي #30a8e6

Unknown

5:47 ص

اقرأ المزيد

إضافة عدد مشاهدات الموضوع لمدونات بلوجر

إضافة عدد مشاهدات الموضوع تعتبر من بين الإضافات المميزة للمدونات على منصة بلوجر , و كون بلوجر لا يوفر هذه الإضافة عكس الووردبريس , فإن علينا الإلتجاء إلى الإضافات و الطرق "الملتوية" عبر الإلتجاء إلى بعض الخدمات المجانية التي تمثل حلا ناجحا , مثل خدمة Firebase التي توفر لك قاعدة بيانات تتسجل فيها عدد مشاهدات الموضوع تصل حتى 5GB !

أخي الكريم , فقط ركز معي و تابع الشرح بالصور :

1- توجه إلى لوجة تحكمك على بلوجر

2- توجه نحو القالب للتعديل عليه , و من ثم قم بأخذ نسخة إحتياطية للقالب (backup) حتى تتفادى أي مشكلة قد تواجهك .

3- تأكد أنك تستخدم مكتبة جيكويري (إبحث عن كلمة JQuery للبحث عن رابط إدراج الجيكويري , لو وجدته ممتاز , لو لم تجده أضف الكود أسفله مباشرة فوق 

</head>

)

4- توجه نحو موقع firebase و أنشئ حسابك عبر هذا الرابط .
5- أنشئ قاعدة بيانات في حسابك على الموقع بالإسم الذي تريده
مثل ماهو موضح بالصورة :

سجل الرابط الذي يظهر لك تحت APP URL , لأنك ستجتاجه فيما بعد .

مثل : https://modawin-blogger.firebaseIO.com

6- توجه إلى قالبك , و ابحث عن : 

]]></b:skin>

 فوقه مباشرة أضف هذا الكود :

7- الأن إبحث عن :

</body>

فوقه مباشرة , أضف هذا الكود :

مغيرا https://modawin-blogger.firebaseIO.com بالرابط التطبيق الذي أنشأته .

8- أخر مرحلة , إبحث عن المكان الذي تريد أن تدرج فيه الإضافة بعد إقرأ المزيد أو في تحت العنوان ..الخ ,

يمكنك أن تبحث عن <data:post.body/> 

ستجدها أكثر من مرة , ستحتاج الثانية أو الثالثة حسب قالبك .

فوقه مباشرة , ألصق هذا الكود :

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

Unknown

2:32 ص

اقرأ المزيد

إضافة اداة " تصفح المدونة بشكل افضل " بتقنية الـ CSS3 لمدونة بلوجر

   

السلام عليكم ورحمة الله وبركاته

اقدم لكم اليوم اضافة تصفح المدونة بدون مشاكل 

بتقنية css3 لتضيف الى مدونتك لمسة فنية

اضافة جميلة ولا غنى عنها لاى مدون

صورة من الاضافة

طريقة التركيب

اذهب الى التخطيط--اضافة اداة--html/javascript

اضافة هذا الكود

<center><div class="hovergallery"><a href="https://www.google.com/intl/ar/chrome/browser/" rel="nofollow"><img class="logo" src="http://im37.gulfup.com/YLcCM.png"></a><a href="https://www.mozilla.org/en-US/firefox/new/?utm_source=firefox-com&amp;utm_medium=referral" rel="nofollow"><img class="logo" src="http://im37.gulfup.com/pKuJG.png"></a><a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie" rel="nofollow" style="margin-left: 0px;"><img class="logo" src="http://im37.gulfup.com/Mo1Lg.png"></a></div><style type="text/css">/*Credits: Dynamic Drive CSS Library */.hovergallery img{-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/-moz-transform:scale(0.8); /*Mozilla scale version*/-o-transform:scale(0.8); /*Opera scale version*/-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/-moz-transition-duration: 0.5s; /*Mozilla duration version*/-o-transition-duration: 0.5s; /*Opera duration version*/opacity: 0.7; /*initial opacity of images*/margin: 0 10px 5px 0; /*margin between images*/}.hovergallery img:hover{-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/-moz-transform:scale(1.1); /*Mozilla scale version*/-o-transform:scale(1.1); /*Opera scale version*/box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/opacity: 1;}  </style><div class="hovergallery"> <a href='http://arabetutorial.blogspot.com' style='display: none;' rel='dofollow' >المدونة التعليمية للكمبيوترe.com/safari/" rel="nofollow"><img class="logo" src="http://im37.gulfup.com/SxtCs.png"></a><a href="http://www.opera.com/ar/computer/windows" rel="nofollow" style="margin-left: 0px;"><img class="logo" src="http://im37.gulfup.com/VDQ21.png"></a><a href="http://rockmelt.com/download" rel="nofollow"><img class="logo" src="http://im37.gulfup.com/xrJcf.png"></a></div><style type="text/css"></style></center>

Unknown

1:46 ص

اقرأ المزيد

اضافة تعريف الكاتب بشكلها الجديد

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

شرح طريقة التركيب
1. توجه لقالب >> تحرير ابحث بإستعمال CTRL+F عن <b:skin/><[[
2. ضع الكود التالي فوقه

@font-face {
font-family: 'GESSTwoMediumRegular';
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot');
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot?') format('embedded-opentype'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.woff') format('woff'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.ttf') format('truetype'); 
}
.postauthor {
background: #f8f8f8;
border: 4px solid #4E9E6B;
padding: 10px;
overflow: hidden;
margin: 4px 0px -7px 0px;
}
.postauthor img {
float: right;
background: #fff;
margin: 0 0 0 8px;
padding: 4px;
border: 1px solid #E0E0E0;
border-radius: 3px;
}
.postauthor h4 {
font: normal 14px 'GESSTwoMediumRegular', tahoma;
color: #3D5272;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu2DSwjaVXjo9YHH_oj0ZL4By6dVXIRx0Zvj7rkYcv8VIvGzp_uNz5UiN6gMR07VeP9PLOStvxhIykXDtJ0h82lNodrnuxbED5pkLvwGQpx9fYSf3BGLH9GuLrRh0gN8pMH4cfmUwvMeVP/s1600/user.png) no-repeat 84% 50%;
padding: 0 125px 0;
}
.postauthor a {
color: #5DA86C;
font-size: 14px;
padding-right: 2px;
}
.postauthor p {
font: normal 11px 'GESSTwoMediumRegular';
color: #34495e;
line-height: 2em;
text-shadow: 0 1px 0 #fff;
}
/*----------social postauthor------------*/
#social_postauthor {
margin: 16px 0 0;
overflow: hidden;
background: #fff;
padding: 4px;
border-radius: 3px;
border: 1px solid #ddd;
}
#social_postauthor ul{margin:0;padding:0;overflow:hidden;}
#social_postauthor ul li {
float: right;
padding: 0;
margin: 3px 2px;
border-radius: 2px;
transition: 0.5s;
}
#social_postauthor ul li a{
display: inline-block;
float: right;
font-size: 0;
height: 30px;
line-height: 0;
text-indent: -9999em;
width: 30px;
transition:0.5s;
}
#social_postauthor ul li:hover{
transform:rotate(360deg);
-ms-transform:rotate(360deg); /* IE 9 */
-webkit-transform:rotate(360deg); /* Safari and Chrome */
-moz-transform:rotate(360deg); /* Safari and Chrome */
-o-transform:rotate(360deg); /* Safari and Chrome */
transition:0.5s;
}
#social_postauthor ul li span{
font: normal 13px 'GESSTwoMediumRegular';
text-shadow: 0 1px 0 #fff;
padding: 4px 4px 4px 4px;
}
#social_postauthor .txt {
padding: 4px 0;
}
#social_postauthor .fb {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYEoXs0Zspiey4BTIZ3rQTKFKKf9THU9V2vEK-NMfIKD-GC7YjT1Rup9c49eykffoWz9gQmzIkBfEtpwuyhMXFbKtZJNKFymt1C3bm4br5Uw5dslwSpgSugm6ZoDh3K1EMwKXpDV9PY4Y/s1600/fb.png) no-repeat 50% center;
background-color: #003366;
}
#social_postauthor .tw {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7szQbeq7Xrl8IZsQ0rlLqQ2V4PFa3116-upZ6GfvPBl3cIj3XS9gvgPxU-aH8HVlNk6iS-ztweZCUqpe6cuOV4xq-tEwXlN9ud9Ih2QrM52vq0Btc5asYKUc27m9gVPmeapZgzqTcSHI/s1600/tw.png) no-repeat 50% center;
background-color: #0ba6f7;
}
#social_postauthor .gl {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio5I1f92YQFd9qrHFJHaMIgfOQcFiwpmsRVkvonGJa43m_G_kKVu3Z8369HFvJbd6wf6buW_SuyudlbxRF4XLaJEnxGdnKnDbemk87npH40F36gxY0BxL_bAxGXfEAdQfnEDIsOIuX9-o/s1600/g.png) no-repeat 50% center;
background-color: #dc311b;
}

.subspabox {
background: #f8f8f8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1QB6mH5tpwyAArDjF86gdK_Fy9gh9bDCGs5L8zVXAONFqCZr4zWYT_wWCSe8m6he2Il94WaCf88KSsFEPKX5mW-8beySbuo0-aj-SRgW1tb8NvdDJ2l99VxR7I89wD8mfP2-1s7W4cb0/s1600/contact-gr.png) no-repeat 98% 50%;
font-family: 'GESSTwoMediumRegular';
color: #293949;
margin: 4px;
width: 62%;
text-align: right;
padding: 6px 35px 6px 0;
border: 1px solid #ddd;
border-radius: 3px;
float: left;
}

2. ابحث عن <div class='post-footer'> 

* قد تجد الكود متكرر 4 مرات أو أقل الكود الأخير هو المقصود

5. ضع الكود التالي أسفله

<div class='postauthor'>
<img height='80' rel='author' src='http://im77.gulfup.com/YkII2b.jpg' width='80'/>
<h4>
الكاتب :
  <a href='http://www.ar1web.com' target='_blank'>
<data:post.author/>
</a>
</h4>
<p>
حسام مدون مغربي الجنسية &#1644; مصمم ومبرمج قوالب بلوجر حر ..  مهوس ألعاب ذو عدة مدونات &#1644; لكن مع كثرة العمل قررت الإقتصار على مدونة واحدة وهي مدونة عرب ويب التي تأسست بتاريخ 2014/04/01 تم تغيير المحتوى لما يحبه المدون ولكي أساعد كل شخص ولو بشيئ بسيط  أحب الجميع ولا أكره أحد .
</p>
<div class='rw-js-container'/>

<div id='social_postauthor'>
<ul>
<li class='txt'>
<span>
تواصل معي :
</span>
</li>
<li class='fb'>
<a href='https://www.facebook.com/' rel='nofollow' target='_blank'>
fb
</a>
</li>
<li class='tw'>
<a href='#' rel='nofollow' target='_blank'>
tw
</a>
</li>
<li class='gl'>
<a href='https://plus.google.com/u/0/+iHussam' rel='nofollow' target='_blank'>
gl
</a>
</li>

<form action='http://feeds.feedburner.com/ar1web/TFDh' id='subspa' method='post' onsubmit='window.open(&apos;http://feeds.feedburner.com/ar1web/TFDh;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>

<input class='subspabox' onblur='if (this.value == &quot;&quot;) {this.value = &quot;توصل بجديد المدونة عبر الإشتراك ببريدك الإلكتروني...&quot;;}' onfocus='if (this.value == &quot;توصل بجديد المدونة عبر الإشتراك ببريدك الإلكتروني...&quot;) {this.value = &quot;&quot;;}' type='text' value='توصل بجديد المدونة عبر الإشتراك ببريدك الإلكتروني...'/>
</form>
</ul>
</div>
</div>

* غير كل ما لونهبالبرتقالي بما يناسب
* لتغيير الصورة فهي محددة باللون الأخضر

Unknown

6:08 ص

اقرأ المزيد

كيفية وضع أكواد HTML في مدونات بلوجر Blogger بطريقة بسيطة و منظمة

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

هذا الدروس يعتبر من أهم الدروس لكل المهتمين باستخدام مدونات بلوجر

وهو كيفية اضافة كود HTML في تدويناتك دون حدوث مشاكل.

وسوف نشرح اليوم طريقتين سهله جدا

الطريقه الاولى

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

Unknown

5:59 ص

اقرأ المزيد

سلايدشو احترافي يقوم بعرض مواضيع المدونه تلقائيا (سلايدشو ليوماجازين)

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

  

 

كيفية اضافة هذه الاداه الى مدوناتكم

   1- من  لوحة التحكم -> قالب -> تحرير HTML 

Unknown

5:55 ص

اقرأ المزيد