الصلاة والسلام على رسول الله والسلام عليكم اخواني واخواتي من جديد من دروس بلوجر حيث سوف نتطرق اليوم لشرح طريقة اضافة ازرار المتابعة او الاشتراك بشكل جميل وعمودي على يسار مدونة بلوجر كما في الصورة.
اول شيئ قم بالتوجه الى تحرير قالب، ثم ابحث عن الكود التالي بالاستعانة ب CNTRL+F
]]></b:skin>
بعد ذالك قم بلصق الكود التالي فوقه مباشرة
ul.flatflipbuttons{
position:fixed;
padding:0 0 3px 0;
bottom: 40%;
margin-left:0px;
float:left;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
perspective: 10000px;
}
ul.flatflipbuttons li{
margin:0;
display: block;
width: 50px;
height: 50px;
margin-bottom: 25px;
background: transparent;
text-transform: uppercase;
text-align: center;
}
ul.flatflipbuttons li a{
display:table;
font: bold 36px Arial;
width: 100%;
height: 100%;
color: black;
background: transparent;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out;
-moz-transition:all 300ms ease-out;
transition:all 300ms ease-out;
}
ul.flatflipbuttons li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
ul.flatflipbuttons li a img{
border-width: 0;
vertical-align: middle;
}
ul.flatflipbuttons li:hover a{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: transparent;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
ul.flatflipbuttons li:hover a span{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
position:fixed;
padding:0 0 3px 0;
bottom: 40%;
margin-left:0px;
float:left;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
perspective: 10000px;
}
ul.flatflipbuttons li{
margin:0;
display: block;
width: 50px;
height: 50px;
margin-bottom: 25px;
background: transparent;
text-transform: uppercase;
text-align: center;
}
ul.flatflipbuttons li a{
display:table;
font: bold 36px Arial;
width: 100%;
height: 100%;
color: black;
background: transparent;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out;
-moz-transition:all 300ms ease-out;
transition:all 300ms ease-out;
}
ul.flatflipbuttons li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
ul.flatflipbuttons li a img{
border-width: 0;
vertical-align: middle;
}
ul.flatflipbuttons li:hover a{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: transparent;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
ul.flatflipbuttons li:hover a span{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
ثم بعد ذالك قم بالتوجه الى لوحة تحكم بلوجر ثم تخطيط ثم اضافة اداة، بعد ذالك ادخل الكود التالي داخل الخانة وقم بالحفظ.
<div class="angular_advertisement" style="left: 0px; top: 0px; position: fixed;"> <ul class='flatflipbuttons second'>
<li><a href='https://www.facebook.com/medexplain' target='_blank'><span><img src='http://3.bp.blogspot.com/-t2OeGefih4U/U5IPPsNQZtI/AAAAAAAAYfc/WeQxZk-c7Jg/s1600/Facebook.png'/></span></a></li> <li><a href='http://twitter.com/med_morocco' target='_blank'><span><img src='http://4.bp.blogspot.com/-y9S65ae0hUY/U5IPSg4UMHI/AAAAAAAAYf8/CM0C8sfJ0JY/s1600/Twitter.png'/></span></a></li>
<li><a href='https://plus.google.com/u/0/105700255392171820611/posts' target='_blank'><span><img src='http://1.bp.blogspot.com/-YELFtAoKrKQ/U5IPP_Gi3AI/AAAAAAAAYfs/C2YwoKEIF2A/s1600/GooglePlus.png'/></span></a></li>
<li><a href='http://www.youtube.com/channel/UCssNXaBtUF6zqP_BOTvtMwQ' target='_blank'><span><img src='http://2.bp.blogspot.com/-VNc4pFEnxWo/U5IPSssxAMI/AAAAAAAAYf4/jhq7PvpiII0/s1600/YouTube.png'/></span></a></li></ul> <div dir="rtl" style="text-align: right;" trbidi="on"> <strong><a href="" id="linkwithin_logolink_2" style="border-bottom-color: currentColor; border-bottom-style: none; border-bottom-width: medium; color: #cccccc; font-size-adjust: none; font-stretch: normal; font: 10px/normal arial; text-decoration: none;" rel="nofollow" target="_blank"><b>Get theis</b></a></strong></div> <div class='clear'> </div> <span class='widget-item-control'> <span class='item-control blog-admin'> <a class='quickedit' href='//www.blogger.com/rearrange?blogID=6978282028189964955&widgetType=HTML&widgetId=HTML15&action=editWidget§ionId=sidebarleft' onclick='return _WidgetManager._PopupConfig(document.getElementById("html15"));' rel="nofollow" target='configHTML15' title='تحرير'> <img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/> </a> </span></span></div>
واخيرا قم بتغيير كل ماهو مشار اليه بالالوان
رابط صفحتك على الفيس بوك
رابط صفحتك على تويتر
رابط صفحتك على جوجل بلس
رابط قناتك على يوتيوب
ثم قم بحفظ التغيرات ومبروك الاضافة.
محمد الوهابي، من مواليد 1994 من المغرب،الهواية، التدوين الالكتروني، مهتم كثيرا بالتكنولوجيا، وابحث دائما عن كل ماهو جديد لتقديم شروحات ومقالات مفيدة وذالك للارضاء الجميع وتحقيق الافضل.