Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Cara membuat Related Post 100% Keren

Rabu, 28 Agustus 2013
Posted by Unknown
Add Comments
,
Read More..
Related Post
Related Post 100% Keren memang seharusnya saya berikan pada judul postingan ini karena widget hasil kreasi Mas Taufik Nurrohman yang akan saya share pada postingan kali ini memang patut di pasang pada blog sobat,sebagai contoh demonya sudah saya praktekkan pada blog saya ini silahkan Review ,mengapa saya harus rekomendasikan Related Post ini,salah satunya adalah di buatnya menjadi lebih ringan saat loding dan tampilan tooltip yang lebih keren di banding dengan Related Post yang pernah saya Share sebelumnya silahkan Review Lagi Cara Membuat Related Post.

Hanya saran saja sebelum sobat membuat Related Post Super Keren yang akan saya posting ini lebih baik Dowload lengkap dulu template untuk menjaga jika terjadi kesalahan saat pemasangan kode .
Berikut Cara membuat Related Post 100% Keren yang harus sobat ikuti secara lengkap:
  1. Gunakan Ctrl + F cari kode ]]></b:skin> pasang Css Kode berikut tepat di atas nya :
    .related-post{  margin:2em auto 0;   font:normal normal 12px/1.4 Arial,Sans-Serif}
    .related-post h4{ font-size:150%;  margin:0 0 .5em;color:yellow}
    .related-post a{color:orange}
    .related-post a:hover{color:olive}
    .related-post-style-6 li{position:relative}
    .related-post-style-6 .related-post-item-thumbnail{ width:50px;  height:50px;  max-width:none;  max-height:none;  background-color:#000;  border:1px solid olive;  padding:0;  float:left;  margin:0 10px 0 0}
    .related-post-style-6 .related-post-item-title{ display:block;  font-weight:bold}
    .related-post-style-6 .related-post-item-summary{ display:block;  overflow:hidden;  font-size:11px}
    .related-post-style-6 .related-post-item-tooltip{ position:absolute;  bottom:100%;  left:-10px;  z-index:999;  margin-bottom:10px;  border:1px solid olive;  background-color:#000;  padding:10px;  width:90%;  height:auto;  box-shadow:0 1px 3px rgba(0,0,0,.2);  display:none}
    .related-post-style-6 .related-post-item-tooltip:before,
    .related-post-style-6 .related-post-item-tooltip:after{ content:"";  display:block;  width:0;  height:0;  border:10px solid transparent;  border-top-color:olive;  position:absolute;  top:100%;  left:21px}
    .related-post-style-6 .related-post-item-tooltip:after{ border-top-color:#000;  border-width:9px;  margin-left:1px}
    .related-post-style-6 li:hover .related-post-item-tooltip{display:block}
  2. Untuk pemasangan kode XML nya silahkan pasang kode berikut tepat di atas kode 
    <div class='post-footer'>
    berikut kode nya :
    </b:if>
        <!-- Related Post Widget Start -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div id='related-post' class='related-post'/>
      <script type='text/javascript'>
      var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
              &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop></b:if>];
      var relatedPostConfig = {
          homePage: &quot;<data:blog.homepageUrl/>&quot;,
          widgetTitle: &quot;&lt;h4&gt;Baca Juga Yang Ini&lt;/h4&gt;&quot;,
          numPosts: 5,
          summaryLength: 300,
          titleLength: &quot;auto&quot;,
          thumbnailSize: 50,
          noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
          containerId: &quot;related-post&quot;,
          newTabLink: false,
          moreText: &quot;Read More&quot;,
          widgetStyle: 6,
          callBack: function() {}
      };
      </script>
      <script type='text/javascript' src='http://fullblogdesign-demo.googlecode.com/svn/trunk/related-post.min.js'/>
    </b:if>
    <!-- Related Post Widget End -->
  3. Lakukan Preview dulu jika tidak ada kode yang Error silahkan Save Template
Semoga Cara membuat Related Post Super Keren yang saya share pada pertemuan kali ini bisa bermanfaat jika ada kesulitan dalam pemasangan kode silahkan bertanya pada form komentar


Sumber KOde :http://www.dte.web.id/

Cara Membuat Blog Valid HTML5 100%

Posted by Unknown
1 Comment
,
Read More..
Cara Membuat Blog Valid HTML5 100% - Awalnya saya males belajar tentang HTML5 tapi mengikuti perkembangan zaman, akhirnya belajar juga HTML5. Jujur saya terkontaminasi oleh Bung Adhy Kompi Ajaib smile

Apa itu HTML5? HTML5 adalah pengembangan dari versi sebelumnya, dimana tujuan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. Intinya, agar web/blog terbaca sempurna di semua browser dan mudah dalam penggunaan.


HTML5

Perlukah web/blog valid HTML5? dari berbagai sumber saya temukan bahwa diantara keuntungan mevalidasi blog adalah :
  • Membantu Search Engine meng-indeks dokumen website/blog lebih baik.
  • Render browser lebih baik dan lebih cepat
  • DOCUMENT OBJECT MODEL (DOM) lebih stabil dan konsisten
  • Future Proof, yang berarti HTML lebih kompatible, backward compatible terhadap browser terbaru.
  • Mengetahui kondisi website/blog lebih detail ( link-link broken, link mati, dst.)
  • Lebih disukai browser-browser dan tentu masih banyak lagi keuntungan lain dari validasi HTML ini.

Baguskah validasi Blogspot untuk SEO? Nah.. ini yang saya masih belum tau, kalau melihat alasan di atas tentunya baik, tapi kenapa vitur-vitur template blogspot itu sendiri belum valid HTML5. Saya tunggu pendapat sobat tentang validasi untuk SEO.


Cara Membuat Blog 100% Valid HTML5


Langkah 1 : Backup template sebelum melakukan editing.
Langkah 2 : Cari kode seperti ini :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
ganti dengan :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
Langkah 3 : Ganti kode </html> dengan </HTML> (paling bawah di template)
Langkah 4 : Hapus kode ini :
<b:include data='blog' name='all-head-content'/>
Langkah 5 : Ganti <b:skin><![CDATA[ dengan kode dibawah :
<link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
&lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]]
<style>
Langkah 6 : Hapus semua kode ini :
<b:include name='quickedit'/>
Setiap kali menambahkan widget baru, hapus kode di atas.
Langkah 7: Hapus semua kode ini (opsional)
<a expr:name='data:post.id'/>
Langkah 8 : hapus kode seperti ini :
<b:include data='post' name='postQuickEdit'/>
atau seperti ini :
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>
Langkah 9 : Hapus kode dibawah ini (kalau ditemukan, kalau tidak ada, lewati saja)
<div class='post-share-buttons goog-inline-block'>...sampai...</div>
Langkah 10 : Ganti semua code & dengan &amp;

Sampai di sini, template sobat sudah bisa Valid HTML5 untuk Homepage. Akan tetapi pada postingan masih banyak error karena komentar blogger (kecuali komentar hack seperti blog ini). Mudah-mudahan saya bisa share cara mem-fix-an postingan.

Harap Diperhatikan


Kemungkinan dengan langkah-langkah di atas, blog sobat belum valid. Supaya menjadi 100%, silahkan perhatikan beberapa hal dibawah ini :

1. Selalu gunakan tag alt pada gambar, contoh :
<img alt="HTML5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwu-jMwvEwrg3Um2ge4cr4eNuXuJgbCyDQ70Yf6G7z8ZD7npmlx1CERB5XdKsdxVkQTezCmrnAQBI2IA0ri3TEqQC6wab0lcao0kPCn7W5kExw5SbMH1bgK1d23oZe5yUhweUosVwmUWg/s1600/html5.png" />
2. Jangan gunakan border="0" pada gambar, sebagai gantinya tambahkan kode :
style="border:none"
atau CSS terpisah seperti
img{border:none}
3. Pada iFrame, jangan menggunakan frameborder="0" atau allowtransparency:"true" scrolling="no", sebagai gantinya gunakan kode :
style="border:none;overflow:hidden"
atau CSS terpisah seperti
iframe{border:none;overflow:hidden}
4. Pada tag a jangan menggunakan tag name seperti :
<a name='comment-form'>
sebagai gantinya gunakan id seperti :
<a href='#comment-form'>
5. Jangan ada dua id pada template.
6. Hapus kode <b:include name='quickedit'/> setiap menambah widget baru.

Untuk kekurangannya Insya Allah saya tambahkan kedepannya.

Semoga bermanfaat...
Sumber

CSS Label Cloud Keren

Jumat, 16 Agustus 2013
Posted by Unknown
1 Comment
Read More..
5 Style CSS Label Cloud Keren - Pada postingan kali ini yaitu mempercantik widget label anda. Apa sih label itu ? Label untuk mengkategorikan atau mengelompokkan post yang dibuat. Biasanya pengelompokan label itu didasarkan atas kesamaan tema (bahasan). Saat menulis postingan pasti ada pilihan memberi label baru atau memakai yang sudah ada. Widget label blogspot ada 2 jenis, ada yg berupa LIST dan juga berbentuk Cloud. Perbedaan bentuk
List = label akan berderet seperti kereta :v
Cloud = label akan berbentuk barisan kode menyamping seperti awan, contoh :
Dibawah ini ada 5 Style CSS Label Cloud blogspot 

Style 1 :


CSS :

/* Label Cloud Style 1 */
.label-size{margin:0 2px 6px 0;padding:3px;text-transform:uppercase;border:solid 1px #C6C6C6;border-radius:3px;float:left;text-decoration:none;font-size:10px;color:#666}.label-size:hover{border:1px solid #B20000;text-decoration:none;-moz-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;-webkit-transition:all 0.5s ease-out;-ms-transition:all 0.5s ease-out;transition:all 0.5s ease-out;-moz-transform:rotate(7deg);-o-transform:rotate(7deg);-webkit-transform:rotate(7deg);-ms-transform:rotate(7deg);transform:rotate(7deg);filter:progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455,M12=-0.08715574274765817,M21=0.08715574274765817,M22=0.9961946980917455,sizingMethod='auto expand');zoom:1}.label-size a{text-transform:uppercase;float:left;text-decoration:none}.label-size a:hover{text-decoration:none}
/* Credit SCH-XP |  Style 1 */
Style 2 :
CSS :
/* Label Cloud Style 2 */.label-size{font-size:14px;margin:5px 0 5px 0;float:left;border-radius:5px;-ms-border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;text-decoration:none;padding:5px;border:1px #fff solid;background:#2493C4;color:#fff;box-shadow:1px 1px 5px rgba(1,1,1,.1)}.label-size a{color:#fff;font-weight:normal}.label-size a:hover{color:#2493C4;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out}.label-size:hover{background:#333;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg)}/* Credit SCH-XP | Style 2 */
Style 3 :
CSS :
/* Label Cloud Style 3 */
.label-size{margin:0;padding:0;position:relative}.label-size a,.label-size span{float:left;height:24px;line-height:24px;position:relative;font-size:12px;margin-bottom:9px;margin-left:20px;padding:0 10px 0 12px;background:#2493C4;color:#fff;text-decoration:none;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-webkit-border-top-right-radius:4px;border-top-right-radius:4px}.label-size a:before,.label-size span::before{content:"";float:left;position:absolute;top:0;left:-12px;width:0;height:0;border-color:transparent #2493C4 transparent transparent;border-style:solid;border-width:12px 12px 12px 0}.label-size a:after,.label-size span::after{content:"";position:absolute;top:10px;left:0;float:left;width:4px;height:4px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;-moz-box-shadow:-1px -1px 2px #2493C4;-webkit-box-shadow:-1px -1px 2px #2493C4;box-shadow:-1px -1px 2px #2493C4}.label-size a:hover,.label-size span::hover{background:#333}.label-size a:hover:before,.label-size span::hover::before{border-color:transparent #333 transparent transparent}
/* Credit SCH-XP |  Style 3 */
Style 4 :

CSS :

/* Label Cloud Style 4 */
.label-size{display:inline-block;padding:0px 10px;height:29px;line-height:29px;border-radius:5px;font-weight:bold;font-size:12px;text-decoration:none}.label-size{border:1px solid #769e42;box-shadow:inset 0 1px 0 #c5e59c;background-color:#9ed35a;text-shadow:0px 1px 1px #6ea23b;color:#fff;background-image:linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-o-linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-moz-linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-webkit-linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-ms-linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%)}.label-size:hover{background-color:#b7fa66;background-image:linear-gradient(top,#b7fa66 0%,#7ec940 100%);background-image:-o-linear-gradient(top,#b7fa66 0%,#7ec940 100%);background-image:-moz-linear-gradient(top,#b7fa66 0%,#7ec940 100%);background-image:-webkit-linear-gradient(top,#b7fa66 0%,#7ec940 100%);background-image:-ms-linear-gradient(top,#b7fa66 0%,#7ec940 100%)}.label-size:active{background-image:linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-o-linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-moz-linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-webkit-linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-ms-linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%)}.label-size{display:inline-block;border-radius:5px 0 0 5px;border-right-width:0;position:relative;z-index:5;margin-right:20px;margin-bottom:10px}.label-size:after{content:"";width:22px;height:22px;line-height:18px;font-size:25px;border-top:1px solid #769e42;border-right:1px solid #769e42;box-shadow:inset 0 1px 0 #c5e59c;background-color:#9ed35a;text-shadow:0px 1px 1px #7eac46;border-radius:3px 7px 3px 0;color:#fff;background-image:linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-o-linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-moz-linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-webkit-linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-ms-linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);position:absolute;top:3px;right:-12px;z-index:-3;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476,M12=-0.7071067811865475,M21=0.7071067811865475,M22=0.7071067811865476,sizingMethod='auto expand');zoom:1}.label-size:hover:after{background-color:#b7fa66;background-image:linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%);background-image:-o-linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%);background-image:-moz-linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%);background-image:-webkit-linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%);background-image:-ms-linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%)}.label-size:active:after{background-image:linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-o-linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-moz-linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-webkit-linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-ms-linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%)}.label-size:before{content:"";height:5px;width:5px;display:block;position:absolute;right:-3px;top:11px;background-color:#fcfdf5;border:1px solid #83ab52;border-radius:5px;box-shadow:0 1px 0 #b2ddd83}.label-size span{padding:2px 5px;border:1px solid #9e5c26;border-radius:5px;box-shadow:inset 0 1px 0 #f5bf8c;background-color:#ed943f;text-shadow:0px 1px 1px #000;margin-left:10px;background-image:linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%);background-image:-o-linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%);background-image:-moz-linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%);background-image:-webkit-linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%);background-image:-ms-linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%)}#Label1{height:210px !important}
/* Credit SCH-XP | Style 4 */

Style 5 :

CSS :
.label-size {
display: block;
float: left;
background: #555 !important;
margin: 0 1px 1px 0;
color: #eee;
font-size: 100%;
}
.label-size:hover, .label-size a:hover, .label-size span:hover{background:#3384ff;}
.label-size a, .label-size span {
display: inline-block;
color: #fff;
padding: 4px 4px;
}
Cara Memasang Label Cloud :
1. Buka Blogger

2. Pilih Tata Letak

3. Klik Add Gadget -> pilih Label
4. Simpan

Cara Memasang Style CSS Label Cloud :
1. Buka Blogger

2. Klik Template -> Edit HTML

3. Copy Style CSS diatas, lalu paste diatas kode ]]></b:skin> (pake ctrl+f biar cepet :v)

4. Simpan Template

Terimakasih telah membaca artikel  CSS Label Cloud Keren di blog ini, semoga bermanfaat, jgn lupa untuk meninggalkan komentar + follownya :)

sumber
Next Next
Diberdayakan oleh Blogger.