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

(رَبَّنَا آمَنَّا بِمَا أَنزَلْتَ وَاتَّبَعْنَا الرَّسُولَ فَاكْتُبْنَا مَعَ الشَّاهِدِينَ) [آل عمران/53[

.........................................

أخواني مرحبا بكم بمدونة برو ريراك 

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

  

  

مميزات القالب

1. قالب انيق ومميز واحترافي
2. القالب مصمم بشكل مسطح
3. يتميز بخفة في التصفح
4. تعريف الكاتب بالصفحة الرئيسية
5. يحتوي على خطوط ويب مميزه واحترافيه
6. متوافق مع اشهر المتصفحات
7. يتميز القالب بهايدر حصري ومنسق بطريقه جميله
8. وهناك الكثير من المميزات الاحترافيه الذي سوف ادعكم تكتشفونها بانفسكم

معاينة وتحميل القالب

 معاينة القالب       تحميل القالب 

تخصيص القالب

الخطوة 1 : تخصيص القائمة بالهيدر
اذهب الى بلوجر > ثم تحرير html
ابحث عن هذا الكود

<div class='navbar-collapse collapse'>

          <ul class='nav navbar-nav navbar-left'>

            <li>

              <a href='#'>

                أعمالنا

              </a>

            </li>

            <li>

              <a href='#'>

                قوالب بلوجر

              </a>

            </li>

            <li>

              <a href='#'>

               اضافات بلوجر

              </a>

            </li>

            <li>

              <a href='#'>

                اتصل بنا

              </a>

            </li>

          </ul>

        </div>

وقم بتغير الأقسام بما يناسب مدونتك واختياراتك
ولا تنسى تغير رمز # برابط القسم الذي اخترته مثلا

 <li>

              <a href='http://testrirak.blogspot.com/search/label/قوالب بلوجر'>

                قوالب بلوجر

              </a>

            </li>

وهكذا حتى تنتهي من الأقسام

الخطوة 2 : تخصيص تعريف الكاتب
ابحث عن هذا الكود

 <div class='hero-block'>

            <img class='img-circle' height='150' src='https://lh4.googleusercontent.com/-mwQ3mUGmgfI/VLFs9AqwyaI/AAAAAAAADFk/kdWWwnCku_E/s506/FlygxJ.jpg' width='150'/>

            <h1>

              ريراك حميد

            </h1>

            <p>

              مرحبا أنا المسؤول عن هذا القالب ومطوره 

              <br/>

              القالب بسيط جدا وسهل لتعامل معه&#1548; يصلح لمدونات الخاصة بعرض القوالب والإضافات والتطوير

              <br/>

              يمكنك التعديل على هذه الكتابة بوصف لك             </p>

          </div>

ثم قم بتغيير المكتوب بالغة العربية الى ما يخصك
وغير هذا الرابط https://lh4.googleusercontent.com/-mwQ3mUGmgfI/VLFs9AqwyaI/AAAAAAAADFk/kdWWwnCku_E/s506/FlygxJ.jpg الى رابط صورتك الشخصية

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

أقدم لكم قالب بلوجر رائع لعرض الأفلام أجنبي يتميز بخصائص كثيرة رائعة في طريقة عرض المواضيع والفيديوهات كما يتميز بقوة في التصميم يحتوي على مكونات من css3 وhtml5 و jqeury، ومتوافق طبعا مع جميع الأجهزة

مميزات القالب 

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

معابنت القالب
تحميل القالب

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

انتقل إلى لوحة تحكم مدونتك،
القالب
تحرير html
ابحث عن الوسم ]]></b:skin>
قم بلصق الكود الأتي فوق ]]></b:skin>

/*------------PakMax.net subwidget---------------*/
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
.roundbtn {
margin-right: 20px;
}
#pmmash {
border-style: solid;
border-color:#34495e;
border-width: 5px;
padding:10px;
background:#ecf0f1;
width: 450px;

} #pmmash a {
color: white;
} .roundbtn {
width: 75px;
height: 75px;
border: 5px solid #9a9a9a;
display: inline-block;
background-color: #6c6161;
-moz-border-radius: 75px;
-webkit-border-radius: 75px;
border-radius: 75px;
-moz-transition: all 35ms linear;
-o-transition: all 35ms linear;
-webkit-transition: all 35ms linear;
transition: all 35ms linear;
-ms-transition: all 35ms linear;
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.roundbtn.sea {
border: 5px solid #1abc9c;
background-color: #16a085;
}
.roundbtn.red {
border: 5px solid #e74c3c;
background-color: #c0392b;
}
.roundbtn.blue {
border: 5px solid #51a9ff;
background-color: #0077ea;
}
.roundbtn.dark {
border: 5px solid #34495e;
background-color: #2c3e50;
}
.roundbtn .inner {
position: relative;
width: 75px;
height: 75px;
background-color: #9a9a9a;
margin-top: -8px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-moz-transition: margin 35ms 35ms linear, box-shadow 35ms linear;
-o-transition: margin 35ms 35ms linear, box-shadow 35ms linear;
-webkit-transition: margin 35ms 35ms, box-shadow 35ms linear;
-webkit-transition-delay: linear, 0s;
transition: margin 35ms 35ms linear, box-shadow 35ms linear;
-ms-transition: margin 35ms 35ms linear, box-shadow 35ms linear;
}
.roundbtn.sea .inner {
background-color: #1abc9c;
}
.roundbtn.red .inner {
background-color: #e74c3c;
}
.roundbtn.blue .inner {
background-color: #51a9ff;
}
.roundbtn.dark .inner {
background-color: #34495e;
}
.roundbtn:active .inner {
margin-top: 0;
-moz-box-shadow: #6c6161 0 8px 0 inset;
-webkit-box-shadow: #6c6161 0 8px 0 inset;
box-shadow: #6c6161 0 8px 0 inset;
-moz-transition: margin 35ms linear, box-shadow 17.5ms 17.5ms linear;
-o-transition: margin 35ms linear, box-shadow 17.5ms 17.5ms linear;
-webkit-transition: margin 35ms linear, box-shadow 17.5ms 17.5ms;
-webkit-transition-delay: 0s, linear;
transition: margin 35ms linear, box-shadow 17.5ms 17.5ms linear;
-ms-transition: margin 35ms linear, box-shadow 17.5ms 17.5ms linear;
}
.roundbtn:active.sea .inner {
-moz-box-shadow: #16a085 0 8px 0 inset;
-webkit-box-shadow: #16a085 0 8px 0 inset;
box-shadow: #16a085 0 8px 0 inset;
}
.roundbtn:active.red .inner {
-moz-box-shadow: #c0392b 0 8px 0 inset;
-webkit-box-shadow: #c0392b 0 8px 0 inset;
box-shadow: #c0392b 0 8px 0 inset;
}
.roundbtn:active.blue .inner {
-moz-box-shadow: #0077ea 0 8px 0 inset;
-webkit-box-shadow: #0077ea 0 8px 0 inset;
box-shadow: #0077ea 0 8px 0 inset;
}
.roundbtn:active.dark .inner {
-moz-box-shadow: #2c3e50 0 8px 0 inset;
-webkit-box-shadow: #2c3e50 0 8px 0 inset;
box-shadow: #2c3e50 0 8px 0 inset;
}
.text {
position: absolute;
top: 32px;
left: 0;
right: 0;
text-align: center;
text-transform: uppercase;
font-family: Courier New;
font-size: 13px;
color: white;
font-weight: 300;
letter-spacing: 1px;
text-shadow: rgba(0, 0, 0, 0.5) 0 0 5px;
}
#credits
{
float:right;
font-size:10px;
}#credits a {color:black;}
/* Subscribe Box ---------------------- */
.subscribe{width:100%;height:100px;}

.subscribe h3{color:#fff;margin-bottom:2px;font-weight:600}
.subscribe form{float:center;margin:28px}
.subscribe form .inptfld{font-family:Open Sans;outline:none;border:none;font-size:15px;padding:10px;border-radius:3px;width:250px}
.subscribe form {font-famiy:open sans;outline:none;border:none;padding:10px;border-radius:3px;color:#fff;cursor:pointer;margin-left:10px}
.subscribebtn{font-famiy:open sans;outline:none;border:none;padding:10px;border-radius:3px;color:#fff;cursor:pointer;margin-right:10px; position:relative; left:290px; bottom:40px;font-weight:bold;}
.subscribe form .subscribebtn:hover{background:#2c3e50;-webkit-transition:all .3s ease 0;-moz-transition:all .3s ease 0;-ms-transition:all .3s ease 0;-o-transition:all .3s ease 0;transition:all .3s ease 0}
/*--------------PakMax.net subwidget-------------*/

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

<div id="pmmash">

<div class="roundbtn dark"><div class="inner"><span class="text"><a href="Your Facebook page URL"><i class="fa fa-facebook fa-2x"/></a></span></div></div>

<div class="roundbtn red"><div class="inner"><span class="text"><a href="Your Google+ page URL"><i class="fa fa-google-plus fa-2x"/></a></span></div></div>

<div class="roundbtn blue"><div class="inner"><span class="text"><a href="Your Twitter URL"><i class="fa fa-twitter fa-2x"/></a></span></div></div>

<div class="roundbtn sea"><div class="inner"><span class="text"><a href="Your LinkedIn URL"><i class="fa fa-linkedin fa-2x"/></a></span></div></div>

<div class="subscribe">

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=prorirak', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

<input class="inptfld" name="email" placeholder=" اكتب اميلك هنا" style="font-family:Open Sans" type="text"/>

<input name="uri" type="hidden" value="prorirak"/>

<input name="loc" type="hidden" value="en_US"/>

<input class="subscribebtn" type="submit" value="اشترك الأن"/>

</form>

</div>

<div id="credits">

Widget By <a href="http://pro-rirak.blogspot.com">pro-rirak</a></div>

</div>

هذا ان كنت تريد إضافة الأداة أسفل المشاركات، يمكنك وضعها حيث تريد فقط ضع أكواد الستيل css فوق الوسم ]]></b:skin> وضع الكود الأخر الخاص بوسم div في السيد بار عن طريق html/javascript أو أي مكان ذاخل القالب

التخصيص
غير Your Facebook page URL برابط حسابك على الفيسبوك
غير Your Google+ page URL برابط حسابك على جوجل بلس
غير Your Twitter URL برابط حسابك على التويثر
غير Your LinkedIn URL برابط حسابك على لينكيدين
غير http://feedburner.google.com/fb/a/mailverify?uri=prorirak برابط البرنير الخاص بك حتى يتوصل المشتركين بأخر منشوراتك حال نشؤها
غير فقط prorirak بالأسم المستعمل من طرفك ب feedburner الأسم الموجود في أخر هذا الرابط http://feedburner.google.com/fb/a/mailverify?uri=prorirak

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

يمكنك معاينة الإضافة من هنا قائمة شعاعية  

والأن الى طريقة التركيب

الخطوة 1 : اضافة أكواد الستيل
 اذهب إلى بلوجر
 القالب
 تحرير html 
 ابحث عن ]]></b:skin>
 قم بلصق الكوت الأتي فوق ]]></b:skin>

@import "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";

.pm-radialnev {

  background: auto;

    position:$endside;

  

}

.circular-menu {

  width: 250px;

  height: 250px;

  margin: 0 auto;

  position: relative;

}

.circle {

  width: 250px;

  height: 250px;

  opacity: 0;

  -webkit-transform: scale(0);

  -moz-transform: scale(0);

  transform: scale(0);

  -webkit-transition: all 0.7s ease-out;

  -moz-transition: all 0.7s ease-out;

  transition: all 0.7s ease-out;

}

.open.circle {

  opacity: 50;

  -webkit-transform: scale(1);

  -moz-transform: scale(1);

  transform: scale(1);

}

.circle a {

  text-decoration: none;

  color: #5b97f9;

  display: block;

  height: 40px;

  width: 40px;

  line-height: 40px;

  margin-left: -20px;

  margin-top: -20px;

  position: absolute;

  text-align: center;

}

.circle a:hover {

  color: #34495e;

}

.menu-button {

  position: absolute;

  top: calc(50% - 30px);

  left: calc(50% - 30px);

  text-decoration: none;

  text-align: center;

  color: white;

  border-radius: 50%;

  display: block;

  height: 40px;

  width: 40px;

  line-height: 40px;

  padding: 10px;

  background: #5b97f9;

}

.menu-button:hover {

  background-color: #34495e;

} #pmcredits{display:none;}

  ثم اذهب الى التخطيط 
 قم بإضافة أداة 
 اختر HTML/Javascript وأنسخ الكود الأتي بها 

<div class="pm-radialnev">

<nav class="circular-menu">

  <div class="circle">

    <a href="#" class="fa fa-home fa-2x"></a>

    <a href="#" class="fa fa-facebook fa-2x"></a>

    <a href="#" class="fa fa-twitter fa-2x"></a>

    <a href="#" class="fa fa-linkedin fa-2x"></a>

    <a href="#" class="fa fa-github fa-2x"></a>

    <a href="#" class="fa fa-rss fa-2x"></a>

    <a href="#" class="fa fa-pinterest fa-2x"></a>

    <a href="#" class="fa fa-asterisk fa-2x"></a>

  </div>

  <a href="#" class="menu-button fa fa-bars fa-2x"></a>

</nav>

</div>

 <div id="pmcredits">         <a href="http://www.pakmax.net/">PakMax</a></div>     <script type='text/javascript'>

var items = document.querySelectorAll('.circle a');

for(var i = 0, l = items.length; i < l; i++) {

  items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";

  items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";

}

document.querySelector('.menu-button').onclick = function(e) {

   e.preventDefault(); document.querySelector('.circle').classList.toggle('open');

}

                                                                                           </script>

 قم بالضغط على حفظ ومبروك عليك الإضافة

ملاحظة : لا تنسى تغيير علامة  #  بالروابط الخاصة بك 

اضاقة مهمة لكل مدونة عبارة عن أزرار الإعجاب والمشاركة الخاصة بمواضيع مدونة بلوجر

الخطوة 1 : اضافة أكواد الستيل
 اذهب إلى بلوجر
 القالب
 تحرير html 
 ابحث عن ]]></b:skin>
 قم بلصق الكوت الأتي فوق ]]></b:skin>

#pmbottom

{

position:fixed;

bottom:0px;

}

#barcredits

{

text-align:right;

font-size:12px;}

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

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

<div id='pmbottom'>

<div style='background:#ecf0f1; border:1px solid #ddd; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; padding:5px; box-shadow: 3px 3px 3px #CCCCCC; height:30px;'> <table border='0'> <tr>

<td><!-- Twitter -->

<a class='twitter-share-button' data-count='horizontal' data-lang='en' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'> </script> </b:if> </td>

<td><!--Facebook-->

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:0px; width:100px; height:20px;'/> </td>

<td><div style='margin-right:25px;'><!-- STUMBLE UPON -->

<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/></div> </td> <td><div style='margin-right:5px;'><!-- GOOGLEPLUS --> <g:plusone expr:href='data:post.url' size='medium'/> </div> </td>

<td><!-- AddThis Button BEGIN -->

<div class='addthis_toolbox addthis_default_style '> <a class='addthis_counter addthis_pill_style'/> </div> <script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de3b2d654f56f28' type='text/javascript'/> <script type='text/javascript'> var addthis_config = { ui_cobrand: &quot;PakMax.net&quot;, ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot; } </script>

  <!-- AddThis Button END --></td> <td><div id='barcredits'><a href ='pro_rirak.blogspot.com'>PakMax</a></div></td></tr> </table></div></div>

</b:if>

تخصيص
بعد الإنتهاء من اضافة الأكواد في القالب قم بتخصيص الإضافة للتوافق مع قالبك
لتغير لون خلفية الإضافة من هذا الكود ....
قم بتغيير pro_rirak.blogspot.com الى اسم موقعك الخاض

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

كيفية إضافة ترقيم لصفحات بلوجر 2015
عملية إضافة الترقيم  للصفحة  سهل جدا عبر خطوتين

اضافة كود الستيل أو css
ثم اضافة كود الجكويري Jquery

الخطوة 1 : اضافة أكواد الستيل
اذهب إلى بلوجر
القالب
تحرير html
ابحث عن ]]></b:skin>
قم بلصق الكوت الأتي فوق ]]></b:skin>

/*-----------------numbered page navigation for blogger by PakMax------------------*/ #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;opacity:.8;color:#FFF;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out} #top-ad{width:728px;height:90px;margin:0 auto;margin-top:20px} #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;} .showpageOf{display:none!important} #blog-pager .pages{border:none;} /*-----------------numbered page navigation for blogger by PakMax------------------*/

الخطوة 1 : اضافة الجكويري jq
ابحث عن هذا الوسم ألصق فوق  </head> الكود الأتي

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
/*<![CDATA[*/
var perPage=7;
var numPages=6;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
/*]]>*/
</script>
<script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>

أخيرا قم بحفظ التغييرات في القلب

تخصيص
يمكنك تحديد عدد المواضيع التي سيتم عرضها في كل صفحة عن طريق "var numperPage=7" 
يمكنك تحديد عدد الصفحات التي ستظهر في الصفحة عن طريق "var numPages=6"
يمكنك تغيير النص الذي به next و Previous الى اللغة العربية
next = التالي
Previous = السابق
وذلك عن طريق "var prevText ='« Previous'; var nextText ='Next »';"

مرحبا اخواني الكرام أقدم لكم اضافة رائعة وجميلة واحترافية لأقسام المدونة

الخطوة 1 : تحرير كود القالب
اذهب إلى بلوجر
القالب
تحرير

الخطوة 2 : التثبيت
ابحث عن <b:skin>
قم بلصق الكوت الأتي فوق <b:skin>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"></link>

والأن، ابحث عن ]]></b:skin>
وقم بنسخ الكود التالي ولصقه فوق ]]></b:skin>

/*--------------- Cloud Labels ---------------*/ .widget-content.list-label-widget-content ul li a { float: left; background-color: #00aa9f; padding: 6px 10px; margin: 1px; color: #fff!important; font-size: 82%; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .widget-content.list-label-widget-content span { display: none!important; } .widget-content.list-label-widget-content ul li a:hover { text-decoration: none; background-color: #008d84; color: transparent!important; text-shadow: 0 0 3px #fff!important; } .widget-content.list-label-widget-content ul:hover { color: transparent!important; } .widget-content.list-label-widget-content ul li span { float: right; overflow: hidden; margin: 7px 0 0 0; display: inline; color: #6f7584; } .widget-content.list-label-widget-content ul li a:before { font-family: 'FontAwesome'; font-weight: normal; font-style: normal; text-decoration: none; content: "\f02b"; float: left; margin: 0 6px 0 0; display: block!Important; opacity: 0.5; } .widget-content.list-label-widget-content { padding: 10px 20px; }

ثم اذهب الى التخطيط
قم بإضافة أداة
اختر التسميات

الخطوة 3 : الحفض
قم بالضغط على حفض

التخصيص
غيير  #00aa9f لتغيير الخلفية
غيير #008d84 لون الخلفية عندا المرور عليها بالموس