قم بالذهاب الى لوحة تحكم بلوجر 

قم بالذهاب الى قالب 

ثم تحرير html 

قم بالبحث عن  ]]></b:skin> وضع فوقة / قبلة الكود الأتي 

.whitebutton {

    margin: 20px auto;

    padding: 20px 0;

    width: 200px;

}

​

.whitebutton a {

    background: #fff;

    color: #666;

    display: block;

    font-size: 17px;

    font-weight: 700;

    font-family: 'Arial',Verdana,sans-serif;

    height: 50px;

    line-height: 50px;

    text-align: center;

    text-decoration: none;

    text-transform: uppercase;

    width: 200px;

    position: relative;

    z-index: 2;

}

​

.whitebutton a:before {

    content: '\f019';

    font-family: FontAwesome;

    font-weight: normal;

    padding: 8px;

    margin-left: -12px;

    margin-right: 6px;

}

​

.whitebutton span {

    background: #444;

    color: #fff;

    display: block;

    font-size: 12px;

    font-family: 'Arial', Verdana,sans-serif;

    height: 40px;

    line-height: 40px;

    text-align: center;

    width: 200px;

    z-index: 1;

    text-transform: uppercase;

    font-weight: bold;

}

​

.whitebutton .up {

    background: #e25734;

    margin: -25px auto;

    opacity: 0;

    border-radius: 0 0 5px 5px;

    transform: translate(0,-50px);

    transition: 350ms;

}

​

.whitebutton .down {

    margin: -30px auto;

    opacity: 0;

    border-radius: 5px 5px 0 0;

    transform: translate(0,-50px);

    transition: 350ms;

}

​

.whitebutton .down:before {

    content:'\f14a';

    font-family: FontAwesome;

    font-weight: normal;

    margin-right: 6px;

    color: #aaa;

}

​

.whitebutton:hover .up {

    opacity: 1;

    transform: translate(0,0);

}

​

.whitebutton:hover .down {

    opacity: 1;

    transform: translate(0,-90px);

}

​

.whitebuttondemo {

    margin: 20px auto;

    padding: 20px 0;

    width: 200px;

}

​

.whitebuttondemo a {

    background: #e25734;

    color: #fff;

    display: block;

    font-size: 17px;

    font-weight: 700;

    font-family:'Arial',Verdana,sans-serif;

    height: 50px;

    line-height: 50px;

    text-align: center;

    text-decoration: none;

    text-transform: uppercase;

    width: 200px;

    position: relative;

    z-index: 2;

    transition: 350ms;

}

​

.whitebuttondemo a:before {

    content:'\f002';

    font-family: FontAwesome;

    font-weight: normal;

    padding: 8px;

    margin-left: -12px;

    margin-right: 6px;

}

​

.whitebuttondemo a:hover {

    color: #fff;

}

​

.whitebuttondemo span {

    background: #444;

    color: #fff;

    display: block;

    font-size: 12px;

    font-family: 'Arial', Verdana,sans-serif;

    height: 40px;

    line-height: 40px;

    text-align: center;

    width: 200px;

    z-index: 1;

    text-transform: uppercase;

    font-weight: bold;

}

​

.whitebuttondemo .up {

    background: #444;

    margin: -25px auto;

    opacity: 0;

    border-radius: 0 0 5px 5px;

    transform: translate(0,-50px);

    transition: 350ms;

}

​

.whitebuttondemo:hover .up {

    opacity: 1;

    transform: translate(0,0);

}

​

بعد ذلك قم بالبحث عن </head>

وضع فوقة الكود الاتي 

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

​

لاضافة الازرار قم بالتوجة نحو المشاركة التي تريد اضافة ازرار فيها 

قم بالظغط على html 

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

​

<div class="whitebuttondemo">

      <a href="#">Demo</a>

      <span class="up">click to begin</span>

    </div>

​

<div class="whitebutton">

      <a href="#">Download</a>

      <span class="up">click to begin</span>

      <span class="down">1.6MB .rar</span>

    </div>

​