tag:blogger.com,1999:blog-51546866368041313922024-03-17T23:07:06.591-06:00gubhug reyotcah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.comBlogger505125tag:blogger.com,1999:blog-5154686636804131392.post-85413661322845455782012-08-17T19:48:00.001-06:002012-08-17T20:16:41.559-06:00Single level dropdown menu ala Dynamic View Blogger Templates <p class="on fs14">Single level dropdown menu - blogger</p><div class="clear"></div><a href="http://gubhugcss.blogspot.com/" target="_blank"><img class="fl" height="190" width="200" src="http://4.bp.blogspot.com/-y49XajgRlU4/UC7rYGPzrjI/AAAAAAAADGo/gz6Z2IdCdS4/s320/single-level-dropdown-menu-dv.gif" /></a><div class="buka bonce">Single leve; dropdown menu ala dynamic view blogger templates adalah sebuah menu horizontal dengan animasi saat membuka dan menutup yang disertai animasi putar pada arrow up/down yang terletak di menu title. Animasi pada membuka dan menutupnya anak menu dan arrow up/down dibuat menggunakan css3 transition dan css3 transform. Animasi single level dropdown ala menu template tampilan dinamis akan bekerja secara sempurna di browser yang sudah support terhadap css3. Mozilla Firefox merupakan browser yang paling sempurna menampilkan fungsi animasi single level dropdown menu ini.<div class="clear"></div><a class="demos" href="http://bestbloggermenus.blogspot.com/2012/07/menu-horizontal-alatemplate-dynamic-view.html" target="_blank" title="Klik untuk melihat demo Single level dropdown menu ala template blogger tampilan dinamis.">D E M O</a><a name='more'></a><br />
<h4>Cara membuat</h4><ol><li>Login ke <a class="sini" href="http://blogger.com/home" target="_blank">Blogger</a></li>
<li>Halaman Dasbor/Dasboard</li>
<li><b>Template</b></li>
<li><b>Edit HTML</b>.</li>
<li>Lakukan proses "<b>Cadangkan/Pulihkan</b>" atau "<b>Backup/Restore</b>" templates untuk berjaga-jaga dari kemungkinan yang tak di harapkan.</li>
<li><i>Klik</i> "<b>Edit HTML</b>".</li>
<li><strong>Template › Edit HTML</strong><br />
<ul><li><i>Klik</i> "<b>Lanjutkan/Proceed</b>".</li>
<li>Buat elemen baru di bawah header blog untuk menempatkan single level dropdown menu. Caranya bisa anda buka melalui link di bawah ini:<br />
<a href="http://bestbloggermenus.blogspot.com/2012/08/elemen-baru-untuk-membuat-menu.html" target="_blank" title="Panduan untuk membuat elemen baru di bawah header guna membuat dropdown menu di blogger">Cara membuat elemen baru untuk dropdown menu</a></li>
<li>Setelah selesai membuat elemen baru, lanjutkan <i>klik</i> "<b>Tata Letak/Layout</b>".</li>
<li><i>Klik</i> <b>Tambah Gadget/Add a Gdget</b> pada elemen baru yang terdapat di atas elemen/box "<b>posting blog</b>".</li>
<li><i>Cari</i> dan <i>klik</i> gadget <b>HTML/Javascript</b>, kemudian copy dan pastekan kode CSS dan xHTML dalam "<b>box HTML/Javascript</b>".</li>
<li><i>Klik</i> "<b>SIMPAN/SAVE</b>".</li>
</ul></li>
<li>Buka blog dan lihat hasilnya.</li>
</ol><h4>Keterangan :</h4><ol><li>Ganti setiap URL dengan alamat/URL yang sesuai dengan setiap menu terpasang.</li>
<li>Anda dapat menambahkan menu baru, baik di menu utama ataupun anak menu.</li>
</ol><div class="pre"><h5>Kode CSS</h5><pre><style type="text/css">
<b>#myGRtabmenu ul,#myGRtabmenu ul li,#myGRtabmenu ul li a</b>{
padding:0;
margin:0;
list-style-type:none;
}
<b>#myGRtabmenu</b>{
height:30px;
position:relative;
background:rgba(0,0,0,.8);
text-align:left;
line-height:30px;
box-shadow:0 2px 2px #999;
margin:0;
font-family:Arial, sans-serif;
}
<b>#myGRtabmenu span</b>{
position:relative;
display:block;
width:150px;
float:left;
}
<b>#myGRtabmenu span a</b>{
font-size:16px;
padding:0 10px;
text-decoration:none;
color:#ddd;
}
<b>#myGRtabmenu span:after</b>{
position:absolute;
display:block;
content:"";
width:1px;
background:#aaa;
height:20px;
top:5px;
right:0;
}
<b>#myGRtabmenu span:before</b>{
position:absolute;
display:block;
content:url(https://lh4.googleusercontent.com/-a4iA4T0EE-I/UBhDkIhHZaI/AAAAAAAAC_g/pGHeepJZgY0/gr_arrow-down-dynamic-view.png);
color:#fff;
top:14px; <span>/* by: http://gubhugreyot.blogspot.com, 18 Agust 2012 */</span>
right:5px;
transition:0.4s;
-o-transition:0.4s;
-ms-transition:0.4s;
-moz-transition:0.4s;
-webkit-transition:0.4s;
}
<b>#myGRtabmenu span:hover:before</b>{
transform:rotate(180deg);
-o-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
top:12px;
}
<b>#myGRtabmenu span ul</b>{
position:absolute;
left:0; <span>/* by: http://gubhugreyot.blogspot.com, 18 Agust 2012 */</span>
top:31px;
text-align:left;
float:left;
width:150px;
max-height:0px;
overflow:hidden;
transition:0.6s ease-in 0.2s;
-o-transition:0.6s ease-in 0.2s;
-ms-transition:0.6s ease-in 0.2s;
-moz-transition:0.6s ease-in 0.2s;
-webkit-transition:0.6s ease-in 0.2s;
background:rgba(0,0,0,.6);
}
<b>#myGRtabmenu span:hover ul</b>{
z-index:999;
max-height:600px;
background:rgba(0,0,0,.6);
}
<b>#myGRtabmenu span:hover ul, #myGRtabmenu ul li, #myGRtabmenu span a, #myGRtabmenu span a:visited,#myGRtabmenu ul li a</b>{
transition:1.0s;
-o-transition:1.0s;
-ms-transition:1.0s;
-moz-transition:1.0s;
-webkit-transition:1.0s;
}
<b>#myGRtabmenu ul li</b>{
display:block;
width:140px;
overflow:hidden;
border-bottom:1px dotted rgba(0,0,0,.1);
line-height:18px;
padding:5px;
}
<b>#myGRtabmenu ul li:hover</b>{
background:rgba(0,0,0,.6);
}
<b>#myGRtabmenu ul li a</b>{
font-size:14px;
color:#eee;
display:block;
font-family:Arial, sans-serif;
font-weight:normal;
text-decoration:none;
}
<b>#myGRtabmenu span a:visited</b>{
color:#999; <span>/* by: http://gubhugreyot.blogspot.com, 18 Agust 2012 */</span>
}
<b>#myGRtabmenu ul li a:visited</b>{
color:#ddd;
}
<b>#myGRtabmenu span a:hover</b>{
text-decoration:none;
}
<b>#myGRtabmenu span a:hover,#myGRtabmenu ul li a:hover</b>{
color:#fff;
text-decoration:underline;
}
</style></pre></div><div class="pre"><h5>xHTML</h5><pre><div id="myGRtabmenu"><span><a href="#">My Blog</a>
<ul>
<li><a href="http://gubhugreyot.blogspot.com">gubhugreyot</a></li>
<li><a href="http://bgsgr.blogspot.com">css3 Tutorial & Demo</a></li>
<li><a href="http://gubhugreyot-demo-tutorial-1.blogspot.com">Demo Tutorial-1</a></li>
<li><a href="http://gubhugreyot-demo-tutorial-2.blogspot.com">Demo Tutorial-2</a></li>
<li><a href="http://lightbox-demo-tutorial.blogspot.com">Lightbox for Blogger</a></li>
<li><a href="http://tantytm.blogspot.com">Modifikasi Blog</a></li>
<li><a href="http://gubhugreyot.blogdetik.com">gubhugreyot-blogdetik</a></li>
<li><a href="http://bloggerstuars.blogspot.com">Bloggerstars1</a></li>
<li><a href="http://gitosimin.blogspot.com">Mas Gitosamin</a></li>
<li><a href="http://bestbloggerhack.blogspot.com">Best Blogger Hacks</a></li>
<li><a href="http://css3-tutorial-demo.blogspot.com/">Tutorial css3, Demo Tips & Trick</a></li>
</ul></span>
<span><a href="#">Seni &amp; Budaya</a>
<ul>
<li><a href="http://gubhugreyot.blogspot.com">Kuda Lumping</a></li>
<li><a href="http://bgsgr.blogspot.com">Reyog Ponorogo</a></li>
<li><a href="http://gubhugreyot-demo-tutorial-1.blogspot.com">Tari Seudati</a></li>
<li><a href="http://gubhugreyot-demo-tutorial-2.blogspot.com">Barongsai</a></li>
<li><a href="http://lightbox-demo-tutorial.blogspot.com">Tari Tor Tor</a></li>
<li><a href="http://tantytm.blogspot.com">Tari Pendet</a></li>
<li><a href="http://gubhugreyot.blogdetik.com">Wayang Orang</a></li>
<li><a href="http://bloggerstuars.blogspot.com">Kethoprak</a></li>
<li><a href="http://gitosimin.blogspot.com">Ludruk</a></li>
<li><a href="http://bestbloggerhack.blogspot.com">Wayang Kulit</a></li>
</ul></span>
<span><a href="http://bestbloggermenus.blogspot.com">Home</a></span>
<span><a href="http://gubhugreyot.blogspot.com" target="_blank">gubhugreyot</a></span>
</div></pre></div><p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:</p><br />
<a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Langsung KLIK di sini untuk mengikuti Panduan dan Tutorial lain guna melengkapi panduan dari blog ini"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg" /></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank" title="Panduan lain yang sangat menarik untuk sampeyan ikuti juga tersedia lengkap di sini. Silahkan langsung KLIK daripada penasaran!"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg" /></a><br />
<br />
<span class="update">Posting » <b>Setu</b> <em>WAGE</em>, August, 18, 2012</span><br />
<br />
<p class="happy">» Happy Blogging - gubhugreyot «</p></div>cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com46tag:blogger.com,1999:blog-5154686636804131392.post-71573790110143029042012-08-17T17:23:00.001-06:002012-08-17T17:27:28.821-06:00Tabs menu Horizontal dg Background Aneka Warna<a class="jqtt3" href="http://2.bp.blogspot.com/-fEDbHcNKHRg/UC62YSCwEGI/AAAAAAAADFc/_U0w4boOzb4/s1600/colorfull-tab-menu-700.jpg" target="_blank" title="Tabs Blogger dg background aneka warna"><img class="fl" height="125" width="250" src="http://2.bp.blogspot.com/-6ld5AOqtoRk/UC62An0HUcI/AAAAAAAADFQ/7lH1W9LDYWc/s250/colorfull-tab-menu-250.jpg" /></a><div class="buka bonce">Ada dua cara untuk membuat tabs menu horizontal blogger dengan background beraneka warna, dan ini adalah cara yang pertama. Agar setiap tab menu mempunya warna background berbeda dengan warna background menu yang lain, setiap link dibuat mempunyai class berbeda yang masing-masing mempunyai background berbeda warna. Jika anda menginginkan warna teks link berbeda disetiap menu, andapun bisa menambahkannya.</div><div class="clear"></div><a class="demos" href="http://bestbloggermenus.blogspot.com/2012/08/create-horizontal-tab-menu-with.html" target="_blank" title="Klik untuk melihat demo tabs menu horizontal blogger dengan aneka warna background.">D E M O</a><a name='more'></a><br />
<h4>Mengaktifkan Tabs Menu Horizontal Blogger</h4><div class="clear"></div><a class="jqtt2" href="http://4.bp.blogspot.com/-lYVo_QFFi2c/UC7FE914TLI/AAAAAAAADGI/GM_SJYVeUA4/s1600/dasbor-laman-tabs-menu-500.jpg" target="_blank" title="Membuat tabs menu horizontal di bawah header blog"><img class="fl" height="150" width="82" src="http://1.bp.blogspot.com/-Rl6DnTMDwAI/UC7EclHG5hI/AAAAAAAADF8/KHZqq1RlGjU/s200/dasbor-laman.jpg" /></a><div class="buka bonce">Agar tabs menu horizontal dengan aneka warna background dapat dibuat, anda harus menggunakan tabs menu horizontal dalam blog dengan cara mengaktifkan fitur "<b>Laman/Pages</b> yang dapat ditemukan di dasbor. Fitur ini berisi link posting halaman statis dan/atau link alamat web/blog lain atau bisa juga link posting tertentu, baik di dalam blog atau yang berasal dari luar blog. Anda bisa mengisi setiap link menu di tabs menu horizontal blogger sesuai dengan apa yang diinginkan untuk ditampilkan.<br />
<h4>Cara mengaktifkan fitur "Laman/Pages"</h4><ol><li>Login ke <a class="sini" href="http://blogger.com/home" target="_blank">Blogger</a></li>
<li>Halaman Dasbor/Dasboard</li>
<li><b>Laman/Pages</b></li>
<li>Buatlah link tabs menu horizontal dengan cara :<br />
<ul><li>Membuat Posting di halaman statis. Untuk membuat posting di halaman statis, pilih "<b>Laman Kosong</b>" kemudian buat posting lengkap dengan judul postingnya. Judul posting hendaknya singkat saja karena nantinya digunakan di tabs menu sebagai teks link tabs menu horizontal.</li>
<li>menampilkan alamat web/blog lain di tabs menu horizontal blogger. Untuk membuat link seperti ini silahkan <i>pilih</i> "<b>Alamat Web</b>". <br />
Tuliskan secara singkat titlenya kemudian tuliskan juga alamat web-nya. Alamat web bisa juga diganti dengan alamat sebuah posting.</li>
</ul></li>
<li>Lanjutkan dengan <i>pilih</i> "<b>Tab atas</b>".</li>
<li>Setelah daftar menu di tabs horizontal selesai dibuat dengan langkah di atas, lanjutkan dengan proses membuat background aneka warna untuk masing-masing menu.</li>
</ol><h4>Menambah kode css & menambah class</h4><ol><li>Lanjutkan dengan <i>klik</i> "<b>Template</b>" yang letaknya di bawah fitur "<b>Laman/Pages</b>".</li>
<li>Lakukan proses "<b>Cadangkan/Pulihkan</b>" atau "<b>Backup/Restore</b>" templates untuk berjaga-jaga dari kemungkinan yang tak di harapkan.</li>
<li><i>Klik</i> "<b>Edit HTML</b>".</li>
<li><strong>Template › Edit HTML</strong><br />
<ul><li><i>Klik</i> "<b>Lanjutkan/Proceed</b>".</li>
<li><i>Klik</i> "<b>Expand Templates Widget</b>".</li>
<li>Cari kode <rd><li class='selected' expr:id='data:link.title'></rd><br />
Gunakan <be>Ctrl + F</be> untuk mempercepat dan mempermudah pencarian kode.</li>
<li>Di bawah kode tersebut masih ada beberapa kode lain seperti terlihat di bawah ini:<br />
<div class="pre m-70"><h5>xHTML tabs menu default blogger</h5><pre><li class='selected' expr:id='data:link.title'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li expr:class='data:link.title'><a expr:href='data:link.href'><data:link.title/></a></li></pre></div></li>
<li>Ganti kode dengan kode berikut:<br />
<div class="pre m-70"><h5>xHTML pengganti kode default tabs menu blogger</h5><pre><li class='selected'><a <rd>expr:class='data:link.title'</rd> expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a <rd>expr:class='data:link.title'</rd> expr:href='data:link.href'><data:link.title/></a></li></pre></div></li>
<li><i>Klik</i> "<b>Simpan Template/Save Template</b>".</li>
</ul></li>
<li>Lanjutkan dengan membuat <b>class</b> pada kode css sesuai kode xHTML tab menu</li>
</ol><h4>Membuat class dan background pada kode css</h4><div class="pre"><h5>Kode CSS dan contoh class link tab menu</h5><pre>li a.<rd>Beranda</rd>{background:<gn>green</gn>;}
li a.<rd>gubhugreyot</rd>{background:<gn>blue</gn>;}
li a.<rd>Belajar</rd>{background:<gn>orange</gn>;}
li a.<rd>Hacks</rd>{background:<gn>brown</gn>;}
<b>.tabs .widget-content ul li a</b>{
color:yellow;
text-shadow:1px 1px 1px #000;
transition:background-color 0.6s,color 1s;
-o-transition:background-color 0.6s,color 1s;
-ms-transition:background-color 0.6s,color 1s;
-moz-transition:background-color 0.6s,color 1s;
-webkit-transition:background-color 0.6s,color 1s;
}
<b>.tabs .widget-content ul li:hover a</b>{
background:#000;
color:#02e7fb;
}
</pre></div><h4>Keterangan :</h4><ol><li>li a.<rd>Beranda</rd> » class "Beranda" diperoleh dari menu pertama yang title-nya "<b>Beranda</b>". Nama berbeda yang biasa dipakai adalah "<b>Home</b>".</li>
<li>li a.<rd>gubhugreyot</rd> » class "gubhugreyot" diperoleh dari title tab menu "<b>gubhugreyot</b>.</li>
<li>li a.<rd>Belajar</rd> » class "Belajar" diperoleh dari title tab menu "<b>Belajar Kode CSS</b>. Anda bisa mengambil salah satu dari "Belajar, Kode dan CSS" sebagai class.</li>
<li>li a.<rd>Hacks</rd> » class "Hacks" diperoleh dari title tab menu "<b>Best Blogger Hacks</b>. Anda bisa mengambil salah satu dari "Best, Blogger dan Hacks" sebagai class.</li>
<li>Setelah mendapatkan class sesuai title link tabs menu yang telah anda buat melalui "fitur Laman" dan digunakan di kode CSS untuk menggantikan class yang ada di contoh css, silahkan simpan kode css di bawah kode <rd>]]></b:skin></rd></li>
<li><i>Klik</i> "<b>Simpan Template/Save Template</b>"</li>
<li>Buka blog dan lihat hasilnya.</li>
<li>Anda bisa menambah class baru sesuai jumlah tab yang dibuat. Warna juga bisa dirubah disesuaikan dengan selera!</li>
</ol><br />
<p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:</p><br />
<a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Langsung KLIK di sini untuk mengikuti Panduan dan Tutorial lain guna melengkapi panduan dari blog ini"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg" /></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank" title="Panduan lain yang sangat menarik untuk sampeyan ikuti juga tersedia lengkap di sini. Silahkan langsung KLIK daripada penasaran!"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg" /></a><br />
<br />
<span class="update">Posting » <b>Setu</b> <em>WAGE</em>, August, 18, 2012</span><br />
<br />
<p class="happy">» Happy Blogging - gubhugreyot «</p></div>cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com7tag:blogger.com,1999:blog-5154686636804131392.post-58575981309549333852012-08-17T09:00:00.004-06:002012-08-17T11:47:34.492-06:00Membuat Tanggal Posting ala Dynamic View Blogger Templates<p class="on fs14">Membuat date header/tanggal posting ala Tampilan Dinamis/Dynamic View Blogger Templates.</p><div class="clear"></div><br />
<a class="jqtt2" href="http://3.bp.blogspot.com/-uiY_tVwweQI/UC4pk8GH8rI/AAAAAAAADEM/L8GhOX2HldI/s1600/date-header-dynamic-view.jpg" target="_blank" title="Langkah membuat halaman error 404 di blogger"><img class="fl" height="190" width="200" src="http://1.bp.blogspot.com/-Mp_YAoMLdkM/UC4pucZbd7I/AAAAAAAADEY/IZJ3PYUHbPY/s400/date-header-dynamic-view200-190.jpg" /></a><div class="buka bonce">Berbagai macam bentuk tanggal posting dpat kita buat dan tampilkan didalam blog. Jika dibeberapa waktu sebelumnya kita sudah banyak jumpai tutorial blogger tentang "cara membuat tanggal posting dalam bentuk icon calender", maka kali ini kita akan membuat "tanggal posting atau date header ala template blogger Tampilan Dinamis/Dynamic View" seperti yang terlihat pada image/gambar disamping.<br />
<br />
Tanggal posting seperti yang ditampilkan Dynamic View Blogger Template mempunyai bentuk yang terlihat berbeda dari bentuk tanggal posting yang lain. Jika kita arahkan cursor di atas tannggal Tanggal posting akan terjadi perubahan warna background (efek hover). Hal seperti ini bisa terjadi karena icon calendar tersebut tidak menggunakan background image namun memanfaatkan border property. Hover efek pada borderlah yang kemudian menciptakan perubahan warna background. <a name='more'></a><div class="clear"></div><a class="demos" href="http://gubhugcss.blogspot.com/2012/08/displays-cursor-position-with-javascript.html" target="_blank" title="Klik untuk melihat demo">D E M O</a><br />
<h4>Cara membuat:</h4><ul clsaa="dua"><li class="dua">Login ke <a class="sini" href="http://blogger.com/home" target="_blank">Blogger</a></li>
<li class="dua">Halaman Dasbor/Dasboard</li>
<li class="dua">Tata Letak/Layout</li>
<li class="dua"><i>Klik</i> "<b>Edit</b>" pada elemen/box "<b>Posting blog/Blog Post</b>".</li>
<li class="dua">Mengonfigurasi Posting Blog<br />
<ul><li><a href="http://bestbloggerhack.blogspot.com/" target="_blank"><img class="fr" height="120" width="250" src="http://4.bp.blogspot.com/-BQRxmhSKnUs/UC5BNYi26DI/AAAAAAAADE0/7DXBZEwBgE8/s400/setting-date-header-250x120.jpg" /></a>Setting date-header: Lakukan perubahan setting tanggal posting bila belum berbentuk seperti gambar disebelah. Rubah seperti yang anda lihat!<div class="clear"></div></li>
<li>Simpan/SAVE</li>
</ul></li>
<li class="dua">Cadangkan/Pulihkan (Backup/Restore)</li>
<li class="dua">Template</li>
<li class="dua">Edit HTML</li>
<li class="dua">Template › Edit HTML<br />
<ul><li>Lanjutkan/Procced</li>
<li>Cari kode <rd>]]></b:skin></rd>, kemudian letakkan kode css di atasnya. Gunakan <rd>Ctrl + F</rd> untuk mempermudah dan mempercepat pencarian kode.</li>
<li>Simpan Template/Save Template</li>
<li>Copy dan pastekan javascript di bawah kode <rd>]]></b:skin></rd></li>
<li>Simpan Template/Save Template</li>
<li>Expand Template Widget</li>
<li>Cari Kode <yw><b:if cond='data:post.isDateStart'></yw></li>
<li>Anda akan temukan kode yang seperti ini:<br />
<div class="pre m-70"><h5>Kode yng harus diganti:</h5><pre><yw><b:if cond='data:post.isDateStart'></yw>
<b:if cond='data:post.isFirstPost == &quot;false&quot;'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
</b:if>
<yw><b:if cond='data:post.isDateStart'></yw>
&lt;div class=&quot;date-outer&quot;&gt;
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<rd><span><data:post.dateHeader/></span></rd>
</h2>
</b:if>
<yw> <b:if cond='data:post.isDateStart'></yw></pre></div><em>Buat kode menjadi seperti berikut:</em><br />
<div class="pre m-70"><h5>Kode Baru</h5><pre><yw><b:if cond='data:post.isDateStart'></yw>
<b:if cond='data:post.isFirstPost == &quot;false&quot;'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
</b:if>
<yw><b:if cond='data:post.isDateStart'></yw>
&lt;div class=&quot;date-outer&quot;&gt;
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<rd><script type='text/javascript'>
date_replace(&#39;<data:post.dateHeader/>&#39;);
</script></rd>
</h2>
</b:if>
<yw><b:if cond='data:post.isDateStart'></yw></pre></div></li>
<li>Simpan Template/Save Template.</li>
</li>
</ul><li class="dua">Buka blog dan lihat hasilnya!</li><br />
</ul><div class="pre"><h5>Kode CSS</h5><pre><strong>.date-outer h2.date-header</strong>{
float:left;
width:30px;
height:50px;
padding:0;
<rd>margin:65px 0 -200px -32px;</rd>
background:none;
}
<strong>#myGRdate</strong>{
text-shadow:1px 0px 1px #000;
background:red;
height:30px;
width:30px;
}
<strong>#myGRdate .GRmonth</strong>{
font-family:arial;
margin:0 auto 2px;
width:30px;
height:20px;
background:#666;
color:#fff;
text-align:center;
font-size:13px;
font-weight:bold;
padding-top:2px;
}
<strong>#myGRdate .GRdate</strong>{
position:relative;
width:0;
margin:0 auto;
height:0;
border-top:35px solid #666;
border-left:15px solid #666;
border-right:15px solid #666;
border-bottom:10px solid transparent;
}
<strong>span.ohdate</strong>{
position:absolute;
width:40px;
height:20px;
text-align:center;
font-family:Arial,Sans-serif,Tahoma,Verdana;
font-weight:bold;
left:-20px;
top:-32px;
color:yellow;
font-size:2em;
}
<strong>#myGRdate .GRmonth,#myGRdate .GRdate</strong>{
transition:border-color 2s,background-color 2s;
-o-transition:border-color 2s,background-color 2s;
-ms-transition:border-color 2s,background-color 2s;
-moz-transition:border-color 2s,background-color 2s;
-webkit-transition:border-color 2s,background-color 2s;
}
<strong>#myGRdate:hover .GRmonth</strong>{
background:#ad3a2b;
}
<strong>#myGRdate:hover .GRdate</strong>{
border-color:#ad3a2b;
border-bottom-color:transparent;
}</pre></div><h4>Keterangan :</h4>Atur posisi tanggal posting dengan merubah nilai pada kode yang <rd>berwarna merah</rd>. <div class="pre"><h5>kode Pengatur Posisi Tanggal Posting</h5><pre><strong>.date-outer h2.date-header</strong>{
float:left;
width:30px;
height:50px;
padding:0;
<rd>margin:65px 0 -200px -32px;</rd>
background:none;
}</pre></div><div class="pre"><h5>Javascript</h5><pre><script type="text/javascript">
//<![CDATA[
function date_replace(c) {
var b = c.split(".");
var a = b[1],
e = b[0],
d = b[2];
var f = ["0", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
document.write("<div id='myGRdate'><div class='GRmonth'>" + f[e] + "</div><div class='GRdate'><span class='ohdate'>" + a + "</span></div></div>")
};
//]]>
</script></pre></div><p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:</p><a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Langsung KLIK di sini untuk mengikuti Panduan dan Tutorial lain guna melengkapi panduan dari blog ini"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg" /></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank" title="Panduan lain yang sangat menarik untuk sampeyan ikuti juga tersedia lengkap di sini. Silahkan langsung KLIK daripada penasaran!"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg" /></a> <span class="update">Posting » <b>Jemuah</b> <em>PON</em>, August, 17, 2012</span> <p class="happy">» Happy Blogging - gubhugreyot «</p></div><br />
<br />
<br />
<br />
<br />
cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com5tag:blogger.com,1999:blog-5154686636804131392.post-53170481322194420992012-07-26T09:23:00.000-06:002012-07-26T10:06:03.992-06:00Buat Variable Definitions u Background, Teks & Border Blogger Threaded Comment<div class="buka"><a href="http://1.bp.blogspot.com/-gI7XDWne_M0/UBFW1slvvHI/AAAAAAAAC2c/cTVrHmF-LvE/s1600/variable-definitions-blogger-comment-full-size.jpg" target="_blank"><img class="fc" height="151" src="http://3.bp.blogspot.com/-l-NJ35MT454/UBFWoWJ65-I/AAAAAAAAC2Q/8GFxZVHmPLY/s400/variable-definitions-blogger-comment.jpg" width="400" /></a>Sebuah cara untuk mempermudah memilih jenis font, warna teks, warna background dan border di kotak komentar blogger. Dengan membuat sebuah variable definitions yang berkaitan dengan ke empat variable di atas, maka blogger akan lebih mudah mengganti font, warna teks, background dan border kotak komentar dengan memanfaatkan fitur <b>Ubah suaian</b> <span class="rn">»</span> <b>Perancang Template Blogger</b>. Jika sebelumnya anda hanya bisa merubah beberapa variable deperti warna background header, body, font posting, sidebar dan beberapa yang lain, maka dengan adanya variable definitions kotak komentar akan ada tambahan item kotak komentar (<b>"GR Kotak Komentar"</b>) yang berisi pilihan font, warna font, background dan border, seperti yang dapat anda lihat di gambar (<span class="rn">Silahkan klik gambar untuk memperbesar</span>)<a name='more'></a><div class="bonce"><br />
<div class="pre"><h5>Kode CSS</h5><pre><b>.comments .thread-chrome.thread-expanded .comment</b>{
background-color: $(GRbgreplay);
border-radius:8px;
border:1px solid $(GRwarnaborder);
}
<b>.comments .thread-chrome.thread-expanded .comment</b>{
padding:5px;
}
<b>.comments .comment-block</b>{
background-color: $(GRbgkomentar);
padding:5px 8px;
border-radius:5px;
border:1px solid $(GRwarnaborder);
margin:5px 5px 0 50px;
}
<b>.comments .comments-content .comment-content</b>{
font: $GRtekskomentar;
color: $GRwarnateks;
}</pre></div><div class="pre"><h5>xHTML Variable Definitions blogger comment</h5><pre><Group description="GR Kotak Komentar" selector=".comments">
<Variable name="GRtekskomentar" description="GR Teks Komen" type="font" default="normal normal 100% 'Times New Roman', Verdana, Trebuchet, Arial, Sans-serif" value="normal normal 100% Arial"/>
<Variable name="GRwarnateks" description="GR Warna Teks Komen" type="color" default="#000000" value="#000000"/>
<Variable name="GRbgkomentar" description="GR Background Komen" type="color" default="transparent" value="transparent"/>
<Variable name="GRbgreplay" description="GR Background Replay" type="color" default="transparent" value="transparent"/>
<Variable name="GRwarnaborder" description="GR Border Komen" type="color" default="transparent" value="transparent"/>
</Group></pre></div><ol><li>Login ke <a class="sini" href="http://blogger.com/home" target="_blank" title="Klik untuk login ke blogger">Blogger</a></li>
<li>Template</li>
<li>Backup/Restore Template. Panduannya bisa dibuka <a class="sini" href="http://bestbloggerhack.blogspot.com/2012/07/cara-backup-template-di-new-blogger.html" target="_blank" title="Klik untuk mengikuti panduan cara melakukan backup-restore template">disini</a></li>
<li>Edit HTML<br />
<h5>Template › Edit HTML</h5><ul><li>Procced (Lanjutkan)</li>
<li>Cari Kode : <rd>]]></b:skin></rd></li>
<li>Gunakan <rd>Ctrl + F</rd> untuk mempermudah & mempercepat pencarian.</li>
<li>Copy dan paste-kan kode css <rd>di atas</rd> kode <rd>]]></b:skin></rd></li>
<li>Cari Teks : <rd> Variable definitions</rd></li>
<li>Letakkan kode xHTML di bawah teks tersebut di atas beberapa variable definitions yang sudah ada di dalamnya. Anda bisa juga meletakkan di ujung paling bawah setelah variable definitions default blogger.</li>
<li>Simpan Template/Save Template</li>
</ul></li>
<li>Selesai...</li>
<li>Lanjutkan dengan <i>klik</i> <b>Ubah suaian</b><br />
<h4>Perancang Template Blogger </h4><ul><li>Tingkat Lanjut</li>
<li>Cari dan <i>klik</i> <b>GR Kotak Komentar</b>. Jika halaman monitor tak muat, silahkan perkecil hingga 75% melalui zoom browser atau gunakan <strong>Ctrl</strong> dan mouse untuk perkecil tampilan.</li>
<li>Pilih font, warna font, background & border</li>
<li><i>KLik</i> <b>Terapkan ke blog.</b></li>
<li><i>KLik</i> <b>Kembali ke blogger</b></li>
</ul></li>
<li>Buka halaman posting, buat komentar dan lihat hasilnya!</li>
</ol><a href="http://bestbloggerhack.blogspot.com" target="_blank"><img class="fc" height="250" width="440" src="http://3.bp.blogspot.com/-2J6zBOqSxQM/UBFfTgu5USI/AAAAAAAAC2s/vvjTdT7n35I/s400/variable-definitions-blogger-threaded-comment.jpg" /></a><br />
<h4>Catatan:</h4>Buka link berikut untuk tutorial blogger threaded comment lainnya berikut demo:<br />
<h3 class="tac"><a class="demos" href="http://bestbloggerhack.blogspot.com" target="_blank" title="Klik disini dan dapatkan lebih banyak blogger hack!">Best Blogger Hacks</a></h3><br />
<div class="pre"><h5>Posisi kode css terhadap ]]></b:skin></h5><pre><b>.comments .thread-chrome.thread-expanded .comment</b>{
background-color: $(GRbgreplay);
... dst
}
<b>.comments .thread-chrome.thread-expanded .comment</b>{
padding:5px;
}
<b>.comments .comment-block</b>{
background-color: $(GRbgkomentar);
... dst
}
<b>.comments .comments-content .comment-content</b>{
font: $GRtekskomentar;
color: $GRwarnateks;
}
<span class="yn blink">]]></b:skin></span></pre></div><br />
<div class="pre"><h5>Posisi xHTML Variable definitions</h5><pre><span class="yn blink">/* Variable definitions
====================</span>
<Group description="GR Kotak Komentar" selector=".comments">
<Variable name="GRtekskomentar" description="GR Teks Komen" type="font" default="normal normal 100% 'Times New Roman', Verdana, Trebuchet, Arial, Sans-serif" value="normal normal 100% Arial"/>
<Variable name="GRwarnateks" description="GR Warna Teks Komen" type="color" default="#000000" value="#000000"/>
<Variable name="GRbgkomentar" description="GR Background Komen" type="color" default="transparent" value="transparent"/>
<Variable name="GRbgreplay" description="GR Background Replay" type="color" default="transparent" value="transparent"/>
<Variable name="GRwarnaborder" description="GR Border Komen" type="color" default="transparent" value="transparent"/>
</Group></pre></div><p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:</p><br />
<a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg"></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg"></a><br />
<br />
<span class="update">Posting » <b>Kemis</b> <em>Legi</em>, Juli, 26, 2012</span><br />
<br />
<p class="happy">» Happy Blogging - gubhugreyot «</p></div></div>cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com5tag:blogger.com,1999:blog-5154686636804131392.post-15349380927255329242012-07-01T14:09:00.000-06:002012-07-26T08:13:27.491-06:00Membuat Efek Teks Berjalan - Marquee Effect dg css3 Animation<a href="http://tantytm.blogspot.com/" target="_blank"><img class="fl" height="200" width="200" src="http://1.bp.blogspot.com/--6cInyYzITo/T_CtTY3lM_I/AAAAAAAACfA/9X0hEiLW4tY/s200/text-berjalan-css3-animation.jpg" /></a><div class="buka bonce">Selama ini untuk membuat teks berjalan kita selalu menggunakan javascript atau efek marquee, kali ini kita akan membuat dengan cara berbeda. CSS3 animation yang kini telah didukung secara merata oleh hampir semua browser akan kita manfaatkan untuk membuat sebuah efek teks berjalan yang cukup menarik. Kode css juga telah dilengkapi dengan css3 transition untuk membentuk hover efek yang lebih menarik ketika cursor diarahkan diatasnya. Agar efek teks berjalan ini juga bisa dimanfaatkan sebagai teks link, maka disertakan juga sebuah fungsi yang bertujuan untuk membuat teks berhenti berjalan saat cursor berada di atas teks. Anda bisa menggunakan kode css ini dalam blog dengan menyimpan melalui "<strong>Dasboard - Page Elements - Add a Gadget - HTML/Javascript"</strong> atau di atas kode <strong>]]></b:skin></strong> yang dapat dilakukan melalui box Edit Template "<strong>Dasboard - Design/Rancangan - Edit HTML</strong>". Jika kode css disimpan di atas kode <strong>]]></b:skin></strong> silahkan hilangkan tag pembuka & penutup style-nya (<strong><style type="text/css"> dan </style></strong>).<a name='more'></a><br />
<div class="pre"><h5>Kode CSS efek teks berjalan - Marquee Effect</h5><pre><style type="text/css">
.boxwadahteks{
padding:5px 10px;
width:400px; <span>/* rubah ukuran lebar bos jika diperlukan */</span>
background:#aaa;
margin:10px auto; <span>/* rubah ukuran margin jika diperlukan */</span>
border:2px solid #555;
overflow:hidden;
}
.GRwadahteks{
float:left;
}
@keyframes GRanima_teks{
from{left:0%;}
to{left:-100%;}
}
@-o-keyframes GRanima_teks{
from{left:0%;}
to{left:-100%;}
}
@-ms-keyframes GRanima_teks{
from{left:0%;}
to{left:-100%;}
}
@-moz-keyframes GRanima_teks{
from{left:0%;}
to{left:-100%;}
}
@-webkit-keyframes GRanima_teks{
from{left:0%;}
to{left:-100%;}
}
.GRwadahteks .GRmlaku{
animation:GRanima_teks 20s infinite linear; <span>/* semakin besar waktunya maka semakin lambat */</span>
-o-animation:GRanima_teks 20s infinite linear; <span>/* ganti semua dengan nilai yg sama (angka 20s) */</span>
-ms-animation:GRanima_teks 20s infinite linear; <span>/* o untuk opera, ms = IE, moz = Mozilla, webkit = Safari, Chrome */</span>
-moz-animation:GRanima_teks 20s infinite linear;
-webkit-animation:GRanima_teks 20s infinite linear;
font-size:24px; <span>/* ukran teks */</span>
font-family:arial; <span>/* jenis font */</span>
margin-left:100px;
font-weight:normal;<span> /* bisa ganti normal dengan bold untuk teks tebal */</span>
text-shadow:1px 1px 1px #000;
color:red; <span>/* rubah warna teks jika dikehendaki */</span>
white-space:nowrap;
display:inline-block;
position:relative;
}
.GRwadahteks .GRmlaku span{
color:magenta; <span>/* warna teks ke dua - ganti warna jika diperlukan */</span>
font-style:italic; <span>/* style huruf miring */</span>
font-family:Serif; <span>/* jenis font */</span>
}
.GRwadahteks .GRmlaku a{
color:lime;
text-decoration:none;
}
.GRwadahteks .GRmlaku,.GRwadahteks .GRmlaku span,.GRwadahteks .GRmlaku a{
transition:color 1s;
-o-transition:color 1s;
-ms-transition:color 1s;
-moz-transition:color 1s;
-webkit-transition:color 1s;
}
.GRwadahteks:hover .GRmlaku,.GRwadahteks:hover .GRmlaku span{
color:#fff; <span>/* warna hover teks - saat disorot cursor */</span>
}
.GRwadahteks:hover .GRmlaku a{
color:blue; <span>/* warna hover link - saat disorot cursor */</span>
}
.GRwadahteks:hover .GRmlaku{
animation-play-state:paused;
-o-animation-play-state:paused;
-ms-animation-play-state:paused;
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
</style></pre></div>Gunakan xHTML seperti berikut untuk menuliskan teks yang akan di tampilkan.<br />
<div class="pre"><h5>xHTML efek teks berjalan - Marquee Effect:</h5><pre><div class="boxwadahteks">
<div class="GRwadahteks">
<div class="GRmlaku">Silahkan tuliskan di sini teks yang ingin anda tampilkan sebagai <a href="http://gubhugreyot.blogspot.com" target="_blank" title="Klik untuk dapat lebih banyak tutorial!">teks berjalan</a>. <span>Pada bagian ini teks akan berbentuk miring dengan warna dan jenis font berbeda.</span></div>
</div>
</div></pre></div><p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:</p><br />
<br />
<a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg"></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg"></a><br />
<br />
<br />
<br />
<span class="update">Posting » <b>SENEN</b> <em>Legi</em>, Juli, 02, 2012</span><br />
<br />
<br />
<br />
<p class="happy">» Happy Blogging - gubhugreyot «</p></div>cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com19tag:blogger.com,1999:blog-5154686636804131392.post-36164912063511480342012-06-30T09:55:00.000-06:002012-06-30T13:17:57.931-06:00Create Animation on Blog Title with css3 Animation<a href="http://bloggerstuars.blogspot.com/" target="_blank"><img class="fl" src="http://3.bp.blogspot.com/-B4N77eelynE/T-8YvU_kA2I/AAAAAAAACeU/TFYSYAJ6VE0/s1600/Animasi-blog-title-css3.jpg" height="144" width="200"></a><div class="buka bonce">Menganimasikan blog title di template blogger dengan memanfaatkan css3 animation adalah proyek selanjutnya setelah kita buat <a href="http://gubhugreyot.blogspot.com/2012/06/hover-link-warna-pelangi-rainbow-color.html" target="_blank" title="Klik di sini untuk mengikuti tutorial cara membuat efek pelangi pada hover link dengan css3 animation">efek warna pelangi pada hover link</a> yang juga hanya menggunakan kode css3 animation. Yang kita maksudkan dengan posting kali ini adalah <strong>Cara membuat animasi pada blog title (nama blog) dengan menggunakan css3 animation" atau "Create Animation on Blog Title"</strong>. Ada beberapa variasi animasi yang akan kita buat, silahkan anda pilih yang dirasa cocok. Animasi pertama hanya berupa pergerakan blog title kearah kanan & kiri, yang kedua disertai perubahan warna teks, yang ketiga disertai animasi membentuk sudut & perubahan warna, sedang yang ke empat ada penambahan animasi berupa gerak memutar (rotasi).<a name='more'></a><br />
Ada 2 buah demo yang dapat anda lihat, dimana demo ini sekedar sebagai sebuah bukti bahwa tutorial ini sudah melalui uji coba pada blog. Anda jangan menggunakan kode di halaman demo karena ada perbadaan kode yang berkaitan dengan enggunaan syntax.<br />
<br />
Tutorial animasi blog title ini dapat dipergunakan pada template blogger baru/new blogger template/blogger template designer dan template tata letak/lyout template. Setelah klik demo-1 dan demo-2, silahkan lihat animasi yang berhasil terbentuk pada blog title (nama blog) yang terletak di halaman teratas.<div class="clear"></div><a class="demos fl" href="http://css3-tutorial-demo.blogspot.com/2012/06/create-rainbow-color-effect-with-css3.html" target="_blank" title="Klik disini untuk melihat demo animasi blog title pertama">D E M O-1</a><a class="demos fr" href="http://lightbox-demo-tutorial.blogspot.com/2012/01/membuat-slideshow-css3-u-pelengkap.html" target="_blank" title="Klik disini untuk melihat demo animasi blog title kedua">D E M O-2</a><br />
<div class="clear"></div><p class="on ttu">4 Macam Animasi Blog Title:</p><ol><li>Ada 4 kode css yang masing-masing mempunyai bentuk animasi berbeda.</li>
<li>Anda bisa menggunakan salah satu kode css untuk membuat animasi blog title.</li>
<li>Kode css dapat dikembangkan lagi untuk mendapatkan bentuk animasi berbeda.</li>
<li>Gunakan browser terbaru karena css3 hanya berfungsi dengan baik di browser terbaru yang sudah mendukung css3 animation. Anda bisa download melalui menu disebelah kiri halaman blog (<span class="rn">Download browser</span>).</li>
</ol><br />
<div class="pre"><h5>Kode CSS Animasi Blog Title-1:</h5><pre>@keyframes GRbt_anima{0%{transform:translate(-50px,0);}50%{transform:translate(0,0);}100%{transform:translate(50px,0);}}
@-o-keyframes GRbt_anima{0%{-o-transform:translate(-50px,0);}50%{-o-transform:translate(0,0);}100%{-o-transform:translate(50px,0);}}
@-ms-keyframes GRbt_anima{0%{-ms-transform:translate(-50px,0);}50%{-ms-transform:translate(0,0);}100%{-ms-transform:translate(50px,0);}}
@-moz-keyframes GRbt_anima{0%{-moz-transform:translate(-50px,0);}50%{-moz-transform:translate(0,0);}100%{-moz-transform:translate(50px,0);}}
@-webkit-keyframes GRbt_anima{0%{-webkit-transform:translate(-50px,0);}50%{-webkit-transform:translate(0,0);}100%{-webkit-transform:translate(50px,0);}}
h1.title a,h1.title{ <span>/* original code by : http://gubhugreyot.blogspot.com - 30 Juni 2012 */</span>
animation:GRbt_anima 4s infinite linear alternate; <span>/* Standart */</span>
-o-animation:GRbt_anima 4s infinite linear alternate; <span>/* Opera */</span>
-ms-animation:GRbt_anima 4s infinite linear alternate; <span>/* IE */</span>
-moz-animation:GRbt_anima 4s infinite linear alternate; <span>/* Firefox */</span>
-webkit-animation:GRbt_anima 4s infinite linear alternate; <span>/* Safari and Chrome */</span>
}</pre></div><div class="pre"><h5>Kode CSS Animasi Blog Title-2:</h5><pre>@keyframes GRbt_anima{0%{transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{transform:translate(0,0);color:red;}65%{color:blue;}85%{color:magenta;}100%{transform:translate(50px,0);color:black;}}
@-o-keyframes GRbt_anima{0%{-o-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{-o-transform:translate(0,0);color:red;}65%{color:blue;}85%{color:magenta;}100%{-o-transform:translate(50px,0);color:black;}}
@-ms-keyframes GRbt_anima{0%{-ms-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{-ms-transform:translate(0,0);color:red;}65%{color:blue;}85%{color:magenta;}100%{-ms-transform:translate(50px,0);color:black;}}
@-moz-keyframes GRbt_anima{0%{-moz-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{-moz-transform:translate(0,0);color:red;}65%{color:blue;}85%{color:magenta;}100%{-moz-transform:translate(50px,0);color:black;}}
@-webkit-keyframes GRbt_anima{0%{-webkit-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{-webkit-transform:translate(0,0);color:red;}65%{color:blue;}85%{color:magenta;}100%{-webkit-transform:translate(50px,0);color:black;}}
h1.title a,h1.title{ <span>/* original code by : http://gubhugreyot.blogspot.com - 30 Juni 2012 */</span>
animation:GRbt_anima 4s infinite linear alternate; <span>/* Standart */</span>
-o-animation:GRbt_anima 4s infinite linear alternate; <span>/* Opera */</span>
-ms-animation:GRbt_anima 4s infinite linear alternate; <span>/* IE */</span>
-moz-animation:GRbt_anima 4s infinite linear alternate; <span>/* Firefox */</span>
-webkit-animation:GRbt_anima 4s infinite linear alternate; <span>/* Safari and Chrome */</span>
}</pre></div><div class="pre"><h5>Kode CSS Animasi Blog Title-3:</h5><pre>@keyframes GRbt_anima{0%{transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;transform:rotate(-10deg) scale(0.2);}50%{transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{transform:translate(50px,0);color:black;}}
@-o-keyframes GRbt_anima{0%{-o-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;-o-transform:rotate(-10deg) scale(0.2);}50%{-o-transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;-o-transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{-o-transform:translate(50px,0);color:black;}}
@-ms-keyframes GRbt_anima{0%{-ms-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;-ms-transform:rotate(-10deg) scale(0.2);}50%{-ms-transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;-ms-transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{-ms-transform:translate(50px,0);color:black;}}
@-moz-keyframes GRbt_anima{0%{-moz-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;-moz-transform:rotate(-10deg) scale(0.2);}50%{-moz-transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;-moz-transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{-moz-transform:translate(50px,0);color:black;}}
@-webkit-keyframes GRbt_anima{0%{-webkit-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;-webkit-transform:rotate(-10deg) scale(0.2);}50%{-webkit-transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;-webkit-transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{-webkit-transform:translate(50px,0);color:black;}}
h1.title a,h1.title{ <span>/* original code by : http://gubhugreyot.blogspot.com - 30 Juni 2012 */</span>
animation:GRbt_anima 12s infinite linear alternate; <span>/* Standart */</span>
-o-animation:GRbt_anima 12s infinite linear alternate; <span>/* Opera */</span>
-ms-animation:GRbt_anima 12s infinite linear alternate; <span>/* IE */</span>
-moz-animation:GRbt_anima 12s infinite linear alternate; <span>/* Firefox */</span>
-webkit-animation:GRbt_anima 12s infinite linear alternate; <span>/* Safari and Chrome */</span>
}</pre></div><div class="pre"><h5>Kode CSS Animasi Blog Title-4:</h5><pre>@keyframes GRbt_anima{0%{color:black;transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;transform:scale(0.3) rotate(375deg);}100%{color:black;transform:translate(0,0) scale(1.0);}}
@-o-keyframes GRbt_anima{0%{color:black;-o-transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;-o-transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;-o-transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;-o-transform:scale(0.3) rotate(375deg);}100%{color:black;-o-transform:translate(0,0) scale(1.0);}}
@-ms-keyframes GRbt_anima{0%{color:black;-ms-transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;-ms-transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;-ms-transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;-ms-transform:scale(0.3) rotate(375deg);}100%{color:black;-ms-transform:translate(0,0) scale(1.0);}}
@-moz-keyframes GRbt_anima{0%{color:black;-moz-transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;-moz-transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;-moz-transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;-moz-transform:scale(0.3) rotate(375deg);}100%{color:black;-moz-transform:translate(0,0) scale(1.0);}}
@-webkit-keyframes GRbt_anima{0%{color:black;-webkit-transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;-webkit-transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;-webkit-transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;-webkit-transform:scale(0.3) rotate(375deg);}100%{color:black;-webkit-transform:translate(0,0) scale(1.0);}}
h1.title a,h1.title{ <span>/* original code by : http://gubhugreyot.blogspot.com - 30 Juni 2012 */</span>
animation:GRbt_anima 8s infinite linear alternate; <span>/* Standart */</span>
-o-animation:GRbt_anima 8s infinite linear alternate; <span>/* Opera */</span>
-ms-animation:GRbt_anima 8s infinite linear alternate; <span>/* IE */</span>
-moz-animation:GRbt_anima 8s infinite linear alternate; <span>/* Firefox */</span>
-webkit-animation:GRbt_anima 8s infinite linear alternate; <span>/* Safari and Chrome */</span>
}</pre></div><p class="wn ttu">Cara menyimpan Kode CSS Animasi blog title yang dibuat dengan css3 animation:</p><ol><li>Login ke <a class="sini" href="http://blogger.com/home" target="_blank">Blogger</a>.</li>
<li>Dasbor (Dasboard).</li>
<li>Design (Rancangan).</li>
<li>Edit HTML.</li>
<li>Backup Template.</li>
<li>Cari Kode <b>]]></b:skin></b>, kemudian letakkan kode css tepat di atasnya.</li>
<li>Klik Simpan Template (Save Template)</li>
</ol><p class="rn">Catatan/keterangan:</p><ol><li>Untuk merubah warna agar sesuai dengan keinginan, sampeyan bisa melihat tabel lengkap data setiap warna berikut namanya dengan klik <a class="sini" href="http://gubhugreyot.blogspot.com/2009/11/tabel-nama-dan-kode-warna.html" target="_blank">di sini</a>.</li>
<li>Panduan cara Backup Template, cara cari kode dan berbagai cara menyimpan kode css, javascript dan xHTML dapat dibuka pada <span class="rn">Special Tutorials</span> di menu sebelah kiri halaman.</li>
<li>Jika anda menggunakan Antarmuka Blogger Baru (New Bloogger Interface), anda dapat mengikuti panduan cara menyimpan kode css-nya melalui link berikut: <br />
<a href="http://gubhugreyot.blogspot.com/2012/04/cara-menyimpan-kode-html-di-template.html" target="_blank">Cara simpan kode html di New Blogger Interface</a></li>
<li>Anda dapat mencoba setiap bentuk animasi blog title dengan menggunakan 4 macam kode css yang telah disediakan.</li>
</ol><p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:</p><br />
<br />
<a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg"></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg"></a><br />
<br />
<span class="update">Posting » <b>Setu</b> <em>Kliwon</em>, Juni, 30, 2012</span><br />
<br />
<p class="happy">» Happy Blogging - gubhugreyot «</p></div><br />cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com6tag:blogger.com,1999:blog-5154686636804131392.post-21355747466869277542012-06-30T00:46:00.000-06:002012-06-30T03:48:38.189-06:00Hover Link Warna Pelangi - Rainbow Color Effect with css3 Animation<a href="http://gubhugreyot.blogdetik.com/" target="_blank"><img class="fl" src="http://2.bp.blogspot.com/-a-dYjd0X3JM/T-50vN_RZfI/AAAAAAAACdk/KgVEU0jZDck/s1600/bunga-pelangi.jpg" height="184" width="200"></a><div class="buka bonce">Dalam bulan-bulan terakhir ini Opera telah mulai support terhadap css3. Sebuah kemajuan yang sangat menggembirakan yang mampu menggugah semangat baru untuk kembali berkarya. Yah...., selama ini gubhugreyot sama sekali memang belum mempostingkan desain atau tutorial yang berkaitan dengan css3 animation, dimana penundaan posting tentang css3 ini karena belum semua browser besar mendukung secara penuh. Kini setelah Opera juga sudah support penuh (hanya tinggal IE yg belum mendukung css3), maka tak ada lagi kendala & hambatan untuk membuat tutorial ataupun desain yang melibatkan penggunaan css3 animation. Untuk mengawali posting tentang css3 animation, kita akan membuat sebuah efek warna pelangi pada hover teks link yang hanya menggunaakan kode css. tentu saja dalam hal ini adalah css3 animation. Bagi sobat-sobat blogger yang selama ini menggunakan javascript dan ingin merubahnya menjadi dalam kode css, silahkan ikuti tutorial berikut.<a name='more'></a><br />
<br />
<a class="demos" href="http://css3-tutorial-demo.blogspot.com/2012/06/create-rainbow-color-effect-with-css3.html" target="_blank" title="Klik untuk melihat demo efek warna pelangi pada hover teks link menggunakan css3 animation">D E M O</a><br />
<p class="on ttu">Pertimbangan menggunakan css3 animation untuk efek pelangi pada hover teks link :</p><ol><li>Semua browser telah support terhadap css3 animation. <br />
Bagi anda yg masih menggunakan browser lama, silahkan segera download browser terbaru yang telah mendukung css3 animation. Anda bisa membuka link download melalui menu disebelah kiri halaman blog.</li>
<li>Penggunaan css3 animation membuat kode menjadi lebih irit & ringkas, sehingga loading blog menjadi tak banyak terpengaruh.</li>
<li>Penggunaan kode css3 memudahkan blogger untuk membuat berbagai variasi warna pada efek pelangi yang ditimbulkan.</li>
<li>Penggunaan kode css3 animation lebih memudahkan blogger untuk mengembangkan berbagai efek baru (efek tambahan).</li>
</ol><div class="pre"><h5>Kode CSS Hover Pelangi:</h5><pre>@keyframes GRhoverpelangi{0%{color:<span class="blackn">black</span>;}19%{color:<span class="rn">red</span>;}25%{color:<span class="yn">brown</span>;}40%{color:<span class="bn">blue</span>;}55%{color:<span class="gn">green</span>;}70%{color:<span class="on">orange</span>;}85%{color:<span class="mn">magenta</span>;}100%{color:<span class="blackn">black</span>;}}
@-o-keyframes GRhoverpelangi{0%{color:<span class="blackn">black</span>;}19%{color:<span class="rn">red</span>;}25%{color:<span class="yn">brown</span>;}40%{color:<span class="bn">blue</span>;}55%{color:<span class="gn">green</span>;}70%{color:<span class="on">orange</span>;}85%{color:<span class="mn">magenta</span>;}100%{color:<span class="blackn">black</span>;}}
@-ms-keyframes GRhoverpelangi{0%{color:<span class="blackn">black</span>;}19%{color:<span class="rn">red</span>;}25%{color:<span class="yn">brown</span>;}40%{color:<span class="bn">blue</span>;}55%{color:<span class="gn">green</span>;}70%{color:<span class="on">orange</span>;}85%{color:<span class="mn">magenta</span>;}100%{color:<span class="blackn">black</span>;}}
@-moz-keyframes GRhoverpelangi{0%{color:<span class="blackn">black</span>;}19%{color:<span class="rn">red</span>;}25%{color:<span class="yn">brown</span>;}40%{color:<span class="bn">blue</span>;}55%{color:<span class="gn">green</span>;}70%{color:<span class="on">orange</span>;}85%{color:<span class="mn">magenta</span>;}100%{color:<span class="blackn">black</span>;}}
@-webkit-keyframes GRhoverpelangi{0%{color:<span class="blackn">black</span>;}19%{color:<span class="rn">red</span>;}25%{color:<span class="yn">brown</span>;}40%{color:<span class="bn">blue</span>;}55%{color:<span class="gn">green</span>;}70%{color:<span class="on">orange</span>;}85%{color:<span class="mn">magenta</span>;}100%{color:<span class="blackn">black</span>;}}
a:hover{ <span>/* original code by : gubhugreyot.blogspot.com 30 Juni 2012 */ </span>
animation:GRhoverpelangi 4s infinite; <span>/* Standart */</span><span class="gn"></span>
-o-animation:GRhoverpelangi 4s infinite; <span>/* Opera */</span>
-ms-animation:GRhoverpelangi 4s infinite; <span>/* IE */</span>
-moz-animation:GRhoverpelangi 4s infinite; <span>/* Firefox */</span>
-webkit-animation:GRhoverpelangi 4s infinite; <span>/* Safari and Chrome */</span>
}</pre></div><br />
<p class="wn ttu">Cara menyimpan Kode CSS Efek pelangi pada Hover Teks Link:</p><ol><li>Login ke <a class="sini" href="http://blogger.com/home" target="_blank" title="Klik di sini untuk login ke blogger">Blogger</a>.</li>
<li>Dasbor (Dasboard).</li>
<li>Design (Rancangan).</li>
<li>Edit HTML.</li>
<li>Backup Template.</li>
<li>Cari Kode <b>]]></b:skin></b>, kemudian letakkan kode css tepat di atasnya.</li>
<li>Klik Simpan Template (Save Template)</li>
</ol><p class="rn">Catatan/keterangan:</p><ol><li>Untuk merubah variasi warna hover link dapat dilakukan dengan merubah warna (black, red, brown, blue, green, orange, magenta, black) yang terdapat di kode css.</li>
<li>Jika menghendaki data warna, sampeyan bisa melihat tabel lengkap data setiap warna berikut namanya dengan klik <a class="sini" href="http://gubhugreyot.blogspot.com/2009/11/tabel-nama-dan-kode-warna.html" target="_blank" title="Klik disini untuk melihat daftar lengkap kode & nama warna untuk mengganti warna di kode css hover pelangi">di sini</a>.</li>
<li>Panduan cara Backup Template, cara cari kode dan berbagai cara menyimpan kode css, javascript dan xHTML dapat dibuka pada <span class="rn">Special Tutorials</span> di menu sebelah kiri halaman.</li>
<li>Jika anda menggunakan template blogger baru (New Blogger Interface), anda dapat mengikuti panduan cara menyimpan kode css-nya melalui link berikut: <br />
<a href="http://gubhugreyot.blogspot.com/2012/04/cara-menyimpan-kode-html-di-template.html" target="_blank" title="Cara menyimpan kode html di Template | Edit HTML - New Blogger Interface">Cara simpan kode html di New Blogger Interface</a></li>
</ol><br />
<p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:</p><br />
<a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Mengapa musti ragu? Silahkan langsung klik & nikmati tutorial yang terbaru di sini"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg"></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank" title="Dapatkan lebih banyak tutorial dengan klik di dini!"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg"></a><br />
<br />
<span class="update">Posting » <b>Setu</b> <em>Kliwon</em>, Juni, 30, 2012</span><br />
<br />
<p class="happy">» Happy Blogging - gubhugreyot «</p></div>cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com8tag:blogger.com,1999:blog-5154686636804131392.post-66325928886593973592012-04-20T02:32:00.000-06:002012-04-20T02:32:50.436-06:00Cara Menyimpan Kode HTML di Template » Edit HTML "New Blogger Interface"<a class="jqtt3" href="http://3.bp.blogspot.com/-jk0bTHkv4Bw/T5EbkJCvzMI/AAAAAAAACb4/ImD0Upol1Fs/s1600/new-blogger-interface-edit-html-01.jpg" target="_blank" title="Langkah menyimpan kode html di new Blogger Interface"><img class="fl" height="138" width="200" src="http://3.bp.blogspot.com/-jk0bTHkv4Bw/T5EbkJCvzMI/AAAAAAAACb4/ImD0Upol1Fs/s200/new-blogger-interface-edit-html-01.jpg" /></a><div class="buka bonce">Perubahan tampilan baru blogger dalam bentuk "New Blogger Interface" atau "Antarmuka Blogger Baru" membawa berbagai perubahan baik bentuk, kelengkapan ataupun tata cara penggunaan fiturnya. Salah satu yang berubah adalah langkah "Edit Template" atau "Edit html". Tak terlalu banyak memang perubahan yang terjadi, namun demikian agar tutorial semakin lengkap dan tak ketinggalan jaman (selalu up to date), kita akan lengkapi juga dengan panduan langkah menyimpan kode html melalui box Edit HTML di "New Blogger Interface".<br />
<p class="on ttu">Upgrade "Old Blogger Interface" ke "New Blogger Interface"</p><a name='more'></a><ol><li>Lakukan <a class="sini" href="http://blogger.com/home" target="_blank" title="Klik di dini untuk login ke Blogger">login ke Blogger</a><br />
<ul class="dua"><li class="dua">Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).</li>
<li class="dua">Tuliskan Password.</li>
<li class="dua"><i>Klik</i> "Sign in"</li>
</ul></li>
<li>Dasbor/Dasboard:<br />
Klik "Upgrade Now" atau "Tingkatkan Versi Sekarang"<br />
<p style="font-size:11px;margin-left:-40px;background:#f9edbe;padding:5px;color:#000;border:2px solid #f0c36d;border-radius:4px;text-align:center;"><span style="margin-right:8px;">Tampilan Blogger akan diperbarui pada bulan April.</span><span class="bb" style="cursor:pointer"> Tingkatkan Versi Sekarang.</span></p><p style="font-size:11px;margin-left:-40px;background:#f9edbe;padding:5px;color:#000;border:2px solid #f0c36d;border-radius:4px;text-align:center;"><span style="margin-right:8px;">Blogger is getting a new look in April.</span><span class="bb" style="cursor:pointer"> Upgrade Now.</span></p></li>
</ol><p class="on ttu">Langkah menyimpan kode HTML</p>Melalui langkah ini anda dapat melakukan berbagai perubahan dalam template melalui box Edit Template, dimana perubahan dapat berupa penambahan ataupun pengurangan kode css, javascript dan xHTML. <br />
<ol><li>Setelah dasbor lama berganti menjadi dasbor "New Blogger Interface", klik "<strong>Template</strong>".</li>
<li>Lanjutkan klik "<strong>Edit HTML</strong>".</li>
<li>Klik "<strong>Proceed</strong>" atau "<strong>Lanjutkan</strong>". Tunggu beberapa saat!</li>
<li>Template » <span class="on">Edit HTML</span><br />
Box Edit HTML yang terlihat pada bagian ini merupakan sebuah box yang di dalamnya berisi berbagai kode html (kode css, javascript dan xHTML) penyusun desain dasar blog. Penambahan ataupun pengurangan kode html dapat dilakukan, baik di antara tag <head> dan </head> atau di antara tag pembuka body (<body>) dan tag penutupnya (</body>).</li>
<li>Setelah perubahan (berupa pengurangan kode dan/atau penambahan kode) klik "<strong>Save Template</strong>" atau "<strong>Simpan Template</strong>"</li>
</ol></div><div class="clear"></div><a class="jqtt3" href="http://4.bp.blogspot.com/-VZpHG_KG1Po/T5Ec57_tLWI/AAAAAAAACcQ/b5T6KoKSyY0/s1600/new-blogger-interface-edit-html-03.jpg" target="_blank" title="Langkah menyimpan kode html di new Blogger Interface"><img class="fr" height="144" width="200" src="http://4.bp.blogspot.com/-VZpHG_KG1Po/T5Ec57_tLWI/AAAAAAAACcQ/b5T6KoKSyY0/s200/new-blogger-interface-edit-html-03.jpg" style="margin:5px;" /></a><a class="jqtt2" href="http://4.bp.blogspot.com/-z9yr6aBLVSo/T5EcWzVlyGI/AAAAAAAACcE/kaa544pHcx0/s1600/new-blogger-interface-edit-html-02.jpg" target="_blank" title="Langkah menyimpan kode html di new Blogger Interface"><img class="fl" height="144" width="200" src="http://4.bp.blogspot.com/-z9yr6aBLVSo/T5EcWzVlyGI/AAAAAAAACcE/kaa544pHcx0/s200/new-blogger-interface-edit-html-02.jpg" style="margin:5px;" /></a><div class="clear"></div><div class="buka bonce"><p class="on ttu">Beberapa catatan penting :</p><ol><li>Untuk mempermudah pencarian kode gunakanlah "<strong>Ctrl + F</strong>". Panduan cara cepat mencari kode html dapat anda buka <a class="sini" href="http://gubhugreyot.blogspot.com/2010/03/cara-cepat-cari-kode-html.html" target="_blank" title="Panduan cara cepat cari kode html di box E dit HTML">di sini</a>.</li>
<li>Penambahan kode CSS umumnya dilakukan di atas kode <strong>]]></b:skin></strong>, meskipun demikian tak menutup kemungkinan untuk menyimpan kode css pada bagian yang lain. Penyimpanan di atas <strong>]]></b:skin></strong> dilakukan tanpa menggunakan tag pembuka dan penutup style (<b><style type="text/css"></b> dan <b></style></b>), sedang pada bagian yang lain harus menggunakan tag pembuka dan penutup style. <br />
Catatan : Anda dapat menyimpan kode css di hampir semua bagian box Edit HTML.</li>
<li>Penambahan/penyimpanan javascript biasanya dilakukan di bawah <strong><head></strong>, di atas <strong></head></strong>, di bawah <strong>]]></b:skin></strong>, di bawah <strong><body></strong> atau di atas <strong></body></strong>.</li>
<li>xHTML bisa di tambahkan di hampir semua bagian box Edit HTML, sekalipun secara umum penambahan banyak dilakukan di bagian body di antara tag pembuka body (<strong><body></strong>) dan tag penutupnya (<strong></body></strong>).</li>
<li>Beberapa penambahan xHTML baru pada bagian body dilakukan dengan terlebih dahulu melakukan <i>klik</i> "<strong>Expand Widget Template</strong>".</li>
<li><strong>Preview</strong> berfungsi untuk melihat hasil perubahan/modifikasi blog tanpa penyimpanan kode secara permanen.</li>
<li><strong>Clear Edits</strong> untuk membersihkan/membatalkan hasil edit.</li>
<li><strong>Close</strong> untuk menutup box Edit HTML. Dapat dilakukan setelah proses edit selesai atau sebelum edit selesai (membatalkan edit).</li>
</ol><p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:</p><br />
<a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Langsung KLIK di sini untuk mengikuti Panduan dan Tutorial lain guna melengkapi panduan dari blog ini"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg" /></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank" title="Panduan lain yang sangat menarik untuk sampeyan ikuti juga tersedia lengkap di sini. Silahkan langsung KLIK daripada penasaran!"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg" /></a><br />
<br />
<span class="update">Posting » <b>Jemuah</b> <em>WAGE</em>, April, 20, 2012</span><br />
<br />
<p class="happy">» Happy Blogging - gubhugreyot «</p></div>cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com23tag:blogger.com,1999:blog-5154686636804131392.post-33851932063187816142012-04-15T22:42:00.000-06:002012-04-18T18:37:22.710-06:00Create 404 error page in Blogger with simple flash game - Membuat halaman error 404<p class="on fs14">Menampilkan game flash sederhana di halaman Error 404 Blogger.</p> <div class="clear"></div><a class="jqtt3" href="http://2.bp.blogspot.com/-2ibpuLhPwE0/T4uahWDny_I/AAAAAAAACa8/KByLU_G3jP0/s1600/gubhugreyot-setting-halaman-Error-404.jpg" target="_blank" title="Langkah membuat halaman error 404 di blogger"><img class="fl" height="142" width="200" src="http://2.bp.blogspot.com/-2ibpuLhPwE0/T4uahWDny_I/AAAAAAAACa8/KByLU_G3jP0/s200/gubhugreyot-setting-halaman-Error-404.jpg" /></a><div class="buka bonce">Banyak hal dapat kita lakukan "di halaman dengan alamat tak jelas" atau "halaman error 404" yang juga disebut sebagai "404 error page". Halaman yang akan dijumpai di blogger ketika sebuah alamat tak bisa ditemukan karena beberapa sebab, seperti misalnya:<p class="tal">1. Seseorang menuliskan alamat (URL) secara tak benar.<br/>
contoh:<br/>
- http://gubhugreyot.blogspot.com/2010/08/juery-lightbox.html
harusnya:<br/>
- http://gubhugreyot.blogspot.com/2010/08/<span class="rn">create-</span>juery-lightbox.html<br/>
2. Judul posting yang telah di hapus. Alamat sebuah posting sekalipun telah di hapus akan tetap tersimpan dalam mesin pencari google, sehingga ketika posting dihapus alamat ini akan tetap ada sedangkan postingnya takkan pernah ditemukan lagi.<br/>
Contoh silahkan buka link berikut: <br/>
- http://gubhugreyot.blogspot.com/2012/04/best-solution-when-reply-comment-button_12.html</p><div class="clear"></div><br/></div>
<a class="jqtt2" href="http://3.bp.blogspot.com/-JG1CJ0u0N0Q/T4uhv6VyKjI/AAAAAAAACbU/E-Dl7GQQ5DI/s1600/gubhugreyot-setting-halaman-Error-404-2.jpg" target="_blank" title="langkah menyimpan kode css"><img class="fl" height="188" width="200" src="http://3.bp.blogspot.com/-JG1CJ0u0N0Q/T4uhv6VyKjI/AAAAAAAACbU/E-Dl7GQQ5DI/s200/gubhugreyot-setting-halaman-Error-404-2.jpg" /></a><div class="buka bonce">Membuat halaman error 404 (halaman tak ditemukan) menjadi sebuah bagian yang menarik dari sebuah blog bisa membuat seorang pengunjung menjadi semakin tertarik untuk membuka lebih banyak lagi posting. Anda sebaiknya menampilkan kata-kata yang bersahabat dan membuat pengunjung merasa nyaman sekalipun halaman yang di cari tak ditemukan.
menampilkan sebuah file flash dalam halaman error 404 adalah sebuah improvisasi yang bisa lebih dikembangkan lagi. Dalam posting ini telah kita sediakan kode css berikut xHTML untuk membuat halaman error 404 yang didalamnya disertakan game sederhana dalam bentuk file flash. Anda dapat memilih menggunakan kode css dan xHTML-2 atau hanya menggunakan xHTML-1. Jika anda gunakan xHTML-1, maka anda tak perlu lagi menggunakan kode css. Semua sudah tersimpan dalam javascript yang didalamnya berisi file game flash serta kode css.
<a class="demos" href="http://gubhugreyot-demo-tutorial-blogger-1.blogspot.com/2012/03/xx-beberapa-effek-image-dengan-onmouseover.html" target="_blank" title="Demo 404 Error Page in Blogger with simple flash game">D E M O</a>
<p class="on ttu">Cara membuat halaman error 404 dengan game flash-1:</p><a name='more'></a>
<ol>
<li>Lakukan login ke Blogger.</li>
<li>Setelah halaman dasboard terbuka, bagi yang masih menggunakan "Old Blogger Interface silahkan upgrade terlebih dahulu ke "New Blogger Interface".
<p style="background:#f9edbe;padding:5px;color:#000;border:2px solid #f0c36d;border-radius:4px;text-align:center;"><span style="margin-right:8px;">Blogger is getting a new look in April.</span><span class="bb" style="cursor:pointer"> Upgrade Now.</span></p></li>
<li>Settings/Setelan.</li>
<li>Search Preference/Preferensi Penelusuran.</li>
<li>Errors and redirections » Custom Page Not Found ?
atau :
Kesalahan dan pengalihan » Pesan Ubahsuaian untuk Laman Tidak Ditemukan ?
Silahkan klik "Edit".</li>
<li>Simpan xHTML-1 dalam box yang tersedia.
<div class="pre m-40"><h5>xHTML-1 :</h5><pre><center>
Cihui... Rupanya anda tersesat! Kecian,dech... Hu ... makanya besok lagi klo mo bepergian bawa peta,dong! Nich...,maen game duluan n n'tar klo dah cape klik link-nya. Teman2 udah nundu, mbul!!<br/><a href="http://gubhugreyot.blogspot.com" title="Tuh ... liat ... tuh ... jalannya. Hih... ,dasar!">gubhugreyot : demos & tutorials</a>
<script src="http://gubhugreyotprojects.googlecode.com/svn/widgets/flash-blogger-404-error-page.js" type="text/javascript"></script>
</center></pre></div>
<li>Save Changes/Simpan Perubahan.</li>
<li>Buka salah satu posting dengan sedikit merubah URL-nya agar halaman error 404 terlihat (lihat contoh dua kasus di atas!).</li>
</ol>
<p class="on ttu">Cara membuat halaman error 404 dengan game flash-2:</p>
Untuk yang kedua, cara yang dipergunakan hampir sama, hanya anda harus menambahkan kode css di atas kode <b>]]></b:skin></b>
<ol>
<li>Lakukan proses seperti di atas (dg xHTML-1) dan simpan xHTML-2.</li>
<li>Setelah xHTML-2 tersimpan, lanjutkan dengan klik "Template".</li>
<li>Klik "Edit HTML".</li>
<li>Klik "Proceed/Lanjutkan".</li>
<li>Cari kode <b>]]></b:skin></b>.</li>
<li>Letakkan kode CSS di atas <b>]]></b:skin></b>.</li>
<li>Klik "Save Template/Simpan Template".</li>
<li>Buka sebuah alamat posting seperti cara yang dipergunakan pada xHTML-1.</li>
</ol>
<div class="pre"><h5>xHTML-2 :</h5><pre><center>
Cihui... Rupanya anda tersesat! Kecian,dech... Hu ... makanya besok lagi klo mo bepergian bawa peta,dong! Nich..., maen game duluan n n'tar klo udah cape klik link-nya. Teman2 udah nundu, mbul!!<br/><a href="http://gubhugreyot.blogspot.com" title="Tuh ... liat ... tuh ... jalannya. Hih... ,dasar!">gubhugreyot : demos & tutorials</a>
<div class="GRflashgame1">
<div class="GRflashgame2">
<embed src="http://gubhugreyotprojects.googlecode.com/svn/flash/gubhugreyot-flash-cat-game.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="400" style="margin:-40px 0 0 -30px;"></embed>
</div>
</div>
</center></pre></div>
<div class="pre"><h5>Kode CSS :</h5><pre><strong>.status-msg-wrap</strong>{
position:fixed;
z-index:9999;
top:0; <span>/* by: gubhugreyot */</span>
left:0;
width:100%;
height:100%;
padding:0;
margin:0;
background: #7d7e7d;
background: -o-linear-gradient(-45deg,#7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
background: -moz-linear-gradient(-45deg,#7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
background: -webkit-gradient(linear,left top,right bottom,color-stop(1%,#7d7e7d),color-stop(17%,#6d6d6d),color-stop(17%,#303030),color-stop(21%,#6d6d6d),color-stop(28%,#444444),color-stop(28%,#6d6d6d),color-stop(30%,#2b2b2b),color-stop(31%,#6d6d6d),color-stop(35%,#333333),color-stop(35%,#828282),color-stop(91%,#828282),color-stop(91%,#333333),color-stop(92%,#828282));
background: -webkit-linear-gradient(-45deg,#7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
background: -ms-linear-gradient(-45deg,#7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
background: linear-gradient(-45deg,#7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d7e7d',endColorstr='#828282',GradientType=1);}
<strong>.status-msg-body</strong>{
font-size:24px;
color:#eee;
text-shadow:2px 2px 2px #000;
margin:0 auto;
padding:40px 100px;
height:550px;
width:800px;
}
<strong>.status-msg-body a</strong>{
color:#FC0;
text-decoration:none;
}
<strong>.status-msg-body a:hover</strong>{
color:#6FF;
text-decoration:none;
}
<strong>.status-msg-bg</strong>{
background:transparent;
}
<strong>.status-msg-wrap:after</strong>{
position:absolute;
right:40px;
top:92%; <span>/* by: http://gubhugreyot.blogspot.com, april, 2012 */</span>
font-size:12px;
font-family:arial;
transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
color:#000;
content:"gubhugreyot";
text-shadow:0 0 0 #fff;
}
<strong>.GRflashgame1</strong>{
margin:30px auto;
width:450px;
height:330px;
border:10px solid #999;
border-radius:15px;
overflow:hidden;
box-shadow:-3px -3px 3px #444,6px 6px 6px #222,0 0 20px #000;
}
<strong>.GRflashgame2</strong>{
border:5px solid transparent;
border-radius:6px;
width:440px;
height:320px;
overflow:hidden;
}</pre></div>
<p class="rn ttu">Catatan/Keterangan :</p>
<ol>
<li>Arahkan cursor ke gambar untuk melihat tutorial dalam gambar.</li>
<li>Ganti teks "Cihui... Rupanya anda tersesat! Kecian,dech ... dst" dengan teks lain yang membuat pengunjunglebih enjoy.</li>
<li>Ganti URL : "http://gubhugreyot.blogspot.com" dengan URL blog anda.</li>
<li>Ganti title "Tuh ... liat ... tuh ... jalannya. Hih... ,dasar!" dengan teks lain yang lebih tepat.</li>
<li>Untuk mengganti file flash, silahkan ganti :
"http://gubhugreyotprojects.googlecode.com/svn/flash/gubhugreyot-flash-cat-game.swf"</li>
<li>width="500" height="400" style="...." bisa dideuaikan dengan file flash yang baru.</li>
<li>Jika anda ingin membuat halaman error 404 yang berbeda, dimana yang ditampilkan bukan file flash melainkan sebuah image, silahkan buka tutorialnya melalui link di bawah ini:
<a href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/2012/04/create-404-error-page-in-blogger-with.html" target="_blank" title="membuat halaman Error 404 di Blogger dengan CSS3">Create 404 Error Page in Blogger with CSS3</a></li>
</ol><p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:</p><br />
<a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Langsung KLIK di sini untuk mengikuti Panduan dan Tutorial lain guna melengkapi panduan dari blog ini"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg" /></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank" title="Panduan lain yang sangat menarik untuk sampeyan ikuti juga tersedia lengkap di sini. Silahkan langsung KLIK daripada penasaran!"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg" /></a><br />
<br />
<span class="update">Posting » <b>Setu</b> <em>PON</em>, April, 14, 2012</span><br />
<br />
<p class="happy">» Happy Blogging - gubhugreyot «</p></div>cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com4tag:blogger.com,1999:blog-5154686636804131392.post-40843337596646572062012-04-14T12:39:00.003-06:002012-04-15T23:34:07.441-06:00Playing with Animated Flying Twitter Bird » with css3 effects & animated .gif<a href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/" target="_blank"><img class="fl" height="66" width="66" src="http://3.bp.blogspot.com/-EbD2RprxAXk/T4nI0w6gHpI/AAAAAAAACaM/Wr5DoFVeadI/s200/animated-flying--twitter-bird.gif" /></a><div class="buka bonce">Dengan widget Animated Flying Twitter Bird yang telah mengalami modifikasi melalui penambahan kode css3 ini anda dapat sedikit bermain-main menangkap si burung twitter terbang. Si burung twitter terbang akan tetap seperti biasanya dengan terbang mengelilingi halaman blog, hanya anda dapat mencoba menangkapnya kemudian mempertahankan agar tetap bersama cursor hingga si burung manis berhenti. Atau cobalah tangkap tepat saat berhenti. Ketika burung twitter masih terbang dan tangkapan anda tepat maka burung twitter akan berhenti dan berusaha lepas disertai effek zoom serta munculnya burung twitter berbeda berbentuk animasi gif.<br />
<br />
Javascriptnya silahkan anda copy melalui link di bawah ini dan segera simpan melalui <b>add a gadget</b> atau bisa juga diletakkan di bawah ]]></b:skin> atau di atas <head> atau di atas </body><br />
<br />
<a class="sini" href="http://gubhugreyot.blogdetik.com/2012/04/13/widget-burung-twitter-terbang-dg-effek-css3-spesial-tutorial-blogdetik/" targrt="_blank" title="Klik dan dapatkan javascriptnya di sini!">Widget Burung Twitter Terbang dg Effect css3</a><br />
<p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:</p><br />
<a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Langsung KLIK di sini untuk mengikuti Panduan dan Tutorial lain guna melengkapi panduan dari blog ini"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg" /></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank" title="Panduan lain yang sangat menarik untuk sampeyan ikuti juga tersedia lengkap di sini. Silahkan langsung KLIK daripada penasaran!"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg" /></a><br />
<br />
<span class="update">Posting » <b>Setu</b> <em>PON</em>, April, 14, 2012</span><br />
<br />
<p class="happy">» Happy Blogging - gubhugreyot «</p></div><br />
Sumber:<br />
<br />
- Autor : Florian Buenzli, 2010<br />
- For blogger by : Harrys, http://www.way2blogging.org, 2011<br />
- With css3 effects by : gubhugreyot, http://gubhugreyot.blogdetik.com, April 2012<br />
<br />
<script src="http://gubhugreyot-blogdetik.googlecode.com/svn/widget/siburung-twitter-terbang.js" type="text/javascript"></script><br />
<script type="text/javascript">
var twitterAccount = "http://twitter.com/gubhugreyot";
var tweetThisText = "Tips, tricks dan tutorial blogdetik - blogger";
tripleflapInit();
</script><br />
<style>
a#tBird{transition:0s;-o-transition:0s;-moz-transition:0s;-webkit-transition:0s;-ms-transition:0s;}
</style>cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com0tag:blogger.com,1999:blog-5154686636804131392.post-29414588201704809832012-04-09T12:45:00.005-06:002012-04-09T13:38:05.138-06:00Solusi jitu ketika button reply comment tak berfungsi - Blogger New Threaded Comments<a class="jqtt3" href="http://3.bp.blogspot.com/-T0Ltfgh9dYI/T4Mte0a6RlI/AAAAAAAACZc/gJmG4i0ckac/s1600/disfungsi-blogger-reply-comment.jpg" target="_blank" title="Pusing button reply comment tak berfungsi?"><img class="fl" height="139" width="200" src="http://3.bp.blogspot.com/-T0Ltfgh9dYI/T4Mte0a6RlI/AAAAAAAACZc/gJmG4i0ckac/s200/disfungsi-blogger-reply-comment.jpg" /></a><div class="buka bonce">Kasus tidak berfunginya button reply comment di New Blogger Threaded Comment ternyata tak hanya dialami oleh satu atau dua blogger saja. Sangat banyak yang mengeluhkan permasalahan ini, termasuk satu diantaranya 'gubhugreyot sendiri". Salah satu blog yang aku gunakan selama hampir dua bulan aku biarkan tanpa fungsi reply comment yang normal fungsinya. Button teks reply comment memang tetap "nyanggong" di tempatnya, tapi ketika di klik tak ada reaksi apapun yang muncul. Button reply comment Blogger New Threaded Comments tersebut tetap diam membisu "sekalipun di embat pakai martil". He ... benar-benar bikin jengkel dan putus asa! Dus ... akhirnya setelah dua bulan satu solusi akhirnya aku temukan juga. Javascript Threaded Commentlah yang menjadi masalah mengapa si button reply tak dapat bekerja dan diam membisu sekalipun "di klik beribu kali". <a name='more'></a><br />
<br />
Munculnya permasalahan gangguan atau disfungsi button reply comment pada New Blogger Threaded Comments sebenarnya terjadi karena proses editing, modifikasi atau penggantian template dengan template baru hasil download. Setelah disfungsi terjadi, sekalipun telah dilakukan pergantian template "default blogger", baik menggunakan template Tata Letak (Layout) ataupun Blogger Designer (Perancang Template) ternyata button reply tetap seperti sedia kala. Kerusakan ini menjadi bersifat permanen dan selalu mengikuti sekalipun template diganti berkali-kali. Mengganti template ternyata bukan mengatasi masalah atau menjadi sebuah solusi. Javascript Threaded Comments-lah yang harus diperbaiki atau diganti. Di bawah ini ada dua buah contoh potongan javascript Threaded Comment yang bermasalah dan membuat button reply comment tak dapat berfungi dan javascript yang seharusnya digunakan:<br />
<ol><li>Silahkan anda cermati kode yang berwarna <span class="on">orange</span>, <span class="gn">hijau</span> dan <span class="rn">merah</span>:<br />
<div class="pre m-40"><h5>Javascript yang bermasalah-1:</h5><pre><script <span class="on">defer</span>='<span class="on">defer</span>' expr:src='data:post.commentSrc' type='text/javascript'/>
<script type='text/javascript'>
(function() {
var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
<span class="gn">var postId = &#39;<data:post.id/>&#39;;
var feed = &#39;<data:post.commentFeed/>&#39;;
var authorName = &#39;<data:post.author/>&#39;;
var authorUrl = &#39;<data:post.authorUrl/>&#39;;
var blogId = &#39;<data:top.id/>&#39;;
var baseUri = &#39;<data:post.commentBase/>&#39;;
var maxThreadDepth = &#39;<data:post.commentMaxThreadDepth/>&#39;;</span>
// <![CDATA[
<span class="rn">feed += '?alt=json&v=2&orderby=published&reverse=false&max-results=50';</span>
var cursor = null;
if (items && items.length > 0) {
cursor = parseInt(items[items.length - 1].timestamp) + 1;
}
... etc
//]]>
</script></pre></div></li>
<li>Kasus yang ini perlu di cermati benar! Sekalipun yang kita temukan bukan kode bertuliskan "<span class="rn">defer</span>" namun sudah seperti yang seharusnya digunakan bertuliskan "<span class="rn">async</span>", javascript tetap tidak akan berfungsi karena beberapa kode di bawahnya bermasalah (<span class="gn">warna hijau</span> dan <span class="rn">warna merah</span>).<br />
<div class="pre m-40"><h5>Javascript yang bermasalah-2:</h5><pre><script <span class="on">async</span>='<span class="on">async</span>' expr:src='data:post.commentSrc' type='text/javascript'/>
<script type='text/javascript'>
(function() {
var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
<span class="gn">var postId = &#39;<data:post.id/>&#39;;
var feed = &#39;<data:post.commentFeed/>&#39;;
var authorName = &#39;<data:post.author/>&#39;;
var authorUrl = &#39;<data:post.authorUrl/>&#39;;
var blogId = &#39;<data:top.id/>&#39;;
var baseUri = &#39;<data:post.commentBase/>&#39;;
var maxThreadDepth = &#39;<data:post.commentMaxThreadDepth/>&#39;;</span>
// <![CDATA[
<span class="rn">feed += '?alt=json&v=2&orderby=published&reverse=false&max-results=50';</span>
var cursor = null;
if (items && items.length > 0) {
cursor = parseInt(items[items.length - 1].timestamp) + 1;
}
... etc
//]]>
</script></pre></div></li>
<li>Lihat dan bandingkan dengan yang di bawah ini. Javascript yang seperti inilah yang seharusnya digunakan. Selain beberapa kode javascript pada bagian awal sudah tak sama dengan yang seharusnya digunakan, pada bagian selanjutnya, beberapa kode javascript juga tak sama.<br />
<div class="pre m-40"><h5>Javascript yang seharusnya digunakan:</h5><pre><script <span class="on">async</span>='<span class="on">async</span>' expr:src='data:post.commentSrc' type='text/javascript'/>
<script type='text/javascript'>
(function() {
<span class="gn">var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
var config = <data:post.commentConfig/>;</span>
// <![CDATA[
var cursor = null;
if (items && items.length > 0) {
cursor = parseInt(items[items.length - 1].timestamp) + 1;
}
... etc
//]]>
</script></pre></div></li>
</ol><p class="gn ttu">Cara mengganti javascript :</p><ol><li>Login ke <a class="sini" href="http://blogger.com/home" target="_blank" title="Klik di sini untuk login ke Blogger">Blogger</a>.</li>
<li>Dasbor (Dasboard).</li>
<li>Design (Rancangan).</li>
<li>Edit HTML.</li>
<li>Backup Template.</li>
<li>Cari Kode: <br />
<b><b:includable id='threaded_comment_js' var='post'></b><br />
Di bawah ini terdapat javascript seperti yang terlihat dalam box di atas. Ganti javascript bermasalah (javascript-1 atau javascript-2) dengan javascript berikut ini:<br />
<div class="pre m-40"><h5>Blogger New Threaded Comment Script:</h5><pre><script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
<script type='text/javascript'>
(function(){var l=<data:post.commentJso/>;var j=<data:post.commentMsgs/>;var r=<data:post.commentConfig/>;
//<![CDATA[
var e=null;if(l&&l.length>0){e=parseInt(l[l.length-1].timestamp)+1}var p=function(u){if(u.gd$extendedProperty){for(var t in u.gd$extendedProperty){if(u.gd$extendedProperty[t].name=="blogger.contentRemoved"){return'<span class="deleted-comment">'+u.content.$t+"</span>"}}}return u.content.$t};var m=function(w){e=null;var A=[];if(w&&w.feed&&w.feed.entry){for(var x=0,B;B=w.feed.entry[x];x++){var z={};var t=/blog-(\d+).post-(\d+)/.exec(B.id.$t);z.id=t?t[2]:null;z.body=p(B);z.timestamp=Date.parse(B.published.$t)+"";if(B.author&&B.author.constructor===Array){var u=B.author[0];if(u){z.author={name:(u.name?u.name.$t:undefined),profileUrl:(u.uri?u.uri.$t:undefined),avatarUrl:(u.gd$image?u.gd$image.src:undefined)}}}if(B.link){if(B.link[2]){z.link=z.permalink=B.link[2].href}if(B.link[3]){var y=/.*comments\/default\/(\d+)\?.*/.exec(B.link[3].href);if(y&&y[1]){z.parentId=y[1]}}}z.deleteclass="item-control blog-admin";if(B.gd$extendedProperty){for(var v in B.gd$extendedProperty){if(B.gd$extendedProperty[v].name=="blogger.itemClass"){z.deleteclass+=" "+B.gd$extendedProperty[v].value}}}A.push(z)}}return A};var h=function(v){if(c()){var u=r.feed+"?alt=json&v=2&orderby=published&reverse=false&max-results=50";if(e){u+="&published-min="+new Date(e).toISOString()}window.bloggercomments=function(x){var w=m(x);e=w.length<50?null:parseInt(w[w.length-1].timestamp)+1;v(w);window.bloggercomments=null};u+="&callback=bloggercomments";var t=document.createElement("script");t.type="text/javascript";t.src=u;document.getElementsByTagName("head")[0].appendChild(t)}};var c=function(){return !!e};var a=function(t,v){if("iswriter"==t){var u=!!v.author&&v.author.name==r.authorName&&v.author.profileUrl==r.authorUrl;return u?"true":""}else{if("deletelink"==t){return r.baseUri+"/delete-comment.g?blogID="+r.blogId+"&postID="+v.id}else{if("deleteclass"==t){return v.deleteclass}}}return""};var f=null;var o=null;var k=undefined;var d=function(t,u){if(f==null){f=document.getElementById("comment-editor");if(f!=null){f.height="250px";f.style.display="block";o=f.src.split("#")}}if(f&&(t!==k)){document.getElementById(u).insertBefore(f,null);f.src=o[0]+(t?"&parentID="+t:"")+"#"+o[1];k=t}};var b=(window.location.hash||"#").substring(1);var n,i;if(/^comment-form_/.test(b)){n=b.substring("comment-form_".length)}else{if(/^c[0-9]+$/.test(b)){i=b.substring(1)}}var g={maxDepth:r.maxThreadDepth};var q={id:r.postId,data:l,loadNext:h,hasMore:c,getMeta:a,onReply:d,rendered:true,initComment:i,initReplyThread:n,config:g,messages:j};var s=function(){if(window.goog&&window.goog.comments){var t=document.getElementById("comment-holder");window.goog.comments.render(t,q)}};if(window.goog&&window.goog.comments){s()}else{window.goog=window.goog||{};window.goog.comments=window.goog.comments||{};window.goog.comments.loadQueue=window.goog.comments.loadQueue||[];window.goog.comments.loadQueue.push(s)}})();
//]]>
</script></pre></div></li>
<li>Simpan Template (Save Template).</li>
</ol><p class="rn">Catatan/keterangan:</p><ol><li>Klik <a class="sini" href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/2012/04/add-emoticon-to-blogger-template.html" target="_blank" title="Klik untuk melihat demo hasil penggunaan javascript Blogger New Threaded Comments">di sini</a> untuk melihat hasil penggunaan javascript pada blog/template yang sebelumnya mengalami masalah pada fungsi button reply comment.</li>
<li>Panduan cara Backup Template, cara cari kode dan berbagai cara menyimpan kode css, javascript dan xHTML dapat dibuka pada <span class="rn">Special Tutorials</span> di menu sebelah kiri halaman.</li>
</ol><p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:</p><br />
<a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Langsung KLIK di sini untuk mengikuti Panduan dan Tutorial lain guna melengkapi panduan dari blog ini"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg" /></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank" title="Panduan lain yang sangat menarik untuk sampeyan ikuti juga tersedia lengkap di sini. Silahkan langsung KLIK daripada penasaran!"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg" /></a><br />
<br />
<span class="update">Posting » <b>Ngahad</b> <em>PAHING</em>, April, 08, 2012</span><br />
<br />
<p class="happy">» Happy Blogging - gubhugreyot «</p></div>cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com9tag:blogger.com,1999:blog-5154686636804131392.post-79470666050441789222012-04-07T12:09:00.001-06:002012-04-07T12:34:20.171-06:00CSS only: Displays "Admin and Signature" on Author Comment in Blogger New Threaded Comments<a class="jqtt3" href="http://1.bp.blogspot.com/-BGgvLuKli6M/T4B6cjFo9NI/AAAAAAAACU4/-SvrvjgGIBA/s1600/Admin-on-Author-comment.jpg" target="_blank" title="Menampilkan kata Admin pada Author Comment di Blogger Threaded Comments"><img class="fl" height="128" width="200" src="http://1.bp.blogspot.com/-BGgvLuKli6M/T4B6cjFo9NI/AAAAAAAACU4/-SvrvjgGIBA/s200/Admin-on-Author-comment.jpg" /></a><div class="buka bounce">Mengembangkan apa yang sudah terpostingkan sebelumnya tentang "Cara membuat background berbeda pada Author Comment di Blogger Threaded Comments menggunakan kode css (Only CSS: Hightlight Author Comment in Blogger Threaded Comments)", kali ini kita akan menambahkan sebuah background image yang berupa teks "Admin" atau "tanda tangan pemilik blog". Penambahan "Admin" atau "Tanda Tangan Author" pada Author Comment akan membuat setiap tanggapan komentar yang diberikan author (pemilik blog-penulis) mempunyai warna background berbeda dan disertai "teks Admin" atau "tanda tangan" di sisi sebelah kanan bawah. Anda bisa melihat contohnya (demo) dengan membuat sebuah komentar di posting ini dan kemudian melihat tanggapan komentar yang nantinya akan kami berikan.<a name='more'></a><br />
<div class="pre"><h5>Kode CSS :</h5><pre><b>.comment-block</b>{
position:relative;
padding:8px; <span>/* original code by: http://gubhugreyot.blogspot.com */</span>
border:1px solid #ddd;
border-radius:4px;
}
<b>.comment-block .icon.blog-author</b>{
position:absolute;
right:0; <span>/* original code by: http://gubhugreyot.blogspot.com - April, 08, 2012*/</span>
bottom:0;
background:rgba(174,212,251,0.2) url(<span class="on">https://lh4.googleusercontent.com/-4yHK-5f238M/T3-C_VbTGqI/AAAAAAAACRc/wJXHql7XEOc/s128/gubhugreyot-admin-6transp.gif</span>) bottom right no-repeat !important;
width:100% !important;
height:100% !important;
margin:0 !important;
}
<b>.comment-block:hover</b>{background:rgba(139,139,139,0.1);
border:1px solid #eee;
box-shadow:4px 4px 4px #444;
}
<b>.comment-block:hover .icon.blog-author</b>{
width:60px !important;
height:22px !important;
background:url(<span class="rn">https://lh4.googleusercontent.com/-4yHK-5f238M/T3-C_VbTGqI/AAAAAAAACRc/wJXHql7XEOc/s128/gubhugreyot-admin-6transp.gif</span>) bottom right no-repeat !important;
background-size:60px 22px !important;
}</pre></div><p class="ob ttu">Cara menggunakan kode css :</p><ol><li>Login <a class="sini" href="http://blogger.com/home/" target="_blank" title="Klik di sini untuk login ke Blogger.">ke Blogger</a>.<br />
<ul><li>Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).</li>
<li>Tuliskan Password.</li>
<li><i>Klik</i> "Sign in"</li>
</ul></li>
<li>Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".<br />
<i>Klik</i> "Rancangan (Design)".</li>
<li>Kembali halaman baru akan terbuka, <i>klik</i> "Edit HTML".</li>
<li>Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:<br />
<ul><li><b>Backup/Restore Template</b> » berisi fitur untuk melakukan backup template. <br />
Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript).</li>
<li><b>Edit Template</b> » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.</li>
<li><b>Old Templates</b> » berisi template lama blogger (Template Tata Letak & Template Klasik.</li>
</ul></li>
<li>Cari kode <span class="on">]]></b:skin></span>.</li>
<li>Copy kode css dan letakkan<span class="rn"> di atas </span> <span class="on">]]></b:skin></span><br />
<i>Keterangan : </i><br />
Pilih salah satu kode css. Anda bisa gunakan yang menggunakan opacity effect atau yang menggunakan background rgba.</li>
<li><i>Klik</i> "Simpan Template (Save Template)".</li>
<li>Buka blog dan coba hasilnya dengan membuat komentar.</li>
</ol><p class="ob ttu">Catatan/Keterangan :</p><ol><li>Untuk menampilkan tanda tangan author (signature), ganti background image (yang berwarna <span class="on">orange</span> dan <span class="rn">red</span>):<br />
<span class="fs10">https://lh4.googleusercontent.com/-4yHK-5f238M/T3-C_VbTGqI/AAAAAAAACRc/wJXHql7XEOc/s128/gubhugreyot-admin-6transp.gif</span><br />
dengan background image baru yang berupa image bergambar tanda tangan (signature):<br />
</li>
<li>Untuk membuat background image berupa tanda tangan Author, silahkan ikuti panduannya melalui link di bawah ini:<br />
<a class="sini" href="http://gubhugreyot.blogspot.com/2010/12/membuat-tanda-tangan-di-blog.html" target="_blank" title="panduan dan tutorial membuat tanda tangan di blog">Cara membuat tanda tangan di blog</a></li>
<li>Jika ingin menampilkan tanda tangan dan "Admin" secara bersamaan, ganti background image pada syntax : <b>.comment-block .icon.blog-author</b> (berwarna <span class="on">orange</span>) :<br />
<span class="on fs10">https://lh4.googleusercontent.com/-4yHK-5f238M/T3-C_VbTGqI/AAAAAAAACRc/wJXHql7XEOc/s128/gubhugreyot-admin-6transp.gif</span></li>
<li>Untuk anda yang tak ingin menampilkan "Admin dan tanda tangan" karena hanya ingin membuat warna background Author Comment berbeda, dapatkan tutorialnya di bawah ini:<br />
<a class="sini" href="http://gubhugreyot.blogspot.com/2012/04/css-only-background-highlight-on-author.html" target="_blank" title="CSS only : Highlight Autor Comment in Blogger New Threaded Comments">CSS only: Highlight Author Comment</a></li>
<li>Panduan cara backup template, cara cari kode dan berbagai cara menyimpan kode css dapat anda buka di <span class="rn">Special Tutorials</span> yang terdapat di menu sebelah kiri halaman.</li>
<li>Tutorial cara pasang teks Admin atau tanda tangan Author ini hanya digunakan pada template/blog yang sudah menggunakan system Threaded Comments.</li>
<li>Untuk merubah warna background dapat dilakukan dengan merubah background rgba.</li>
<li>Bagi yang ingin merubah blog atau template menjadi threaded comments silahkan buka panduannya melalui link di bawah ini :<br />
<a class="sini" href="http://gubhugreyot.blogspot.com/2012/04/trick-buat-blogtemplate-jadi-threaded.html" target="_blank" title="Klik untuk mengikuti panduan dan tutorial cara membuat blog atau template menjadi threaded comments.">Cara membuat blog menjadi Threaded Comments</a></li>
</ol><p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:</p><br />
<a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Langsung KLIK di sini untuk mengikuti Panduan dan Tutorial lain guna melengkapi panduan dari blog ini"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg" /></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank" title="Panduan lain yang sangat menarik untuk sampeyan ikuti juga tersedia lengkap di sini. Silahkan langsung KLIK daripada penasaran!"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg" /></a><br />
<br />
<span class="update">Posting » <b>Ngahad</b> <em>PAHING</em>, April, 08, 2012</span><br />
<br />
<p class="happy">» Happy Blogging - gubhugreyot «</p></div>cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com5tag:blogger.com,1999:blog-5154686636804131392.post-47119623197998221052012-04-07T10:18:00.008-06:002012-04-07T17:18:29.867-06:00CSS Only: Highlight Author Comment Blogger's New Threaded Comments<a class="jqtt3" href="http://2.bp.blogspot.com/-I4Df_wbMxQg/T4Bndp9NIhI/AAAAAAAACUs/NtFJY2xyV1M/s1600/GRhighlight-author-comment.jpg" target="_blank" title="Background Highlight pada Author Comment Blogger's New Threaded Comments"><img class="fl" height="122" width="200" src="http://2.bp.blogspot.com/-I4Df_wbMxQg/T4Bndp9NIhI/AAAAAAAACUs/NtFJY2xyV1M/s200/GRhighlight-author-comment.jpg" /></a><div class="buka">Setelah beberapa waktu berkutat dengan keruwetan "Bloggers New Threaded Comments", akhirnya ketemu juga sebuah solusi untuk membuat warna background berbeda pada Author Comment di sistem Threaded Comments Blogger yang baru. Jika pada beberapa tutorial yang kini banyak dipostingkan oleh blogger sejagad dibuat menggunakan jQuery (jQuery Highlight Author Comment Blogger's Threaded Comments - dibuat oleh blogger India?), melalui gubhugreyot "<b>Tutorial Blogger | gubhugreyot</b> ini kita akan membuatnya hanya menggunakan kode CSS. <br />
<br />
Menggunakan kode CSS untuk membuat "Highlight Author Comment Blogger's New Threaded Comments" tak hanya sekedar untuk membuat warna background berbeda pada author comment. Dengan menggabungkan sebuah image (background image) dapat juga ditampilkan "kata Admin" atau berbagai teks lain seperti misalnya "tanda tangan author", baik dalam bentuk teks ataupun image (melalui background image). Bahkan kode css ini masih bisa dikembangkan lagi dengan menggabungkan css2 dan css3 untuk menciptakan beberapa bentuk animasi melalui hover effect. Satu hal nyata yang membuat penggunaan kode css mempunyai nilai lebih atau keunggulan dibandingkan jika menggunakan jQuery adalah pada pembebanan loading blog. jQuery akan menambah beban blog jauh lebih besar dibandingkan kode css. Diluar hal tersebut "mengembangkan penggunaan kode CSS akan jauh lebih mudah dilakukan siapapun dibandingkan javascript". Dari pertimbangan di atas, kini menjadi hak anda untuk menentukan dan memilih di antara keduanya. Mo pakai jQuery atau yang hanya menggunakan kode CSS?!<br />
<br />
Jika anda ingin melihat hasilnya, silahkan coba berikan komentar di posting ini dan untuk selanjutnya akan kita berikan tanggapan komentar agar anda bisa melihat seperti apakah tampilan "Highlight Author Comment Blogger's New Threaded Comments" yang dibuat hanya dengan kode css.<a name='more'></a><br />
<br />
Pada posting pertama yang membahas tentang "membuat background berbeda pada author comment" ini tak akan melibatkan kode css3 karena beberapa blogger lebih menyukai tampilan minimalis.<br />
<div class="pre"><h5>Kode CSS (icon-blog-author):</h5><pre><b>.comment-block</b>{
position:relative;
padding:8px; <span>/* original code by: http://gubhugreyot.blogspot.com */</span>
border:1px solid #ddd;
border-radius:4px;
}
<b>.comment-block:hover</b>{
background:#e9e9e9;
border:1px solid #999;
box-shadow:4px 4px 4px #444;
}
<b>.comment-block .icon.blog-author</b>{
position:absolute;
right:0; <span>/* original code by: http://gubhugreyot.blogspot.com */</span>
bottom:0;
opacity:0.2;
filter:alpha(opacity=20);
background-color:lightblue;
background-position:bottom right;
width:100% !important;
height:100% !important;
margin:0 !important;
}
<b>.comment-block:hover .icon.blog-author</b>{
background-color:transparent;
width:20px !important;
height:20px !important;
opacity:1.0;
filter:alpha(opacity=100);
}</pre></div><div class="pre"><h5>Kode CSS (opacity effect):</h5><pre><b>.comment-block</b>{
position:relative;
padding:8px; <span>/* original code by: http://gubhugreyot.blogspot.com */</span>
border:1px solid #ddd;
border-radius:4px;
}
<b>.comment-block:hover</b>{
background:#e9e9e9;
border:1px solid #eee;
box-shadow:4px 4px 4px #444;
}
<b>.comment-block .icon.blog-author</b>{
position:absolute;
right:0; <span>/* original code by: http://gubhugreyot.blogspot.com */</span>
bottom:0;
opacity:0.2;
filter:alpha(opacity=20);
background:lightblue !important;
width:100% !important;
height:100% !important;
margin:0 !important;
}
<b>.comment-block:hover .icon.blog-author</b>{
background:none !important;
z-index:-1;
}</pre></div><div class="pre"><h5>Kode CSS (background rgba):</h5><pre><b>.comment-block</b>{
position:relative;
padding:8px; <span>/* original code by: http://gubhugreyot.blogspot.com */</span>
border:1px solid #ddd;
border-radius:4px;
}
<b>.comment-block:hover</b>{
background:rgba(174,174,174,0.2);
border:1px solid #eee;
box-shadow:4px 4px 4px #444;
}
<b>.comment-block .icon.blog-author</b>{
position:absolute;
right:0; <span>/* original code by: http://gubhugreyot.blogspot.com */</span>
bottom:0;
background:rgba(174,212,251,0.2) !important;
width:100% !important;
height:100% !important;
margin:0 !important;
}
<b>.comment-block:hover .icon.blog-author</b>{
background:none !important;
z-index:-1;
}</pre></div><p class="ob ttu">Cara menggunakan kode css highlight Author Comment :</p><ol><li>Login <a class="sini" href="http://blogger.com/home/" target="_blank" title="Klik di sini untuk login ke Blogger.">ke Blogger</a>.<br />
<ul><li>Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).</li>
<li>Tuliskan Password.</li>
<li><i>Klik</i> "Sign in"</li>
</ul></li>
<li>Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".<br />
<i>Klik</i> "Rancangan (Design)".</li>
<li>Kembali halaman baru akan terbuka, <i>klik</i> "Edit HTML".</li>
<li>Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:<br />
<ul><li><b>Backup/Restore Template</b> » berisi fitur untuk melakukan backup template. <br />
Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript).</li>
<li><b>Edit Template</b> » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.</li>
<li><b>Old Templates</b> » berisi template lama blogger (Template Tata Letak & Template Klasik.</li>
</ul></li>
<li>Cari kode <span class="on">]]></b:skin></span>.</li>
<li>Copy kode css dan letakkan<span class="rn"> di atas </span> <span class="on">]]></b:skin></span><br />
<i>Keterangan : </i><br />
Pilih salah satu kode css. Anda bisa gunakan yang menggunakan css icon-blog-author, css opacity effect atau css background rgba.</li>
<li><i>Klik</i> "Simpan Template (Save Template)".</li>
<li>Buka blog dan coba hasilnya dengan membuat komentar.</li>
</ol><p class="ob ttu">Catatan/Keterangan :</p><ol><li>Highlight Author Comment hanya digunakan pada template/blog yang sudah menggunakan system Threaded Comments.</li>
<li>Lakukan perubahan pada background jika diperlukan.</li>
<li>Bagi yang ingin merubah blog atau template menjadi threaded comments silahkan buka panduannya melalui link di bawah ini :<br />
<a class="sini" href="http://gubhugreyot.blogspot.com/2012/04/trick-buat-blogtemplate-jadi-threaded.html" target="_blank" title="Klik untuk mengikuti panduan dan tutorial cara membuat blog atau template menjadi threaded comments.">Cara membuat blog menjadi Threaded Comments</a></li>
<li>Untuk menampilkan "Admin" dan/atau tanfa tangan Author di Author Comment silahkan ikuti panduan berikut:<br />
<a class="sini" href="http://gubhugreyot.blogspot.com/2012/04/css-only-displays-admin-and-signature.html" target="_blank" title="Tutorial : Cara menampilkan Admin dan/atau tanda tangan Author pada Author Comment di Blogger New Threaded Comments dengan kode CSS.">Menampilkan Admin dan tanda tangan Author di Author Comment</a></li>
<li>Panduan cara Backup Template, Cara cari kode dan berbagai cara menyimpan kode CSS dapat dibuka di <span class="rn">Special Tutorials</span>. Lihat di menu sebelah kiri halaman.</li>
</ol><p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:</p><br />
<a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Langsung KLIK di sini untuk mengikuti Panduan dan Tutorial lain guna melengkapi panduan dari blog ini"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg" /></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank" title="Panduan lain yang sangat menarik untuk sampeyan ikuti juga tersedia lengkap di sini. Silahkan langsung KLIK daripada penasaran!"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg" /></a><br />
<br />
<span class="update">Posting » <b>Setu</b> <em>LEGI</em>, April, 07, 2012</span><br />
<br />
<p class="happy">» Happy Blogging - gubhugreyot «</p></div>cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com3tag:blogger.com,1999:blog-5154686636804131392.post-31216449519181252222012-04-06T05:59:00.003-06:002012-04-07T09:43:07.349-06:00Trick Buat Blog/Template jadi Threaded Comments<div class="buka bonce">Yang dimaksud membuat template atau blog menjadi blog dengan system threaded comment adalah apabila blog/template yang anda gunakan belum dilengkapi dengan button teks yang berfungsi untuk "membalas komentar". Button teks ini terletak tepat di bawah komentar dalam comment box. Threaded Comment adalah barang yang masih cukup baru bagi blogger/blogspot. Threaded Comment kini membuat comment box blogger menjadi sama seperti yang ada di wordpress. <br />
<br />
Threaded comment sudah disertakan pada Blogger Template Designer (New Blogger Template). Untuk Template Tata Letak (Layout Template) dan Template Klasik dan beberapa template diluar template blogger (hasil download free blogger template) masih belum menggunakan system threaded comment. Agar template menjadi threaded comment beberapa kode css dan xHTML harus di tambahkan (modifikasi template).<br />
<p class="ob ttu">D E M O</p>Anda bisa melihat dan sekaligus mencoba threaded comment hasil modifikasi yang dilakukan terhadap blog ini dengan cara memberi tanggapan komentar melalui button text "balas" (Modifikasi dilakukan terhadap Template Tata Letak - Layout Template - Template Lama yang sudah digunakan sejak tahun 2009).<br />
<p class="on fs14">Template non-Threaded Comment :</p><a name='more'></a><ol><li>Tidak dilengkapi dengan button teks balas komentar.</li>
<li>Teks komentar berada dalam tag "dd" (class="comment-body"). Anda dapat menemukan dd class='comment-body' diantara tag pembuka dan penutup body.</li>
</ol><p class="on fs14">Template Threaded Comment :</p><ol><li>Boks komentar dilengkapi button teks balas komentar.</li>
<li>Teks komentar berada dalam tag "p" dengan (class="comment-content").</li>
</ol><p class="on fs14">Cara merubah blog ke bentuk Threaded Comment :</p><ol><li>Login <a class="sini jqt" href="http://blogger.com/home" target="_blank" title="Klik untuk login ke Blogger">ke Blogger</a>.</li>
<li>Klik "Rancangan/Design".</li>
<li>Klik "Edit HTML".</li>
<li>Halaman baru akan dijumpai, dimana di halaman ini terdapat fitur "Backup-Restore Template" dan "Edit Template". Lakukan <strong>Backup Template</strong>.<br />
<ul><li>Klik "Download Template Lengkap".</li>
<li>Simpan file template di folder PC.</li>
<li>Kembali ke "Edit Template".</li>
</ul></li>
<li>Cari kode <b>]]></b:skin></b></li>
<li>Copy dan letakkan kode css di atas <b>]]></b:skin></b></li>
<li>Klik "Simpan Template/Save Template".</li>
<li>Klik "Expand Widget Template".</li>
<li>Cari kode <span class="rn"><b:include data='post' name='comments'/> </span>.<br />
Di sekitar kode ini anda akan melijat kode seperti yang terlihat dalam box xHTML-1.</li>
<li>Ganti xHTML-1 dengan <span class="rn">xHTML-2</span></li>
<li>Klik "Simpan Template/Save Template".</li>
<li>Buka blog dan lihat di halaman posting yang sudah ada komentarnya. Jika blog belum mempunyai komentar, silahkan buat sebuah komentar untuk mengetahui apakah threaded comment sudah dapat berfungsi sempurna.</li>
</ol><div class="pre"><h5>Kode CSS :</h5><pre><b>.comments .comments-content .icon.blog-author</b>{
background-repeat:no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
<b>.comments .comments-content .loadmore a</b>{
border-top: 1px solid #999999;
border-bottom:1px solid #999999;
}
<b>.comments .comment-thread.inline-thread</b>{
background:rgba(124,124,124,0.1);
}
<b>.comments .continue</b>{
border-top:2px solid #999999;
}</pre></div><div class="pre"><h5>xHTML-1 :</h5><pre><b:if cond='data:blog.pageType <span class="rn">== &quot;item&quot;'</span>>
<b:include data='post' name='comments'/>
</b:if></pre></div><br />
<div class="pre"><h5>xHTML-2 :</h5><pre><b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if></pre></div><p class="on ttu">Catatan/Keterangan :</p><ol><li>Jangan lupa untuk melakukan "Backup Template" sebelum modifikasi dilakukan agar jika terjadi hal yang tak diharapkan template bisa dikembalikan seperti sebelum modifikasi dilakukan.</li>
<li>Mungkin saja xHTML-1 sedikit berbeda dengan yang anda temukan.<br />
Yang penting di atas kode :<br />
<span class="rn"><b:include data='post' name='comments'/> </span><br />
xHTML terdapat kode:<br />
<span class="rn">== &quot;item&quot;'</span>.</li>
</ol><p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :</p><a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Langsung KLIK di sini untuk mengikuti Panduan dan Tutorial lain guna melengkapi panduan dari blog ini"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg" /></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank" title="Panduan lain yang sangat menarik untuk sampeyan ikuti juga tersedia lengkap di sini. Silahkan langsung KLIK daripada penasaran!"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg" /></a><br />
<span class="update">Posting » <i>Jemuah</i> <b>KLIWON</b>, April, 06, 2012</span><br />
<p class="happy">» Happy Blogging - gubhugreyot «</p></div>cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com18tag:blogger.com,1999:blog-5154686636804131392.post-42353255049862341572012-03-10T13:04:00.005-07:002012-03-12T05:15:49.631-06:00Buat Widget Related Posts: Pancing Pengunjung Buka Lebih Banyak Posting<div class="buka bonce">Widget Related Post bekerja berdasarkan label yang dibuat blogger saat posting, sehingga ketika sebuah label digunakan pada banyak posting maka "related posts" akan memuat semakin banyak daftar posting terkait. Hal seperti ini membuat sebuah widget related posts menjadi terasa "sangat pantas dan layak" karena dapat "menjadi salah satu sumber dibukanya lebih banyak posting oleh pengunjung". Jika banyak posting anda mempunyai kwalitas yang baik, dapat dipastikan salah satu atau beberapa link yang terdapat di boks related posts akan "di klik". Menggunakan widget related posts juga memberi nilai lebh sepanjang posting terkait yang ditampilkan tidak terlalu banyak karena akan semakin memudahkan pengunjung memilih posting.<br />
<br />
Membuat widget related posts sebenarnya tidaklah sulit. Yang terutama diperlukan adalah ketelatenan untuk memasang dan menyimpan kode yang digunakan, terutama xHTML yang harus disimpan di bagian body diantara tag pembuka dan penutup body (<body> dan </body>). Jika anda menginginkan lebih banyak lagi posting dibaca pengunjung, silahkan ikuti panduan cara menggunakannya di bawah ini:<br />
<br />
O..., ya ..., sebelum dilanjut silahkan buka demonya terlebih dahulu. Lihat di kolom posting bagian terbawah (di atas box komentar!<br />
<br />
<div style="height:25px;"><a class="demos" href="http://gubhugreyot-demo.blogspot.com/2012/02/demo-cursor-jam-dengan-nama-blogger.html" target="_blank" title="Klik untuk melihat demo widget related posts">D E M O - 1</a><a style="float:right" class="demos" href="http://tantytm.blogspot.com/2012/03/membuat-related-posts-blogger-dengan.html" target="_blank" title="Klik untuk melihat demo widget related posts dengan efek css3 berikut kode dan tutorial">D E M O - 2</a></div><div class="clear"></div><a name='more'></a><br />
<br />
<ol><li>Login <a href="http://blogger.com/home" title="Silahkan kili untuk login ke blogger!">ke Blogger</a></li>
<li>Beberapa saat setelah login anda akan masuk di halaman "Dasbor (Dasboard)". Silahkan cari dan klik "Rancangan (Design)". Tunggu beberapa saat hingga halaman baru terbuka!</li>
<li>Klik "Edit HTML".</li>
<li>Lakukan "Backup Template" terlebih dahulu agar bila terjadi kesalahan template bisa dipulihkan kembali seperti sedia kala.</li>
<li>Cari kode <b>]]></b:skin></b></li>
<li>Copy dan kode css berikut <span class="rn">tepat di atas</span> kode <b>]]></b:skin></b>.<br />
<div class="pre m-40"><h5>Kode CSS :</h5><pre><b>#GRrelated-posts</b>{
padding:10px;
display:block;
clear:both;
border-top:5px double #444;
border-bottom:5px double #333;
margin:15px 0;
}
<b>h3.GRrelated-post</b>{
border-bottom:3px double #666;
font-weight:bold;
line-height: 1.2;
margin:25px 15px 5px;
padding:0 6px;
text-transform:uppercase;
font-size:14px;
}
<b>#GRrelated-posts a:hover</b>{
text-decoration:none;
}
<b>#GRrelated-posts ul</b>{
list-style-type:none;
margin:10px 0;
padding:0;
}
<b>#GRrelated-posts li</b>{
background: url('https://lh4.googleusercontent.com/-u0XPRqFBfNU/T1uNTOOsV-I/AAAAAAAAAVQ/t1rX8b1tAwU/s128/gubhugreyot-bullet.png') no-repeat scroll 3px 50% transparent;
display:block;
list-style-type:none;
padding:0 0 0 30px;
line-height:20px;
margin:0;
}
<b>#GRrelated-posts li:hover</b>{
background-position:20px 50%;
padding-left:35px;
}
<span class="rn blink">]]></b:skin></span></pre></div></li>
<li>Copy dan pastekan javascript berikut <span class="rn">di bawah</span> <b>]]></b:skin></b><br />
<div class="pre m-40"><h5>Javascript :</h5><pre><span class="rn blink">]]></b:skin></span>
<script src='http://gubhugreyotprojects.googlecode.com/svn/widgets/GR_related-posts.js' type='text/javascript'></script></pre></div></li>
<li>Klik "Simpan Template (Save Template)".</li>
<li>Lanjutkan dengan <i>klik</i> "Expan Widget Template"</li>
<li>Cari kode <b><div class='post-footer'></b>. Kode ini ada 2 (dua). Gunakan yang posisinya di atas. Sebagai tambahan imformasi, di atas kode tersebut terdapat kode <b></b:if></b>.</li>
<li><span class="tal">Copy dan paste-kan xHTML berikut <span class="rn">di antara</span> <b></b:if></b> dan <b><div class='post-footer'></b></span><br />
<div class="pre m-40"><h5>xHTML :</h5><pre><span class="rn blink"></b:if></span>
<b:if cond='data:blog.pageType == "item"'>
<h3 class='GRrelated-post'><span class="yn">Related Posts</span></h3>
<div id='GRrelated-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'></b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=<span class="rn">10</span>"' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=<span class="rn">10</span>;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
<span class="rn blink"><div class='post-footer'></span></pre></div><br />
<i>Keterangan:</i> pada beberapa template kode berbentuk spt ini: <br />
<b><p class='post-footer'></b></li>
<li>Klik "Simpan Template (Save Template)".</li>
<li>Buka blog dan lihat hasilnya yang letaknya di atas kolom komentar atau di bawah posting.</li>
<li>Seeee...le....saiiiiiiiii.....iiiii!!!!</li>
</ol><br />
<span class="ob">Catatan/Keterangan :</span><br />
<ol><li>Box Related Posts akan terletak di bawah posting.</li>
<li>Untuk merubah jumlah jumlah posting yang ditampilkan dlam widget related posts, rubah nila (angka) <span class="rn blink">10</span> yang terdapat di xHTML sesuai jumlah yang diinginkan.</li>
</ol><p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini : </p><a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Langsung KLIK di sini untuk mengikuti Panduan dan Tutorial lain guna melengkapi panduan dari blog ini"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg" /></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank" title="Panduan lain yang sangat menarik untuk sampeyan ikuti juga tersedia lengkap di sini. Silahkan langsung KLIK daripada penasaran!"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg" /></a><br />
<span class="update">Posting » <i>Ngahad</i> <b>WAGE</b>, Maret, 11, 2012</span><br />
<p class="happy">» Happy Blogging - gubhugreyot «</p></div>cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com13tag:blogger.com,1999:blog-5154686636804131392.post-56280259852661258332012-03-09T08:51:00.008-07:002012-03-09T09:28:43.575-07:00Pasang icon di post-author, post-labels, post-timestamp dan post-comment-link<div class="buka"><a class="jqtt3" target="_blank" href="http://1.bp.blogspot.com/-c3UlCSfzMCE/T1ooJWuvGKI/AAAAAAAAB4w/Is1s5LN8pvk/s1600/gubhugreyot-4-icon.png" title="4 buah icon terpasang tepat di bawah posting"><img class="fl" height="82" width="150" src="http://2.bp.blogspot.com/-m9hcJIrMNik/T1oceMsFaGI/AAAAAAAAB4k/xokrdK8Ftsg/s1600/gubhugreyot-4-icon_th.jpg" /></a>Jika anda mencermati di dalam box yang terletak di bawah posting maka akan kita lihat bahwa disana terdapat beberapa data yang berkaitan dengan posting. <div class="clear"></div><ol><li>Data post autor :<br />
Berisi nama si penulis posting atau pemilik blog.</li>
<li>Data penerbitan posting:<br />
Berisi data waktu dan/atau tanggal posting.</li>
<li>Komentar (Comments) :<br />
Berisi data jumlah komentar posting.</li>
<li>Labels :<br />
Label berisikan data label yang ditentukan penulis sebelumnya ketika posting dibuat dan diterbitkan.</li>
</ol>Seluruh item data inilah yang akan kita tambah dengan 4 buah icon dengan posisi icon tepat di depan teks. Silahkan anda arahkan cursor ke screenshoot di atas untuk memperbesar gambar. Atau mungkin akan lebih jelas lagi apabila anda buka demo melalui link di bawah ini:</div><br />
<br />
<div class="buka bonce"><a class="demos demo" href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/" target="_blank" title="Klik untuk melihat demo pemasangan icon">D E M O</a><a name='more'></a><br />
<div class="pre"><h5>Kode CSS :</h5><pre><b>.post-author</b>{
background:transparent url(https://sites.google.com/site/gubhugreyotprojects/mart-2012/images/icon/user.png);
}
<b>.post-labels</b>{
background:transparent url(https://sites.google.com/site/gubhugreyotprojects/mart-2012/images/icon/grdt-1-label.png);
}
<b>.post-timestamp</b>{
background:transparent url(https://sites.google.com/site/gubhugreyotprojects/mart-2012/images/icon/grdt-1b-clock.png);
}
<b>.post-comment-link a.comment-link</b>{
background:transparent url(https://sites.google.com/site/gubhugreyotprojects/mart-2012/images/icon/komen.png);
}
<b>.post-author,.post-labels,.post-timestamp,.post-comment-link a.comment-link</b>{
background-size:auto 16px;
padding-left:22px;
background-repeat:no-repeat;
background-attachment:scroll;
background-position:left center;
}
<b>.post-author,.post-labels,.post-timestamp,.post-comment-link</b>{
margin-left:auto !important;
margin-right:8px !important;
}</pre></div><span class="fs16 gb">Cara menggunakan kode css :</span><br />
<ol><li>Login ke Blogger.</li>
<li>Klik "Design (Rancangan)".</li>
<li>Klik "Edit HTML".</li>
<li>Lakukan "Backup template".</li>
<li>Cari kode <b>]]></b:skin></b></li>
<li>Letakkan kode CSS tepat di atasnya.</li>
<li>Klik Simpan "Template (Save Template)".</li>
<li>Selesai dan lihat hasilnya di halaman blog.</li>
</ol><span class="fs16 rn">Catatan/Keterangan :</span> <br />
<br />
<ol class="tal"><li>Upload semua icon melalui halaman posting untuk mengganti 4 icon dalam kode css agar loading blog anda tetap terjaga baik!</li>
<li>Jika ingin mengganti icon sebaiknya gunakan ukuran 14 x 14 pixel (px) atau 16 x 16 pixel (px) sekalipun background telah disetting pada ukuran 16px (height) dan auto pada width melalui background-size:auto 16px;</li>
</ol><p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini : </p><a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Langsung KLIK di sini untuk mengikuti Panduan dan Tutorial lain guna melengkapi panduan dari blog ini"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg" /></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank" title="Panduan lain yang sangat menarik untuk sampeyan ikuti juga tersedia lengkap di sini. Silahkan langsung KLIK daripada penasaran!"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg" /></a> <span class="update">Posting » <i>Jemuah</i> <b>LEGI</b>, Maret, 09, 2012</span> <p class="happy">» Happy Blogging - gubhugreyot «</p></div>cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com9tag:blogger.com,1999:blog-5154686636804131392.post-7665882513543385552012-03-08T15:05:00.002-07:002012-03-09T05:23:16.356-07:00Membuat Icon dg Efek css3 di Link List Label Blogger<div class="buka bonce"><a href="http://tantytm.blogspot.com" target="_blank" title="Icon link list widget label falam lingkaran merah."><img class="fl" height="96" width="200" src="http://3.bp.blogspot.com/-fA9i4Wa3Zdc/T1ksZFs_PcI/AAAAAAAAB2I/kiKbbqetH8Q/s200/icon-link-list.jpg" /></a>Link pada widget label blogger biasanya ditampilkan apa adanya dengan penanda link hanya berupa sebuah penada default yang dihasilkan dari sebuah kode css "list style". Penanda ini biasanya berbentuk cyrcle, disc atau square. Ada cara untuk memberi penanda setiap link list widget label agar berbeda dan bisa dibuat seasuai selera. Sebuah background image dapat kita manfaatkan dan anda dapat secara bebas membuatnya dalam rupa apapun. Icon kecil ini sebaiknya berukuran 10px (height) hingga 16px (height) dengan perhitungan font yang digunakan sebesar 12px atau 11px.<br />
<br />
<a class="demo demos" href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/" target="_blank" title="Lihat pada daftar link di widget label">D E M O</a><br />
<br />
Sekalipun dengan merubah penanda link dalam bentuk icon sudah mampu memberi citarasa berbeda, namun apabila kita sedikit menambah kode css3 ke dalamnya tentunya kan menjadi lebih menarik lagi. Efek gerak serupa animasi yang tercipta melalui css3 transition akan membuat icon bergeser ke arah kanan ketika cursor diarahkan di atasnya dan kemudian kembali lagi ketempat semula ketika cursor dipindahkan. Gerak animasi icon link list seperi ini dihasilkan dengan mempermainkan padding atau margin dan css3 transition. Kode css yang digunakan sebagai berikut:<a name='more'></a><br />
<br />
<div class="pre"><h5>Kode CSS :</h5><pre><b>#Label1 ul</b>{
list-style:none outside none;
margin:0 auto;
padding:0;
width:98%;
}
<b>#Label1 ul li</b>{
padding:5px 0;
}
<b>#Label1 ul li a</b>{
background:url('https://sites.google.com/site/gubhugreyotprojects/mart-2012/images/icon/flag-icon-label.png') no-repeat scroll left center transparent;
display: inline-block;
padding-left: 20px;
transition:0.5s ease;
-o-transition:0.5s ease;
-ms-transition:0.5s ease;
-moz-transition:0.5s ease;
-webkit-transition:0.5s ease;
}
<b>#Label1 ul li a:hover</b>{
margin-left:20px;
}</pre></div><br />
<ol><li>Login ke Blogger.</li>
<li>Setelah halaman "Dasbor (Dasboard)" terbuka, klik "Rancangan (Design)".</li>
<li>Klik "Edit HTML".</li>
<li>Lakukan "Backup Template".</li>
<li>Cari kode "]]></b:skin>"</li>
<li>Simpan kode css <span class="rn">tepat di atas</span> kode ]]></b:skin></li>
<li>Klik "Simpan Template".</li>
<li>Selesai dan silahkan lihat hasilnya dengan membuka blog.</li>
</ol><br />
<span class="fs16 gn">Catatan/Keterangan :</span><br />
<ol><li>Untuk melakukan semua proses di atas satu syarat utamanya adalah anda sudah menggunakan/mengaktifkan "Widget Label" blogger. </li>
<li>Dalam kode css di atas telah disertak sebuah icon bendera merah putih. Jika ingin menggunakan icon tersebut sebaiknya upload icon tersebut melalui halaman posting untuk mengganti icon dalam sample kode css.</li>
<li>Jika membutuhkan panduan backup template, cara mencari kode dan berbagai cara menyimpan kode baru di template, silahkan buka <span class="rb">Special Tutorial</span> di kolom bagian kiri.</li>
</ol><p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini : </p><a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Langsung KLIK di sini untuk mengikuti Panduan dan Tutorial lain guna melengkapi panduan dari blog ini"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg" /></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank" title="Panduan lain yang sangat menarik untuk sampeyan ikuti juga tersedia lengkap di sini. Silahkan langsung KLIK daripada penasaran!"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg" /></a> <span class="update">Posting » <i>Jemuah</i> <b>LEGI</b>, Maret, 09, 2012</span> <p class="happy">» Happy Blogging - gubhugreyot «</p></div>cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com2tag:blogger.com,1999:blog-5154686636804131392.post-71031210669433391932012-03-08T09:11:00.000-07:002012-03-08T09:11:18.064-07:00Menampilkan Profil Pengunjung dg Hover Effect<div class="buka bonce">Hoo... ho.... sobat2 blogger tercinta. Kali ini kita akan bermain dengan kode css. Beberapa properti css akan kita manfaatkan dalam sebuah efek hover. Efek yang akan kita dapat cukup mengejutkan sekaligus menghibur, Javascript tidak kita butuhkan, hanya kode css saja bersama beberapa xHTML. Pada intinya, melalui hover effect kita mencoba mengubah atau menukar sebuah image agar ditampilkan sebuah image berbeda. Ya ... ini sangat menarik dan pasti membuat kalian suka atau mungkin saja tertawa sambil geleng-geleng kepala. Ya ... mungkin saja ... atau he ... he ... bisa jadi kalian justru malahan mengumpat nggak karuan. Yahh ... memang bisa2 saja karena segala kemungkinan bisa terjadi. <br />
<br />
Sebelum lihat demo berikut kode css dan xhtml serta satu sampel xhtml yang sudah lengkap dengan imagenya, sebaiknya persiapkan dulu cara menyimpan kode css atau xhtml-nya dengan membuka Spesial Tutorials yang terletak disebelah kiri halaman. Anda bisa mempelajari cara backup template, cara cepat cari kode html ataupun berbagai cara menyimpan kode di template. O ... ya ..., setelah buka demo dan mencoba hover effeknya, sampeyan jangan kaget jika image profil sampeyan terpampang dengan cantiknya di halaman blog. Yaaahh... pokoknya jangan marah klo lihat photo sampeyan hilang satu gara-gara tercuri dan tiba-tiba saja bisa muncul melalui efek hover. He ... jangan marah, ya?! Ha.... ha .... ha ...<br />
<br />
<a class="demos demo" href="http://gubhugreyot-demo-tutorial-blogger-1.blogspot.com/2012/03/playing-with-hover-efect.html" target="_blank" title="Klik untuk melihat demo">D E M O</a><br />
<br />
<p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini : </p><a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Langsung KLIK di sini untuk mengikuti Panduan dan Tutorial lain guna melengkapi panduan dari blog ini"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg" /></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank" title="Panduan lain yang sangat menarik untuk sampeyan ikuti juga tersedia lengkap di sini. Silahkan langsung KLIK daripada penasaran!"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg" /></a> <span class="update">Posting » <i>Kamis</i> <b>KLIWON</b>, Maret, 08, 2012</span> <p class="happy">» Happy Blogging - gubhugreyot «</p></div>cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com1tag:blogger.com,1999:blog-5154686636804131392.post-25706785161075448812012-03-06T07:19:00.004-07:002012-03-07T10:35:47.002-07:00Auto Post Thumbnail - Auto Readmore with CSS3 Effects<div class="buka bonce">Auto read more pastinya akan sangan bermanfaat bagi semuanya. Dengan auto readmore yang berfungsi secara otomatis menciptakan read more berdasarkan jumlah karakter ini, maka tak perlu lagi ada kata, Aduh ...., read more-nya kelupaan!" Kata yang paling sering terdengar saat posting selesai dan diterbitkan.<br />
<br />
Readmore otomatis ini juga tak sekedar read more biasa karena mengikut sertakan javascript yang berfungsi secara otomatis akan menampilkan thumbnail (image berukuran kecil) di setiap box posting dimana read more berada. Anda dapat mengatur ukuran thumbnail dengan merubah nilai width pada javascript. Jika anda menghendaki pengaturan ini sebaiknya lakukan pada desain yang pertama (standart). O,...ya,.. perlu diketahui bahwa kita akan buat 3 macam tampilan thumbnail yang berbeda.<br />
<br />
<span class="fs14 gb">Pilihan tampilan auto post thumbnail:</span><a name='more'></a><br />
<ol><li><span class="gn">Tampilan thumbnail standar:</span><br />
Tanpa menggunakan efek css3. Thumbnail dilengkapi dengan border, background, border-radius dan box-shadow.</li>
<li><span class="gn">Tampilan thumbnail dg effek css3:</span><br />
Thumbnail sudah dilengkapi dengan efek css3, dimana ketika mouse beada di atasnya thumbnail akan bertambah besar 1,5 kali lipat.</li>
<li><span class="gn">Tampilan thumbnail dengan efek css3 plus :</span><br />
Dilengkapi pacity effect dan background rgba serta css3 transform dengan efek rotate serta zoom image 2x.</li>
</ol>Ketiga pilihan tampilan auto post thumbnail yang dilengkapi dengan readmore otomatis ini memungkinkan anda mempunyai cukup pilihan. Silahkan gunakan yang cocok dihati. Yah ..., karena beberapa sobat blogger ada yang suka tampilan simple namun ada pula yang pilih tampilan atraktif.<br />
<br />
<span class="fs16 gb">Tampilan Standar:</span><br />
<br />
<div class="pre"><h5>Kode CSS :</h5><pre><b>.GRbacayo</b>{
font-size:16px;
font-family:Arial;
display:inline-block;
float:right;
margin:0 0 0 20px;
padding:3px;
}
<b>.GRbacayo a</b>{
padding:2px 6px 3px;
text-decoration:none;
background:#ccc;
color:red;
text-shadow:2px 2px 2px #888;
border:1px solid #444;
border-left-color:#888;
border-bottom-color:#888;
}
<b>.GRbacayo a:hover</b>{
background:red;
color:#eee;
text-decoration:underline;
}</pre></div><br />
<div class="pre"><h5>Javascript :</h5><pre><script type='text/javascript'>
summary_noimg = 530; <span>/* jumlah teks tanpa thumbnail */</span>
summary_img = 440; <span>/* Jumlah teks dengan auto thumbnail */</span>
img_thumb_height ='auto';
img_thumb_width = 100; <span>/* width thumbnail * Semakin besar akan semakin lebar dan tinggi */</span>
</script>
<script src='http://gubhugreyotprojects.googlecode.com/svn/rm/GRautoreadmore-std.js' type='text/javascript'/></pre></div><br />
<div class="pre"><h5>xHTML Baru:</h5><pre><div class='<b>post-header</b>'>
<div class='<b>post-header-line-1</b>'/>
</div>
<div class='<span class="rn">post-body entry-content</span>' expr:id='"post-body-" + data:post.id' style='text-align:justify;'>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='GRbacayo'><a expr:href='data:post.url' expr:title='data:post.title'>Read More</a></span>
</b:if>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div></pre></div><br />
<span class="fs16 gb">Cara Menggunakan :</span><br />
<br />
<ol><li>Login ke Blogger. Gunakan user name (jika mengunakan gmail) dan password kemudian <i>klik</i> "Sign in".<br />
Bagi yang menggunakan yahoo atau lainnya tuliskan alamat email lengkap.</li>
<li>Setekah <i>klik</i> "Sign in", beberapa saat kemudian anda akan melihat halaman dasboard (Dasbor).<br />
<i>Klik</i> Design (Rancangan)"</li>
<li>Lanjutkan dengan <i>Klik</i> "Edit HTMl". Tunggu hingga halaman "Backup / Restore Template (Edit HTML)" terbuka. Di halaman ini anda bisa melihat kode penyusun template dalam box "Edit Template".</li>
<li>Ini penting untuk dilakukan! Segera "Backup Template Terlebih dahulu sebelum proses penambahan kode baru dimulai.</li>
<li>Cari kode <b>]]></b:skin></b> kemudian letakkan kode CSS di atasnya, sedangkan javascript di bawahnya. <i>Panduan untuk backup template dan cara mencari kode html di template maupun berbagai cara menyimpan kode</i> bisa dibuka di <span class="rn">Special Tutorials</span> yang ada di menu sebelah kiri halaman blog.<br />
<br />
Contoh cara peletakkan kode CSS dan javascript:<br />
<pre class="blue m-40"><b>.GRbacayo</b>{
font-size:16px;
..... etc
}
<b>.GRbacayo a</b>{
padding:2px 6px 3px;
.... etc
}
<b>.GRbacayo a:hover</b>{
background:red;
color:#eee;
text-decoration:underline;
}
<span class="rn blink">]]></b:skin></span>
<script type='text/javascript'>
summary_noimg = 530; <span>/* jumlah teks tanpa thumbnail */</span>
summary_img = 440; <span>/* Jumlah teks dengan auto thumbnail */</span>
img_thumb_height ='auto';
img_thumb_width = 100; <span>/* width thumbnail * Semakin besar akan semakin lebar dan tinggi */</span>
</script>
<script src='http://gubhugreyotprojects.googlecode.com/svn/rm/GRautoreadmore-std.js' type='text/javascript'/></pre></li>
<li><i>Klik</i> "Simpan Template (Save Template).</li>
<li>Lanjutkan dengan pemasangan <b>xHTML</b>. </li>
<li><i>Klik</i> <b>Expand Widget Template</b>.</li>
<li>Cari kode :<br />
<pre class="list m-40"><span class="bn"><b:includable id='post' var='post'></span></pre>Di bawah kode tersebut, sekitar 19 deret kode di bawahnya terdapat kode seperti ini:<br />
<br />
<pre class="blue m-40"><div class='<b>post-header</b>'>
<div class='<b>post-header-line-1</b>'/>
</div>
<div class='<span class="rn">post-body entry-content</span>' expr:id='"post-body-" + data:post.id'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if></pre></li>
<li>Ganti seluruh kode di atas dengan xHTML Baru.</li>
<li><i>Klik</i> Simpan Template (Save Template).</li>
<li>Lihat hasilnya dengan membuat posting atau jika menggunakan blog yang sudah ada postingnya maka bisa langsung dicek di halaman utama atau melalui label posting</li>
</ol><span class="fs16 rn">Catatan/Keterangan :</span> <ol><li>Selain model standart ini anda dapat membuat yang sudah dilengkapi dengan efek css3. Anda bisa ikuti tutorial beserta kode yang digunakan sekaligus di halaman demo.</li>
<li>Untuk merubah tinggi dan lebar thumbnail lakukan perubahan nilai pada javascript. Semakin besar nilai maka ukuran thumbnail semakin besar.</li>
<li><span class="fs16 gb">Tampilan dg css3 Effects:</span><br />
Klik link berikut melihat demoberikut kodenya (javascript, kode css dan xHTML).<br />
<a class="sini" href="http://gitosimin.blogspot.com/search/label/Readmore" target="_blank" title="Demo berikut kode yang diperlukan untuk membuat Auto Post thumbnail - Auto Readmore with css3 Effect - Tampilan dg css3 Effects">Demo berikut kode : Auto Read More - Tampilan dg css3 Effects</a>.</li>
<li><span class="fs16 gb">Tampilan dg css3 Effects-plus:</span><br />
Silahkan tunggu demo selesai terlebih dahulu!</li>
</ol><p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini : </p><a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Langsung KLIK di sini untuk mengikuti Panduan dan Tutorial lain guna melengkapi panduan dari blog ini"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg" /></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank" title="Panduan lain yang sangat menarik untuk sampeyan ikuti juga tersedia lengkap di sini. Silahkan langsung KLIK daripada penasaran!"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg" /></a> <span class="update">Posting » <i>Selasa</i> <b>WAGE</b>, Maret, 06, 2012</span> <p class="happy">» Happy Blogging - gubhugreyot «</p></div>cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com5tag:blogger.com,1999:blog-5154686636804131392.post-92045831674415974752012-03-04T04:08:00.002-07:002012-03-04T07:44:33.369-07:00Cursor Circling Text Trail Teks Berputar<div class="buka bonce">Cursor ini sebenarnya sangat menarik karena animasinya yang cantik serta mudahnya pengguna melakukan beberapa pengaturan ulang agar circling text trail dapat ditampilkan sesuai keinginan. Hanya satu hal yang terasa amat mengganggu, bahwa circling text trail yang berputar mengitari cursor terlalu sering jadi pengganggu ketika pengunjung mecoba melakukan aktivitas penting seperti copy atau membuka link. <br />
<br />
Dalam posting ini kita telah lakukan sedikit perubahan pada javascript agar animasi yang tercipta tidak terlalu berlebihan sekaligus kita juga telah rubah posisi teks terhadap cursor agar sekalipun teks berputar ini selalu setia mengikuti cursor namun tidak lagi menjadi pengganggu yang merugikan. Anda bisa melihat dalam demo dimana terlihat animasi teks berputar sudah berpindah di bawah cursor.<br />
<br />
<div class="demos demo"><a href="http://gitosimin.blogspot.com/2012/03/cursor-animasi-text-berputar-circling.html" target="_blank" title="Demo cursor Circling Text Trail">D E M O</a></div><a name='more'></a><br />
<br />
<div class="pre"><h5>Kode CSS :</h5><pre>#outerCircleText {
font-weight:500;
color:red;
text-shadow:1px 1px 1px #000;
font-family: "MS Serif", "New York", serif;
position:absolute;
top:0;
left:0;
z-index:3000;
cursor:default;
}
#outerCircleText div{position:relative;}
#outerCircleText div div{position:absolute;top:0;left:0;text-align: center;}</pre></div><br />
<div class="pre"><h5>Javascript :</h5><pre><script type="text/javascript">
//<![CDATA[
<span>/* by Tim Tilton * http://www.tempermedia.com/ * http://www.dynamicdrive.com/ * modif by: gubhugreyot */ </span>
;
(function () {
var msg = "<span class="rb">gubhugreyot * Tutorial * </span>"; /* teks cursor */
var size = 22; <span>/* font size */</span>
var circleY = 0.75;<span> /* lebar diameter arah vertikal (y) */</span>
var circleX = 2; <span> /* lebar diameter arah horizontal (x) */</span>
var letter_spacing = 4; <span>/* spasi texs semakin besar semakin rapat */</span>
var diameter = 18;<span> /* diameter lingkaran standart max 20 */</span>
var rotation = 0.1;<span> /* kecepatan putaran --> gunakan 0.1 s/d 0.2 */</span>
var speed = 0.8;<span> /* kecepatan text mengikuti cursor semakin kecil semakin lambat */</span>
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1,
a = Math.round(size * diameter * 0.208333),
currStep = 20,
ymouse = a * circleY + 20,
xmouse = a * circleX + 20,
y = [],
x = [],
Y = [],
X = [],
o = document.createElement('div'),
oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat" ? document.documentElement: document.body,
mouse = function (e) {
e = e || window.event;
ymouse = !isNaN(e.pageY) ? e.pageY: e.clientY;
xmouse = !isNaN(e.pageX) ? e.pageX: e.clientX;
},
makecircle = function () {
if (init.nopy) {
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i) { // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY + 85) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function () {
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i) {
y[i] = Y[i] += (y[i - 1] - Y[i]) * speed;
x[i] = X[i] += (x[i - 1] - X[i]) * speed;
};
makecircle();
},
init = function () {
if (!isNaN(window.pageYOffset)) {
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i) {
d = document.createElement('div');
d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d);
y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi);
document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function () {
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText';
o.style.fontSize = size + 'px';
if (window.addEventListener) {
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor)) window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent) {
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
//]]>
</script></pre></div><br />
<span class="fs16 yb">Cara Menggunakan :</span><br />
<br />
<ol><li>Simpan kode CSS di atas <b>]]></b:skin></b></li>
<li>Simpan javascript di atas <b></head></b> atau di atas <b></body></b></li>
<li>Ganti teks <span class="rb">gubhugreyot * Tutorial *</span> (di javascript) dengan teks yang ingin anda tampikan di cursor.</li>
<li>Beberapa pengaturan telah ada petunjuknya di javascript.</li>
<li>Warna font dapat dirubah melalui kode CSS (color).</li>
<li>Agar cara pasang dan cari kode lebih jelas anda bisa baca <span class="bn">Cara Backup Template</span> dan <span class="bn">Cara Cepat Cari Kode</span> di <span class="rb">Special Tutorials</span> pada menu sebelah kiri!</li>
</ol><br />
<span class="fs16 bb">Sumber :</span><br />
<br />
<a href="http://www.dynamicdrive.com/dynamicindex13/circletext.htm" target="_blank">http://www.dynamicdrive.com/</a><br />
<br />
<p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini : </p><a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Langsung KLIK di sini untuk mengikuti Panduan dan Tutorial lain guna melengkapi panduan dari blog ini"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg" /></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank" title="Panduan lain yang sangat menarik untuk sampeyan ikuti juga tersedia lengkap di sini. Silahkan langsung KLIK daripada penasaran!"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg" /></a> <span class="update">Posting » <i>Ngahad</i> <b>PAHING</b>, Maret, 04, 2012</span> <p class="happy">» Happy Blogging - gubhugreyot «</p></div>cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com10tag:blogger.com,1999:blog-5154686636804131392.post-936417179948593712012-03-03T01:10:00.004-07:002012-03-03T07:01:18.911-07:00Jozz.. Buat Cursor Animasi ndul Gondal Gandul<div class="buka bonce">He... masih blom puas dengan persediaan cursor yang sudah terposting? Cihu... Don't worry! Nih satu lagi cursor "antik-cantik" bisa kalian pakai di blogger ato yang lain. Ho.... kompatible lhoh buat semua browser. He... nggak percaya. Buih ... udah cakep, kompabilitasnya bagus, animasi, javascript nggak banyak n..... <i>bisa gondal-gandul seperti "punya sampeyan"</i>. Ha .... ha .... ha ... clguk ... glegh .... glegh...<br />
<br />
Jika image cursor nggak cocock atau sesuai selera, silahkan ganti imagenya dengan mengganti URL image yang ada di javascript (lihat javascript di bawah!). Beberapa variabel juga bisa diatur untuk memperoleh bentuk paling ideal. Ya,... selera orang khan macam-macam. Ada yang suka kurus kecil hitam, ada yang suka kurus tinggi rambut warna pink dan ada pula yang suka badan tinggi besar plus suka kasih pukulan! He ... he ... iya, nggak?!<br />
<br />
Pengaturan dapat dilakukan pada ukuran cursor (image), jarak setiap image cursor, jumlah image cursor, efek pantul cursor serta beberapa yang lain. He ... lengkap banget, ya?! <br />
<br />
<div class="demo demos"><a href="http://gitosimin.blogspot.com/2012/03/membuat-cursor-animasi-mulur-mungkret.html" target="_blank" title="Klik untuk melihat aksi sang cursor animasi ndul Gondal-Gandul Mulur Mungkret">DEMO : Cursor Animasi</a></div><a name='more'></a><br />
<div class="pre"><h5>Kode CSS :</h5><pre><b>.dot</b>{
position:fixed;
padding:0;
margin:0;
border:0 solid;
border-radius:6px;
box-shadow:0 0 0 #fff;
z-index:10;
}
<b>#dot0</b>{visibility: hidden;}</pre></div><br />
<div class="pre"><h5>Kode CSS :</h5><pre><script type="text/javascript">
//<![CDATA[
function elastic_trail() {
var f = 8; <span> /* atur jumlah cursor image */</span>
var g = "<b>http://gubhugreyot-icon.googlecode.com/svn/100.gif</b>"; <span>/* cursor image */</span>
var h = 0.01;
var k = 35; <span>/* jarak tiap cursor image */</span>
var l = 10;
var m = 1;
var o = 0;
var p = 50;
var q = 10;
var r = 0.1;
var s = 0.1;
var t = 12; <span>/* ukuran cursor image */</span>
var u = 0.75;
var v = 0; <span>/* setting yang lain silahkan lakukan percobaan sendiri, he ... he .... */</span>
var w = 0;
for (var i = f - 1; i > -1; --i) {
with(document) {
write('<div class="dot" id="dot' + i + '">\n');
write('<img src="' + g + '" height="' + t + '" width="' + t + '" alt="">\n');
write("</div>\n")
}
}
/*@cc_on@*/
/*@if(@_jscript_version>=5)if(navigator.appVersion.replace(/^.*MSIE (\d+).*$/,'$1')<=6){var x=function(a,n){var b='scroll'+a,d=document,c='compatMode';return d[c]&&d[c]=='CSS1Compat'?d.documentElement[b]+n+'px':d.body[b]+n+'px'};document.write('<style type="text/css">.dot {position: absolute;}body {background: url(foo) fixed;}<\/style>')};@end@*/
var y = function () {
return (document.compatMode && document.compatMode.indexOf("CSS") != -1) ? document.documentElement: document.body
};
var z = document.layers ? "": "px";
elastic_trail.prototype.dot = function (i) {
this.X = v;
this.Y = w;
this.dx = 0;
this.dy = 0;
if (document.layers) {
this.obj = document["dot" + i]
} else {
if (document.all) {
this.obj = document.all["dot" + i].style
} else {
if (document.getElementById) {
this.obj = document.getElementById("dot" + i).style
} else {
return
}
}
}
};
var A = new Array();
for (var i = 0; i < f; i++) {
A[i] = new this.dot(i)
}
for (i = 0; i < f; i++) {
A[i].obj.left = typeof x == "function" ? x("Left", A[i].X) : Math.round(A[i].X) + z;
A[i].obj.top = typeof x == "function" ? x("Top", A[i].Y) : A[i].Y + z
}
var B = this;
setInterval(function () {
B.animate()
},
20);
function MoveHandler(e) {
v = e.pageX - pageXOffset;
w = e.pageY - pageYOffset;
return true
}
function MoveHandlerIE() {
v = window.event.x;
w = window.event.y
}
if (document.addEventListener) {
document.addEventListener("mousemove", MoveHandler, false)
} else {
if (document.attachEvent) {
document.attachEvent("onmousemove", MoveHandlerIE)
} else {
if (document.captureEvents) {
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = MoveHandler
}
}
}
elastic_trail.prototype.vec = function (X, Y) {
this.X = X;
this.Y = Y
};
elastic_trail.prototype.springForce = function (i, j, a) {
var b = (A[i].X - A[j].X);
var c = (A[i].Y - A[j].Y);
var d = Math.sqrt(b * b + c * c);
if (d > k) {
var e = l * (d - k);
a.X += (b / d) * e;
a.Y += (c / d) * e
}
};
elastic_trail.prototype.animate = function () {
var a = 0;
A[0].X = v;
A[0].Y = w;
a = 1;
for (var i = a; i < f; i++) {
var b = new this.vec(0, 0);
if (i > 0) {
this.springForce(i - 1, i, b)
}
if (i < (f - 1)) {
this.springForce(i + 1, i, b)
}
var c = new this.vec( - A[i].dx * q, -A[i].dy * q);
var d = new this.vec((b.X + c.X) / m + o, (b.Y + c.Y) / m + p);
A[i].dx += (h * d.X);
A[i].dy += (h * d.Y);
if (Math.abs(A[i].dx) < r && Math.abs(A[i].dy) < r && Math.abs(d.X) < s && Math.abs(d.Y) < s) {
A[i].dx = 0;
A[i].dy = 0
}
A[i].X += A[i].dx;
A[i].Y += A[i].dy;
var e, width;
if (window.innerWidth) {
e = window.innerHeight;
width = y().clientWidth && window.innerWidth - y().clientWidth == 17 || window.innerWidth - y().clientWidth == 15 ? y().clientWidth: window.innerWidth
} else {
e = y().clientHeight - Math.ceil(t / 2);
width = y().clientWidth
}
if (A[i].Y >= e - t - 1) {
if (A[i].dy > 0) {
A[i].dy = u * -A[i].dy
}
A[i].Y = e - t - 1
}
if (A[i].X >= width - t) {
if (A[i].dx > 0) {
A[i].dx = u * -A[i].dx
}
A[i].X = width - t - 1
}
if (A[i].X < 0) {
if (A[i].dx < 0) {
A[i].dx = u * -A[i].dx
}
A[i].X = 0
}
A[i].obj.left = typeof x == "function" ? x("Left", A[i].X) : Math.round(A[i].X) + z;
A[i].obj.top = typeof x == "function" ? x("Top", A[i].Y) : A[i].Y + z
}
}
}
new elastic_trail();
//]]>
</script></pre></div><br />
<div class="fs16 gb">Cara Membuat :</div><ol><li>Login ke Blogger.</li>
<li>Halaman Dasbor (Dasboard) » <i>Klik</i> "Rancangan (Design)".</li>
<li><i>Klik</i> "Edit HTML".</li>
<li>Halaman Edit HTML :<ul class="dua"><li>Lakukan Backup template.</li>
<li>Cari kode <b>]]></b:skin></b></li>
<li>Simpan kode CSS tepat di atas kode tersebut.</li>
<li>Cari kode <b><body></b>.</li>
<li>Simpan Javascript di bawah kode <b><body></b>.</li>
</ul></li>
<li><i>Klik</i> "Simpan Template (Save Template)".</li>
<li>Selesai!!!</li>
<li>Ndul gondal-gandul mulur mungkret! Hayo punya siapa, tuh?</li>
</ol><br />
<span class="fs16 rn">Catatan/Keterangan:</span><br />
<br />
<ol><li>Anda dapat menyimpan javascriptnya dalam bentuk link dengan upload di:<br />
<ul class="dua"><li>http://sites.google.com</li>
<li>http://code.google.com</li>
<li>http://yourjavascript.com</li>
</ul></li>
<li>Panduan untuk <b>Backup tenmplate</b> dan menyimpan kode css tau javascript dapat dibuka di <span class="rb">Special Tutorials</span> yang ada di menu sebelah kiri.</li>
<li>Anda bisa mengatur z-index agar cursor dapat terlihat di keseluruhan bagian blog. Semakin besar z-index maka akan semakin kuat daya tembusnya. Biasanya beberapa widget menggunakan z-index. Agar cursor tidak tertutup maka z-index cursor harus dibuat lebih besar.</li>
</ol><br />
<span class="fs16 gb">Sumber:</span><br />
<br />
<a href="http://www.dynamicdrive.com/dynamicindex13/trailer2.htm" target="_blank" title="dinamicdrive » Elastic Trail Script">Dynamicdrive : Elastic Trail Script</a><br />
<br />
<p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini : </p><a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Langsung KLIK di sini untuk mengikuti Panduan dan Tutorial lain guna melengkapi panduan dari blog ini"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg" /></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank" title="Panduan lain yang sangat menarik untuk sampeyan ikuti juga tersedia lengkap di sini. Silahkan langsung KLIK daripada penasaran!"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg" /></a> <span class="update">Posting » <i>Ngahad</i> <b>Pahing</b>, Maret, 04, 2012</span> <p class="happy">» Happy Blogging - gubhugreyot «</p></div>cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com4tag:blogger.com,1999:blog-5154686636804131392.post-57808170978804536512012-03-01T13:18:00.003-07:002012-03-01T13:25:37.381-07:00Trick Membuat Scrollbars di Sebelah Kiri<div class="buka bonce"><div style="unicode-bidi:bidi-override;direction:rtl;overflow:auto;height:150px;padding-left:20px"><div dir="ltr">Sampeyan semua pasti tahu kalau scrollbars posisinya selalu di kanan box. Scrollbars ini bukan sesuatu yang tabu untuk dipindah tempatnya agar berbeda dari biasanya. Ya ... bukankah membuat sesuatu terlihat berbeda itu cukup penting. Sampeyan juga sudah pada tahu, toh, bangsa kita selalu mengagung-agungkan dan menjunjung tinggi keberbedaan. "<b>Bhinneka Tunggal Ika</b>! Sekalipun betbeda-beda tetapi tetap satu jua. He... he ... ini berlaku juga untuk scrollbars. Sekalipun berbeda dengan posisi di sebelah kiri, namun fungsinya tetap satu jua! Ho... ho ... iya, nggak? Bukankah yang penting fungsinya tetap normal-normal saja?! Klo diseret ke atas dia ikutan naik begitu pula klo di seret ke bawah dianya ikutan turun ke bawah? </div></div><br />
Membuat scollbars di posisi sebelah kiri bisa dilakukan dengan 2 cara:<a name='more'></a><br />
<ol><li>Hanya menggunakan kode html (xHTYML).</li>
<li>Menggunakan xHTML dan kode CSS.</li>
</ol><br />
<span class="fs16 gb">Membuat Scrollbars di Sisi Kiri dg xHTML</span><br />
<br />
Gunakan kode berikut untuk membuat scrollbars berada di kiri:<br />
<div class="pre"><h5>xHTMl scrollbars Kiri:</h5><pre><div style="unicode-bidi:bidi-override;direction:rtl;text-align:left;overflow:auto;height:200px;width:400px;padding:15px 10px;margin:15px 0;border:1px solid #000;font-size:12px;font-family:Tahoma;">
<div dir="ltr">
<b>Letakkan semua teks, kode html atau <span class="rb">barang anda</span> di sini!</b>
</div>
</div></pre></div><br />
<span class="fs16 gb">Membuat Scrollbars di Sisi Kiri dg xHTML</span><br />
<br />
Dengan bantuan kode css maka membuat xHTML yang digunakan menjadi sangat simple.<br />
<div class="pre"><h5>xHTMl scrollbars Kiri:</h5><pre><div class="GRscrollbars">
<div>
<b>Letakkan semua teks, kode html atau <span class="rb">barang anda</span> di sini!</b>
</div>
</div></pre></div><br />
Anda bisa mendapatkan tutorial beserta kode css-nya melalui link di bawah ini:<br />
<br />
<a class="sini" href="http://gitosimin.blogspot.com/2012/03/cara-membuat-scrollbars-di-sisi-kiri.html" target="_blank" title="Klik untuk mengikuti tutorial cara membuat scrollbars di sebelah kiri dengan xHTML dan kode css">Buat scrollbars di sbl kiri dg kode CSS</a><br />
<br />
<p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini : </p><a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Langsung KLIK di sini untuk mengikuti Panduan dan Tutorial lain guna melengkapi panduan dari blog ini"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg" /></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank" title="Panduan lain yang sangat menarik untuk sampeyan ikuti juga tersedia lengkap di sini. Silahkan langsung KLIK daripada penasaran!"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg" /></a> <span class="update">Update » Rabo PON, February, 29, 2012</span> <p class="happy">» Happy Blogging - gubhugreyot «</p></div>cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com4tag:blogger.com,1999:blog-5154686636804131392.post-75041528426293409672012-03-01T10:53:00.011-07:002012-03-03T02:34:28.031-07:00Cara Membuat Pengunjung Tekun Membaca Posting<div class="buka bonce"><div style="unicode-bidi:bidi-override;direction:rtl;text-align:justify;">Sekali kali membuat pengunjung blog bingung dan pusing atau bahkan hingga mau muntah-muntah bukanlah hal yang tabu. Ya..., sekali-kali sebagai hiburan bagi gubhugreyot sekaligus anda juga. Bukankah saat ini anda sedang mencoba bertekun untuk membaca kata-demi kata sambil kepala di gelengkan ke kanan dan ke kiri serta mata memicingkan mata dan dahi berkerut-kerut? Ha ... tak apa ... lanjutkan saja saja sambil meringis atau mengumpat sepuas-puasnya.<br />
<br />
Membuat posting seperti ini hanya sekedar intermezo ditengah kelelahan akibat keracunan ngeblog. Penyakit yang terasa membelenggu aktivitas lain sehari-hari. Lha, gimana tidak orang klo sehari blom buat posting pantat rasanya jadi gatal-gatal. Yah... daripada kukur-kukur lebih baik pencet keyboard trus beri anda sebuah tablet pemusing kepala. He ... posting ini ibarat tablet yang bikin penasaran sekaligus juga bikin jengkel. Buh..., ya, nggak?<br />
<br />
<div class="fs16 gb" style="unicode-bidi:bidi-override;direction:rtl;text-align:left;">Kode yang digunakan untuk membuat posting seperti ini:</div><br />
<div class="pre"><h5></h5><pre><div style="unicode-bidi:bidi-override;direction:rtl;text-align:left;"><div style="unicode-bidi:bidi-override;direction:rtl;text-align:left;">Tulis teks di sini !</div></div></pre></div><br />
Sebaiknya anda tidak tidak berlama-lama karena dikuatirkan perut akan menjadi terasa mual hingga kepala semakin berat ... berat .... berat ... kemudian lolongan panjang akan segera keluar dari rumah tetangga. Ha .... Nggak tau tuh lolongan apa. Lolongan anjing kayaknya juga nggak. Lolongan penuh kemikmatan kali, ya?!<br />
<br />
Jika pingin baca dengan gampang tanpa perlu mata melotot bekedip-kedip, silahkan copy dan pastekan di manapun anda suka! He .... he .... gampang, ya, ternyata?!!! Ha .. ha ... yo kita ketawa bareng! Satu, dua, tiga .... ha ... ha ... ha ...<br />
<br />
<p class="blue"><div style="unicode-bidi:bidi-override;direction:rtl;text-align:left;">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :</div></p><a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Langsung KLIK di sini untuk mengikuti Panduan dan Tutorial lain guna melengkapi panduan dari blog ini"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg" /></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank" title="Panduan lain yang sangat menarik untuk sampeyan ikuti juga tersedia lengkap di sini. Silahkan langsung KLIK daripada penasaran!"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg" /></a> <span class="update">Update » Rabo PON, February, 29, 2012</span> <p class="happy">» Happy Blogging - gubhugreyot «</p></div></div>cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com0tag:blogger.com,1999:blog-5154686636804131392.post-33356336679336299882012-03-01T10:26:00.000-07:002012-03-01T10:26:58.244-07:00Tambahkan 2 CSS 3 property dan Wow .... Keren....!!!!<div class="buka bonce">Ya... hanya 2 (dua) css3 property dan semua berubah dengan luar biasa. Kita hanya akan gunakan css3 text-shadow property dan css3 transition property. Text shadow berfungsi memberi efek bayangan pada teks dan css3 transition akan kita gunakan pada setiap link blog agar menampilkan transisi warna ketika cursor berada di atasnya (disorot, kang! He... pakai senter, lagi... ha... ha...).<br />
<br />
<div class="gray">D E M O</div><br />
Silahkan buka link di bawah ini dan lihat efek yang terjadi pada blog setelah 2 property css 3 digunakan.<br />
<br />
<div class="demos demo"><a href="http://gitosimin.blogspot.com/2012/03/teks-shadow-css-3-transition-beri-efek.html" target="_blank" title="Klik untuk melihat demo">D E M O</a></div><a name='more'></a><br />
<br />
<div class="pre"><h5>Kode CSS yang digunakan:</h5><pre><b>body</b>{text-shadow:2px 2px 2px #999;}
<b>a:link,a</b>{
text-decoration:none;
transition:color 0.7s linier;
-o-transition:color 0.7s linier;
-moz-transition:color 0.7s linier;
-webkit-transition:color 0.7s linier;
-ms-transition:color 0.7s linier;
}</pre></div><br />
<span class="fs16 gb">Cara Menggunakan Kode:</span><br />
<br />
<ol><li>Simpan kode css <span class="rn">di atas</span> kode <b>]]></b:skin></b></li>
<li>Lihat cara menyimpan kode di menu sebelah kiri halaman blog <span class="ob">Special Tutorials</span>. Dalam daftar di dalamnya terdapat link untuk tutorial tentang cara menyimpan kode CSS atau kode lain dalam template/blog.</li>
<li>Baca juga "Cara Backup" Template yang juga ada di sana!</li>
<li>Tricks ini akan memberi hasil maksimal ketika blog yang anda gunakan menggunakan backkground warna terang.</li>
<li>Jika blog anda menggunakan background warna gelap sebaiknya gunakan syntax yang ke-2 saja.<br />
<pre class="list"><b>a:link,a</b>{
text-decoration:none;
transition:color 0.7s linier;
-o-transition:color 0.7s linier;
-moz-transition:color 0.7s linier;
-webkit-transition:color 0.7s linier;
-ms-transition:color 0.7s linier;
}</pre>Kode css di atas akan memberi efek transisi perubahan warna teks link saat cursor disentuhkan.</li>
<li>Selesai dan semoga bermanfaat bagi sampeyan semua!</li>
</ol><p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini : </p><a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Langsung KLIK di sini untuk mengikuti Panduan dan Tutorial lain guna melengkapi panduan dari blog ini"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg" /></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank" title="Panduan lain yang sangat menarik untuk sampeyan ikuti juga tersedia lengkap di sini. Silahkan langsung KLIK daripada penasaran!"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg" /></a> <span class="update">Posting » Jemuah (<b>KLIWON</b>), February, 29, 2012</span> <p class="happy">» Happy Blogging - gubhugreyot «</p></div>cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com0tag:blogger.com,1999:blog-5154686636804131392.post-22046814028398854102012-03-01T04:36:00.009-07:002012-03-01T13:45:47.165-07:00Trik Percantik Image Posting dg CSS3 Border Radius Property<div class="buka bonce"><a href="http://www.cssplay.co.uk/opacity/circle.png"><img height="150" src="http://4.bp.blogspot.com/-NHdOH_B69Xo/T08hat2M_jI/AAAAAAAAAIA/MaTJbw5HLNw/s1600/jonathan-mewek.jpg" style="border-bottom-left-radius: 60% 70%; border-bottom-right-radius: 40% 50%;box-shadow:4px 4px 8px #000;border-top-left-radius: 60% 70%; border-top-right-radius: 40% 50%;background:#0CF;border:6px solid #06F;padding:4px;float:left;margin:5px 15px 5px 5px;box-shadow:-2px -2px 2px #888, 2px 2px 3px #888, 0 0 12px #eee;" width="150" /></a>Ini benar-benar trik sungguhan. He... Sungguh, lhoh! Tak banyak blogger yang tahu cara ini. Yah ...mungkin saja baru di gubhugreyot saja yang ada (uhuiii...Sombong dikit boleh, khan?!). Bener! Sungguh! Hui ... katanya suruh banyak posting yang original! Yang jelas aku sudah coba browsing dan tak ketemukan satupun yang sama dengan "teknik & trik" yang coba aku gunakan. Tapi .., ya .. itu, nggak tahu klo browsingnya ada nyang kelewat. Oi ... namanya juga manusia, broer..., mas... mbak , bu..., mbah, kek..., ... mbuh sopo maneh... sik rung tak sebut!<br />
<br />
Dengan cara baru ini semua menjadi terasa gampang, cepat dan bisa dilakukan siapa saja. Sebenarnya,sih, ada cara lain yang sangat-sangat simpel kode html-nya, tapi sayang di opera nggak support seperti di Safari, Crhome atau mozilla ... Yah ...tak apalah, sementara kita gunakan cara yang ini dulu. Yang penting sampeyan semua jadi lebih bisa berimprovisasi dengan gambar-gambar di blog (gambar posting dan yg lain).<br />
<br />
<div class="fs16 ob">D E M O</div><br />
<br />
Gambar di atas dan yang di bawah ini salah satu contoh image yang dibuat menggunakan css3 border radius (rounded corners) dengan memainkan border radius dalam nilai persen (%). Dalam tutorial ini juga tak disertakan xHTMLnya karena semua kode tersedia di halaman demo.<br />
<br />
<a href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com" target="_blank"><img height="90" src="http://1.bp.blogspot.com/-Tky_HGXhwuo/T08b2V6-lEI/AAAAAAAAAHo/7kgHtSCD6xU/s1600/GR-pemandangan-525x142.jpg" style="border-bottom-left-radius: 60% 50%; border-bottom-right-radius: 60% 50%; border-top-left-radius: 30% 60%; border-top-right-radius: 30% 60%;padding:1%;border:2px solid #eee;background:#666;box-shadow:-1px -1px 1px red,2px 2px 2px red,0 0 20px #6FF;margin:20px auto;display:block;text-align:center;" width="400" /></a><br />
<br />
<i>Silahkan lihat contoh gambar lainnya melalui link demo di bawah ini:</i><br />
<br />
<a class="sini" target="_blank" href="http://gubhugreyot-demo.blogspot.com/2012/02/buat-posting-image-cantik-dg-border.html" title="Demo dan kode border-radius untuk memperindah tampilan image-gambar blog">DEMO: Klik untuk lihat demo lain beserta xHTML-nya!</a><a name='more'></a><br />
<br />
<div class="pre"><h5>Kode CSS</h5><pre><b>.GRphotokuL,.GRphotokuR,.GRphotoku</b>{
padding:1%;<span> /* code by: gubhugreyot */</span>
background:#eee;
box-shadow:0 0 10px #555;
}
<b>.GRphotokuL</b>{
float:left;
margin:5px 15px 5px 0;
}
<b>.GRphotokuR</b>{
float:right;
margin:5px 0 5px 15px;
}
<b>.GRphotoku</b>{
margin:15px auto;
display:block;
text-align:center;
}</pre></div><br />
<span class="ob fs16">Cara menggunakan:</span><br />
<ol><li>Simpan kode css di atas kode <b>]]></b:skin></b></li>
<li>Untuk menampilkan image/gambar di blog gunakan kode html seperti yang terlihat di demo.</li>
<li>Untuk gambar di sebelah kiri (float:left;} gunakan <b>class="GRphotoku<span class="rb">L</span>"</b></li>
<li>Untuk gambar di sebelah kanan (float:right;} gunakan <b>class="GRphotoku<span class="rb">R</span>"</b></li>
<li>Untuk gambar di tengah gunakan <b>class="GRphotoku"</b></li>
<li>Untuk merubah berbagai bentuk lengkungan image beserta sudut lengkungnya, rubah nilai border-radius dengan memperbesar atau memperkecil (dalam %).</li>
<li><b>Nilai persen</b> (<span class="rn">%</span>) <span class="rn">harus dengan kelipatan 10</span> karena diluar nilai tersebut tak akan bekerja (10%, 20%, 30% ... s/d 100%).</li>
<li>Jika background berwarna gelap, lakukan beberapa perubahan warna pada box-shadow, background dan border.</li>
<li>Panduan menyimpan kode css dapat anda buka di deret menu sebelah kiri blog (<span class="rb">Special Tutorials</span>).</li>
</ol><p class="blue">Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini : </p><a class="link" href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Langsung KLIK di sini untuk mengikuti Panduan dan Tutorial lain guna melengkapi panduan dari blog ini"><img class="link1" src="http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg" /></a><a class="link" href="http://bloggerstuars.blogspot.com/" target="_blank" title="Panduan lain yang sangat menarik untuk sampeyan ikuti juga tersedia lengkap di sini. Silahkan langsung KLIK daripada penasaran!"><img class="link2" src="http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg" /></a> <span class="update">Update » Kemis WAGE, February, 29, 2012</span> <p class="happy">» Happy Blogging - gubhugreyot «</p></div>cah ndeso kluthukhttp://www.blogger.com/profile/00087361190791834640noreply@blogger.com8