NEW POSTING
Tampilkan postingan dengan label Tips And Trick. Tampilkan semua postingan
Kali ini saya akan memberikan tutorial cara membuat animasi Loading di blog. Tutorial ini saya dapatkan di DSZ, kalau menurut blog Om-Dayz "Animasi loading blog bisa memberikan efek manipulasi terhadap loading blog agar nampak lebih cepat". Daripada bingung mending langsung saja ke caranya.. :)
Taruh kode CSS berikut di atas kode ]]></b:skin>
Pasang JQuery Terbaru
#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;
border: 5px solid #00a3ff;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 35px #00a3ff;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;
border: 5px solid #00a3ff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #00a3ff;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #00a3ff}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #00a3ff} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}
pasang script jquery 1.7.2 tepat di atas tag </head> atau kalau ada JQuery terbaru, silahkan pasang yang terbaru.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>Pasang Script Loading Animasi
Letakkan kode berikut tepat di atas tag </body>
Keterangan :
<div id='loadhalaman'>
<div class='loadball'/>
<div class='loadball-2'/>
</div>
<script type='text/javascript'>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
$internalLinks.click(function() {
$('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
});
// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
$('#loadhalaman').click(function() {
$(this).hide();
});
});
</script>
dan tinggal anda edit edit saja.. :D jika ingin melihat Code Warna klick disini
sumber : rilkaze
Hallo Sobat C-Bunshin.. Bagaimana kabar nya??? Baik Baik aja kan??? hahaa..
nah,, pada kesempatan kali ini saya ingin membagikan tutorial tentang Cara Membuat Kotak Backlink dibawah Post
mungkin sobat C-bunshin juga sudah tau tutorial ini,,karena sudah banyak beredar di blog-blog lain,,
tapi disini saya ingin menjelaskan secara mendetail bagaimana sih cara pemasangan yang tepat sehingga tidak merusak template.
bagi yang belum tau juga ngga papa,bisa juga melihat lalu praktekin tutorial ini.
ini sobat bila anda belum tau screenshotnya seperti apa..,,
Udah tau kan?? yuk mari kita mulai tutorialnya,,..
Cara Membuat Kotak Backlink dibawah Post
- pertama jelas login blogger
- kemudian masuk dashboard > template > edit html
- setelah itu cari kode
]]></b:skin>dengan menggunakan tombol Ctrl+F - lalu.. letakan kode dibawah ini tepat diatas
]]></b:skin>
#AHSbacklinks{overflow:hidden;margin-top:5px;border:4px solid red;box-shadow:0 0 20px #000;border-radius:5px;height:45px;width:720px;-webkit-transition:all 0.4s ease-in-out;}
#AHSbacklinks:hover{height:185px;-webkit-transition:all 0.7s ease-in-out;}
.AHSbkl{margin-top:3px;float:left;color:black;width:517px;border:1px solid #fff;background:transparent;-moz-border-radius:3px;transition:all .9s ease-in-out;}
.AHSbkl:hover{color:black;border:1px solid #fff;background:transparent;}
#AHSbacklinksTitle{border:4px solid red;border-radius:5px;width:700px;height:20px;text-align:center;font-family:Black Ops One;font-size:20px;font-style:normal;font-weight:normal;color:White;margin:5px;padding:2px 10px;}
Eittss, belum selesai sobat
- kemudian cari kode <data:post.body/>
Cara diatas hanya untuk orang yang sudah berpengalaman,buat anda yang belum coba turutin tutorial ini
- setelah anda mengcopy code css diatas,cari kode
<b:if cond='data:blog.pageType == "item"'> - dan letakan lagi kode dibawah ini tepat di bawahnya
<b:if cond='data:blog.pageType == "item"'>
<div id='AHSbacklinks' style='margin-top:30px;'>
<div id='AHSbacklinksTitle'> - AHSBacklinks - ™ </div>
<table border='0' height='140' style='margin-left:7px;' width='260'>
<tr><td>URL : <br/><input class='AHSbkl' expr:value='data:post.url' onclick='this.focus();this.select();' readonly='readonly' title='Press Ctrl+C to Copy' type='text'/></td></tr>
<tr><td>Code For Forum : <br/><input class='AHSbkl' expr:value='" [URL=" + data:post.url + "]" + data:post.title + "[/URL] "' onclick='this.focus();this.select();' readonly='readonly' title='URL For Forum' type='text'/></td></tr>
<tr><td>HTML Code : <br/><textarea class='AHSbkl' onclick='this.focus();this.select();' readonly='readonly' style='height:18px;' title='HTML Code'><a expr:href='data:post.url' target='_blank'><data:post.title/></a></textarea></td></tr>
<tr><td/></tr>
</table>
</div>
</b:if>
Sudah selesai
Setting & Penjelasan
| Kode Tutorial | Penjelasan |
|---|---|
kemudian cari kode <data:post.body/> | Kenapa kode itu saya coret?? jawabannya sangat simple banyak blogger yang asal main copas dan langsung mencobanya,tidak belajar dulu itu kode apa dan sebagainya,,Memangnya tidak boleh pake kode itu? ya jelas, kode itu begitu kehapus maka template anda akan rusak,maka dari itu,saya menulis kan disini untuk amannya saja gunakan kode <b:if cond='data:blog.pageType == "item"'> kode itu bisa ditemui di semua template(bawah sendiri) di dekatnya kode <div id='post-footer....> atau sebelum kode jump-link(dikenal dengan #more) |
Gambar Dari Tutorial diatas
Masih bingung sobat?? ._. masih belum menemukannya? nih saya kasih contoh lengkap kodenya seperti apa,..
Penjelasan gambar
- yang saya kotakin kuning itu adalah kode <b:if cond='data:blog.pageType == "item"'>........</b:if>
- panah orange itu merupakan kode #more atau bila post mempunyai jump-link
- nah,yang saya maksudkan,, anda menaruh kode html dari tutorial ini kedalam/sebelum penutup </b:if>(jadi diatasnya panah orange itu)
sudah kan?? selamat anda sudah bisa memakai kotak backlink
Saya rasa cuman sekian,untuk warna,lebar,tinggi atur saja sendiri ._.sampai jumpa lagi sobat C-Bunshin,,kita ketemu di lain kesempatan ya,,,...
Sumber: Ahs
Alexa rank merupakan sebuah metode peringkat yang akan memantau perkembangan blog sobat dari analisa traffic, keyword dan memberikan Rangking pada Blog sobat menurut alexa.com. Situs Alexa ini juga merupakan yang paling popular dan banyak digunakan para Blogger untuk memantau Website/Blog mereka.
Alexa juga menyediakan widget Alexa Rank untuk dipasang di Blog sobat agar mempermudah sobat melihat hasil pantauan Alexa Rank terhadap Blog sobat. Sebelum sobat memasang widget ini, terlebih dahulu sobat harus mendaftarkan Blog sobat di Alexa.com. Baca Cara Mendaftarkan Website/Blog ke Alexa.com.
Setelah sobat telah mendaftarkan Blog sobat ke Alexa.com., maka kita bisa memulai membahas langkah-langkah memasang Widget Alexa Rank di Blog:
- Memasang widget Alexa Rank di Blog.
2. Sobat akan diberikan beberapa pilihan kolom. Masukan URL Blog sobat pada salah satu kolom yang sobat inginkan dan klik Build Widget.
5. Masuk pada bagian Tata Letak.
6. Klik Tambah Gadget di posisi yang sobat inginkan.
7. Pilih HTML/Javascript.
8. Pastekan kode Widget dari Alexa disini.
Nah, selesai sob. Semoga bermanfaat...Alexa rank merupakan sebuah metode peringkat yang akan memantau perkembangan blog sobat dari analisa traffic, keyword dan memberikan Rangking pada Blog sobat menurut alexa.com. Situs Alexa ini juga merupakan yang paling popular dan banyak digunakan para Blogger untuk memantau Website/Blog mereka.
Alexa juga menyediakan widget Alexa Rank untuk dipasang di Blog sobat agar mempermudah sobat melihat hasil pantauan Alexa Rank terhadap Blog sobat. Sebelum sobat memasang widget ini, terlebih dahulu sobat harus mendaftarkan Blog sobat di Alexa.com. Baca Cara Mendaftarkan Website/Blog ke Alexa.com.
Setelah sobat telah mendaftarkan Blog sobat ke Alexa.com., maka kita bisa memulai membahas langkah-langkah memasang Widget Alexa Rank di Blog:
- Memasang widget Alexa Rank di Blog.
2. Sobat akan diberikan beberapa pilihan kolom. Masukan URL Blog sobat pada salah satu kolom yang sobat inginkan dan klik Build Widget.
5. Masuk pada bagian Tata Letak.
6. Klik Tambah Gadget di posisi yang sobat inginkan.
7. Pilih HTML/Javascript.
8. Pastekan kode Widget dari Alexa disini.
Nah, selesai sob. Semoga bermanfaat..
1 . Log In Blogger
2 . Pilih Blog Kamu
3 . Pergi Ke Template
4 . Klik Edit HTML
5 . Cari Kode ]]></b:skin>
6 . Masukan Kode Di Bawah Ini Tepat Di Atas Kode ]]></b:skin>
.dasar{
width:930px;
height:299px;
float: left;
border-radius: 5px 5px 5px 5px;
background: none repeat scroll 0% 0% rgb(128, 0, 0);
color: rgb(255, 255, 255);
border: 3px solid rgb(0, 0, 0);
padding: 5px;
margin-top: 20px;
margin-right: 10px;
margin-left: 10px;
box-shadow: 0px 0px 10px rgb(0, 0, 0) inset;
}
#dasar2{width: 265px;
height: 258px;
float: left;
border: 3px solid black;
position: absolute;
margin-top: 37px;
margin-left: 29px;
padding:10px;padding-right:5px;
border-radius: 5px 5px 5px 5px;
background: #222;
}
#dasar2 img{transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;border:2px solid #000;opacity:.5;
}
#dasar2 img:hover {transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;border:2px solid #800; opacity:1.0}
#dasar3{width:550px; height:262px; background:#222; float:right;border:3px solid #000; position:absolute; margin-top:40px; margin-left: 372px;padding:5px;border-radius:5px;-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;}
#widgetbanneralexa{
float: left;
margin-left: 378px;
width: 120px;
height: 95px;
border: 3px solid #000000;
margin-top: -270px;
padding: 3px;}
#widgetbanneralexa img{opacity:0.5;-webkit-filter:saturate(0.0);-moz-filter:saturate(0.0);-ms-filter:saturate(0.0);-o-filter:saturate(0.0);filter:saturate(0.0);-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out;padding:0}
#widgetbanneralexa img:hover{opacity:1;-webkit-filter:saturate(1.1);-moz-filter:saturate(1.1);-ms-filter:saturate(1.1);-o-filter:saturate(1.1);filter:saturate(1.1);-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}
.Kotak2 {
background: #222;
border:4px solid #000000;
border-top:4px solid #212121;
height:100px;
width:25px;
float:left;
margin-top: -315px;
margin-left: 330px;
}
.Kotak3 {
background: #222;
border:4px solid #000000;
border-bottom:4px solid #212121;
height:100px;
width:25px;
float:left;
margin-top: -106px;
margin-left: 330px;
}
#headlines{
float: left;
margin-left: 642px;
width: 285px;
height: 180px;
border: 3px solid black;
background: #222;
margin-top: -294px;
padding: 1px;}
#LankChat {
background: #800;
border: 4px solid #000;
border-bottom: 4px solid #212121;
width: 140px;
height: 70px;
-webkit-transition:All .9128s ease;-moz-transition:All .9128s ease;-o-transition:All .9128s ease
float: left;
margin-top: 257px;
position: absolute;
margin-left: 770px;
color:#c2c2c2;line-height:1.5em;text-align:center;
position: absolute;
}
#LankChat:hover {
margin-left: 680px;border-radius: 13px 13px 0 0;border-left:4px solid #000;border-right:4px solid #000;border-top:4px solid #000
-webkit-transition:All .9128s ease;-moz-transition:All .9128s ease;-o-transition:All .9128s ease
}
7 . Oke Lanjutkan Dengan HTML nya
8 . Sekarang Cari Kode <div id='content-wrapper'> Atau <div id='content'> Pokoknya yang berhubungan Dengan Content
9 . Pasang Kode Di Bawah Ini Tepat Di Atas ( <div id='content-wrapper'> , <div id='content'> , Sejenisnya )
10 . Simpan<div class='dasar'/>
<b:section id='dasar2' maxwidgets='5' showaddelement='yes'>
</b:section>
<b:section id='widgetbanneralexa' maxwidgets='5' showaddelement='yes'>
</b:section>
<div class='Kotak2'>
</div>
<div class='Kotak3'>
</div>
<b:section id='headlines' maxwidgets='5' showaddelement='yes'>
</b:section>
<div id='LankChat'>
<a href='http://lankchat.blogspot.com/' target='_blank' title='LankChat Box'><img alt='LankChat Box ' src='http://i1061.photobucket.com/albums/t479/Gilang28k/sayonara2_zpsc0422daa.png'/></a>
</div>
Selesai dehh :v , tinggal edit2 sendiri
Ikuti Langkah nya dengan Benar...
1.Buka Blog yang TiDak Bisa di Klick Kanan Misalnya KLIK INI
2.dan Setelah itu Pergi Ke salah Satu Post... yg ada di blog itu
3.dan cari kebawah Kotak Comment... dan di sana Cursor akan berubah menjadi kursor biasa misalnya
cursor Piso Naruto menjadi Putih biasa..
4.dan jika cursor di blog itu sudah berubah menjadi cursor biasa..Anda Pasti bisa klick kanan..
5.Dan Untuk Iu menjadi lagiat Juga bisa dengan cari gini nnti di Inspect element (Q) dan sudah....
JANGAN KALI KALI MENJIPLAK/MEMPLAGIAT BLOG SAYA..!!!
Dan Cukup sudah dulu ya Happy Plagiat ... HAHHAHA Jangan Kesampean Plagiat Deh HAHAHA...
Oke Tanpa basa-basi lagi....langsung aja ke TKP......Ikuti Langkah langkah nya dengan benar ya :D
Langkah-Langkah :
0. Login Blogger
- Buka Dashboard Lalu Pilih Tata Letak
- Edit Post :
3.Ganti Sesuai Ke Inginan :
5.Dan Tarat.. Liat Hasilnya Sendiri Hahahah....
Gampang Bukan..??? Hahaha memang... Hahaha..
Selamat Mencoba :D
HALLO Agan Agan C-B Inilah Posting Terakhir Saya Di Hari ini... Dan Besok Saya Akan Posting Lagi kok.. jangan Takut.. HAHAHAH ... okey Kita Hari Ini AKan Mempelajari Tentang Cara Mengilangkan Tanda Tang Dan Obeng Pada BLog ANDa.. Okay Langsung Saja TKP :D.. DI Simak Ya cara nya..
1. Login ke akun blogger kamu.
2. Masuk ke Template, Pilih Edit HTML .
3. Carilah kode ]]></b:skin> ( bisa dengan menggunakan CTRL + F untuk mencari kode tersebut )
4. Setelah ketemu, copy kode di bawah ini dan paste / letakkan di atas ]]></b:skin>
.quickedit{display:none;}
5. Klik Simpan Template .
6. Lihat hasilnya.
Maka secara otomatis, obeng dan tang tersebut tidak akan muncul lagi dan tersembunyi di blog Anda.
HaHaHa Mudah Kan Ayo Di COBA bagi Yang Ada Tanda Tang Dan obeng Nya HAHAHA
Hallo Gan hari Ni Ane Posting tentang TIPS And TRICK nich oke langsung Saja TKP :
NICh Trick Membuat Label Cloud Keren Di Blog
Mari Bekerja :
Lumayan cantik bukan, Caranya Sama : CSS-nya ini dibawah :
NICh Trick Membuat Label Cloud Keren Di Blog
- Log In Blog >> Pilih Setting Template >> dan Edit HTML
- Cari Kode Berikut Di Ruang HTML :
]]></b:skin>
- Setelah Ketemu Copy Code Dibawah ini Tepat diatas Code ]]></b:skin> :
/*-----Labels Cloud Styled widget by azhariian.blogspot.com----*/
.label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C0C0C0; border-radius: 3px; float:left; text-decoration:none; font-size:13px; color:#666; }
.label-size:hover { border:1px solid #B20000; text-decoration: none; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; }
.label-size a { text-transform: uppercase; float:left; text-decoration: none; }
.label-size a:hover { text-decoration: none; }- Biasanya bagi blog yang mengandung banyak css terdapat ID # diatas Code ]]></b:skin>, Jadi usahan letakan di deretan (ID = . )
Lumayan cantik bukan, Caranya Sama : CSS-nya ini dibawah :
Simpan Template Dan Lihat Hasilnya :D
- /*-----Labels Cloud Styled widget by proBlogiz.blogspot.com----*/ .label-size{ display: inline-block; padding: 0px 10px; height: 29px; line-height:29px; border-radius: 5px; font-weight:bold; font-size:12px; text-decoration:none; } .label-size{ border: 1px solid #769e42; box-shadow: inset 0 1px 0 #c5e59c ; background-color: #9ed35a; text-shadow: 0px 1px 1px #6ea23b; color: #fff; background-image: linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -o-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -moz-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -webkit-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -ms-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%); } .label-size:hover{ background-color: #b7fa66; background-image: linear-gradient(top, #b7fa66 0%, #7ec940 100%); background-image: -o-linear-gradient(top, #b7fa66 0%, #7ec940 100%); background-image: -moz-linear-gradient(top, #b7fa66 0%, #7ec940 100%); background-image: -webkit-linear-gradient(top, #b7fa66 0%, #7ec940 100%); background-image: -ms-linear-gradient(top, #b7fa66 0%, #7ec940 100%); } .label-size:active{ background-image: linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -o-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -moz-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -webkit-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -ms-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%); } .label-size{ display:inline-block; border-radius: 5px 0 0 5px; border-right-width:0; position:relative; z-index:5; margin-right: 20px; margin-bottom: 10px; } .label-size:after{ content: " "; width: 22px; height: 22px; line-height: 18px; font-size:25px; border-top: 1px solid #769e42; border-right: 1px solid #769e42; box-shadow: inset 0 1px 0 #c5e59c ; background-color: #9ed35a; text-shadow: 0px 1px 1px #7eac46; border-radius: 3px 7px 3px 0; color: #fff; background-image: linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -o-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -moz-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -webkit-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -ms-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); position:absolute; top: 3px; right: -12px; z-index:-3; -webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */ -moz-transform: rotate(45deg); /* FF3.5+ */ -ms-transform: rotate(45deg); /* IE9 */ -o-transform: rotate(45deg); /* Opera 10.5 */ transform: rotate(45deg); filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand'); zoom: 1; } .label-size:hover:after{ background-color: #b7fa66; background-image: linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%); background-image: -o-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%); background-image: -moz-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%); background-image: -webkit-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%); background-image: -ms-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%); } .label-size:active:after{ background-image: linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -o-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -moz-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -webkit-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -ms-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); } .label-size:before{ content: " "; height:5px; width:5px; display:block; position:absolute; right:-3px; top:11px; background-color: #fcfdf5; border: 1px solid #83ab52; border-radius:5px; box-shadow: 0 1px 0 #b2ddd83; } .label-size span{ padding:2px 5px; border: 1px solid #9e5c26; border-radius: 5px; box-shadow: inset 0 1px 0 #f5bf8c; background-color: #ed943f; text-shadow: 0px 1px 1px #000; margin-left: 10px; background-image: linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%); background-image: -o-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%); background-image: -moz-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%); background-image: -webkit-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%); background-image: -ms-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%); } #Label1 {height:210px !important;}
1.Seperti Biasa Login ke Blogers
2.pilih tata letak
3.Tambahkan gadget/add gadget
4.pilih HTML/Javascript
5.Copykan HTML Berikut :
<div style="overflow:auto;width:auto;height:250px;border:1px solid #ccc; padding:10px; margin:0 auto;background:#fff;"> <style type="text/css"> ul.w2b_recent_comments{list-style:none;margin:0;padding:0;} .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;} .w2b_recent_comments li .avatarImage{padding:3px;background:#0000;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;} .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;} </style>
<script type="text/javascript"><br /> //<![CDATA[ // Recent Comments Settings var numComments = 10, showAvatar = true, avatarSize = 35, roundAvatar = true, characters = 250, defaultAvatar = "", hideCredits = true; //]]><br /></script>
<script type="text/javascript" src=" http://rizaldipriantamascript.googlecode.com/files/Recent_Comments_.js "></script> <script type="text/javascript" src="http://cydarkness.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=100"></script></div>
Note : ganti TUlisan yang Berwarna Hijau Dengan URL kalian.. (Ingat Hanya Ganti Yang TUlisan Hijau nya Saja)
6.Dan Save..
Dan Lihat Hasilnya.. :D
Oke Jika anda ingin COpy Artikel ini TOlong Sertakan Sumber nya.. :D
Oke Hari ini Saya Akan mengshare Tentang Cara Membuat Banner 125x125
Langsung Saja ke TKP :
1.seperti biasa login ke bloger anda dulu
2.pilih tata letak
3.add gadget/tambahkan gadget
4.pilih HTML/Javascript
5.Copy kan HTMLdibawah ini :
<a target="_blank" href="com/2013/08/bhttp://cydarkness.blogspot.anner-exc-v2.html"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDyzaEb0WnGSlXHn1fd5jyV-k1Gd1pVTOuUrHwM_XzKeSY9lyr91EypeqlxJRbo1TOiH2nUX0srl-KPW9NuTGHykLxGivXpHDAe_7nhTWYezdsoDacBdp34N2kwGS5-eO-nyQBuaokAQ9n/s1600/5828_596772373687754_574482138_n+%281%29.jpg" border="0" height="125" width="124" /></a>
Note : ganti TUlisan berwarna Hijau Dengan URL blog yang Di tuju,dan ganti tulisan Brewarna Kuning Dengan URL gambar Kalian.
6. Dan Save...
Note Jika Anda Ingin Mendapatkan 4 YOur Ads Here 125x125 Copykan saja HTML nya 4 Kali :D
Oke CUkup Segitu Tips Hari ini Dari Saya.. thx telah mengkunjungi blog saya ...!!!
Jangan Lupa Jika Ingin Copy Sertakan Sumber nya.. :D
1. Buka DISINI
2. Tulis URL blog Kalian Di Kolom yang ada di atas Nama Chek
3. Sudah Itu Chek Dan Akan Terlihat Rank SEO kalian.
Cara Memasang Widget Rank SEO ke blog :
1.Seperti Biasa Login ke bloger anda.
2.Pilih tata letak
3.Add Gadget/Tambahkan Gadget
4.pilih HTML/Javascript
4.Copy Kan HTML yang ada Di Bawah gambar Rank SEO blog Kalian
5.Seperti biasa Save.. Dan Selesai...
Oke Cukup Segitu TIps Hari Ini... jangan Lupa Kunjungi Kembali blog ini ya
Wassalamualaikum
SEO adalah kependekan dari Search Engine Optimization, yang dalam bahasa kita diartikan menjadi optimasi mesin pencari. Definisinya kurang lebih, SEO merupakan teknik atau proses untuk meningkatkan performansi sebuah situs agar mempunyai peringkat yang tinggi pada halaman hasil pencarian mesin pencari ( SERP = Search Engine Results Page ), sehingga akan memaksimalkan traffic ke situs tersebut, baik itu website statis maupun blog . Bagi seorang blogger, traffic atau 'lalu lintas' pengunjung yang datang adalah salah satu pilar penting sebuah blog. Tingkat kepentingannya juga akan menjadi semakin tinggi jika blog tersebut digunakan sebagai media berbisnis online . Ini disebabkan karena traffic inilah calon-calon konsumen mereka. Semakin banyak traffic, peluang untuk sukses semakin terbuka lebar.
Pemakai internet biasanya menggunakan search engine untuk menemukan apa yang dicarinya. Kebanyakan di antara mereka kemudian hanya akan tertarik pada 10 atau 20 situs pertama pada halaman 1 dan 2 dari SERP, tanpa ada keinginan untuk melihat ribuan, ratusan ribu, atau mungkin jutaan situs yang ada di halaman berikutnya. Jadi, jika blog kita muncul di halaman 1 hasil pencarian search engine dengan keyword yang kita incar, maka akan semakin banyak traffic yang akan datang ke blog kita. Inilah sebabnya SEO itu lahir.
Search Engine Optimization memang kemudian menjadi 'mata kuliah wajib' bagi para webmaster dan blogger.
SEO : Gampang
atau Susah ?
Nah.. pertanyaan yang ini susah dijawab. Karena, 'mata kuliah wajib' yang satu ini sepertinya lebih banyak dibilang susah daripada gampang :-( . Teknik yang dikembangkan juga bermacam-macam. SEO yang dianggap jitu oleh seorang blogger belum tentu dipakai oleh blogger yang lain. Satu yang jelas, SEO membutuhkan keuletan, kesabaran dan waktu untuk mendapat hasil yang kita inginkan. Hingga berbulan- bulan? Bisa jadi ! Pada dasarnya ada 2 macam SEO :
1. ONPAGE OPTIMIZATION
Sesuai dengan namanya, SEO jenis ini berisi tentang teknik- teknik optimasi dengan memodifikasi faktor faktor tertentu di dalam webpage / blog itu sendiri, misalnya : Pemilihan keyword yang cerdik, termasuk penggunaannya dalam frase. Hanya menggunakan keyword yang diincar pada Title. Menggunakan symbol «|» pada Title. Penggunan Header Tag. Kerapatan keyword yang cukup pada content, dan bukan keyword spamming. Penempatan keyword pada awal dan akhir webpage. Penggunaan Alt Tag yang tepat pada image.
2. OFFPAGE OPTIMIZATION
Offpage optimization pada dasarnya terdiri dari faktor- faktor yang tidak terdapat pada halaman website / blog kita, tapi digunakan dalam algoritma search engine ketika menentukan ranking sebuah situs. Menurut Brad Callen dari Bryxen Software, faktor-faktor ini misalnya : Jenis-jenis situs yang memberi link ke kita. Jumlah situs yang memberi link ke kita. Page Rank situs yang memberi link. Anchor text yang digunakan pada link. Jumlah dan tipe situs yang me- link ke situs yang me-link ke situs kita tadi. Perkembangan SEO Sekarang ini, jutaan situs 'perang online' di jagad internet untuk jadi nomor wahid di mata search engine. Tentu sulit memenangkan pertarungan ini. Beberapa webmaster / blogger menerapkan teknik-teknik SEO yang natural dan halal di mata search engine. Teknik yang ini sering dikenal dengan White Hat SEO. Lawannya.. ya Black Hat SEO. Teknik Black Hat SEO biasanya beresiko. Situs yang bersangkutan bisa di banned oleh search engine. ( Saya juga menulis tentang SEO yang sah dan illegal versi Google. Baca ya ... ) Pada sisi yang lain, si search engine menggunakan faktor yang semakin kompleks dan selalu memperbaikialgoritma untuk meningkatkan kualitas SERP mereka. Algoritma yang dipakai search engine pun tidaklah sama. Ini sebabnya, SERP setiap search engine bisa berbeda-beda untuk keyword yang sama. Repot ya?! Kesimpulannya, kita harus selalu belajar banyak tentang SEO.
SUMBER
Bagi sobat yang ingin membuat blognya menjadi SEO Friendly berikut tipsnya .
Manfaat SEO (Search Engine Optimization) Search Engine Optimization atau yang lebih dikenal dengan istilah SEO sendiri adalah suatu usaha untuk mengoptimalkan suatu web/blog tertentu agar dengan mudah ter-index di search engine. Percuma saja jika sobat mempunya web/blog yang sangat bagus dan berkualitas tinggi tapi tidak ada orang lain yang mengunjungi web/blog sobat tersebut, isi dari web/blog tersebut tidak akan tersamapaikan sama sekali. Salah satu cara paling ampuh untuk menggapai popularitas suatu web/blog ya dengan SEO ini. Nah, sebenarnya saya sendiri masih newbie di bidang SEO tapi saya akan mencoba sedikitnya memberi beberapa cara agar blog menjadi SEO Friendly. Tips/ trik SEO kali ini adalah dengan membuat template blog yang kita miliki menjadi SEO Friendly. Nah kalau ada yang harus di instropeksi atau tambahan tolong beri kritik atau saran di kolom komentar ya. OK, sekarang kita langsung masuk ke langkah-langkah membuat template blog menjadi SEO Friendliy.
Langkah-Langkah Cara Membuat Blog SEO Friendly Dengan Mudah
1. Membuat Blog SEO Friendly Dengan Mengubah Page Title
Format page title default dari blogger kan seperti ini “JUDUL BLOG : JUDUL POSTING”, nah supaya blog kita lebih disukai oleh search, kita harus merubah format page title standar itu menjadi seperti ini “JUDUL POSTING | JUDUL BLOG”. Berikut langkah-langkahnya :
- Masuk ke dashboard blog sobat
- Masuk ke rancangan kemudian pilih Edit html
- Cari kode berikut :
<title><data:blog.pageTitle/></title>
Cara Mudah Mencari dengan menggunakan CTRL+F
- Kalau sudah ketemu kodenya ganti sama kode berikut ini :
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
Atau sobat bisa juga menambahkan beberapa kata kunci (keyword) seperti ini :
<b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/> | <data:blog.title/></title><b:else/><title><data:blog.pageTitle/> | Kata kunci sobat | Kata kunci sobat </title></b:if>
Kalau sudah jangan lupa disimpan templatenya.
2. Membuat Blog SEO Friendly Dengan Menambahkan Meta Tag
Mesin pencari sangat menyukai web/blog yang jelas tema dan isi content-nya. Jadi, sobat harus nambahin suatu tag yang namanya meta tag. Berikut langkah-langkahnya :
- Masuk ke dashboard blog sobat
- Masuk ke rancangan kemudian pilih Edit html
- Cari kode berikut :
<![CDATA[/*
Copy-kan kode berikut ini di atas kode tersebut (<! [CDATA[/* ) :
<b:if cond='data:blog.url == data:blog.homepageUrl'><meta content='text/html; charset=utf-8' http-equiv='Content-Type'/><meta name='Author' content='Nama Sobat'/><meta name='description' content='Deskripsi singkat tentang blog sobat'/><meta name='keywords' content='keyword1, keyword2, keyword3, dst'/><meta name='language' content='id'/><meta name='geo.position' content='-5;120'/><meta name='geo.country' content='id' /></b:if>
Kemudian simpan templatenya
3. Membuat Blog SEO Friendly Dengan Memasang Breadcrumbs
Breadcrumb adalah sebaris tautan internal pada bagian atas atau bawah laman yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke laman dasar dengan cepat. Breadcumbs ini sangat disukai oleh search engine, sehingga apabila blog kita memiliki breadcumbs dapat menambah nilai SEO pada blog kita. Di mesin pencarian (SERP) url yang ditampilkan adalah kategori dari postingan sehingga blog sobat bisa bersaing untuk mendapatkan posisi top di google SERP.
4. Membuat Blog SEO Friendly Dengan Memasang Related Post
Related post sangat bagus untuk SEO dan disukai para pengunjung. Setelah membaca suatu artikel pengunjung tidak akan lari ke blog lain dan biasanya akan tertarik untuk melihat-lihat related post yang ada di blog sobat.
5. Membuat Blog SEO Friendly Dengan Mematikan Setting Archive ( Arsip )
Search engine sangat membenci yang namanya duplicate archive. Jika anda mengaktifkan opsi arsip, akan ada 2 buah link yang menuju 2 halaman yang berbeda (Halaman utama dan halaman artikel sendiri) tapi memiliki isi konten yang sama. Bagi search engine ini adalah masalah serius. Oleh karena itu kita sebaiknya me-non-aktifkan opsi arsip. Caranya adalah sebagai berikut :
1. Masuk ke dashboard blog sobat
2. Masuk ke Setting kemudian pilih Archiving
3. Pada bagian Archiving Frequency ubah menjadi no archive
Atau jika sobat tidak ingin menonaktifkan fungsi arsip, silahkan masuk ke rancangan kemudian pilih edit html dan letakkan kode <head> :
<b:if cond='data:blog.pageType == "archive"'><meta content='noindex' name='robots'/></b:if>
6. Membuat Blog SEO Friendly Dengan Menambahkan Kode 'Rel=Canonical'
Gunanya kita menambahkan 'rel=canonical' adalah untuk menghindari konten ganda, karena seperti para master of SEO bilang bahwa google sangat tidak dapat mentolerir sebuah duplicate content (Buat yang kerjanya cuma bisa copas hati-hati nih sebelum didepah dari google.). Silakan masuk ke rancangan kemudian pilih edit html dan letakkan kode berikut dibawah kode <head> :
<link expr:href='data:blog.url' rel='canonical' />
7. Membuat Blog SEO Friendly Dengan Tag Heading
Google sangat menyukai sebuah tulisan atau judul dengan tag H1. Oleh karena itu ubahlah ukuran judul posting sobat dengan tag H1. Silakan masuk ke rancangan kemudian pilih edit html kemudian cari kode seperti berikut ini :
<b:if cond='data:post.title'><h3 class='post-title entry-title'><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if></b:if></h3></b:if>
Ubah kode yang berwarna merah dari h3 atau h2 pada beberapa template menjadi h1. Setelah itu tambahkan kode berikut sebelum kode ]]></b:skin>
h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }
Sekian aja ya beberapa tips dari saya untuk membuat blog menjadi lebih SEO Friendly, kurang lebihnya saya minta maaf yang sebesar-besanya. Sebenarnya masih banyak tips dan trik untuk membuat blog menjadi SEO Friendly , Silahkan bisa dicari di google XD
SUMBER