Create quality HTML prototypes with Pingendo

Pingendo is a free cross-platform WYSIWYG application for prototyping web pages. It uses Twitter’s Bootstrap as a base, and responsive web design support ensures your sites will adapt to fit phones, tablets, laptops and desktops.

Getting started is as easy as dragging and dropping. Organize your layout; add lists, tables or forms; add some text, maybe a few images (single pictures, thumbnails, a carousel), and insert media objects including YouTube videos and Google Maps.

Click an object like a paragraph and you can add your own text, change its properties from the Settings panel (alignment, text color etc), maybe opt to hide the object in one or more version of your site (display something to desktop visitors, but not on phones).

There’s also support for live HTML/ CSS editing. Click an object to jump to its code, edit it, and the preview updates as soon as you’re done.

Or maybe you prefer to edit your components in something else? No problem, because the program also detects when its HTML, CSS or images are changed, automatically reloading and previewing the results.

The program is intended to be a quick prototyping tool for individual pages more than a full-scale web editor, so there’s no tree for organizing site structure, no FTP upload or anything else. The interface isn’t always clear, either, and with no help it might take a few minutes to figure out how everything works.

Pingendo is very good at what it does, though, and it’s also unintrusive enough that there’s no penalty in trying it (there’s no adware here, no web servers or other system components, just 80MB of files in the program’s own folder). Downloads are available now for Windows, Mac and Linux.

Download Pingendo

Button Demo Download Menggunakan Efek Slide

Bosan melihat tombol Demo atau Download yang mononton dan kurang menarik setiap blog yang kita kunjungi, kalo iya saya akan membagi cara membuat tombol Demo atau Download biar tidak monoton dan kurang menarik lagi dengan memberi EFEK SLIDE.Tentu nya penanasarankan? Mari Lihat Demo nya dulu!!

Demo Efek

Setelah anda melihat demonya di atas silahkan anda coba dengan mengikuti langkah-langkah dibawah ini untuk menggunakannya.

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan CTRL+F cari kode ]]></b:skin> atau </style> Lalu tambahkan kode CSS dibawah tepat diatas kode tersebut.

.download {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto; width:auto;height:50px;line-height:50px;border:1px solid #e9e9e9;} .download h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#999;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0; padding:0;width:100%;background:#fff;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);} .download:hover h1{margin-left:100%;} .download ul {display:inline-block;margin:0;padding:0;} .download ul li {position:static;display:inline-block;padding:0 .1em;} .download ul li::before {display:none;} .download ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em; background:none;transition:all 0.5s ease;} .download ul li a:hover {background:#fc8675;color:#fff;} .download-info{background:#e27869;} .download-info h1{background-color:#fff;} .demo {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto; width:auto;height:50px;line-height:50px;border:1px solid #e9e9e9;} .demo h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#999;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0; padding:0;width:100%;background:#fff;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);} .demo:hover h1{margin-left:100%;} .demo ul {display:inline-block;margin:0;padding:0;} .demo ul li {position:static;display:inline-block;padding:0 .1em;} .demo ul li::before {display:none;} .demo ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em; background:none;transition:all 0.5s ease;} .demo ul li a:hover {background:#48596d;color:#fff;} .demo-info{background:#333c4b;} .demo-info h1{background-color:#fff;}

4. Simpan template.

5. Gunkan kode di bawah ini kemudian taruh di postingan sobat (Gunakan mode HTML) untuk menerapkannya dalam postingan.

<div class="download download-info"><h1>DOWNLOAD</h1><ul><li><a href="Link Demo" target="_blank"> DEMO </a></li><li><a href="Link Download" target="_blank"> DOWNLOAD </a></li></ul></div>

NB: Ganti huruf warna biru dengan alamat link demo dan download.

Struktur Dasar Template Blog Valid HTML 5 dan Schema.org

Struktur Dasar Template Blog Valid HTML 5 dan Schema.org - Selamat malam sobat blogger semuanya, kali ini saya akan memberikan sedikit informasi tentang bagaimana cara membuat kerangka tentang pembuatan sebuah template blog valid HTML5 dan Schema.org.

Template yang baik adalah template yang valid di segala sisi, baik itu valid HTML 5, CSS 3, juga Schema.org. Karena dengan validnya sebuah templae tersebut maka browser maupun mesin pencari akan sangat semakin mudah untuk mengcrawl ataupun merayapi struktur dari template tersebut.

Untuk lebih jelasnya lagi silahkan Copy semua code HTML dibawah ini, setelah itu simpan dalam format .XML

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML expr:class='data:blog.languageDirection + &quot; no-js rwd&quot;' expr:dir='data:blog.languageDirection'>
<head>
<meta charset='utf-8'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'><link href='https://plus.google.com/ID_G-pluss' rel='author'/></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
<b:else/>
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
        <title>404: Page Not Found ~ <data:blog.title/></title>
    <b:else/>
        <title><data:blog.pageName/> ~ <data:blog.title/></title>
    </b:if>
</b:if>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Deskripsi - Blog' name='description'/>
<meta content='Keyword blog' name='keywords'/>
</b:if>
&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[
Disini nantinya akan di isi CSS untuk Layout Tata Letak
*/]]></b:skin>
<style type='text/css'>
/*--------------------------
Name : Kerangka template dengan Schema.org
Designer: SAGITARIUS KUSADHI
URL : http://shaggyweb.blogspot.com
--------------------------*/

Tulis CSS anda disini, mulai dari outer-wrapper dan seterusnya
/* make sidebar nav vertical */
@media (min-width: 768px) {
  .sidebar-nav .navbar .navbar-collapse {
    padding: 0;
    max-height: none;
  }
  .sidebar-nav .navbar ul {
    float: none;
  }
  .sidebar-nav .navbar ul:not {
    display: block;
  }
  .sidebar-nav .navbar li {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li a {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

</style>

Jquery disini

</head>
<body expr:class='data:blog.pageType' itemscope='itemscope' itemtype='http://schema.org/WebPage'>

<div id='outer-wrapper'> <!-- Disini posisi elemen outer-wrapper -->
<div class="row">  <div class="col-sm-3">    <div class="sidebar-nav">      <div class="navbar navbar-default" role="navigation">        <div class="navbar-header">          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <span class="visible-xs navbar-brand">Menu Vertikal</span>
        </div>        <div class="navbar-collapse collapse sidebar-navbar-collapse">          <ul class="nav navbar-nav">            <li class="active"><a href="#">Menu Satu</a></li>
            <li><a href="#">Menu Dua</a></li>
            <li class="dropdown">

              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

              <ul class="dropdown-menu">                <li><a href="#">Dropdown Satu</a></li>
                <li><a href="#">Dropdown Dua</a></li>
                <li><a href="#">Dropdown Tiga</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Lainnya</li>
                <li><a href="#">Yang Lainnya</a></li>
              </ul>            </li>
            <li><a href="#">Menu Empat</a></li>
            <li><a href="#">Komentar <span class="badge">1,118</span></a></li>
          </ul>        </div>       <!--/.nav-collapse -->
        </div>      </div>    </div>  <div class="col-sm-9">      Main konten ada di sini
  </div></div>
<header class='header' id='header' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<!-- Disini lokasi untuk Header judul dan deskripsi Blog -->
</header>

<div id='main-wrapper' itemprop='mainContentOfPage'>
<!-- Disini lokasi untuk posting dan komentar dan b:section dibawah ini adalah widget untuk posting dan komentar -->

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>

</div>

<aside id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
<!-- Disini Lokasi sidebar blog yang berisi widget, dan kode b:section dibawah ini adalah kode untuk widget sidebar -->
<b:section class='sidebar' id='sidebar-kanan' showaddelement='yes'>
</b:section>
</aside>
<div class='clear'>&#160;</div>
<div class='clear'/> <!-- Pembatas dari outer-wrapper -->

<footer class='clear' id='site-footer' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>

<!-- Disini lokasi footer, bisa di isi widget dan copyright desainer -->

</footer>

</div> <!-- Akhir dari outer-wrapper -->

</body>
</HTML>

Silahkan copy kode diatas dalam mode edit HTML pasa template kamu, jika ada syntax yang error jangan sungkan untuk memberitahukan kepada saya melalui form komentar di bawah ini. Terimakasih.

[SEMANTIK] Mengenal Apa Itu Semantik

Mengenal Apa Itu Semantik - Sebuah dokumen HTML tidak lain adalah kumpulan dari tag-tag HTML dan seperti yang telah anda ketahui bahwa HTML adalah bahasa untuk me-markup atau mem-format suatu dokumen. HTML BUKAN untuk membuat bagaimana dokumen tersebut ditampilkan. Sama halnya dengan aplikasi pengolah kata, formating yang dilakukan pada suatu dokumen ditujukan untuk memberikan makna-makna tersendiri pada setiap kata-kata yang di olahnya. Misalnya, ketika suatu teks ditampilkan miring, biasanya ada makna tertentu pada teks tersebut, seperti pada pertanyaan berikut :

Berikut ini adalah tag-tag HTML, kecuali :‛

Kata “kecuali” di sana diberi format miring karena penulis ingin menegaskan bahwa jawaban yang benar adalah yang bukan tag HTML. Jika kalimat pertanyaan tersebut dibaca, biasanya akan ada perbedaan intonasi pada kata “kecuali”. Dalam HTML, terdapat dua tag yang dapat membuat suatu teks miring yakni tag <em> dan <i>.

Lalu apa perbedaan kedua tag tersebut?

Jika kita sangkutpautkan pertanyaan ini dengan contoh kasus di atas, penggunaan tag <em> untuk memiringkan kata “kecuali” adalah cara yang benar. Mengingat tag <em> ini memang berfungsi untuk memberikan tekanan pada suatu teks (emphasis). Berbeda dengan tag <i> yang hanya berfungsi untuk menampilkan teks menjadi miring tanpa ada makna sama sekali.

Maksud Semantik dalam HTML

Semantik berarti makna yang terkandung dari suatu kata. Dalam HTML, semantik berarti makna yang terkandung dari suatu tag HTML. Seperti pada contoh kasus sebelumnya, penggunaan tag <em> lebih memiliki nilai semantik dari pada tag <i>.

Pada dasarnya, Gunakanlah tag-tag HTML sesuai dengan maksud/fungsi dari tag HTML tersebut, Jangan menggunakan suatu tag HTML karena tag tersebut memiliki penampilan berbeda. Misalnya, penggunaan tag <table>. Tag ini berfungsi untuk membuat suatu tabel atau data tabular, penggunaan diluar itu adalah salah, seperti penggunaan tag table untuk pembuatan layout web. Untuk mengetahui fungsi dari setiap tag HTML anda dapat membacanya di w3schools

Pentingkah Semantik?

Penulisan dokumen HTML yang semantik ditujukan agar dokumen HTML dapat dipahami oleh komputer, karena pada dasarnya cara berfikir komputer berbeda dengan cara berfikir manusia.

Manusia bisa memahami suatu dokumen dengan adanya tanda baca, atau formatting (seperti teks miring tebal). Berbeda dengan komputer, dan pada kasus ini tag-tag HTML lah yang menjadi tanda baca yang akan membantu komputer untuk memahami dokumen HTML.

Kembali kepada penting tidaknya semantik, boleh jadi dokumen yang semantik dapat mempermudah sistem komputer untuk mengolah informasi dalam dokumen untuk keperluan tertentu, misalnya untuk keperluan Mesin Pencarian (Search Engine) agar hasil pencarian lebih akurat dan sesuai dengan yang diinginkan.

Mungkin ini sekedar share info dari saya semoga apa yang sudah saya bagikan dapat bermanfaat bagi pengguna semuanya.
Terima kasih, jangan lupa untuk meninggalkan komentar supaya memotivasi kami menulis artikel-artikel selanjutnya.