اضافه ازارا المعاينه والتحميل لمدونات البلوجر . Mazen Mohamed اضافات بلوجر 3:56 ص <div dir="rtl" style="text-align: right;" trbidi="on"> <b>موضوع اليوم عن شرح طريقه اضافه ازرار المعاينه والتحميل لقوالب بلوجر ويمكنك مشاهده المثال في الصوره الخاصه بالموضوع او من خلال مشاهده المعاينه في نهايه الموضوع . </b><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5tIyH1K9NI4OSzLa-CN2vIg_lIFRQRReToOJ2J9mrSvYGgq3uAaP_FlCtMgqy0-qwN2gvh7D0VrrficBdfCOXn2KcAwfelS97rGdG2ikFFFtM3gYttJQKknOvDC_BNl8odrst4ul3efqA/s1600/Untitled-1+copy.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="168" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5tIyH1K9NI4OSzLa-CN2vIg_lIFRQRReToOJ2J9mrSvYGgq3uAaP_FlCtMgqy0-qwN2gvh7D0VrrficBdfCOXn2KcAwfelS97rGdG2ikFFFtM3gYttJQKknOvDC_BNl8odrst4ul3efqA/s320/Untitled-1+copy.jpg" width="320" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <h3 style="clear: both; text-align: right;"> <span style="color: blue;">استخدامات ازرار المعاينه والتحميل : </span></h3> <div> <ul style="text-align: right;"> <li><span style="color: purple;"><b>يمكن استخدامها في مواقع التحميل مثل موقع <a href="http://elmrkz.com/">المركز </a></b></span></li> <li><span style="color: purple;"><b>كما يمكنك ان تستخدمها في مدونتك الخاصه بتحميل وتعريب قوالب بلوجر.</b></span></li> <li><span style="color: purple;"><b>والعديد من الاستخدامات والافكار يمكنك ان تستخدمها كيفما تشاء </b></span></li> </ul> <h3 style="text-align: right;"> <b><span style="color: blue;">طريقه تركيب ازرار المعاينه والتحميل :</span></b></h3> </div> <div> <ul style="text-align: right;"> <li><b><span style="color: purple;">نقوم بالدخول لمدونه بلوجر .</span></b></li> <li><b><span style="color: purple;">من ثم اختيار القالب .</span></b></li> <li><b><span style="color: purple;">والضعط علي تحرير HTML .</span></b></li> </ul> <h3 style="text-align: right;"> <b style="color: blue;">يجب تركيب الخطوط الخاصه بالمعاينه عن طريق : </b></h3> <div> <b style="color: blue;">البحث عن</b><qaz style="background-color: #444444; border: 2px solid rgb(255, 255, 255); box-shadow: rgb(0, 0, 0) 0px 1px 1px 2px; color: #ffd600; direction: ltr; display: inline-block; font-family: arial; font-size: 13px; font-stretch: normal; font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; font-weight: bold; height: 20px; line-height: 18px; margin: 10px 5px; padding: 0px 0px 0px 5px; text-align: center; user-select: text;"></head></qaz><b style="color: blue;">واضافه الكود التالي </b></div> </div> <div> <blockquote class="tr_bq " style="background: rgb(239, 239, 239); border: 2px dotted rgb(0, 0, 0); box-shadow: rgb(0, 0, 0) 1px 1px 0px, rgb(255, 255, 255) 3px 3px 0px, rgb(0, 0, 0) 4px 4px 0px, rgb(255, 255, 255) 6px 6px 0px, rgb(0, 0, 0) 7px 7px 0px, rgb(255, 255, 255) 9px 9px 0px, rgb(0, 0, 0) 10px 10px 0px; color: #404141; direction: ltr; font-family: Arial; font-size: 14px; font-stretch: normal; line-height: normal; margin: 15px auto; max-height: 400px; overflow: auto; padding: 15px; quotes: none; text-align: left !important; user-select: text; vertical-align: baseline; width: 818.991px;"> <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/</blockquote> </div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <b>من ثم نقوم بالبحث عن <qaz style="background-color: #444444; border: 2px solid rgb(255, 255, 255); box-shadow: rgb(0, 0, 0) 0px 1px 1px 2px; direction: ltr; display: inline-block; font-family: arial; font-size: 13px; font-stretch: normal; font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; height: 20px; line-height: 18px; margin: 10px 5px; padding: 0px 0px 0px 5px; user-select: text;"><span style="color: orange;">]]></b:skin></span></qaz><span style="background-color: white; font-family: inherit; font-size: inherit; font-style: inherit;"> </span><span style="background-color: white; font-family: inherit; font-size: inherit; font-style: inherit;">و اضف الكود التالي فوقه</span></b></div> <blockquote style="background: rgb(239, 239, 239); border: 2px dotted rgb(0, 0, 0); box-shadow: rgb(0, 0, 0) 1px 1px 0px, rgb(255, 255, 255) 3px 3px 0px, rgb(0, 0, 0) 4px 4px 0px, rgb(255, 255, 255) 6px 6px 0px, rgb(0, 0, 0) 7px 7px 0px, rgb(255, 255, 255) 9px 9px 0px, rgb(0, 0, 0) 10px 10px 0px; color: #404141; direction: ltr; font-family: Arial; font-size: 14px; font-stretch: normal; line-height: normal; margin: 15px auto; max-height: 400px; overflow: auto; padding: 15px; quotes: none; text-align: left !important; user-select: text; vertical-align: baseline; width: 803.537px;"> #wrap {<br /> margin: 20px auto;<br /> text-align: center;<br /> }<br /> <br style="margin: 0px; padding: 0px;" /> #wrap br {<br /> display: none;<br /> }<br /> <br style="margin: 0px; padding: 0px;" /> .btn-slide, .btn-slide2 {<br /> position: relative;<br /> display: inline-block;<br /> height: 50px;<br /> width: 200px;<br /> line-height: 50px;<br /> padding: 0;<br /> border-radius: 50px;<br /> background: #fdfdfd;<br /> border: 2px solid #0099cc;<br /> margin: 10px;<br /> transition: .5s;<br /> }<br /> <br style="margin: 0px; padding: 0px;" /> .btn-slide2 {<br /> border: 2px solid #efa666;<br /> }<br /> <br style="margin: 0px; padding: 0px;" /> .btn-slide:hover {<br /> background-color: #0099cc;<br /> }<br /> <br style="margin: 0px; padding: 0px;" /> .btn-slide2:hover {<br /> background-color: #efa666;<br /> }<br /> <br style="margin: 0px; padding: 0px;" /> .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {<br /> right: 100%;<br /> margin-right: -45px;<br /> background-color: #fdfdfd;<br /> color: #0099cc;<br /> }<br /> <br style="margin: 0px; padding: 0px;" /> .btn-slide2:hover span.circle2 {<br /> color: #efa666;<br /> }<br /> <br style="margin: 0px; padding: 0px;" /> .btn-slide:hover span.title, .btn-slide2:hover span.title2 {<br /> right: 40px;<br /> opacity: 0;<br /> }<br /> <br style="margin: 0px; padding: 0px;" /> .btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {<br /> opacity: 1;<br /> right: 40px;<br /> }<br /> <br style="margin: 0px; padding: 0px;" /> .btn-slide span.circle, .btn-slide2 span.circle2 {<br /> display: block;<br /> background-color: #0099cc;<br /> color: #fff;<br /> position: absolute;<br /> float: right;<br /> margin: 5px;<br /> line-height: 42px;<br /> height: 40px;<br /> width: 40px;<br /> top: 0;<br /> right: 0;<br /> transition: .5s;<br /> border-radius: 50%;<br /> }<br /> <br style="margin: 0px; padding: 0px;" /> .btn-slide2 span.circle2 {<br /> background-color: #efa666;<br /> }<br /> <br style="margin: 0px; padding: 0px;" /> .btn-slide span.title,<br /> .btn-slide span.title-hover, .btn-slide2 span.title2,<br /> .btn-slide2 span.title-hover2 {<br /> position: absolute;<br /> right: 90px;<br /> text-align: center;<br /> margin: 0 auto;<br /> font-size: 16px;<br /> font-weight: bold;<br /> color: #30abd5;<br /> transition: .5s;<br /> }<br /> <br style="margin: 0px; padding: 0px;" /> .btn-slide2 span.title2,<br /> .btn-slide2 span.title-hover2 {<br /> color: #efa666;<br /> right: 80px;<br /> }<br /> <br style="margin: 0px; padding: 0px;" /> .btn-slide span.title-hover, .btn-slide2 span.title-hover2 {<br /> right: 80px;<br /> opacity: 0;<br /> }<br /> <br style="margin: 0px; padding: 0px;" /> .btn-slide span.title-hover, .btn-slide2 span.title-hover2 {<br /> color: #fff;<br /> }</blockquote> <div class="separator" style="clear: both; text-align: center;"> <b><span style="background-color: white; color: #5e6066; font-family: inherit; font-size: inherit; font-style: inherit;"><br /></span></b></div> <div> <span style="background-color: #161616; color: #5e6066; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;"><br /></span></div> <div class="separator" style="clear: both; text-align: center;"> الي هنا نكون انتهينا من تهيئه القالب لاستقبال تلك الازرار في كل موضوع ولا يتبقي سوي خطوة واحده يتم عملها اثناء كتابه كل موضوع تحتاج بداخله تلك الازرار وهي اضافه هذا الكود في صفحه HTML لكتابه الموضوع في النهايه مع تغير ما يلزمنا :</div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <blockquote class="tr_bq" style="clear: both; text-align: center;"> <span style="color: orange;"><b style="background-color: #444444;"><div id="wrap"></b></span><br /> <blockquote> <span style="color: orange;"><b style="background-color: #444444;"><a href="#" class="btn-slide"><br /> <span class="circle"><i class="fa fa-rocket"></i></span><br /> <span class="title">معاينة</span><br /> <span class="title-hover">اضغط للمعاينة</span><br /></a><br /><a href="#" class="btn-slide2"><br /> <span class="circle2"><i class="fa fa-download"></i></span><br /> <span class="title2">تحميل</span><br /> <span class="title-hover2">اضغط للتحميل</span><br /></a><br /></div></b></span></blockquote> </blockquote> <div dir="ltr" style="text-align: center;"> <b>استبدل رمز <span style="color: red;">#</span> برامج التحميل والمعاينه </b></div> <div dir="ltr" style="text-align: center;"> <b>استبدل اي <span style="color: blue;">كلمه عربيه بالكلم</span>ه الكراد ظهورها </b></div> <div dir="ltr" style="text-align: center;"> <br /></div> <h3 style="clear: both; text-align: right;"> معاينه الازرار : </h3> <div id="wrap"> <a class="btn-slide" href="https://www.blogger.com/blogger.g?blogID=8232801554043069902#"> <span class="circle"><i class="fa fa-rocket"></i></span> <span class="title">معاينة</span> <span class="title-hover">اضغط للمعاينة</span> </a> <a class="btn-slide2" href="https://www.blogger.com/blogger.g?blogID=8232801554043069902#"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">تحميل</span> <span class="title-hover2">اضغط للتحميل</span> </a> </div> </div> Mazen Mohamed اضف تعليق عدد الزيارات :
