[ Blogger ] الطريقة السريعة لوضع شعار Logo المدونة على شكل صورة Image

أهلا بالإخوان الأعزاء زوار و مشرفي و أعضاء منتديات mekha

في درس جديد من دروس البلوغر ^_^

سنتطرق إخواني و نجيب على إستفسارات زوانا فيما يخص قوالب بلوغر

حيث سنشرح طريقة وضع شعار Logo على شكل صورة Image بدل العنوان Title

نفتح أولا مدوناتنا

و نختار المدونة التي نريد تغيير القالب بالطبع

و نختار

نختار التخطيط ... شيئ سهل إخواني لحد الآن

يظهر لنا الشيئ المهم الآن

 يظهر لنا تخطيط قالبنا

نحتاج فيه شيئ جد مهم .. و هو موجود 100 % في كل مدونة و هو " رأس الصفحة "

بإمكاننا تمييزه بالطريقة التي في الأعلى و بعدها نختار " تحرير "

و صلنا إلى الجزء الأهم

لتغيير شعار الموقع إلى صورة نقوم بالتالي

حيث نختار صورة من جهاز الكمبيوتر أو من رابط أنترنت

* نضعها بدلا من العنوان و الوصف

بعدها نضغط

و نكون قد أنهينا تغيير شعارنا إلى صورة

و هكذا إخواني نكون قد أنهينا شرح طريقة تغيير الشعار إلى صورة

بارك الله فيكم إخواني على كرم المتابعة

إن شاء الله يفيدكم الدرس

وفق الله الجميع و لا تنسونا من صالح دعائكم

إقرأ المزيـــد

قوالب بلوجر معربة و احترافية 2015

الكاتب : Abdessamad Chbani

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

القوالب المتوفرة  :

• قالب لمواقع البث المباشر والبث الحي للمباريات
• قالب مدونة المحترف الجديد غاية في الروعة
• قالب على شكل مجلة الكترونية احترافية شبيه بقالب موقع TRUCSINFORMATIQUE
• قالب تقني به سلايد شو احترافي شبيه بمدونة المحترف
• قالب  Rifqi احترافي للمواقع أجنبية مجانا قالب روعة
• والمزيد من قوالب احترافية عربية...........
• جديد : قالب راصد نيوز Rased News
• جديد : قالب مدونة صقر العرب
• جديد : القالب الإخبارى Simlpex Celebrity

1. جديد : قالب راصد نيوز Rased News

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

2.  جديد : قالب مدونة صقر العرب :

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

3. جديد : القالب الإخبارى Simlpex Celebrity

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

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

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

5.  تحميل قالب لمواقع البث المباشر والبث الحي للمباريات

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

6. تحميل قالب  Rifqi احترافي للمواقع أجنبية مجانا قالب روعة

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

7. تحميل قالب مدونة المحترف الجديد غاية في الروعة

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

8. قالب تقني به سلايد شو احترافي شبيه بمدونة المحترف

إقرأ المزيـــد

شرح تركيب السلايد شو في مدونة بلوجر

شباب اليوم معنا درس
تركيب السلايد شو في مدونة بلوجر
الكثير من عندنا يتسائل كيف يتم تركيبه

الدرس بسيط جدا
بس المطلوب تركيزك 

يلا نبدي

اول شي

تذهب إلى لوحة تحكم مدونتك وتضغط على قالب ثم تحرير html وتضع العلامة على مربع توسيع قالب واجهة المستخدم ثم تضغط في الكيبورد على ctrl+f وتبحث عن هذا الكود

رمز PHP:

 ]]></b:skin>  

بعد أن تجده قم بوضع هذا الكود قبله

رمز PHP:

#featured{margin-bottom:10px;
}
.sliderwrapper{position: relative;border-bottom-width: 6px;height: 124px;
}
.sliderwrapper .contentdiv{visibility: hidden;position: absolute;height: 100%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;padding:15px 15px 15px 0px;background:#f1f1f1;border-radius: 5px 5px 5px 5px;box-shadow: 0 0 3px #ABABAB;margin-top:10px;
}
.pagination{text-align: right;margin-top: 50px;padding:5px;
}
.pagination a{font:11px Arial;color:#a3a3a3;padding:4px 8px 4px 8px;
}
.pagination a.selected{color:#4f4f4f;}
.pagination .prev,.pagination .next { color:#EAEAEA;font-size:0px; background:none; padding:0px; }
.featuredPost{width:410px;padding:0px 10px 10px 10px !important;bottom:0;float:left !important;margin-right: 54px;
}
.featuredPost a{color:#515151;font: 18px "Microsoft Sans Serif";margin:0;padding:0;
}
.featuredPost h2{margin:0 0 8px 0;}
.featuredPost span{font-size:11px; margin:0; color:#797979;}.featuredPost p{font-size:12px; margin:4px 0 0 0; color:#797979;}.sliderPostPhoto a img{float: right !important;}
.sliderPostPhoto{float: right !important; width:100px !important;}  

إبحث عن هذا الكود

رمز PHP:

 </head>  

بعد أن تجده قم بوضع هذا الكود قبله مباشرة 

رمز PHP:

<script>/* Script from:http://simplexdesign.blogspot.com/ */imgr = new Array();imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg";showRandomImg = true;aBold = true;summaryPost = 140;numposts1 =15;label1 = "معهد ترايدنت العربية";
function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";postdate = entry.published.$t;
if(j>imgr.length-1) j=0;img[i] = imgr[j];s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;
}}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="155" height="121" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';document.write(trtd);j++;
}}
</script>  

بعد إضافته قم بتغيير كلمة معهد ترايدنت العربية باللون الأحمر إلى القسم الذي تريده أن يضهر في السلايد شو

وقم أيضا بتغيير الرقم 15 باللون الأخضر إلى عدد المواضيع التي تريدها أن تظهر على السلايد شو

قم بالبحث مرة أخرى عن هذا الكود

رمز PHP:

</body>  

وقم بإضافة هذا الكود قبله 

رمز PHP:

<script src='http://dl.dropbox.com/u/12924430/contentslider.js'></script>
<script>featuredcontentslider.init({id: "slider1", //id of main slider DIVcontentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.enablefade: [true, 0.5], //[true/false, fadedegree]autorotate: [true, 6000], //[true/false, pausetime]onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)}
})
</script>  

*وفي الأخير قم بالبحث عن هذا الكود

رمز PHP:

  <div id='main-wrapper'>  

وقم بإضافة هذا الكود بعده

رمز PHP:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div id='featured'>
<div class='sliderwrapper' id='slider1'>
<script>document.write(&quot;&lt;script  src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);</script></div>
<div class='pagination' id='paginate-slider1'>
</div>
</div>
</b:if>  

بعد هذا كله قم بالضغط على حفظ التغييرات ومبروك عليك السلايد شو

في النهاية اتمنى ان يكون الدرس قد افادكم
تحياتي

إقرأ المزيـــد

تركيب سلايد شو رائع بشكل الاكورديون لبلوجر 2015

اولا اذهب الى القالب البلوجر ثم اختار المكان الذى تود ان تضع الاسلايد شو به 

والصق كود  html التالى :-
--------------------------------------------------------------------------------------------------------------------------

<div class='acc'>
<ul>

<li>
<a href='http://qassemblog.blogspot.com/'>الموضوع الاول</a>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT3cVrvA8Ig1oBPw7Uau_KhR7HURTOpOQK2NyrHVTxwIVYC6o4Wahpy2jO_8YXyf-GCCrW9ezylyFJfTW7mmuLIqDaqeG40KPgZ6-EexegCMdmmcbDvuvLmsucN60537xCgiP_BdAIZwk/s1600/Full-Hd-Wallpapers-1080p-2.jpg'/>
</li><li>

<a href='http://qassemblog.blogspot.com/'>الموضوع الثانى</a>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPF16tnlO1duWooHLngwAM3pnfB_K92GvB_2X63uBgzh9Zo8EAvP5aqUwpW5FmRIcKliO0z_SSNyR9qlPxLh10a411J-SK_-gxMwgWMiq7Qldw82P2rPsmlC35aGB4yibvV_45c8sBnL8/s1600/Free%252BHD%252BWallpapers%252B8.jpg'/>
</li><li>
<a href='http://qassemblog.blogspot.com/'> الموضوع الثالث</a>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2c3vJ4xTS0POVfShNIs1KEK9dfISUwFxgxEMtf2e5ZhRUr71Gcd_vfl_1sOcG6HNWqw5ZeZA4WcNYJMGmQ4vZHa1tj4FvvM97jwd4bYS9sb5FNTYGgAp9o_PlOpyGrGzacyWCRG-eT5g/s1600/pc-1080p-wallpaper-hd4.jpg'/>
</li>
<li>
<a href='http://qassemblog.blogspot.com/'>الموضوع الرابع</a>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUQN3urffow82w9sZDBA1U7tLWThDRQmRqDCnGPRsxgL44CsZmUDCjCI5dwzNUmH3CEAdW0K0dqpMXpAVDAryQiomIEkVliCrYYvWFlgmnN6EeXyUrYo6i7jttPf9tnqM9XahBK1JHl2c/s1600/Hd-Wallpapers-1080p-8.jpg'/>
</li>

<li>
<a href='http://qassemblog.blogspot.com/'>الموضوع الخامس</a>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkSFNHNbgMhBWlhxt4LJGmCiCM0hVA9l2i382-Y3N5xfWorOhzPjpzk4nENtCA9iL64zGTteQTMtWwW5KlezqVhwZr4jDEjIRt2r7cz3fh3hxjYdWYVXhRzAHK86At_dylm3F3J5v-zmk/s1600/sonic_riders_1080p_game-HD.jpg'/>
</li>
<li>

<a href='http://qassemblog.blogspot.com/'>الموضوع السادس</a>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMU18im_54HFMPgNC1ENFfEW2ATt5YAtzlholWJ7OYUm4HSj-T-ZlDp_FHmi8R2V6TP0nkZ7NY8c9qLAa4ffwI3vymXGW_fI74RKQwWRHCinky9d_qt1N3vWZQmOwE_DNC_0KEGbm4TUU/s1600/pc-1080p-wallpaper-hd6.jpg'/>
</li>

<li>
<a href='http://qassemblog.blogspot.com/'>الموضوع السابع</a>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF6Ryg5FJTUzZAXu-qBkYfcYPVwBzN4Pb4KwMsQBSwg23Sjcin4p0x56tZUHJupMIo44PFTnkNqjhgW__2VKYiaWrX1lwSFAI-TJdGDe6A_L10QtQ0q-gJpk8GAdCZLBrtga_jKDFOi6w/s1600/paris-architecture-wallpaper-1080p-HD.jpg'/>
</li>
</ul>

</div>
--------------------------------------------------------------------------------------------------------------------------

الان ابحث عن   ]]></b:skin>
 والصق الكود التالى قبلها-فوقها- مباشرة 

--------------------------------------------------------------------------------------------------------------------------
/*every thing by abdelhaakeem from qassemblog so plz keep rights on :)*/


.acc img{width:700px; height:200px;}
.acc {width:1100px; height:200px; margin:1px auto; border:1px solid black; overflow:hidden}
.acc ul{  list-style:none; }
.acc ul li {float: left; width:150px; position:relative; transition :2s;}
.acc ul li a{ display:block; display:block; text-decoration:none; color:white; background:rgba(0,0,0,.5); position:absolute; bottom:0; padding:15px ; width:1100px; }
.acc ul:hover li{width:60px;}
.acc ul li:hover{width:600px;}

-------------------------------------------------------------------------------------------------------------------------

استبدل اسم الموضوع الاول بالكلمات التى تحب وكذلك رابط الصورة وكرر نفس الطريقة مع كل المواضيع السبع :)

ومبروك عليك الاضافة :)

-------------------------------------------------------------------------------------------------------------------------

لمعاينة الاضافة :

------------------------------------------------------------------------------------------------------------------------

الملفات لدينا محمىة بباسورد ، لتحميل الباسورد:

إقرأ المزيـــد