Tampilkan postingan dengan label HTML. Tampilkan semua postingan

Belajar Instalasi Bootstrap

►
Sedang pengen share cara penggunaan bootstrap di web , siapa tau bisa bermanfaat dan sekaligus buat bahan pengingat klo kapan-kapan lupa cara pakenya :D



Nah , langsung aja deh penjelasannya ...
Untuk menggunakan Bootstrap kita bisa menggunakan dengan 2 cara , yaitu :


1. Akses langsung ke internet.
Untuk cara yang satu ini sangat mudah dalam penggunaannya , tetapi kekurangnya kita harus terkoneksi ke internet karena kita mengakses file-file bootstrapnya secara langsung via Internet.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
2. Download file nya dan kita akses melalui file lokal kita .
Cara yang kedua ini sedikit lebih ribet dari cara yang pertama , karena kita harus menyesuaikan projek kita dengan lokasi file bootstrap yang sudah kita download .
    Berikut ini akan saya coba sampaikan beberapa langkah-langkah yang kita perlukan untuk melakukan instalasi Bootstrap ke projek kita .
-   Download File Bootstrap di http://getbootstrap.com/getting-started/#download

Struktur file bootstrap
  - Buat file contoh , untuk mempermudah silahkan meniru contoh code HTML dibawah ini :


  - Selanjutnya simpan file kita di folder bootstrap yang barusan kita download , maka kurang lebih letaknya akan seperti ini :
index.html merupakan nama file yang barusan kita buat dengan menggunakan kode HTML diatas.   
Nah setelah dijalankan di browser , maka hasilnya kurang lebih akan seperti gambar dibawah :

 
Nah demikian , panduan singkat dari saya tentang panduan instalasi Bootstrap ke projek kita , untuk lebih dalam tentang Bootstrap silahkan teman-teman eksplorasi sendiri di Official Website nya :


Nah , demikian post dari saya tentang Instalasi Bootstrap nya , jika ada pertanyaan , kritik dan saran , silahkan disampaikan , jangan sungkan untuk menyampaikan pendapat

Terima Kasih .
Minggu, 19 Oktober 2014
Posted by alimshare
6 Comments
Tag : , , , , , , , , , ,

Percantik Tampilan Web dengan CSS Framework Metro UI

►
 Di kesempatan kali ini , saya akan membahas sedikit tentang mempercantik tampilan web kita dengan CSS Framework Metro UI . Metro UI sendiri merupakan salah satu jenis CSS Framework
yang merupakan pengembangan dari CSS Framework Bootstrap .

Metro UI 

Nah , Metro UI mengusung tema seperti Windows 8 , jadi kita bisa melihat Flat Design nya Windows 8 pada website kita jika menggunakan CSS Framework ini . Hehehe

Berikut ini saya tampilkan beberapa tampilan yang ditawarkan oleh Metro UI :

Navigation Bar
Nah , gambar diatas merupakan contoh Navigation Bar yang ditawarkan oleh Metro UI .
Side Bar
  Kemudian selanjutnya merupakan Side Bar ...
Carousel
Window
Calendar
Nah beberapa gambar diatas merupakan beberapa tampilan yang bisa kita dapatkan dengan menggunakan Metro UI , jadi buat teman-teman yang berminat mempelajari Metro UI , atau mungkin ingin menambahkan beberapa fungsi tambahan dari Metro UI .

Silahkan mengunji :
http://metroui.org.ua/

Nah buat teman-teman , silahkan mencoba ... :D

Terima Kasih


Senin, 06 Oktober 2014
Posted by alimshare
0 Comments
Tag : , , , , , , , , , , ,

Membuat Read More di Blogspot

►
Buat temen-temen yang lagi pada belajar nge-Blog . Di postingan ini , saya mencoba membagi cara membuat read more ke postingan blog kita , karena secara defaultnya biasanya postingan kita dimunculkan semuanya sehingga home blog kita pasti penuh dan panjang ke bawah ... Hehe .
Read more picture
Nah tanpa basa-basi langsung aja deh ini cara nya .
  • Masuk ke Dashboard Blog kita
  • Pilih Menu Template
  • Pilih Edit HTML
  • Maka akan muncul tampilan script dari template yang kita gunakan .
  • Nah mulai lah proses edit kita disini 
  • Cari </head>
  • Tambahkan script dibawah ini tepat di atas </head> .
<!--ReadMore -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}.pic{border: 10px solid #fff;float:left;height:165px;width:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:250px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambarsummary_noimg = 300; //banyaknya huruf jika tidak ada gambarsummary_img = 250; //banyaknya huruf jika ada gambarimg_thumb_height = 165;img_thumb_width = 250;
</script>
<script type='text/javascript'>
//<![CDATA[function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx =  s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}//]]>
</script>
</b:if>
</b:if>
<!--Auto Read More Akhir-->
  • Jika sudah , coba SAVE terlebih dahulu template anda . Selanjutnya Coba cari potongan script dibawah ini :
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>...</b:widget>
  • Nah kata kuncinya adalah Blog Posts / Postingan Blog . disesuaikan dengan settingan bahasa yang digunakan pada Blog kita . Nah klo sudah ketemu , mari kita lanjutkan proses nya . 
  • Klik pada anak panah yang ada di sebelah nomor baris . kemudian cari script berikut ini :
 <data:post.body/>
  • Nah , klo sudah ketemu . ganti script barusan dengan script berikut ini :
<!-- Auto read more Mulai -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div><script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>     
<div class='read-more'>     
<a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>     
</div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->

  • Nah klo sudah , silahkan di SAVE dan lihat hasilnya . :D

Nah semoga panduan ini bermanfaat bagi teman-teman . Saya dapat referensi nya dari website di bawah ini nih :
http://trikseosimple.blogspot.com/2013/06/cara-mudah-membuat-read-more-otomatis-diblog.html

Terima Kasih .


Senin, 29 September 2014
Posted by alimshare
3 Comments
Tag : , , , , , ,

- Copyright © alimshareinfo.blogspot.com -Metrominimalist- Powered by Blogger - Designed by Johanes Djogan -