Memasang Kota Alert Flat UI di Blog

Discussion in 'Blogger' started by fanjiwildanu, Jul 30, 2014.

  1. fanjiwildanu

    fanjiwildanu New Member

    Joined:
    Jul 30, 2014
    Messages:
    18
    Likes Received:
    8
    Trophy Points:
    3
    Google+:
    Ok post pertama saya adalah Memasang Kota Alert Flat UI di Blog. Post ini saya dapat dari blog saya sendiri. Ok kita langsung saja *senang*

    Sebelum melihat tutorialnya lihat dulu demonya atau lihat gambarnya
    [​IMG]

    1.Buka blogger > template > edit HTML
    2.Cari kode ]]></b:skin> , taruh kode dibawah ini tepat di atas kode ]]></b:skin>
    Code:
    .alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px}.alert h4{margin-top:0;color:inherit}.alert .alert-link{font-weight:700}.alert>p,.alert>ul{margin-bottom:0}.alert>p+p{margin-top:5px}.alert-dismissable,.alert-dismissible{padding-right:35px}.alert-dismissable .close,.alert-dismissible .close{position:relative;top:-2px;right:-21px;color:inherit}.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.alert-success hr{border-top-color:#c9e2b3}.alert-success .alert-link{color:#2b542c}.alert-info{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.alert-info hr{border-top-color:#a6e1ec}.alert-info .alert-link{color:#245269}.alert-warning{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.alert-warning hr{border-top-color:#f7e1b5}.alert-warning .alert-link{color:#66512c}.alert-danger{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.alert-danger hr{border-top-color:#e4b9c0}.alert-danger .alert-link{color:#843534}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}
    .alert-info{background-color:#7cd1ef;border:#4fc1e9}.alert-warning{background-color:#ffdd87;border:#ffce54}.alert-danger{background-color:#f2838f;border:#ed5565}.alert-success{background-color:#b9df90;border:#a0d468}.alert .alert-link{text-decoration:underline;
    cursor:pointer;filter:alpha(opacity=65);opacity:.65}.alert .alert-link:focus,.alert .alert-link:hover{filter:alpha(opacity=45);opacity:.45}.alert .btn-link,.alert .btn-link:focus,.alert .btn-link:hover{color:#000;filter:alpha(opacity=65);opacity:.65}.alert .btn-link:focus,.alert .btn-link:hover{text-decoration:none;filter:alpha(opacity=40);opacity:.4}
    4.Lalu Save

    Untuk cara pemakaian tinggal copy kode dibawah ini dan edit sesuai keinginan anda *bagus*
    HTML:
    <div class="row">
            
                <div class="alert alert-warning alert-dismissable">
    
                    <strong>Warning!</strong> Warning by http://blogfwa.blogspot.com
                </div>
                <div class="alert alert-info alert-dismissable">
    
                  <strong>Well done!</strong> Info http://blogfwa.blogspot.com'
                </div>
              </div>
                <div class="alert alert-success alert-dismissable">
                  <strong>Heads up!</strong> Succes http://blogfwa.blogspot.com'
                </div>
                <div class="alert alert-danger">
                  <strong>Oh snap!</strong> Danger http://blogfwa.blogspot.com
                </div>
     
  2. exabytes-id

    exabytes-id Member

    Joined:
    Oct 3, 2013
    Messages:
    866
    Likes Received:
    35
    Trophy Points:
    28
    Bagus gan tutorialnya.
    keep share, di tunggu tutorial selanjutnya, pingin cari kira2 member disini ada ga ya yang bisa bagaimana tutorial background dengan video html 5,
     
  3. Muh.Yusuf

    Muh.Yusuf Member

    Joined:
    Jul 29, 2014
    Messages:
    438
    Likes Received:
    23
    Trophy Points:
    18
    Google+:
Loading...

Share This Page