Dunia Maya: Tutorial Blogspot

Home » Posts filed under Tutorial Blogspot

Showing posts with label Tutorial Blogspot. Show all posts

Cara Mengetahui Kode HTML Warna dengan Plastiliq PixelPicker

Posted by Viperkill Friday, March 27, 2015 0 comments

Cara Mengetahui Kode HTML Warna dengan Plastiliq PixelPicker

Kali ini saya akan membagikan sebuah aplikasi sekaligus sebuah trik dalam membantu kegiatan Blogging. Aplikasi yang akan saya bagikan kali ini berfungsi untuk mengetahui kode warna sebuah objek yang berupa kode RGB, CMYK, HEX, HSL, HSV/HSB, ARGB, Decimal, dan lain-lain.
Kode-kode tersebut saya tidak tahu fungsinya untuk apa, yang jelas selain untuk mengetahui kode warna yang sebelumnya telah disebutkan, aplikasi ini juga dapat mengetahui kode HTML warna sebuah objek sehingga akan membantu kita para Blogger dalam kegiatan Blogging.

Mungkin saja sobat Blogger pernah atau akan mengalami sebuah kejadian seperti ini. Ketika sedang mempercantik Template, sobat mencari warna yang bagus beserta kode HTML-nya biasanya dengan menggunakan Tools Kode HTML Warna pada situs atau web yang menyediakan Tools tersebut. Atau bisa juga ketika sobat berkunjung di Blog milik teman, sobat menemukan sebuah objek baik berupa gambar atau teks dengan warna yang sobat sukai. Lalu sobat sangat ingin menerapkan warna tersebut pada sebuah objek di Blog milik sobat. Tentunya sobat harus mengetahui dahulu kode HTML warna yang digunakan pada objek tersebut. Sebenarnya banyak situs yang menyajikan daftar kode HTML warna. Di sana sobat dapat memilih ratusan atau bahkan ribuan pilihan kode HTML warna. Dengan cara ini sobat bisa saja menemukan warna yang diinginkan, tapi tidak jarang juga yang mencari kode HTML warna dengan hasil yang sia-sia.

Nah, jika sobat ingin mencari kode HTML warna dengan hasil yang akurat, Plastiliq PixelPicker dapat menjadi salah satu solusinya. Aplikasi ini sangat ringan sehingga sobat tidak perlu khawatir dengan kinerja komputer sobat. Ketika sobat hendak mendownload Aplikasi ini, sobat akan melihat screenshot yang bisa menjadi panduan untuk sobat dalam menggunakan aplikasi ini.

Cara Mengetahui Kode Warna dengan Plastiliq PixelPicker

Tentunya, setelah sobat mendownload dan menginstalkan Plastilliq PixelPicker ini di PC sobat, maka bukalah aplikasi tersebut.

1. Pada Magnifier area dalam Plastiliq PixelPicker, klik lalu drag and drop pada area yang terdapat objek yang ingin sobat ketahui kode HTML warnanya.
2. Setelah area yang sobat inginkan tampil pada Magnifier area, klik objek yang ingin sobat ketahui kode HTML warnanya. Pada bagian ini, Maginifier area dapat di-zoom agar kode HTML warna sebuah objek dapat diketahui dengan lebih akurat.
3. Perhatikan bagian color cell, apakah warna yang tampil adalah warna yang sobat maksud. Jika iya, kode HTML warna telah ditemukan karena kode HTML warna ditampilkan di samping color cell.
Kini sobat tinggal menerapkan kode HTML warna tersebut pada objek di Blog sobat.

Telah dijelaskan sebelumnya, aplikasi ini bukan hanya untuk mengetahui kode HTML warna saja. Silakan klik pilihan dropdown di samping color cell, lalu akan tampil berbagai jenis kode warna dalam daftar dropdown, dan pilihlah jenis kode warna tersebut yang sobat inginkan.

Silakan bagi yang tertarik pada aplikasi ini, bisa download pada link berikut. Atau langsung saja kunjungi situs resminya http://plastiliq.com/pixel-picker

Download Plastiliq PixelPicker

Kesan Khas Pada Gambar Apabila Dilalukan Cursor

Posted by Viperkill Monday, April 21, 2014 0 comments

Kesan Khas Pada Gambar Apabila Dilalukan Cursor

Satu kemestian bagi sesebuah blog mempunyai gambar di dalamnya. Tidak kira dalam entri atau di bahagian lain. Dan lebih menarik jika gambar yang anda letakkan memberikan sedikit kesan khas apabila anda lalukan cursor padanya.

Tutorial Buat Scroll Box Untuk Blog Archive

Posted by Viperkill 0 comments

Tutorial Buat Scroll Box Untuk Blog Archive

Blog archive untuk sesebuah blog boleh menjadi list yang begitu panjang apabila banyak entri yang di post atau jika sudah lama terlibat dengan dunia blogging.

Tutorial Buat Tab Menu / Navbar Menu

Posted by Viperkill 0 comments

Tutorial Buat Tab Menu / Navbar Menu

Mempunyai tab menu ataupun navbar menu dalam sesebuah blog boleh digunakan oleh pemilik blog untuk meletakkan link yang penting atau link yang ingin diberi perhatian oleh pengunjung blog. Anda boleh lihat contoh tab menu yang ringkas di sini

Tampilan Komentar Owner Berbeda (Template Baru)

Posted by Viperkill Sunday, September 22, 2013 0 comments

Tampilan Komentar Owner atau pemilik blog berbeda ini sudah menjadi pernak-pernik blog yang popular karena dengan trik ini pembaca komentar bisa membedakan author dengan user di komentar artikel.
Sebelumnya Saya sudah pernah membahas tentang bagaimana cara membuat kotak komentar pemilik blog berbeda dengan user, namun perkembangan blogger pun membuat tutorial tersebut tak bisa dipakai pada template yang baru, karena template yang baru codenya berbeda dengan yang lama.

Dan saya pun juga pernah menulis tentang bagaimana cara mengubah komentar lawas menjadi yang baru, lalu pada kesempatan kali ini Saya akan mencoba menulis tutorial tentang cara membuat tampilan kotak komentar pemilik blog berbeda di template baru.

Yuk langsung saja ke tutorialnya

Masuk pada menu Design -> Edit HTML dan centang "Expand Widget Templates"
Taruh Code CSS dibawah ini diatas code ]]></b:skin>

.comment-body-author {
background: #FFFF29; /* Warna Background */
border:1px dotted #FF2929; /*Border*/
margin:0;
padding:0 0 0 20px;
}
Kemudian cari code yang berwarna hitam lalu sisipkan code yang berwarna merah, seperti dibawah ini.

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>

Perhatikan betul-betul penempatanya

SAVE dan lihat hasilnya.

Cara Membuat Artikel Terkait Vertikal Dengan Thumbnail Di Blogger

Posted by Viperkill Thursday, August 29, 2013 0 comments

artikel-terkait-vertikal-dengan-gambar-dibawah-posting

Cara Membuat Artikel Terkait Vertikal Dengan Thumbnail Di Blogger

Posting berikut saya akan membawa tutorial tentang cara membuat Widget Artikel Terkait dengan style vertikal serta dilengkapi dengan thumbnail/gambar dan ringkasan artikel. Pada posting sebelumnya saya sudah membahas tentang cara membuat artikel terkait di blog Anda tapi dengan menggunakan aplikasi ke-tiga seperti LinkWhitin dan nRelate. Manfaat dengan menambahkan Artikel Terkait di blog Anda sangat banyak, selain sebagai interlink antara artikel di blog juga sebagai menu navigasi artikel yang akan menampilkan posting yang terkait sehingga memudahkan pengunjung dalam menjalajahi blog Anda. Selain itu juga Artikel Terkait dapat meningkatkan lalu lintas di blog Anda dan mengurangi tingkat bouncing di blog sehingga hal ini akan menjadi nilai plus buat blog Anda.

Cara terbaru memasang Video Youtube di Blog

Posted by Viperkill Saturday, June 1, 2013 0 comments

Cara terbaru memasang Video Youtube di Blog

Halo juragan... kali ini Saya ingin berbagi tentang cara memasang video youtube di blog dengan mengambil kode embed video youtube yang anda inginkan untuk ditempatkan di sidebar maupun halaman postingan.

Mengetahui Ukuran Header, Posting, Sidebar, Footer dan Lebar Blogger

Posted by Viperkill Friday, May 31, 2013 0 comments

Mengetahui Ukuran Header, Posting, Sidebar, Footer dan Lebar Blogger

Dalam edit template sobat, perlu kita ketahui berapa ukuran atau lebar elemen-elemen yang ada di blog. Untuk

mengetahui Ukuran Header, Posting, Sidebar, Footer & Lebar Blogger sejuta trik blogger ingin sharing ke teman-teman. Sharing dalam posting ini mudah-mudahan bisa membantu mengedit blog sahabat semua. Yuk mulai saja.

1. Mengetahui Ukuran / Lebar header

#header-wrapper{
background: #ffffff;
width: 900px;
height: 160px;
font-size: 12px;
margin: 0px auto 0px;
padding: 0px;
overflow: hidden;
}

2. Mengetahui Ukuran / Lebar halaman Posting

#main-wrapper{
float:left;
width:590px;
margin:0px 0px 5px 0px;
padding:13px 10px 0px 10px;
overflow: hidden;
}

3. Mengetahui Ukuran / Lebar sidebar

#sidebar-wrapper{
float:left;
width:320px;
margin:13px 0px 5px 0px;
padding:0px;
line-height:19px;
display: inline;
}

Update : Banyak sekali kode sidebar yang bisa dipakai misal #rsidebar-wrapper{ atau #right-sidebar-wrapper{ dll, jadi disesuaikan saja.

4. Mengethui Ukuran / Lebar Footer

/* Footer
----------------------------------------------- */
#footer {
width:950px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

a. Untuk mengedit ukuran/lebar Halaman Blog
Cari kode di bawah ini:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

b. Untuk mengedit ukuran/lebar Halaman Posting
Cari kode di bawah ini:

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */
}

c. Untuk mengedit ukuran/lebar Sidebar Blog
Cari Code di bawah ini:

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

d. Untuk mengedit ukuran Header Blog,
Cari Code di bawah ini:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

e. Untuk mengedit ukuran Footer Blog
Cari Code di bawah ini:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Jika sahabat tidak menemukan kode seperti di atas, untuk mengetahui element seperti header, posting, sidebar dan lebar blogger, cukup mencari kode yang mirip dan ditunjukkan dengan width: (LEBAR) dan height:(TINGGI)

Dengan Mengetahui Ukuran Header, Posting, Sidebar, Footer & Lebar Blogger tentunya akan memudahkan sahabat mengganti dan mengedit blog dengan menyenangkan seperti slogan blog ini.

Tutorial Blog » Cara Meramaikan Blog Secara Konsisten

Posted by Viperkill 0 comments

Tutorial Blog Cara Meramaikan Blog Secara Konsisten

Yang namanya produk di dalam dunia maya atau online adalah sangatlah banyak sekali motif, model, dan jenisnya. Dalam meramaikan blog atau memperkenalkan produk melalui blog, ada banyak cara, strategi, langkah dan formula yang bisa anda lakukan. Memperkenalkan suatu barang atau produk baik itu milik anda sendiri ataupun milik orang lain akan jauh lebih mudah jika anda memupunyi blog yang sudah ramai.

Produk yang tidak diminati dan kurang bisa memuaskan calon pelanggan sudah pastilah tidak akan laku jual. Ini sama halnya bila kita hendak meramaikan blog bisnis anda yang di dalamnya terdapat beberapa atau banyak jenis produk. Tentunya anda mengharapkan semua produk tersebut bisa layak jual bukan?.

Cara Membuat Form Berlangganan Via Email Dibawah Posting

Posted by Viperkill Monday, April 8, 2013 0 comments

Selamat sore sahabat blogger???? Kali ini saya akan membahas tentang form berlangganan artikel via emailnya nya di bawah posting, sebenarnya sih ide memposting tentang form berlangganan artikel via email ini di dapat dari teman fb. Cukuplah basa basinya, kita langsung saja praktek untuk menmabah form berlangganan artikel via email di blog yang sobat miliki

1. Langkah pertama seperti biasa Log in ke akun blogger sobat
2. langkah yang kedua klik template » edit HTML » centang kotak Expand Template Widget.
3. Langkah berikutnya cari kode ]]></b:skin> untuk lebih mudahnya tekan tombol F3/CTRL F
dan letakkan kode di bawah ini persis di kode ]]></b:skin>.

.kotakRSS1 {background-color: rgb(255, 255, 255); -moz-border-radius: 5px;-webkit-border-radius:5px; border: 1px solid #cccccc; padding:5px 10px; margin: 0 0 10px 0; } .Rssardi33 { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtzhSnRLh4i3P0-K7yJJNnx1n1QEcjk2N4teZAAa7VRkklJad4zoscBQbEYLsjhizjEilt4Pw9ES-a7J3mMRdQZJ1OaJAjvRZCmYH7XHA_jfOm2okaTF_xEwp_c0AWoU4RyDychE50Bg0/s1600/maskolis.co.cc.jpg') no-repeat bottom right; } .Rssardi33 a { background: none;} .inpRssardi33 { border: 1px solid #B9C1C6; width: 170px;height: 16px; font-size: 12px; padding:3px 4px 4px 10px;-moz-border-radius:5px;-webkit-border-radius: 5px;} .sbmtRssardi33 {background:#9b9b9b;border: 1px #9b9b9b solid;color:#FFF;font-size:13,5px;font-family:Arial,Tahoma,Verdana;margin-left:5px;padding:3px 5px 3px 5px;font-weight:bold;-moz-border-radius:7px;-webkit-border-radius: 7px;} .ardi33subs table {border-collapse: inherit; border: none;} .ardi33subs tr { border:0;} .ardi33subs td { border:0;} .ardi33subs th { border:0;} .clear { clear: both; }

4. Langkah Ke empat cari kode <data:post.body/> jika ada dua pilihlah yang kedua dan letakkan kode berikut ini bawah ini tepat di bawah kode <data:post.body/>.

&lt;!-- Script Artikel Berlangganan --&gt;
&lt;div class=&#039;kotakRSS1&#039;&gt;
&lt;div class=&#039;Rssardi33&#039;&gt;
Jika Anda menyukai Artikel &lt;b:if cond=&#039;data:blog.pageType == &amp;quot;item&amp;quot;&#039;&gt;
&lt;data:blog.pageName/&gt;&lt;/b:if&gt;
ini, Silahkan &lt;a href=&#039;http://feeds.feedburner.com/namabloganda&#039; target=&#039;_blank&#039; title=&#039;Berlangganan&#039;&gt;
&lt;b&gt;klik disini&lt;/b&gt;&lt;/a&gt; untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap kali ada artikel yang terbit di &lt;font color=&#039;#0099DD&#039;&gt;&lt;a expr:href=&#039;data:blog.homepageUrl&#039;&gt;&lt;STRONG&gt;&lt;data:blog.title/&gt;&lt;/STRONG&gt;&lt;/a&gt;&lt;/font&gt;
&lt;div class=&#039;ardi33subs&#039;&gt;
&lt;table border=&#039;0&#039; cellpadding=&#039;0&#039; cellspacing=&#039;0&#039; width=&#039;100%&#039;&gt;
&lt;tr&gt;
&lt;td align=&#039;left&#039; style=&#039;padding:5px 0 0 0;&#039; valign=&#039;top&#039; width=&#039;65%&#039;&gt;&lt;form action=&#039;http://feedburner.google.com/fb/a/mailverify&#039; method=&#039;post&#039; onsubmit=&#039;window.open(&amp;apos;http://feedburner.google.com/fb/a/mailverify?uri=diesilver&amp;apos;, &amp;apos;popupwindow&amp;apos;, &amp;apos;scrollbars=yes,width=550,height=520&amp;apos;);return true&#039; style=&#039;border:0px;padding:3px;text-align:center;&#039; target=&#039;popupwindow&#039;&gt;&lt;div align=&#039;left&#039;&gt;
&lt;input class=&#039;inpRssardi33&#039; name=&#039;email&#039; onblur=&#039;if (this.value == &amp;quot;&amp;quot;) {this.value = &amp;quot;Ketikkan email anda disini&amp;quot;;}&#039; onfocus=&#039;if (this.value == &amp;quot;Ketikkan email anda disini&amp;quot;) {this.value = &amp;quot;&amp;quot;;}&#039; type=&#039;text&#039; value=&#039;Ketikkan email anda disini&#039;/&gt;
&lt;input name=&#039;loc&#039; type=&#039;hidden&#039; value=&#039;en_US&#039;/&gt;
&lt;input class=&#039;sbmtRssardi33&#039; type=&#039;submit&#039; value=&#039;Subscribe&#039;/&gt;&lt;/div&gt;
&lt;/form&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&#039;clear&#039;/&gt;
&lt;!-- End Artikel Berlangganan --&gt;

Keterangan:

Ganti Kode alamt http://feeds.feedburner.com/namabloganda dengan id feedburner anda.

5. Langkah ini adalah langkah terakhir, terakhir save template sobat.
Cukup sekian dulu pembahasan kali ini semoga artikel ini bisa berguna untuk sobat blogger sekalian, jika ada hal yang ingin di tanyakan mengenai artikel ini silahkan bertanya melalaui kotak komentar yang telah di sediakan. Sekian Terimakasih

Cara Merubah Tampilan Page Navigasi Dengan Angka

Posted by Viperkill Thursday, February 14, 2013 0 comments

Cara Merubah Tampilan Page Navigasi Dengan Angka

Di template original Blogger sebenarnya sudah terdapat page navigasi di bawah postingan ( old post dan Never post ), tapi tampilanya kurang menarik. Tampilan tersebut bisa kita rubah dengan menggunakan angka, tetapi fungsinya tetap sama, caranya hanya dengan memasukan beberapa kode di templatenya.

Nah, di postingan kali ini saya mau coba berbagi info bagaimana Cara merubah tampilan page navigasi dengan angka.

Berikut langkah - langkahnya :

Seperti biasa masuk dulu ke akun blog anda
Masuk ke Rancangan --> Edit HTML (tidak perlu memberikan klik pada Expand template widget)
Cari kode ]]></b:skin> Kemudian Copy dan paste kode CSS berikut tepat diatas kode ]]</b:skin>

/* -- NUMBER PAGE NAVIGATION -- */
.showpageNum a{font:15px Arial,Verdana;padding:4px 8px;margin:0 4px;text-decoration:none;border:0 solid #333;background:#dfdfdf;color:#686868;border:1px solid #989898}
.showpageOf{margin:0 8px 0 0;color:#222;font:15px Arial,Verdana}
.showpageNum a:hover{color:#494949;background:#dfdfdf;border:1px solid #626262}
.showpageArea{margin:10px 0;font:15px Arial,Verdana;color:#111}
.showpagePoint{color:#434343;font:bold 15px Arial,Verdana;padding:4px 8px;margin:2px;border:1px solid #b6b5b5;background:#fff;text-decoration:none}

Cari kode </body> kemudian Copy dan paste kode dibawah ini tepat diatas kode </body>

<script type='text/javascript'>
var pageCount=4;
var displayPageNum=4;
var upPageWord ='« ';
var downPageWord =' »';
</script>
<script src='http://u-sup.googlecode.com/files/page_num.js' type='text/javascript'/>

Klik Simpan Template, dan silahkan lihat hasilnya, Wow,..

Keterangan :
Perhatikan pada kode yang dicetak biru itu dapat anda sesuaikan dengan keingin anda kode tersebutlah yang menentukan berapa jumlah posting yang akan ditampilkan pada setiap halamannya, contoh saya akan menampilkan 10 Posting dan 5 tombol angka navigasi berarti kode saya sebagai berikut :
var pageCount=10;
var displayPageNum=5;

Dan untuk merubah Tampilan silahkan rubah kode CSSnya sesuai dengan selera anda, jika merasa tampilannya kurang cantik menurut anda!

Mudah bukan, ayo di coba biar nambah lagi ilmunya,... Semoga bermanfaat..

Cara Mudah Dan Parktis Membuat Iklan Melayang

Posted by Viperkill 0 comments

Udah lama banget ga ngisi postingan di blog tutorial ini. Sekarang saya hanya ingin share dikit tentang cara mudah dan praktis membuat iklan melayang di blog.

Langsung saja ya,..

Berikut langkah-langkahnya:

Langkah pertama jelas mesti login dulu ke akun blogger anda
Buat Widget baru (Pilih yg Javascript ya) di sidebar lalu masukan kode dibawah ini kedalam kotak widget baru tersebut:

<p><center><a href='http://goo.gl/TEZZ9' rel='nofollow' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9VAqIBkSFh_UV0oMfqBlkOBcl7An0jJYMbJGV-di9hBvOdelf5ZQ6CgrauVre7n-vB09bhv1iKlNC8Iwhc6mVaoqdC91uNubRjjUXhSkLy7H6RslYjllLlU-u0hjqlv8jc-_BlFxR6kvZ/s1600/recognition-abenetworkweb.gif'/></a></center></p>

<style type="text/css">
#gb{
position:fixed;
top:0px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbcontent{
float:right;
border:2px solid #000000;
background:#333;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
.:<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLC4o0Gcr8FMBkUnuX0xUE7kbl0SZkFpZqbI8z2iD8eZOtefOPfUI03oBr7zjuPU6c_PysqPNppHVZwG5wM84fUjdnPkrNKvJVEnoRt6lHJhjd8UsLxIYFv-5WBMKJat6S3UOrsQYH-hMD/" title="kalau muncul, klik lagi" alt="tutup" />:.
</a>
</div>
<center>

[ MASUKAN KODE IKLAN ANDA DISINI ]

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

Lalu Save/Simpan. Selesai.

**Untuk mengatur tampilan seperti background, tinggi, border, anda bisa edit yang tulisan berwarna merah.

Itulah Cara mudah dan praktis membuat iklan melayang, semoga bermanfaat.

Apa harus jadi Nofollow atau Dofollow? Apa perbedaannya?

Posted by Viperkill 0 comments

Perbedaan mendasar antara link dofollow dan nofollow ada pada kemampuannya meneruskan poin halaman. Sebuah halaman yang dofollow akan memberikan poinnya kepada halaman yang dirujuknya, sedangkan halaman nofollow tidak. Jadi menurut anda lebih baik jadi nofollow atau dofollow?

Cara Membuat Peringatan/Pesan Saat Klik Kanan Di Blog

Posted by Viperkill 0 comments

Cara Membuat Peringatan Klik Kanan Di Blog, jika sebelumnya menulis artikel cara menonaktifkan klik kanan / disable klik kanan dengan peringatan, kali ini membahas hal yang sama, tapi hanya memberi peringatan saat pembaca blog sobat melakukan klik kanan di blog sobat,, cara ini tidak berpengaruh apa-apa hanya memberi peringatan/pesan kepada pembaca.
jika pembaca mengklik ok pada peringatan tersebut maka klik kanan akan berfungsi seperti biasa

ok sob langsung aja ke cara membuatnya:
1.login ke blog sobat
2.TataLetak > Tambah Gatget > HTML/JavaScript

<script language='javascript'>

</script>

tulisan yang ber warna merah bisa sobat ganti dengan kalimat sobat :)
3.save widget

jika ada pertanyaan silahkan tulis di komentar :)

Cara Membuat Tampilan Menu Scroll Pada Arsip Blog

Posted by Viperkill 0 comments

Cara Membuat Tampilan Menu Scroll Pada Arsip Blog

Arsip blog merupakan salah satu menu penting yang harus anda pasang di blog, karena dengan adanya arsip blog tersebut akan memudahkan pengunjung menemukan semua artikel yang ada di blog tersebut.

Tapi meskipun begitu banyak para blogger yag enggan untuk memasangnya dikarenakan ekan memakan banyak tempat apalagi jika jumlah artikelnya sudah banyak tentuk membutuhkan tempat yang luas.

Nah, kali ini ane dapat solusi untuk masalah tersebut yaitu dengan cara membuat tampilan menu scroll. Cara ini ane dapat setelah dari search di mbah google dan setelah ane coba ternyata berhasil.

Berikut langkah bagaimana cara merubah tampilan arsip blog dengan menu scroll :

Seperti biasa masuk dulu ke akun blog anda
Pilih menu design -- > Seting elemen widget arsip anda pake gaya Hierarki
Setelah selesai, pindah kemenu Edit Html -- > Centang kotak expand widget
Cari kode seperti dibawah ini (Tekan keyboard tombol Ctrl + F untuk mempermudah pencarian dengan memasukan kata yang dicari di dalamnya)

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
          <b:includable id='main'>
          <b:if cond='data:title'>
          <h2><data:title/></h2>
          </b:if>
          <div class='widget-content'>
          <div id='ArchiveList'>
          <div expr:id='data:widget.instanceId + "_ArchiveList"'>
          <b:if cond='data:style == "HIERARCHY"'>
          <b:include data='data' name='interval'/>
          </b:if>
          <b:if cond='data:style == "FLAT"'>
          <b:include data='data' name='flat'/>
          </b:if>
          <b:if cond='data:style == "MENU"'>
          <b:include data='data' name='menu'/>
          </b:if>
          </div>
          </div>
          <b:include name='quickedit'/>

Sisipkan kode dibawah ini tepat diatas kode <div id='ArchiveList'>

<div style='overflow:auto; width:ancho; height:100px;'>

Tambahkan kode </div> diatas <b:include name='quickedit'/>
Tampilan keseluruhan kode menjadi

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
          <b:includable id='main'>
          <b:if cond='data:title'>
          <h2><data:title/></h2>
          </b:if>
          <div class='widget-content'>
          <div style='overflow:auto; width:ancho; height:100px;'>
          <div id='ArchiveList'>
          <div expr:id='data:widget.instanceId + "_ArchiveList"'>
          <b:if cond='data:style == "HIERARCHY"'>
          <b:include data='data' name='interval'/>
          </b:if>
          <b:if cond='data:style == "FLAT"'>
          <b:include data='data' name='flat'/>
          </b:if>
          <b:if cond='data:style == "MENU"'>
          <b:include data='data' name='menu'/>
          </b:if>
          </div>
          </div></div>
          <b:include name='quickedit'/>

Terakhir klik Save. Selasai.

Keterangan :

Sebelum melakukan edit HTML template blog, selalu back up dengan cara download terlebih dahulu template blog kita untuk mengantisipasi kegagalan saat proses edit HTML berlangsung.
Pada kode yang ditambahkan berikut ini, <div style='overflow:auto; width:ancho; height:100px;'>, angka 100px pada height menunjukan tinggi dari scroll sebagai pembungkus yang kita buat. Atur sesuai selera.
Sebelum melakukan edit HTML untuk merubah tampilan arsip blog dengan model scroll, pastikan kita telah merubah model arsip blog kita menjadi model hierarki terlebih dahulu. Untuk tampilannya apakah dimuat perbulan atau perminggu tidak masalah.

Bagaimana, mudah bukan. Yang penting anda teliti pasti bisa. Semoga bermanfaat.

Cara Menambah Elemen Baru di Bawah Header Blog

Posted by Viperkill 0 comments

Cara Menambah Elemen di Bawah Header Blog, ada beberapa hal hingga kita harus menempat kan lement di tempat2 tertentu,, Elemen atau Tambah Widget terkadang tidak kita temui di bawah header,, seperti Template yang CB gunakan ini, tidak menyediakan Element Tambah Widget Di Header hanya menyediakan Tambah element di bagian side/samping saja.

jika sobat CB mengalami hal yang sama dan ingin menambahkan element di bawah header sobat. sobat bisa menggunakan trik berikut ini

1.login ke blog sobat
2.Template > Edit HTML
3.cari kode yang mirip dengan kode berikut ini:

<div class='blogname'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Cara Badut (Header)' type='Header'/>
</b:section>
</div>

atau untuk lebih mudahnya silahkan sobat cari kode showaddelement jika ketemu dan kodenya mirip dengan yang di atas, silahkan sobat lakukan pengeditan

4.ganti menjadi seperti di bawah ini

<div class='blogname'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Cara Badut (Header)' type='Header'/>
</b:section>
</div>

angka 2 bisa sobat ganti dengan jumlah element yang ingin sobat tambahkan
5.save template sobat
6.buka Tata Letak sobat dan lihat di header akan ada elemen yang bertambah,, sobat bisa menambah gatget yang sobat suka di bawah header sobat

semoga bermanfaat :)

Cara Membuat Show/Hide Komentar Blog

Posted by Viperkill 0 comments

Cara Membuat Show/Hide Komentar Blog, sebuah blog tentunya membutuhkan komentar, jika sobat menampilkan komentar di blog sobat dan artikel sobat memiliki banyak komentar tentunya akan memakan bnayk waktu untuk membuka artikel tersebut,, seperti yang kita ketahui menunggu merupakan hal yang sangat membosankan, jika pengunjung blog sobat merasa terganngu karena harus menunggu lama dan itu di sebabkan komentar di artikel sobat yang sangat banyak, sobat bisa mengatasinya dengan cara berikut

Cara Membuat Show/Hide Komentar Blog:
1.login ke blog sobat
2.silahkan sobat cari kode </Head> gunakan F3 untuk pencarian
3.letakkan kode berikut ini tepat di atas kode <Head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
openPanelText = "Tampilkan Komentar",
closePanelText = "Tutup Komentar",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;
//]]>
</script>
<script type='text/javascript'>
</script>
<script src='http://membuatgempar.net23.net/comment.js' type='text/javascript'/>

4.letakkan kode berikut ini di atas kode ]]></b:skin>

a.openpanel {display:block;width:100%;height:40px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background:#ffffff; url()repeat-x;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;position:relative;
}a.openpanel em {width:0px;height:0px;display:block;position:absolute;top:15px; right:15px;border:6px solid transparent;border-top-color:white;
}a.openpanel.active {background-color:#ffffff;}a.openpanel.active em {top:6px;border color:#222222;
}div.paneline {height:0px;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;}div.hompiPanel {padding:10px 20px 20px;margin:0px 0px !important;}

5.save template sobat

semoga berhasil dan semoga bermanfaat :)

Cara memasang TV online di Blog

Posted by Viperkill 0 comments

Cara memasang TV online di Blog, bagi sobat CB yang suka menonton TV sobat CB bisa menambahkan widget ini di blog sobat, widget ini akan menampilkan acara-acara dari televisi indonesia! sobat CB bisa sambil nonton sambil bloggeran so sobat CB tidak ketinggalan acara kesayangan sobat

ok langsung aja sob ke cara membuatnya:
1.login ke blog sobat
2.Tata Letak > tambah Gatget > HTML/JavaScript
3.tambahkan kode berikut

<embed align="top" allowfullscreen="true" allowscriptaccess="sameDomain" bgcolor="#ffffff" devicefont="false" height="790" menu="true" name="MivoTV" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" scale="noscale" scroll="auto" src="http://id.imediabiz.com/MivoTV.swf?r=' + Math.round(Math.random() * 99999) + '" type="application/x-shockwave-flash" width="100%" wmode="transparent"></embed>

agar tv online ini bisa tampil sobat harus sudah menginstal flasplayer di komputer sobat untuk download flash player versi terbaru silahkan kunjungi situs resminya http://get.adobe.com/flashplayer/
4.done

semoga bermanfaat :)

Cara menghilangkan angka pada Label blog

Posted by Viperkill 0 comments

Cara menghilangkan angka pada Label blog, label sebuah blog akan menunjukkan jumlah artikel perlabel, jumlah artikel akan di tampilkan di setiap laber yang sobat buat, jika sobat merasa terganggu atau tidak ingin pembaca mengetahui seberapa bnyak artikel yang telah sobat buat, sobat dapat menghilangkan angka penghitung pada label sobat

langsung aja ne ke cara membuatnya sob :)

1.login ke blog sobat

2.Template > edit HTML

3.cari kode berikut

(<data:label.count/>)

4.setelah sobat temukan, silahkan sobat hapus kode tersebut
5.save template sobat

selesai,, simple kan sob:)

Cara Membuat Drop Cap Pada Blog

Posted by Viperkill 0 comments

Kali ini akan membahas cara membuat drop cap seperti yang di microsoft word di blog,, drop cap atau huruf besar pada awal kalimat sering di unakan untuk menulis sebuah artikel di blog, kali ini cara tersebut kita terapkan di blogger. cara ini sangat membantu sobat untuk membuat tampilan artikel sobat menjadi lebih menarik, seperti tampilan artikel ini, huruf C nya lebih menonjor/lebih besar dari tulisan lainnya.

berikut cara membuat dan contohnya sob jika sobat kurang mengerti
saat sobat menulis artikel silahkan sobat tambahkan script berikut di HTML artikel sobat
ingat sob Di HTML bukan di Compose

<span style="float: left; color: black; font-size: 50px; line-height: 30px; padding-top: 5px; padding-right: 5px; font-family: arial;">S</span>silahkan sobat ganti kata-kata berikut ini

tampilannya akan seperti ini:
Ssilahkan sobat ganti kata-kata berikut ini

hurus S bisa sobat ganti dengan huruf pertama yang ingin sobat tampilkan lebih besar/drop cap

karna cara ini cukup simple,saya rasa cukup sekian penjelasannya
jika sobat masi kurang mengerti silahkan kirim pertanyaan di komentar :)

Dunia Maya

Cara Mengetahui Kode HTML Warna dengan Plastiliq PixelPicker

Download Plastiliq PixelPicker

Kesan Khas Pada Gambar Apabila Dilalukan Cursor

Tutorial Buat Scroll Box Untuk Blog Archive

Tutorial Buat Tab Menu / Navbar Menu

Tampilan Komentar Owner Berbeda (Template Baru)

Cara Membuat Artikel Terkait Vertikal Dengan Thumbnail Di Blogger

Cara terbaru memasang Video Youtube di Blog

Mengetahui Ukuran Header, Posting, Sidebar, Footer dan Lebar Blogger

Tutorial Blog » Cara Meramaikan Blog Secara Konsisten

Cara Membuat Form Berlangganan Via Email Dibawah Posting

Cara Merubah Tampilan Page Navigasi Dengan Angka

Cara Merubah Tampilan Page Navigasi Dengan Angka

Cara Mudah Dan Parktis Membuat Iklan Melayang

Apa harus jadi Nofollow atau Dofollow? Apa perbedaannya?

Cara Membuat Peringatan/Pesan Saat Klik Kanan Di Blog

Cara Membuat Tampilan Menu Scroll Pada Arsip Blog

Cara Membuat Tampilan Menu Scroll Pada Arsip Blog

Cara Menambah Elemen Baru di Bawah Header Blog

Cara Membuat Show/Hide Komentar Blog

Cara memasang TV online di Blog

Cara menghilangkan angka pada Label blog

Cara Membuat Drop Cap Pada Blog

Popular Posts

Arsip Blog

Category

Total Pageviews