Flat Template Portfolio Design

Flat Template Portfolio Design - Sesuai perkembangan webdesign saat ini saya memperkenalkan 3 template dengan tampilan layar penuh seperti template twitter bootstrap dan blogazine template yang lagi ngetren saat ini selain template blog metro ui.

Sebagai gambarannya dibawah ini:

1. FLATO REACTOR

• PREVIEW

• DOWNLOAD

Features:

Parallax effect
HTML5 / CSS3
FontAwesome Icons
Unlimited Colors
Smooth Scroll
Vertical Navigation
Easy To Customize
Clean and Organized Coded

2. ORIGIN TEMPLATE

• PREVIEW

• DOWNLOAD

Features:

Retina ready
Parallax Background Image
Google Fonts
Revolution Slider
Font Awesome Icons

3. HELP DESK TEMPLATE

• PREVIEW

• DOWNLOAD

Features:

Flat Design

Flat UI Icon

Responsive Design

Bootstrap Include

Share Button 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 :

• DEMO

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

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.

• DEMO

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.