Home » Semua Post

Share Button UI Slide Toggle

Oleh: ~ Add Comment
share button metro ui slide toggle


Share Button UI Slide Toggle - Melanjutkan artikel yang masih berbau blog metro ui style seperti random post efek jquery ui modal, dan hide widget dengan slide toggle agar semakin lengkap rasanya menerapkan konsep UI walaupun cuma mirip - mirip doang kan ga papa ya. Untuk penampakkan seperti dibawah ini :


Sebagai komponen pembentuknya adalah sebagai berikut :

CSS

.widgetshare{font:bold 12px/20px Tahoma!important;background:#34495e;color:#fff;padding:10px}
.widgetshare a{font:bold 12px/20px Tahoma!important;text-decoration:none!important;color:#fff!important;transition:all 1s ease;padding:4px 6px}
.widgetshare a:hover{background:#2c3e50}
.fcbok{background: #2980b9;}
.twitt{background:#f1c40f}
.gplus{background:#27ae60}
.pin{background:#c0392b}
.lkdin{background:#16a085}
 i.fa-caret-down{color:#e74c3c}
#buton-share{float:right;
padding:14px 15px;
background:#2c3e50;
color:#fff;
cursor:pointer;
display:inline-block
}
#share-to{
display:none;
text-align:left;
background:#34495e;
color:#fff;
padding:4px 0
}

JS

<script type="text/javascript">
$(document).ready(function(){
  $("#buton-share").click(function(){
    $("#share-to").slideToggle(1000,function(){
    });
  });
});
</script>

HTML

<div id="buton-share">
SHARE TO <i class="fa fa-caret-down"></i></div>
<div id="share-to">
<div class="widgetshare">
<a class="fcbok" expr:href="&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url" href="" rel="nofollow" target="_blank"><i class="fa fa-facebook"></i> Facebook</a>
<a class="twitt" expr:href="&quot;http://twittter.com/share?url=&quot; + data:post.url" href="" rel="nofollow" target="_blank"><i class="fa fa-twitter"></i> Twitter</a>
<a class="gplus" expr:href="&quot;https://plus.google.com/share?url=&quot; + data:post.url" href="" rel="nofollow" target="_blank"><i class="fa fa-google-plus"></i> Google+</a>
<a class="pin" expr:href="&quot;http://www.pinterest.com/pin/create/button/?media=&quot; + data:post.url" href="" rel="nofollow" target="_blank"><i class="fa fa-pinterest"></i> Pinterest</a>
<a class="lkdin" expr:href="&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url" href="" rel="nofollow" target="_blank"><i class="fa fa-linkedin"></i> Linkedin</a>
</div>
</div>

PENTING....!!!!
# Untuk mengatur posisi widget di bawah postingan blog masukkan kode HTML nya sebelum kode dibawah ini :

<div class='post-footer'>
atau
<data:post.body/>

Kemudian copas tepat dibawahnya, karena ada banyak kode seperti itu maka gunakan trial error saja, dan setiap template bisa saja berbeda.

# Atau jika ingin menjadikan sebuah widget silakan masukkan semua kode dalam Add HTML Widget di Layout Dashboard


. 

Random Post Efek Modal Jquery UI

Oleh: ~ Add Comment
random post jquery ui
Random Post Efek Modal Jquery UI - Random post atau orang sering menyebutnya recent post adalah widget unik yang berfungsi untuk menampilkan artikel maupun postingan yang sebelumnya sudah kita publikasikan. Pada tips blog metro ui style kali ini saya akan memberikan sedikit contoh random post dengan blind dan explode efek modal jquery ui, untuk contoh efek - efek jquery ui lainnya baca juga contoh efek -efek jquery ui.


Komponen - komponennya sebagai berikut :

CSS

<style scoped="scoped" type="text/css">
#dialog {background:#fff;color:#fff;width:300px;height:80px}
.ui-dialog-title{color:#fff}
#opener{position:relative;background:#2980b9;color:#fff;border:3px solid #2980b9;padding:6px 6px}
i.fa-random{color:#fff;font-size:16px}
</style>

JQUERY UI

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

JS

 <script>
  $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });
  </script>

HTML

<div id="dialog" title="RANDOM POST">
<div id='bp_recent'></div>
<script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script>
<script style='text/javascript'>
var numberOfPosts = 12;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 70;
var imgFloat = 'left';
var myMargin = 9;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://samsury-sites.blogspot.com/feeds/posts/summary?max-results=12&amp;orderby=published&amp;alt=json-in-script&amp;callback=bprecentpostswiththumbnails'></script>
</div>
<button id="opener"><i class="fa fa-random"></i> RANDOM POST</button>

Anda cukup mengganti http://samsury-sites.blogspot.com dengan url blog anda

Demikian sedikit widget blog metro ui kali ini, baca juga menu metro ui modal dialog dan semoga bermanfaat.


Drop Down Menu Metro Ui Awesome

Oleh: ~ Add Comment
drop down menu metro ui awesome

Drop Down Menu Metro Ui Awesome - Setelah sebelumnya saya pernah share artikel tentang Menu metro ui modal dialog dan widget menu metro ui drop down sliding yang masih menggunakan gambar sebagai icon, namun kali ini saya mencoba menyempurnakan tampilannya dengan kombinasi menu metro ui dan font awesome. Karena saya lebih suka tampilan gambar yang relatif sedikit pada halaman blog, agar konsep blog metro ui style lebih maksimal. Untuk panduan cara kostumisasi font icon awesome versi 403

Sebagai gambarannya seperti dibawah ini :


CSS

.samsury-tab1{background:#ea6153;}
.samsury-tab1:hover{background:#555;}
.samsury-fb{background:#555;}
.samsury-fb:hover{background:#2A82D9;}
.samsury-tw{background:#555;}
.samsury-tw:hover{background:#0CA8F0;}
.samsury-g{background:#555;}
.samsury-g:hover{background:#DC321E;}
.samsury-in{background:#555;}
.samsury-in:hover{background:#16a085;}
.samsury-tab2{background:#34495e;}
.samsury-tab2:hover{background:#555;}
.samsury-tab2sub{background: #555;}
.samsury-tab2sub:hover{background: #007f74;}
.samsury-tab3{background:#16a085;}
.samsury-tab3:hover{background:#555;}
.samsury-tab3sub{background: #555;
height:70px;}
.samsury-tab3sub:hover{background: #007f74;}
.samsury-tab4{background:#222;}
.samsury-tab4:hover{background:#555;}
.samsury-tab4sub{background: #555;}
.samsury-tab4sub:hover{background: #007f74;}
.samsury-metro-menu {font-family: Helvetica,Arial,sans-serif;
    font-size: 11px;
    position:relative;
    background:none;
    width:500px;
    height:90px;
    border:none;
    margin:20px auto;
    padding:20px;
float:left;
}
ul.navi {
    position:relative;
    z-index:100;
    padding:0;
    margin:0 0 0 60px;
    list-style:none;
    width:auto;
    height:30px;
}
ul.navi > li {
    width:70px;
    height:70px;
    position:absolute;
    left:0;
    top:0;
    -moz-transition: -moz-transform 0.5s ease-in-out;
    -ms-transition: -ms-transform 0.5s ease-in-out;
    -o-transition: -o-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}
ul.navi a {
    display:block;
    width:70px;
    height:70px;
    position:absolute;
    left:0;
    top:0;
    line-height:30px;
    text-align:center;
    text-decoration:none;
}
ul.navi a img {
    border:0;
}
ul.navi a span {
    position:relative;
    top:30%;
    font: 14px Segoe UI, Helvetica, Arial, sans-serif;
    color:#fff;
}
ul.navi:hover {
    height:200px;}
ul.navi:hover li#n1 {
    -moz-transform: translatex(0px);
    -ms-transform: translatex(0px);
    -o-transform: translatex(0px);
    -webkit-transform: translatex(0px);
    transform: translatex(0px);
}
ul.navi:hover li#n2 {
    -moz-transform: translatex(90px);
    -ms-transform: translatex(90px);
    -o-transform: translatex(90px);
    -webkit-transform: translatex(90px);
    transform: translatex(90px);
}
ul.navi:hover li#n3 {
    -moz-transform: translatex(180px);
    -ms-transform: translatex(180px);
    -o-transform: translatex(180px);
    -webkit-transform: translatex(180px);
    transform: translatex(180px);
}
ul.navi:hover li#n4 {
    -moz-transform: translatex(270px);
    -ms-transform: translatex(270px);
    -o-transform: translatex(270px);
    -webkit-transform: translatex(270px);
    transform: translatex(270px);
}
ul.sub {
    padding:0;
    margin:0;
    list-style:none;
    width:100%;
    height:200px auto;
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
    opacity:0;
    -moz-transition: opacity 0s linear 1s;
    -ms-transition: opacity 0s linear 1s;
    -o-transition: opacity 0s linear 1s;
    -webkit-transition: opacity 0s linear 1s;
    transition: opacity 0s linear 1s;
}
ul.sub li {
        width:80px auto;
       height:80px;
       position:absolute;
       left:0;
      top:0;
      z-index:-1;
    -moz-transition: -moz-transform 0.5s ease-in-out 0.5s;
    -ms-transition: -ms-transform 0.5s ease-in-out 0.5s;
    -o-transition: -o-transform 0.5s ease-in-out 0.5s;
    -webkit-transition: -webkit-transform 0.5s ease-in-out 0.5s;
    transition: transform 0.5s ease-in-out 0.5s;
}
ul.navi > li:hover ul {
    opacity:1;
    -moz-transition: opacity 0s linear 0.5s;
    -ms-transition: opacity 0s linear 0.5s;
    -o-transition: opacity 0s linear 0.5s;
    -webkit-transition: opacity 0s linear 0.5s;
    transition: opacity 0s linear 0.5s;
}
ul.navi li:hover ul li.l {
    -moz-transform: translatex(-70px) translatey(90px);
    -ms-transform: translatex(-70px) translatey(90px);
    -o-transform: translatex(-70px) translatey(90px);
    -webkit-transform: translatex(-70px) translatey(90px);
    transform: translatex(-70px) translatey(90px);
}

ul.navi li:hover ul li.c {
    -moz-transform: translatex(2px) translatey(90px);
    -ms-transform: translatex(2px) translatey(90px);
    -o-transform: translatex(2px) translatey(90px);
    -webkit-transform: translatex(2px) translatey(90px);
    transform: translatex(2px) translatey(90px);
}
ul.navi li:hover ul li.r {
    -moz-transform: translatex(74px) translatey(90px);
    -ms-transform: translatex(74px) translatey(90px);
    -o-transform: translatex(74px) translatey(90px);
    -webkit-transform: translatex(74px) translatey(90px);
    transform: translatex(74px) translatey(90px);
}
ul.navi li:hover ul li.r1 {
    -moz-transform: translatex(146px) translatey(90px);
    -ms-transform: translatex(146px) translatey(90px);
    -o-transform: translatex(146px) translatey(90px);
    -webkit-transform: translatex(146px) translatey(90px);
    transform: translatex(146px) translatey(90px);
}
i.fa-th-large,i.fa-facebook,i.fa-twitter,i.fa-google-plus,i.fa-download,i.fa-linkedin,i.fa-list,i.fa-cogs,i.fa-wrench,i.fa-volume-up,i.fa-power-off,i.fa-file-o,i.fa-music,i.fa-picture-o,i.fa-sitemap,i.fa-envelope-o,i.fa-random{font-size:36px;color:#fff;padding-top:15px;}

HTML

<div class="samsury-metro-menu">
<ul class="navi">
 <li id="n1"><a class="samsury-tab1" href="#" > <i class="fa fa-th-large"></i></a>
<ul class="sub">
 <li class="l"><a class="samsury-fb" href="#"><i class="fa fa-facebook"></i></a></li>
 <li class="c"><a class="samsury-tw" href="#"><i class="fa fa-twitter"></i></a></li>
  <li class="r"><a class="samsury-g" href="#"><i class="fa fa-google-plus"></i></a></li>
  <li class="r1"><a class="samsury-in" href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</li>
<li id="n2"><a class="samsury-tab2" href="#" ><i class="fa fa-download"></i></a>
<ul class="sub">
<li class="l"><a class="samsury-tab2sub" href="#" title="label 1"><i class="fa fa-file-o"></i></a></li>
<li class="c"><a class="samsury-tab2sub" href="#" title="label 2"><i class="fa fa-music"></i></a></li>
 <li class="r"><a class="samsury-tab2sub" href="#" title="label 3"><i class="fa fa-picture-o"></i></a></li>
</ul>
</li>
<li id="n3"><a class="samsury-tab3" href="#"><i class="fa fa-cogs"></i></a>
<ul class="sub">
<li class="l"><a class="samsury-tab3sub" href="#"><i class="fa fa-wrench"></i></a></li>
<li class="c"><a class="samsury-tab3sub" href="#"><i class="fa fa-volume-up"></i></a></li>
<li class="r"><a class="samsury-tab3sub" href="#"><i class="fa fa-power-off"></i></a></li>
</ul>
</li>
<li id="n4"><a class="samsury-tab4" href="#"><i class="fa fa-list"></i></a>
<ul class="sub">
<li class="l"><a class="samsury-tab4sub" href="#"><i class="fa fa-random"></i></a></li>
<li class="c"><a class="samsury-tab4sub" href="#"><i class="fa fa-sitemap"></i></a></li>
<li class="r"><a class="samsury-tab4sub" href="#"><i class="fa fa-envelope-o"></i></a></li>
</ul>
</li>
</ul>
<div style="clear:both"></div>
</div>

Anda cukup mengganti tanda # dengan url yang ingin di tampilkan, dan untuk font icon selengkapnya bisa anda kunjungi Font Icon Awesome V 4.0.3

Kostumisasi Font Icon Awesome V.4.0.3

Oleh: ~ Add Comment
font awesome 4.0.3 icon metro ui


Setelah sebelumnya update font awsesome versi 3.2.1 maka kali ini sekalian memperbarui penggunaan font awesome versi 4.0.3 berikut cara kostumisasi baik pewarnaan maupun pengaturan posisinya untuk blog metro ui style. Jika anda belum menggunakan versi ini silakan install kodenya :

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


EFEK ANIMASI

 <i class="fa fa-bell fa-2x fa-spin"></i>
 <i class="fa fa-bell fa-3x fa-spin"></i>
 <i class="fa fa-bell fa-4x fa-spin"></i>

EFEK WARNA

 <i class="fa fa-twitter-square"></i>
 <i class="fa fa-facebook-square"></i>
 <i class="fa fa-linkedin-square"></i>

EFEK BORDER
<i class="fa fa-twitter-square fa-border"></i>
<i class="fa fa-facebook-square fa-border"></i>
<i class="fa fa-linkedin-square fa-border"></i>

BUTTON










CSS BUTTON

i.fa-cogs {float:center;padding:10px 92px 10px 92px;background:#34495e;border-bottom:5px solid #2c3e50;border-radius:4px;
font-size: 36px;
color:#fafafa;
}
i.fa-camera {float:center;padding:10px 92px 10px 92px;background:#1abc9c;border-bottom:5px solid #16a085;border-radius:4px;
font-size: 36px;
color:#fafafa;
}
i.fa-bars {float:center;padding:10px 92px 10px 92px;background:#2ecc71;border-bottom:5px solid #27ae60;border-radius:4px;
font-size: 36px;
color:#fafafa;
}
i.fa-calendar {float:center;padding:10px 92px 10px 92px;background:#9b59b6;border-bottom:5px solid #8e44ad;border-radius:4px;
font-size: 36px;
color:#fafafa;
}

Demikian sedikit ulasan tentang kostumisasi font awesome v.4.0.3.
Enjoy Blogging


Modern Drop Down Button CSS3

Oleh: ~ Add Comment
modern button metro ui


Seperti halnya multi download button sebelumnya kali ini saya memberikan contoh button drop down dengan css3 agar tampilan blog lebih maksimal.
Dan tentunya lebih modern mengusung tekhnologi framework bootstrap dengan gaya blog metro ui style.


Untuk element pembentuknya sebagai berikut :

CSS
<link href='https://sites.google.com/site/samsurysites/modern-button/modern button.css' rel='stylesheet' type='text/css'/>

JS
<script src='https://sites.google.com/site/samsurysites/modern-button/modern button.js' type='text/javascript'/>

JQUERY
<script type='text/javascript' src='jquery-1.10.2.min.js'></script>

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

HTML
<div class="m-btn-group">
  <a class="m-btn green"><i class="icon-cog icon-white"></i> Settings</a>
  <a class="m-btn green dropdown-carrettoggle" data-toggle="dropdown" href="#">
    <span class="caret white"></span>
  </a>
  <ul class="m-dropdown-menu">
      <li><a href="#"><i class="icon-user"></i> Edit Profile</a></li>
      <li><a href="#"><i class="icon-th-list"></i> View Profile</a></li>
      <li><a href="#"><i class="icon-question-sign"></i> Help</a></li>
      <li><a href="#"><i class="icon-off"></i> Logout</a></li>
  </ul>
</div>


<div class="m-btn-group">
  <a class="m-btn purple"><i class="icon-cog icon-white"></i> Settings</a>
  <a class="m-btn purple dropdown-carrettoggle" data-toggle="dropdown" href="#">
    <span class="caret white"></span>
  </a>
  <ul class="m-dropdown-menu">
      <li><a href="#"><i class="icon-user"></i> Edit Profile</a></li>
      <li><a href="#"><i class="icon-th-list"></i> View Profile</a></li>
      <li><a href="#"><i class="icon-question-sign"></i> Help</a></li>
      <li><a href="#"><i class="icon-off"></i> Logout</a></li>
  </ul>
</div>


<div class="m-btn-group">
  <a class="m-btn red"><i class="icon-cog icon-white"></i> Settings</a>
  <a class="m-btn red dropdown-carrettoggle" data-toggle="dropdown" href="#">
    <span class="caret white"></span>
  </a>
  <ul class="m-dropdown-menu">
      <li><a href="#"><i class="icon-user"></i> Edit Profile</a></li>
      <li><a href="#"><i class="icon-th-list"></i> View Profile</a></li>
      <li><a href="#"><i class="icon-question-sign"></i> Help</a></li>
      <li><a href="#"><i class="icon-off"></i> Logout</a></li>
  </ul>
</div>


<div class="m-btn-group">
  <a class="m-btn blue"><i class="icon-cog icon-white"></i> Settings</a>
  <a class="m-btn blue dropdown-carrettoggle" data-toggle="dropdown" href="#">
    <span class="caret white"></span>
  </a>
  <ul class="m-dropdown-menu">
      <li><a href="#"><i class="icon-user"></i> Edit Profile</a></li>
      <li><a href="#"><i class="icon-th-list"></i> View Profile</a></li>
      <li><a href="#"><i class="icon-question-sign"></i> Help</a></li>
      <li><a href="#"><i class="icon-off"></i> Logout</a></li>
  </ul>
</div>


<div class="m-btn-group">
  <a class="m-btn black"><i class="icon-cog icon-white"></i> Settings</a>
  <a class="m-btn black dropdown-carrettoggle" data-toggle="dropdown" href="#">
    <span class="caret white"></span>
  </a>
  <ul class="m-dropdown-menu">
      <li><a href="#"><i class="icon-user"></i> Edit Profile</a></li>
      <li><a href="#"><i class="icon-th-list"></i> View Profile</a></li>
      <li><a href="#"><i class="icon-question-sign"></i> Help</a></li>
      <li><a href="#"><i class="icon-off"></i> Logout</a></li>
  </ul>
</div>

Silahkan pilih sesuai dengan warna yang ingin ditampilkan.


Hide Footer Widget Dengan Slide Toggle

Oleh: ~ Add Comment
widget unik slide toggle metro ui


Hide Footer Widget Dengan Slide Toggle - Mungkin ini bisa dikatakan sebagai kelanjutan efek toggle animasi jquery ui dengan konsep blog gaya metro ui style, namun ini skaligus sebagai jawaban dari sahabat Ubay Nyzhar yang nanyain cara membuat footer seperti blog ini. Fungsi dari slide toggle ini adalah untuk menyembunyikan element agar halaman lebih ringkas dengan bantuan Jquery. Untuk cara pemasangan di blog sebagai berikut :

Masukkan Jquery sebelum kode </head>

JQUERY
<script type='text/javascript' src='jquery-1.10.2.min.js'></script>


Jika sebelumnya sudah memasang jquery berapapun versinya bisa melewati langkah ini.

Kemudian tambahkan sedikit CSS berikut ini sebelum kode ]]></b:skin>

CSS
#show-button{padding:0;background:#555;color:#3498db;cursor:pointer;display:inline-block}
#show-widget{display:none;text-align:left;background:#555;color:#fff;padding:0}


Cari lagi element footer widgetnya misalkan #footer-widgets atau #footer-wrapper, karena setiap template bisa saja berbeda maka cari kode yang mirip2 saja. Lalu letakkan kode dibawah ini tepat dibawahnya.

JS
<script type='text/javascript'>$(document).ready(function(){$(&quot;#show-button&quot;).click(function(){$(&quot;#show-widget&quot;).slideToggle()})});</script>


HTML
<div id='show-button'>TOMBOL SHOW/HIDE</div>
<div id='show-widget'> WIDGET YANG AKAN DISEMBUNYIKAN</div>


PENTING...!!!

1. Tombol show/hide bisa diganti dengan icon Font awesome baca disini
2. Widget yang akan disembunyikan pada area footer biasanya IDnya seperti ini :

<b:widget id='HTML1' locked='false' title='Support' type='HTML'>

kemudian tutup dengan kode </div> pada akhir widget.


Demikian sedikit tips blog kali ini, semoga bisa membantu khususnya buat mas Ubay Nyzhar