تدوينة تجريبيه في القالب

نص عبارة عن H1

نص عبارة عن H2

نص عبارة عن H3

تجربة رابط

نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي .

+

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

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

لكي لا أطيل عليك ندخل في صلب الموضوع

الأن قم بالدخول لقالب المدونة و ابحث عن الكود التالي <data:post.body/> قد تجد أكثر من كود حسب القالب سيكون الثاني و إن لم يعمل جربه على باقي الأكواد الموجودة فسيعمل مع أحدها.

بعد ذالك قم بلصق الكود التالي تحث الأول مباشرة

<style> 

/*--------Flipper Sharing Widget ------*/ 

.flipper a { 

display:block; 

height:48px; 

width:48px; 

padding:0 4px; 

float:left; 

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg6ECCXs1brX6qzs4Dx9jru1udkXry69rbB2MoBoMoQFBiBoEooyoj68Fkss3HQSVj7QHgJR8DI-LTgfkMlTdUS7rGYmNKh7ZW5xEHt4xDFAPkMJ5CAvAKBCCDCQQI5VUKmE7cv5HDJofj/s1600/flipper.png) no-repeat; 

-webkit-transition: ease-in 0.15s all;    

-moz-transition: ease-in 0.15s all;    

-o-transition: ease-in 0.15s all;    

-ms-transition: ease-in 0.15s all;    

transition: ease-in 0.15s all; 

cursor:pointer;

}

.flipper a.googleplus { 

background-position: 0px -348px;

} 

.flipper a.googleplus:hover { 

background-position: 0px -406px;

}

.flipper a.pinterest { 

background-position: 0px -464px; 

} 

.flipper a.pinterest:hover { 

background-position: 0px -522px;

}

.flipper a.delicious { 

background-position: 0px 0px; 

} 

.flipper a.delicious:hover { 

background-position: 0px -58px;

} 

.flipper a.digg { 

background-position: 0px -116px;

} 

.flipper a.digg:hover { 

background-position: 0px -174px;

} 

.flipper a.stumbleupon { 

background-position: 0px -812px;

} 

.flipper a.stumbleupon:hover { 

background-position: 0px -870px;

} 

.flipper a.technorati { 

background-position: 0px -928px;

} 

.flipper a.technorati:hover { 

background-position: 0px -406px;

} 

.flipper a.twitter { 

background-position: 0px -928px;

} 

.flipper a.twitter:hover { 

background-position: 0px -986px;

} 

.flipper a.facebook { 

background-position: 0px -232px;

} 

.flipper a.facebook:hover { 

background-position: 0px -290px;

} 

.flipper a.reddit { 

background-position: 0px -580px;

} 

.flipper a.reddit:hover { 

background-position: 0px -638px;

}

.flipper a.rss { 

background-position: 0px -696px;

} 

.flipper a.rss:hover { 

background-position: 0px -754px;

}

.Pleaseshare{ 

margin:10px 0px; 

color:#333333; 

font-weight:bold; 

font-size:20px; 

font-family:sans-serif;

} 

</style>

<div class='flipper'> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class="Pleaseshare"> 

إن أعجبك الموضوع قم بنشره) </div>

<!--Google Plus--> 

<a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>

<!--Facebook--> 

<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>

<!-- Twitter --> 

<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>

<!-- Pinterest --> 

<a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>

<!-- Delicious --> 

<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>

<!--DIGG--> 

<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>

<!--Stumble--> 

<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>

<!-- Reddit --> 

<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>

<!--RSS --> 

<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Bookmark plz :&gt;'/> 

</b:if></div>

<div style="clear:both"/>

1. ما هو باللون البرتقالي يمكنك تغيره بما تريد فهو لون النص.
2. أما الكلام باللون الأحمر يمكنك كتابة ما تريد أو تركه كما هو.
3. بعد ذالك قم بحفظ القالب و اذهب للمدونة لترى النتيجة.

+

طريقة إنشاء شريط الشبكات الإجتماعية العائم

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

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

إبحث عن الكود التالي (لمن ليس له خبرة في منصة بلوجر يزور هذا الرابط فسيساعده أساسيات بلوجر

</body> و قم بوضع الكود الموجود بالأسفل فوقه مباشرة. 

<!-- import Scripts -->

<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/mblsocialbar.js"></script>

<div id="scolder">

<script type="text/javascript" src=" http://mbl-flipper-google-blogger.googlecode.com/files/socialflipmin.js"></script></div>    

<link href='http://mybloggerlab.com/StyleSheet/mblsocialbar.css' rel='stylesheet' type='text/css'/>

<!-- Social Media Bar For Blogger  -->  

<script type="text/javascript">

$(document).ready(function(){

$.mblSocialBar({

items: {

twitter: { url: '#', text: 'تابعني على تويتر' },

facebook: { url: '#', text: 'تابعني على الفيسبوك' },

rss: { url: '#', text: 'الخلاصات' },

google: { url: '#', text: 'تابعني على جوجل +' },

youtube: { url: '#', text: 'قناتي على اليوتيوب' },

orkut: { url: '#', text: 'تابعني على أوركيت' },

myspace: { url: '#', text: 'تابعني على مايسبيس' },

digg: { url: '#', text: 'تابعني على دييغ' },   

},

show: 8,

position: "left",

skin: "clear"

});  

});

</script>

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

بعد التغير قم بحفظ القالب و إذهب لمعاينته على مدونتك.

+