Dokumen Tips Trik

Cara Membuat Artikel terkait di Bawah Posting
Sebenarnya artikel terkait ini sama saja dengan yang lain cuma ditambahkan dengan scroll agar lebih rapih. Untuk mencoba membuat artikel ini silakan mengikuti langkah-langkah berikut ini:

Login ke blogger
Pilih Edit HTML >>lanjutkan >> jangan lupa Centang Expand Template Widgetnya..
Cari kode <data:post.body/> (Biar lebih mudah tekan CTRL + F)
Copy kode dibawah ini dan pastekan tepat di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Artikel Terkait Lainnya:</H2>
<div class='rbbox'>
<div style='margin:0; 
padding:10px;
height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (
json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label
.replace(
&quot;%20&quot;
, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;
}
.appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(
&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;
= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

Silahkan ganti tulisan Artikel Terkait Lainnya sesuai ke inginan kalian

Untuk merubah warna blok teks langkah-langkahnya sbb :

Login Ke Blog Sobat
Pada Dasbor Pilih ==>Rancangan==>Kemudian EDIT HTML
Cari kode ]]></b:skin>
Copy kode dibawah ini dan paste kan di atas Kode ]]></b:skin>

::selection {background:#FF0000;color:#FFFFFF;}
::-moz-selection {background:#FF0000;color:#FFFFFF;}
::-webkit-selection {background:#FF0000;color:#FFFFFF;}

Cari kode </head>
Lalu copy kode di bawah ini dan paste di atas kode </head>

<style type='text/css'>
::selection {background:#FF0000;color:#FFFFFF;}
::-moz-selection {background:#FF0000;color:#FFFFFF;}
::-webkit-selection {background:#FF0000;color:#FFFFFF;}
</style>

Terakhir Save template

source: http://koderator.blogspot.com/

Tema vanilla untuk Tag pre ini cukup keren dan menarik bila dipasang di blog, coba anda lihat dibawah ini contoh bentuknya :

Unik + keren kan?....dan bagi anda yang ingin menggunakannya, silahkan langsung ikuti langkah2 nya dibawah ini:

Login di blogger dengan ID anda
Pada Dasbor Pilih ==>Rancangan==>Kemudian edit HTML
Lalu cari kode ]]></b:skin> ( untuk mempercepat pencarian gunakan Ctrl+F )
Letakan kode di bawah ini di atas kode ]]></b:skin>

pre {
background-color:white;
background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-moz-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-ms-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-o-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:linear-gradient(top, #f5f5f5 50%, white 50%);
-webkit-background-size:30px 30px;
-moz-background-size:30px 30px;
-ms-background-size:30px 30px;
-o-background-size:30px 30px;
background-size:30px 30px;
background-repeat:repeat;
font:bold 12px/15px "Inconsolata","Monaco","Consolas",
"Andale Mono","Bitstream Vera Sans Mono",
"Courier New",Courier,monospace;
color:#333;
border:2px solid #666;
position:relative;
padding:0 7px;
margin:10px 0;
overflow:auto;
word-wrap:normal;
white-space:pre;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
box-shadow:0 1px 2px rgba(0,0,0,0.2);
position:relative;
}

pre[data-codetype] {
padding:29px 1em 7px 1em;
}

pre[data-codetype]:before {
content:attr(data-codetype);
display:block;
position:absolute;
top:0;
right:0;
left:0;
background-color:#666;
padding:0 7px;
font:bold 11px/20px Arial,Sans-Serif;
color:white;
}

pre[data-codetype="HTML"] {border-color:#0B7E88;color:#08464B;}
pre[data-codetype="CSS"] {border-color:#7B990C;color:#4B5D08;}
pre[data-codetype="JavaScript"] {border-color:#545448;color:#1F2E24;}
pre[data-codetype="JQuery"] {border-color:#395540;color:#2E2E27;}
pre[data-codetype="PHP"] {border-color:#FF9900;color:#865003;}
pre[data-codetype="XML"] {border-color:#FF0C39;color:#790015;}

pre[data-codetype="HTML"]:before {background-color:#0B7E88;}
pre[data-codetype="CSS"]:before {background-color:#7B990C;}
pre[data-codetype="JavaScript"]:before {background-color:#545448;}
pre[data-codetype="JQuery"]:before {background-color:#395540;}
pre[data-codetype="PHP"]:before {background-color:#FF9900;}
pre[data-codetype="XML"]:before {background-color:#FF0C39;}

Lalu save template

Cara Menggunakan di postingan, masukan kode seperti dibawah ini:

<pre data-codetype="HTML"> ... </pre>
<pre data-codetype="CSS"> ... </pre>
<pre data-codetype="JavaScript"> ... </pre>
<pre data-codetype="JQuery"> ... </pre>
<pre data-codetype="PHP"> ... </pre>
<pre data-codetype="XML"> ... </pre>

Yang perlu anda ingat, postingan juga harus di mode EDIT HTML bukan mode COMPOSE

source : http://hompimpaalaihumgambreng.blogspot.com

Syntax highlighter adalah salah satu cara bagaimana kita memposting kode program kedalam web/blog dengan tampilan yang begitu menawan dan tidak merusak tampilan blog kita, seperti contoh gambar dibawah ini, tampilan code yang kita posting didalam blog kita dapat tampil cukup menarik dan keren

Gimana sobat cukup keren kan?....dan jika ingin memasang pada blog sobat, mari simak langkah - langkahnya dibawah ini:

Login Ke Blog Sobat
Pada Dasbor Pilih ==>>Rancangan==>Kemudian EDIT HTML
Cari Kode </head> Dan Letakan Kode dibawah ini dan letakan Tepat Diatas Kode </head>

<!-- Add-in CSS for syntax highlighting -->
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
<!-- Add-in Script for syntax highlighting -->
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushAS3.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushColdFusion.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushDiff.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushErlang.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushGroovy.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJavaFX.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPlain.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPowerShell.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushScala.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!-- End code hilight -->

Save template

1- Jika ingin menyimpan kode CSS seperti ini kode nya

<pre class="brush: css">
Letakkan Kode CSS Disini
</pre>

2- Jika ingin menyimpan kode HTML seperti ini kode nya

<pre class="brush: html">
Letakkan Kode HTML Disini
</pre>

3- Dan untuk menyimpan kode JS seperti ini kode nya

 <pre class="brush: js">
Letakkan Kode JavaScript Disini
</pre>

Postingan juga harus mode EDIT HTML jika ingin menggunakan sintax Hightlighter ini.

sumber: http://359imbox.blogspot.com

Cukup unik memang tulisan efek neon ini, dimana bukan tulisannya yang berjalan,tapi warna dari efek tulisan tersebut yang berjalan...ok sob biar gak penasaran, seperti apa sih bentuknya, coba anda lihat dibawah ini contohnya:

Unik bukan?.....dan cara membuatnya juga tidak sulit, Cukup Anda tambahkan kode script dibawah ini.:

<script type='text/javascript'> 
var message="Disini teks pesan anda efek neon"
var neonbasecolor="#DDD"
var neontextcolor="#f00"
var neontextcolor2="#000"
var flashspeed=100      // speed of flashing in milliseconds
var flashingletters=3      // number of letters flashing in neontextcolor
var flashingletters2=1      // number of letters flashing in neontextcolor2 (0 to disable)
var flashpause=0      // the pause between flash-cycles in milliseconds
///No need to edit below this line/////
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2 
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script>

Untuk penempatan kodenya terserah Anda....tetapi kalau ingin di postingan seperti biasa harus di mode Edit HTML bukan mode COMPOSE. Ganti teks "Disini teks pesan anda efek neon" sesuai selera Anda.......

Sebelumnya saya pernah posting artikel mengenai Cara Membuat Tulisan Anti Copas. Nah..untuk kesempatan kali ini, sekarang aku mo bagi-bagi tutorial lagi, yaitu Tulisan Anti Copas versi 2. Karena pada versi pertama masih secara manual, sekarang pada versi yang ke 2 ini secara auto ( otomatis ). Sebenarnya fungsinya sama saja, cuma penempatannya yang berbeda...

Untuk langkah - langkahnya silahkan anda simak dibawah ini :

Cari kode css .post body {
Simpan kode css di bawah ini Sebelum penutup .post-body { yang bertanda seperti ini }

-moz-user-select: none;
-khtml-user-select: none;
-o-user-select:none;
user-select: none;

Setelah itu Save Template
Coba Anda COPAS artikel di postingan Anda..... semoga bermanfaat

Buat yang ingin menerapkan Tulisan anti copy paste di Blog Anda, silahkan simpan kode dibawah ini diatas kode ]]></b:skin>

Lalu save template anda.

Pada saat anda posting artikel, silahkan anda beralih dari mode COMPOSE ke moda edit HTML. Untuk Kode dalam postingan blog, gunakan kode HTML seperti dibawah ini :

Setelah itu silahkan anda terbitkan artikel kemudian anda coba copas artikel anda

source : http://sin1aja.blogspot.com/

Cara buat blockquote simpel dan menarik...saya yakin sobat blogger sudah faham apa itu blockquote.Ok gak usah dijelaskan lebih rinci lagi mending kita langsung ke langkah - langkah cara membuatnya :

Login ke akun blog sobat
Pilih rancangan
Pilih edit Html
Disarankan Download Template Lengkap dulu buat jaga-jaga
Expand Template Widget
Cari kode yang mirip dengan .post blockquote{padding
Kemudian ganti kode tersebut dengan kode dibawah ini

.post blockquote{
width: auto;
height: auto;
background-color: #2f2f2f;
background-image: -webkit-repeating-linear-gradient(top, #444 0px, #444 24px, #2f2f2f 24px, #2f2f2f 46px);
background-image: -moz-repeating-linear-gradient(top, #444 0px, #444 24px, #2f2f2f 24px, #2f2f2f 46px);
background-image: -ms-repeating-linear-gradient(top, #444 0px, #444 24px, #2f2f2f 24px, #2f2f2f 46px);
background-image: -o-repeating-linear-gradient(top, #444 0px, #444 24px, #2f2f2f 24px, #2f2f2f 46px);
background-image: repeating-linear-gradient(top, #444 0px, #444 24px, #2f2f2f 24px, #2f2f2f 46px);
border-left: 5px solid #cc0000;
outline: none;
color: #fff;
line-height: 23px;
font-family: "Arial",sans-serif;
font-size: 14px;
padding-left:10px;padding-right:10px;
}

Save dan lihat hasilnya

kali ini saya mo share tentang tutorial blogger dan mungkin sobat-sobat membutuhkanya.Oke langsung aja neh bagaimana seh menghilangkan no pada label tapi dengan cara edit html???...
Contoh tabel misalkan :

Sebelum

CSS (10)
Tutorial Blogger (10)
Tps Trik Internet (10)

Sesudah

CSS
Tutorial Blogger
Tps Trik Internet

Untuk menghemat waktu, mari kita mulai jurus mujarab tutorial blogger untuk menghilangkan angka jumlah label tersebut. Eit, hampir lupa trik ini dapat Sobat gunakan jika kamu telah memasang widget atau gadget label dalam blog.

Login dulu ke account blogger kamu.
Pilih tab Tata Letak ==> Edit HTML ==> centang "Expand Template Widget".

Sebelum melakukan edit template, sebaiknya simpan dulu template sobat yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan Sobat sudah memiliki back-up untuk mengembalikannya seperti semula. Selanjutnya cari kode

(<data:label.count/>).

NB : Kalau susah mencarinya, coba tekan CTRL+F di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox) Jika Sobat Menggunakan Google Chrome,sama saja cara pencarian nya,hanya saja letak nya ada di atas,lalu sobat tinggal memasukkan kata yang ingin dicari. Jika sudah ketemu, hapus kode tersebut. Jangan lupa SAVE template...

Ada dua hal yang harus kita perhatikan agar CSS3 Transisi dapat bekerja dengan baik, yaitu kita harus menentukan properti css dan menentukan durasi efek. Jika nilai durasi tidak ditentukan, maka efek transisi tidak akan berpengaruh atau tidak bekerja, karena nilainya masih default yaitu "0".

Dan cara kerjanya kita menggunakan fitur mouse-over, yaitu transisi bekerja dengan kata lain elemen berubah atau bergerak ketika pointer mouse terletak pada elemen yang kita buat. Dan ketika pointer mouse keluar dari atas elemen, maka bentuk elemen kembali seperti semula.

Elemen yang menggunakan CSS3 Transisi

Kode CSS diatas: :

Kita bisa menambahkan efek transisi menjadi lebih dari satu gaya, misalnya efek transisi kesamping sekaligus kebawah.

Efek transisi melebar kesamping sekaligus kebawah

Kode CSS diatas: :

Contoh lainnya Efek transisi melebar kesamping sekaligus tinggi menyempit

Efek transisi melebar kesamping sekaligus tinggi menyempit

Kode CSS diatas: :

Berikut contoh yang lain

Efek transisi membesar dan berputar

Kode CSS diatas: :

Selamat mencoba dan Semoga bermanfaat....

source: www.carabuatwebgratis.com

CSS3 sebagai sebuah pengembangan baru kode css memberi andil yang cukup besar bagi blogger untuk mengembangkan efek terang gelap atau fade efect ini. Berbagai efek yang sebelumnya harus dibangun melalui javascript kini bahkan tak perlu lagi dilakukan. Tentang kompabilitas css3? Kita tak lagi perlu lagi kuwatir. Berbagai browser besar setiap detiknya juga selalu meningkatkan kompabilitas mereka terhadap css3. Yah... karena kode css3 tak boleh tidak akhirnya akan menjadi kode utama pembangun desain blog/website karena kesederhanaannya dan kemampuannya untuk membangun berbagai desain animatif. Diwaktu ke depan kita akan lebih merasakannya ketika semua browser sudah kompatible dengan css3 animation.

Contoh:

Letakkan teks, image atau yang lainnya di sini

Cara membuat Box dengan Efek Terang - Gelap

Login ke Blogger==>Dasboard==>Design(Rancangan)
Klik Edit HTML
Cari kode ]]></b:skin>
Letakkan kode CSS dibawah ini di atas kode ]]></b:skin>

.mybox{
position:relative;
display:block;width:200px;
max-height:400px;
background:#fff;
color:#000;
overflow:auto;
padding:20px 15px;
margin:20px 5px;
border:2px solid #777;
border-radius:6px;
opacity:0.2;
filter:alpha(opacity=20);
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
.mybox:hover{
opacity:1.0;
 filter:alpha(opacity=100);
}

Klik Save Template

Untuk postingan gunakan kode dibawah ini dimode editHTML

<div class="mybox">Letakkan teks, image atau yang lainnya di sini!</div>

source : http://modifikasiblog-modifikasi.blogspot.com/

Banyak caranya agar tampilan Blog kita menjadi lebih bagus dan menarik salah satunya adalah dengan cara mengedit tampilan kita secara kontinyu karena katanya bisa menaikan page rank dan pada postingan kali ini akan membahas cara membuat Link bergoyang ngeboor hehehe salah gan maksud saya link bergoyang dengan Javascript. link bergoyang adalah Link yang ketika mouse menyorotnya akan bergoyang . Link bergoyang ini digunakan untuk mempercantik Link saja... Penasaran bukan?....
Ok bro kalau penasaran Ikuti Langkah-Langkah Berikut Ini:

1. Login Ke Blog Sobat
2. Pada Dasbor Pilih ==>>Rancangan==>Kemudian EDIT HTML
3. Cari Kode </head> Dan Letakan Kode Script Berikut Tepat Diatas Kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>      
$(document).ready(function()  {       
$(&#39;a&#39;).hover(function() {  //mouse in       
$(this).animate({ marginLeft:  &#39;12px&#39; }, 400);       
}, function() { //mouse out        
$(this).animate({ marginLeft: 0 }, 400);       
});        
});</script>

4. Terakhir Save Template and Lihat Hasilnya

Wah....kok judulnya hukuman sih? Memang siapa yang dapat hukuman? Memang hukumannya apa?. Yah, judul yang saya ambil yaitu mengenai dengan hukuman yang diberikan oleh google pada sebuah website atau blog yang terdapat menyalahi aturan main google. Sekarang sebelum kita membicarakan hal tersebut, mari kita berandai-andai sejenak. Seandainya blog atau web kita sudah memiliki traffic yang bagus, dengan pagerank yang aduhai. Kemudian kita tinggal menikmati hasilnya (pendapatan dari iklan atau adsense mengalir, yang daftar untuk pasang iklan pun pada antri). Sehingga tidur pun nyenyak, makan pun enak. Namun suatu saat ketika kita cek keberadaan web atau blog kita, alangkah kaget yang tak terkira karena mendapatkan situasi yang sangat menyakitkan. Web atau blog kita tidak muncul pada search engine google. Traffic kita menghilang, kemudian pendapatan dari iklan turun drastis. Itulah hukuman yang diberikan google kepada web atau blog kita, dengan kata lain "Banned". Hancur hati melihat semua itu. Tapi itu semua tergantung kita. Kita bisa mempertahankan posisi blog kita atau bahkan menigkatkannya. Dan untuk menghindari hukuman "banned" dari Google, Ada beberapa tips yang dapat kita lakukan. Adapun tips dan cara menghindari banned oleh google, yaitu:

Hindari menyalin artikel yang sudah ada atau dalam istilah kerennya "copas" baik itu dari internal link maupun eksternal link. Content adalah segalanya. web atau blog kita akan semakin memiliki peringkat bagus (PR) apabila berisikan artikel-artikel yang asli, terlebih lagi apabila yang dibahas hal pertama.
Jangan mencoba untuk bermain cloacking dan redirect. Orang melakukan ini dengan tujuan untuk mendapatkan traffic pengunjung yang banyak. Cloaking atau redirect memiliki dampak yang tidak atau kurang bagus untuk pagerank web atau blog. Ketika orang mengklik link tersebut, spider melihat bahwa blog atau web tersebut tidak memiliki keyword. Walaupun mesin spider kurang efektif dalam mendeteksi proses cloacking atau redirect ini, bukan berarti tidak menutup kemungkian bahwa web atau blog anada akan mendapatkan hukuman
Jangan menggunakan hidden text dan hidden link. Hidden text atau hidden link yaitu text atau link yang terdapat dalam blog kita yang tidak terlihat oleh pengunjung. Mengapa? Hal ini dikarenakan text atau link tersebut memiliki warna yang sama dengan warna latar dari blog atau web tersebut. Hidden text atau hidden link merupakan trick yang digunakan oleh para webmasters untuk meningkatkan pagerank. Namun sekarang search engine memiliki perkembangan dalam mendeteksi akan hal tersebut.
Hindari nge-link ke web atau blog terlarang.Backlink merupakan salah satu cara yang paling penting dalam meningkatkan pagerank, namun hal ini pun dapat membuat pagerank kita menjadi turun. Hal yang harus paling diperhatikan adalah jangan pernah nge-link ke suatu web atau blog yang telah dibanned oleh google.
Hindari "Keyword spamming" pada Meta Tag, yaitu penggunaan keyword yang berlebihan, mengulang-ulang keyword yang serupa.

Mudah-mudahan blog atau web kita tercinta tidak pernah mengalami hukuman dari google. Google Banned.....waduh jangan sampai deh. Semoga bermamfaat.

Hallo sobat blogger? apa kabar? baik - baik saja kan?. Kali ini saya akan sharing tutorial blogspot lagi niih. Yaitu Cara membuat efek shadow pada hover link. Sobat tau tidak apa maksud Shadow? shadow kalau di artikan ke bahasa indonesia adalah bayangan, ketika sobat arahkan cursor ke link aktif, di link tersebut keluar bayangan (shadow). Nah, sudah mengerti kan? Yasudah dehh, tidak usah basa - basi lagi kita langsung ke TeKaPe..

1. Pastikan sobat sudah login pada blog sobat
2. Masuk ke halaman Template
3. Edit Html lalu lanjutkan
4. Cari kode a:hover atau lebih lengkapnya seperti ini

a:hover {
color:#ffa500;
text-decoration:underline;
}

5. Nah sobat hanya tinggal menambahkan kode text-shadow:1px 1px 1px #ff5000; di kode tersebut atau jadinya akan seperti ini

a:hover {
color:#ffa500;
text-shadow:1px 1px 1px #ff5000; 
text-decoration:underline;}

6. Lalu Simpan Template dan lihat hasilnya

Selain memberi efek shadow pada hover link, kita juga dapat memberi efek shadow pada hover img, mau tau caranya? langsung dehh ikuti di bawah ini:

1. Masuk ke halaman pengeditan Template
2. Edit HTML lalu lanjutkan
3. Cari kode .post img atau lebih lengkapnya seperti ini:

.post img {
padding: 10px; border: 0px;
}

4. Di bawahnya copy pastekan kode di bawah ini:

.post img:hover {
-moz-box-shadow: 0 0 13px;
}

5. Simpan Template dan lihat hasilnya

Keterangan: Kode #ff5000 adalah kode warna efek shadownya, sobat bisa merubah warnanya dengan kode warna lain, untuk kode warna bisa cek disini

Sudah mengerti kan? bagaimana cara membuat efek shadow pada hover link , yasudah deh, sampai disini dulu ya? Selamat Mencoba!!

Source:http://blognya-reggy.blogspot.com

Tutorial ini adalah untuk mengganti menu navigasi yang berada dibagian paling akhir dari setiap postingan kita, yang berguna untuk mengarahkan pengunjung agar dapat melihat postingan sebelumnya ataupun sesudahnya, yang mana menu navigasi ini pada tampilan blogger itu hanya menampilkan tulisan Newer atau Older post dan Home. Nah bagi sobat yang ingin memodifikasi tulisanya menjadi lebih menarik, dengan mengantikannya dengan gambar agar dapar lebih memudahkan pengunjung blog anda, silahkan mengikuti petunjuk singkat berikut.

Langkah awal tentunya seperti biasa, lihat gambar :

Tekan ctrl+f dan temukan kode berikut :

<data:newerPageTitle/>

Dan gantikan dengan link berikut untuk imagenya :

<img src='http://2.bp.blogspot.com/- Odp_sQbM7_s/Th69zJM7FcI/AAAAAAAABKU/cjzpZkRMtM0/s1600/w2b_prev.png' style='border: 0 none;vertical-align: middle;'/>

Tekan ctrl+f dan temukan kode berikut :

<data:olderPageTitle/>

Dan gantikan dengan link berikut untuk imagenya

<img src='http://1.bp.blogspot.com/-xtb-
_7jEjIY/Th69y6t9sVI/AAAAAAAABKQ/slLsdQ43ZMc/s1600/w2b_next.png' 
style='border: 0 none;vertical-align: middle;'/>

Tekan ctrl+f dan temukan kode berikut :

<data:homeMsg/>

Dan gantikan dengan link berikut untuk imagenya :

<img src='http://2.bp.blogspot.com/-
Tm9sP0CPQBs/Th69yh2PpZI/AAAAAAAABKM/R_0wxEBGVuM/s1600/w2b_home.png' 
style='border: 0 none;vertical-align: middle;'/>

PREVIEW atau SAVE TEMPLATE anda dan lihat hasilnya.

Untuk Anda yang ingin membuat Link tanpa garis bawah ,
contoh seperti ini http://dulortega.blogspot.com,
mudah saja ko....kita hanya nambahin sedikit kode:

style="text decoration: none"

Jika anda biasanya menuliskan seperti ini untuk link:

<a href="http://namablog.blogspot.com">Link Biasa</a>

Anda selipkan kode yang berwarna merah di bawah ini,sehingga menjadi :

<a href="http://namablog.blogspot.com"
style="text-decoration:none">Link tanpa Underline</a>

semoga bermanfaat

Dokumen Tips Trik

Label

Popular Posts

Followers