Tempat Tutorial Blogspot, SEO, HTML5, CSS3, Facebook, Twitter, Software, Game, Motivasi, Tips dan Trik.

Articles by "HTML"

Membuat Label / Tag Cloud Bergerak Berputar - Kali Ini saya akan share Cara Membuat Label / Tag Cloud Bergerak Berputar Di BLOG, Oke Lah langsung lihat SSnya dibawah ini :

Bagaimana Menurut Sobat ???? Keren bukan :D
Jika sobat sekalian ingin memasang diblog masing masing, Simak langkah langkah dibawah ini :

BERIKUT LANGKAH LANGKAHNYA :

1. Login Blogger
2. Pilih Template => Klik Edit HTML
3. Cari Kode
<b:section class='sidebar' id='sidebar' preferred='yes'>
  Supaya Mepercepat Pencarian guanakan CTRL+F
4. Kemudian Copy Paste Kode di bawah ini tepat di atas
<b:section class='sidebar' id='sidebar' preferred='yes'>


<b:widget id='Label99' locked='false' title='Tag Cloud/Label' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://anvity.googlecode.com/files/swfobject.js' type='text/javascript'/>
<div id='flashcontent'> by <a href='http://kenama.blogspot.com/'>Majid Alfredi</a> and <a href='http://kenama.blogspot.com'>Kenama</a> Distributed by <a href='http://kenama.blogspot.com'>MaVny</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/ruangsc/enes/tagcloud.swf", "tagcloud", "250", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
</div>
</b:includable>
</b:widget>

kalian bisa rubah ukuran sesuai yang kalian inginkan dengan mengganti kode kode di bawah ini .

                1. " 250px " Lebar widget
                2. " 300px " Tinggi widget
                3. " #ffffff " Warna latar
                4. " 0x333333 " Warna huruf
                5. " 12 " Ukuran huruf
5. klik simpan template . Dan Lihat hasilnya .

Dalam mengoptimalkan blog kita bisa mengatasi beratnya loading blog, sehingga blog kita bisa ringan dan loading cepat. Terkadang kita dipusingkan dengan banyaknya widget yang terpasang atau kita menginginkan hanya widget tertentu yang tampil di halaman tertentu. Sebelum membahas optimasi widget, kita bahas dulu yang menyebabkan blog kita loadingnya berat. Berikut beberapa penyebab loading blog berat:

1. Terlalu banyak widget yang terpasang

Ini biasanya terjadi pada blogger yang baru mengenal blog, sehingga banyak widget yang dipasang untuk mempercantik blog, contoh: widget musik, widget geo visitor, widget video dll


2. Template Blog

Yang terpenting dalam loading blog adalah jenis template yang digunakannya. Memang template yang keren itu tidak simple, sehingga banyak desainer template yang membuat template yang keren namun ringan dan tentunya itu tidak gratis. Ada juga template yang gratis namun tidak se-keren template berbayar. Para blogger biasa menyebutnya template SEO Friendly.

Berikut widget yang perlu dipasang di blog:

  1. Widget populars post
  2. Widget Kotak pencarian
  3. Widget Recent post
  4. Widget Followers

untuk widget archive saya rasa tidak perlu, karena bisa di ganti dengan sitemap atau daftar isi. Sobat bisa membaca pstingan saya Cara Memasang Daftar Isi Sitemap.

Berikut Optimasi Widget Mengatasi Loading Blog:

Sebenarnya cara ini hanya memberikan fungsi conditional tags pada widget tersebut untuk memberikan perintah agar suatu elemen ditampilkan pada bagian atau halaman tertentu saja dan menyembunyikan pada halaman tertentu.

Mencari ID widget

Sebelum memberi conditional tags kita harus tahu ID widget yang akan di berikan conditional tags
Masuk ke blogger.com >> layout atau tata letak >> klik edit pada widget yang akan di beri conditional tags.

Optimasi Widget

Bisa dilihat pada anak panah id widgetnya adalah HTML5. Setelah itu masuk ke Template >> Edit HTML >> klik Jump to Widget lalu pilih HTML5. Bisa lihat gambar

Optimasi Widget
Optimasi Widget


Lalu masukkan kode dibawah ini sesuai dimana widget akan ditampilkan, penempatannya setelah <b:includable id='main'> dan penutupnya </b:includable>.

Cara menampikan widget hanya di Halaman utama/indeks (Homepage)

<b:widget id='HTML5' locked='false' title='' type='HTML'>
    <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>
</b:includable>
  </b:widget>

Cara menampilkan widget hanya di Halaman Posting

<b:widget id='HTML5' locked='false' title='' type='HTML'>
    <b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>
</b:includable>
  </b:widget>

Cara menampilkan widget hanya di Halaman Statis

<b:widget id='HTML5' locked='false' title='' type='HTML'>
    <b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>
</b:includable>
  </b:widget>

Cara menampilkan widget hanya di Halaman Archive

<b:widget id='HTML5' locked='false' title='' type='HTML'>
    <b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>
</b:includable>
  </b:widget>

Cara menampilkan widget hanya berdasarkan alamat URL

<b:widget id='HTML5' locked='false' title='' type='HTML'>
    <b:includable id='main'>
<b:if cond='data:blog.url == "Ganti dengan alamat URL Halaman di sini"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>
</b:includable>
  </b:widget>


Cara menampilkan widget pada halaman index

<b:widget id='HTML5' locked='false' title='' type='HTML'>
    <b:includable id='main'>
<b:if cond='data:blog.pageType == "index"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>
</b:includable>
  </b:widget>

Simpan template setelah menambahkan tag conditionalnya, hanya gunakan salah satu atau beberapa saja.
Jika ingin melakukan cara ini pada widget lain, lakukan mulai dari atas.

Dengan menambahkan conditional tags pada widget, kita bisa mengatur munculnya widget pada halaman tertentu saja. Sehingga tidak semua widget muncul pada satu halaman langsung, dan bisa untuk mengoptimalkan loading blog sehingga loading blog jadi ringan. Semoga artikel Optimasi Widget Mengatasi Loading Blog bisa bermanfaat untuk sobat blogger yang sedang mengalami loading blog yang berat dan bisa menambah wawasan pembaca. Terima kasih  :)

Apakah sobat pernah terpikir untuk memasang animasi lentera  ramadhan di blog ? Kali ini saya akan berbagi tutorial untuk menambahkan widget dekorasi untuk blog sobat untuk mempercantik di bulan ramadhan ini. Sumber tutorial ini dari www.mybloggerlab.com, yang berbahas inggris lalu coba saya posting di blog saya dengan tetap memberikan sumber linknya untuk menghargainya.

Untuk demonya bisa mengunjungi link website yang saya berikan di atas atau bisa lihat gambar di bawah ini

Memasang Animasi Lentera Ramadhan di Blog

Animasi Lentera Ramadhan ini di bangun dengan Adobe Flash sehingga jika siapa saja yang menjalankan browser tanpa Flash maka tidak akan bekerja bagaimana mestinya. Namun, saat ini, semua sudah berjalan pada Smartphone dan sistem operasi yang handal seperti Windows 7 yang telah built-in flash Terpasang, sehingga tentu tidak akan menciptakan masalah besar terhadap kompatibilitas. Menurut informasi dari websitenya widget ini sangat ringan, jadi tidak akan menghambat loading web blog sobat.

BERIKUT LANGKAH LANGKAHNYA

1. Seperti biasa sobat harus login terlebih dahulu ke blogger.com
2. Masuk ke Template >> Edit HTML dan cari kode </body>, lalu copy dan pastekan kode berikut di atasnya
<!--  Ramadan Lantern By MyBloggerLab.com -->
<div align="center">
<table border="0" width="900" cellspacing="0" cellpadding="0">
<tr>
<td width="900" height="0">
<div style="float:top right; position:absolute; overflow:visible; left:45px; top:0px; height:192px; width:144px z-index: 9999;">
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj2" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="192" height="144"><param name="movie" value="http://mybloggerlab.com/Scripts/stardima.swf"/><param name="quality" value="High"/><param name="wmode" value="transparent"/><embed src="http://mybloggerlab.com/Scripts/stardima.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj2" width="192" height="144" quality="High" wmode="transparent"></embed></object>
</div>
</td>
</tr>
</table>
</div>
3. Simpan dan lihat hasilnya

Widget ini tidak hanya untuk pengguna Blogger. Setiap platform yang mendukung HTML dan Flash dapat dengan mudah memasang ini di situs Web sobat termasuk Wordpress dan lain-lain.

Semoga berhasil

flipper sharing widget
Kali Ini saya akan memposting tentang Cara Membuat Tombol Share Keren Di Blog, Jika agan sekalian berminat memasang tombol share diblog agan, silahkan simak tutorialnya Dibawah ini :

LANGKAH LANGKAHNYA

  1. Pergi ke Blogger > Template 
  2. Backup template Anda 
  3. Klik Edit HTML > Lanjutkan 
  4. Klik kotak Expand Template Widget 
  5. Tambahkan CSS Dibawah ini tepat diatas ]]></b:skin> Atau </style>
  6. 
    /*--------Flipper Sharing Widget ------*/ 
    .flipper a { 
    display:block; 
    height:48px; 
    width:48px; 
    padding:0 4px; 
    float:left; 
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYGw9MrrA6-r9Yeuwor_XD3uj__PwMQ5JQhA67VzwNDG3GqXJlwBPUgGMMQAk_NajtdJH36SEe629HyO6Yy-_EXwYXCGgK1iDpNRfJ2ib-eq5VfcLVKtCVqwzx2aQLpRxGdi2nU_qHJ-n_/s1600/flipper.png) no-repeat; 
    -webkit-transition: ease-in 0.15s all;    
    -moz-transition: ease-in 0.15s all;    
    -o-transition: ease-in 0.15s all;    
    -ms-transition: ease-in 0.15s all;    
    transition: ease-in 0.15s all; 
    cursor:pointer;
    }
    
    .flipper a.googleplus { 
    background-position: 0px -348px;
    } 
    .flipper a.googleplus:hover { 
    background-position: 0px -406px;
    }
    
    .flipper a.pinterest { 
    background-position: 0px -464px; 
    } 
    .flipper a.pinterest:hover { 
    background-position: 0px -522px;
    }
    
    .flipper a.delicious { 
    background-position: 0px 0px; 
    } 
    .flipper a.delicious:hover { 
    background-position: 0px -58px;
    } 
    .flipper a.digg { 
    background-position: 0px -116px;
    } 
    .flipper a.digg:hover { 
    background-position: 0px -174px;
    } 
    .flipper a.stumbleupon { 
    background-position: 0px -812px;
    } 
    .flipper a.stumbleupon:hover { 
    background-position: 0px -870px;
    } 
    .flipper a.technorati { 
    background-position: 0px -928px;
    } 
    .flipper a.technorati:hover { 
    background-position: 0px -406px;
    } 
    .flipper a.twitter { 
    background-position: 0px -928px;
    } 
    .flipper a.twitter:hover { 
    background-position: 0px -986px;
    } 
    .flipper a.facebook { 
    background-position: 0px -232px;
    } 
    .flipper a.facebook:hover { 
    background-position: 0px -290px;
    } 
    .flipper a.reddit { 
    background-position: 0px -580px;
    } 
    .flipper a.reddit:hover { 
    background-position: 0px -638px;
    }
    .flipper a.rss { 
    background-position: 0px -696px;
    } 
    .flipper a.rss:hover { 
    background-position: 0px -754px;
    }
    
    .Pleaseshare{ 
    margin:10px 0px; 
    color:#333333; 
    font-weight:bold; 
    font-size:20px; 
    font-family:sans-serif;
    } 
    
  7. Kemudian, Cari kode <data:post.body/>, Paste kode dibawah ini tepat dibawah kode <data:post.body/>
  8. 
    <div class='flipper'> 
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class="Pleaseshare"> 
    Please Share it! :) </div>
    
    <!--Google Plus--> 
    <a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>
    
    <!--Facebook--> 
    <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>
    
    <!-- Twitter --> 
    <a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>
    
    <!-- Pinterest --> 
    <a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>
    
    <!-- Delicious --> 
    <a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>
    
    <!--DIGG--> 
    <a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>
    <!--Stumble--> 
    <a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>
    
    <!-- Reddit --> 
    <a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>
    <!--RSS --> 
    <a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Bookmark plz :&gt;'/> 
    </b:if></div>
    <div style="clear:both"/>
    
  9. Terakhir, Simpan template
Semoga Berhasil :D

Terimakasih telah mampir diblog saya, semoga bermanfaat

kali ini saya akan berbagi cara membuat catatan, informasi, tips, atau peringatan di blog, agar blog lebih stylish dan pengunjung betah berlama-lama di blog kita.

Sebenarnya bagi sahabat yang sudah mahir CSS dan HTML tidak akan aneh lagi dengan tutorial seperti ini. Tapi walaupun mahir dalam CSS dan HTML terkadang buntu ide untuk memoles blognya supaya lebih menarik.

Sebelum saya kasih CSS dan HTMLnya, silahkan lihat dulu penampakan blok catatan, tips dan peringatan pada demo di bawah ini :


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.


Untuk memasangnya, silahkan sobat simpan kode ini di atas ]]></b:skin> atau </style>


.info, .tips, .warning {
line-height: 22px;
min-height: 38px;
padding: 10px 12px 12px 68px;
margin: 5px 0;
}
.info {
 background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4gNG8_j_YqOUcX47eGqh4KrzILupH-1UTyspeKrFuLbqXm5CGKWIQQTDDWpy4VuDyH-_xONLfbua-0BiLraiW-FSbDYyTZant_a55Haxsv-MGOMIU6C_Wo53clR0dFBhuzOXdha6YNuI/s1600/info.png') no-repeat 12px 8px;
 color: #222;
 border-radius:2px;
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUo_aqkNU7v05xrIcOo15P-20o4s5nNyYC6hP09mYwgSk5XO04ZHcfpHCi_8HtYpgRMKYTGMiR0s4D8Bl11C_IvLPonJj1kixoKLIYiyybviVW59tCR5lg_McSlb88eKsI8gh5rivWGag/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
 border-radius:2px;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbjyIDSdkMNKX2j_PoDuW_M6glWTBdQUZlVWz5zRMSF7Y0Hm3bVjIM1_uT9qV8fNx87alUIAR7Q5xjM-VggdAAMK1SnUZkvecBxVpoSJpyH-6tNqpjjT9_Zx4A-O5ED4PUJbERmRceXb8/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
 border-radius:2px;
}


Untuk info, kodenya seperti ini :
<div class="info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.</div>

Untuk tips, kodenya seperti ini :
<div class="tips">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.</div>

Untuk warning, kodenya seperti ini :
<div class="warning">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.</div>

Thanks To Kang Ismet


Hallo sobat Kali ini saya akan memposting tentang Cara Memasang Photoshop Online Pada Blog.
Dan silahkan Ikuti langkah Dibawah Ini :

1. Masuk ke BLOG Sobat.
2. Klik TATA LETAK - TAMBAHKAN GADGET
3. Pilih HTML/JavaScript
4. Lalu masukan code di bawah ini, pilih salah satu :

HTML Editor Pixlr Editor : 



<iframe id="pixlr" type="text/html" width="100%" height="100%" src="http://pixlr.com/editor/" frameborder="0"></iframe> 

HTML Editor Pixlr Express :


<iframe id="pixlr" type="text/html" width="100%" height="100%"  src="http://pixlr.com/express/" frameborder="0"></iframe>

HTML Edito Pixlr o-matic : 


<iframe id="pixlr" type="text/html" width="800" height="780"  src="http://pixlr.com/o-matic/?source=iframe" frameborder="0"></iframe>


5. Jika sudah dimasukan salah satu code diatas lalu klik Simpan
6. SELESAI !!
Selamat Mencoba!!!!!
Semoga Bermanfaat........................

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget