Scairelys

Cara Mengkompres CSS Blog - Kali ini saya akan memberi tau cara mengkompress css , nah untuk apa kompress css itu , ya buat bikin loading blog semakin ringan aja . Kekurangannya adalah kode yg dempet dempet jadi harus teliti kalo edit Templatenya wkwkwk . Oke langsung saja

Langkah-langkah Mengkompres CSS :

1. Pertama pergi dulu ke http://www.csscompressor.com/
2. Lalu kalian akan melihat seperti ini
    
3. Kemudian pilih compression modenya terserah kalian
4. Masukan CSS dikotak yang tersedia contohnya gini
   
5. Maka akan jadi seperti ini
   

Nah gampang kan? kalo ikutin tutornya pasti gampang :D

Semoga berhasil ya :)

Kali ini saya akan membagikan cara membuat back to top lagi nih ,udah lama ga post udah ganti template aja ya wkwk soalnya bosen template yang kemaren berat , nanti akan saya share dah templatenya :) . Kalo dipost sebelumnya Cara Membuat Tombol Back To Top Dengan Gambar yang efeknya smooth , sekarang saya akan post dengan efek bounce yang saya dapet dari blog Kompi Ajaib dan ada juga kodenya yang dia dapat di Kang Ismet

Berikut langkah-langkahnya :

1. Silahkan copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin>

#BounceToTop {text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:30px;height:20px;border-radius:2px;padding:5px;display:none;}#BounceToTop:before {content:""; position:absolute; bottom:5px; right:5px; width:0; height:0; border-style:solid; border-width:0 15px 20px 15px; border-color:transparent transparent #A6A6A6 transparent; line-height:0;}#BounceToTop:hover:before {content:""; position:absolute; bottom:5px; right:5px; width:0; height:0; border-style:solid; border-width:0 15px 20px 15px; border-color:transparent transparent #464646 transparent; line-height:0 }#BounceToTop:after {content:""; position:absolute; bottom:5px; right:11px; width:0; height:0; border-style:solid; border-width:0 9px 12px 9px; border-color:transparent transparent #D2D2D2 transparent; line-height:0;}

2. Copy kode ini dan simpan di atas kode </body>

<script type='text/javascript'> $(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } }); $('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });</script> 

3. Kemudian simpan kode di bawah ini persis di bawah kode javascript yang dilangkah nomer 2

<div id='BounceToTop'/>

4. Terakhir silahkan save templatenya. Dan tombolnya akan berada di sebelah kanan bawah blog Anda, dan penampakannya seperti pada gambar thumbnail di atas atau pada tombol back to top blog ini (jika tombolnya belum saya ganti lagi hheehehe).

Hai sobat , langsung saja ketopik ya :) . Apa sih peta situs itu? Peta situs atau yang biasa disebut sitemap adalah .... untuk lebih jelasnya ketik ini aja deh XD URLBLOGKAMU/sitemap.xml . Nah isinya apaan tuh? udah tau kan? . Nah terus gimana cara ngirim kegooglenya , berikut langkah - langkahnya :

1. Masuk ke alamat ini www.google.com/webmasters/
2. Pastikan kalian sudah login akun google , lalu pilih "Sign in to Webmaster Tools"
3. Lalu pilih blog kamu
4. Lalu disisi kiri pilih "Perayapan" atau kalo googlenya pake bahasa inggris pilih "Crawl"
5. Pilih "Peta Situs" kalo bahasa inggris "Sitemaps"
6. Nah kan disebelah kanan ada kotak yg merah merah yg bertuliskan "Tambahkan/Uji Peta Situs" kalo bahasa inggrisnya "Add/Test Sitemap"
7. Masukkan kode sitemap.xml di kolom peta situs
8. Lalu klik "Mengirim Peta Situs"
9. Kemudian "Segarkan Halaman"

Hai semuanya :) sekian lama aku menghilang sekarang aku balik lagi , sekarang saya akan membahas Cara Menghilangkan Captcha Pada Komentar Blog . Kadang captcha juga bikkin kesel orang yang mau berkomentar misalkan orang itu mau buru buru eh malah disuruh nulis captcha yang hurupnya aja ga jelas gitu .__. gunanya captcha menurutku cuma buat menghindari orang yang spam diblog kita tapi ga penting penting juga si captcha diblog itu makanya diilangin aja . Yo langsung aja caranya :

1. Login Blogger

2. Masuk ke setelan / setting > Pos dan komentar

3. Kemudian coba lihat gambar ini

Halo sobat .__. udah tau kan gw mau share apa? noh diatas ada :v kalo yg ga tau kebangetan :v :v lagian nih juga kayanya udah pada tau cara bikinnya :3 , udah ah langsung aja

<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
z-index:999999999;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#222; // Edit untuk mengganti warna backgroundnya .
font:normal Dosis, Georgia, Serif;
color:#fff;
border:3px solid #ff0030; // Edit untuk mengganti warna garis tepi widget .
box-shadow: 0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#222; // Edit untuk mengganti warna backgroundnya closenya .
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #ff0030; // Edit untuk mengganti warna garis tepi tombol close .
box-shadow: 0 00 5px #FF0000;
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).bind(&quot;load&quot;, function() {
// Animate Top Value When Page Loaded Completed
$(&#39;#box-message&#39;).animate({top:&quot;50px&quot;}, 1000);
// Remove Mailbox When Close Button On Click
$(&#39;a.close&#39;).click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center><a class='murub'>Tulisan yang muncul</a></center>
<center>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Scairelys/404630929641851&amp;width=292&amp;
height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;
stream=false&amp;header=false&amp;appId=371524026202784' style='border:none;
overflow:hidden; width:292px; height:258px;'/>
</center>
<!-- HTML End -->
<br/>
<div class='twitter'>
<!-- Twitter --> <iframe class='twitterx-follow-button' frameborder='0' scrolling='no' src='http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=ID&amp;link_color=&amp;screen_name=scuiszz&amp;show_count=&amp; show_screen_name=&amp;text_color=' style='width: 250px; height: 20px;' title=''/> </div>
<a class='close' href='#'>x</a>
</div>

4. Simpan template

Bisa lihat demonya DISINI

Keterangan :
- Warna merah = url fanspage
- Warna biru = teks yang akan muncul diwidget
- Warna hijau = username twitter ( tanpa pake @ )

Nah itulah Cara Membuat Like Box Fanspage Melayang Di Blog jika ada yang mau ditanyakan silakan berkomentar

Sumber scriptnya : kamar-rofie.blogspot.com

site:scairelys.com

Ganti teks yang berwarna merah dengan blog sobat

Setelah itu tekan enter , maka akan muncul semua blog sobat
Semoga berhasil

Sumber

#headline {
z-index: 1000;
border-radius: 15px;
position: fixed;
width: 375px;
height: 130px;
background: rgba(41, 41, 43, 0.77);
border: 5px solid #f03;
color:#fff;
top: 100px;
right: -335px;
-webkit-transition:1s;
-moz-transition:1s;
-o-transition:1s;
-ms-transition:1s;
}
#headline:hover{
z-index: 1000;
border-radius: 15px;
position: fixed;
width: 375px;
height: 130px;
background: rgba(41, 41, 43, 0.77);
border: 5px solid #f03;
top: 100px;
right: 0px;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
-ms-transition:0.5s;
}
#headline h2{
font-family: cursive;
letter-spacing:1.5pt;
height: 10px;
width: 210px;
margin-bottom: 0px;
margin-left: -90px;
color:#fff;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
font-size: 14pt;
}
#headline li a:visited{color:#fff;}
#headline li{margin-bottom: 4px;
margin-left: 50px;
border-bottom: 1px dotted #f03;
padding: 0 0 0px 9px;
font-family: cursive;
}

Dan ini HTMLnya taro diatas </body>

<div id='headline'>
<h2>Headline</h2>
    <ul><li><a href='http://galpock.blogspot.com/2013/04/cara-mengetahui-posisi-seseorang-lewat.html'>Cara Mengetahui Posisi Seseorang Lewat Nomor HP</a></li>
<li><a href='http://galpock.blogspot.com/2013/04/cara-memasang-pika-billing.html'>Cara Memasang Pika Billing</a></li>
<li><a href='http://galpock.blogspot.com/2013/06/cara-transfer-uang-tanpa-punya-rekening.html'>Cara Transfer Uang Tanpa Punya Rekening Bank</a></li>
<li><a href='http://galpock.blogspot.com/2013/07/cara-mudah-mengedit-template-blog.html'>Cara Mudah Mengedit Template Blog</a></li>
<li><a href='http://galpock.blogspot.com/2013/06/cara-membuat-blog-seo-100-di-chkme.html'>Cara Membuat Blog SEO 100% Di Chkme</a></li>
</ul>

</div>

*Note :Warna biru : Url postingan yang dituju
Warna merah : Kata kata yang tampil dalam headline tersebut

Nah udah dulu ya cuma segini doang yang bisa saya posting dan demonya bisa diliat diblog ini atau di SINI

Ingat kalau mau copas dikasih sumbernya

*keterangan :
- Import blog : Alat untuk merestore blog / artikel blog
- Ekspor blog : Alat untuk membackup blog / artikel blog
- Delete blog : Ya pasti untuk menghapus blog

1. Login blogger
2. Pilih layout / tata letak
3. Add HTML/Javascript
4. Abis itu langsung aja nih ditusbol kodenya

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" >


var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="URL Gambar Back To Top" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },

    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },

    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },

    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}

scrolltotop.init()

</script>

5. Simpan , dan coba liat blogmu sekarang udah ada apa belom

*Bonus gambar
Animasi :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXoVm-Rp2QP22aKsRgyQDntUkizt25Zjvb3JDW_Pj1Nftw78kl5yEHSEL5chqzgRO_yWjabI1S8Smk4NzpkCI02wKTGOUk_1K6j4HwUfSVDpGhaTbuyjTd2nTNxCON-MyxfhuQpzDbfQ0S/s1600/back+to+top10.gif

Standar :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU5jcvUc_hJvsvieXG1BVbvr4VMiySc6izNRLrCOcfcfK1BVnKG1w-LYnEK-HUNzy0eK0ib5VY7VAcEGSACLkijZOXL_hv_MUKOcsOPYkmp0BXYGTiiIOn4Gs6rTMcXp5pcDQlDE5NH38C/s1600/back+to+top14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisPWcNG5AGooUi7KP5JZUF5On38ZT8kLhZKhKr1MyaqkwGDBolJ_g77HOTjtISo2SzwGOHolgOPFBrjmCLFdqZ38dK-Hrfswf0ojnScErilDKQingSRnwIg-sHKzXAFd6wB9tA0nvH3Vyw/s1600/back+to+top15.png

Selebihnya bisa dicari digoogle ya atau bikin sendiri

Sumber gambar dan script : seociyus blog

Blogging tidak semata-mata hanya menulis teks. Tetapi lebih dari itu. Seorang blogger harus memperhatikan SEO, RSS, Kata kunci, meta deskripsi dan lain-lain. Dia juga melakukan penelitian, membaca blog lain, mendapatkan berita terbaru, mencari foto dan video, tetap berhubungan dengan komunitas penggemar nya di jaringan sosial, dan daftar terus. Semua hal ini memerlukan browser yang bagus. Bukan hanya digunakan untuk browsing. Ada beberapa plugin yang bisa digunakan oleh seorang blogger. Karena Firefox adalah web browser yang paling umum digunakan, posting ini berfokus pada plugin untuk Firefox. Sebelumnya, saya telah menulis tentang Top ekstensi plugin untuk Firefox, dan Top 3 plugin browser untuk web developer. Posting ini, fokus pada plugin untuk Firefox yang dibutuhkan oleh seorang blogger.

SEO Quake

SEO Quake adalah salah satu plugin terbaik untuk blogger. Ini membantu banyak web master dengan hal-hal seperti Search Engine Optimization, Social Media Optimization, dan banyak lagi. Menyelidiki berbagai parameter SEO untuk seperti Google PR, Alexa rank, backlink, kata kunci, Informasi Domain, dll. Hal ini juga membantu dengan promosi internet dari blog Anda, dan banyak lagi.

ScribeFire Next 4.0

ScribeFire Next adalah versi terbaru dari ScribeFire add-on terpopuler. Ini adalah blog editor yang memiliki banyak fitur yang dimasukkan langsung ke dalam browser yang gunakan, dan memungkinkan dengan mudah mempublikasikan artikel baru di blog Anda. Hal ini mendukung hampir semua platform blogging. Berikut adalah daftar dari semua platform yang didukung.

ScribeFire memungkinkan kita untuk membuat, mengedit, memperbarui, atau menghapus posting pada blog. Membuat posting baru, dan mempublikasikan atau menjadwalnya di satu atau beberapa blog, langsung dari satu tampilan. Dengan tampilan yang sangat sederhana juga. Kita dapat mendrag-dan-drop teks dari halaman web, menyisipkan foto, dan banyak lagi!. Dengan tampilan sendiri tidak berdasarkan tampilan dari platform blogging yang digunakan, yang membuatnya lebih mudah untuk mempublikasikan posting dengan konsisten.

FastestFox

Ini adalah plugin berbasis produktivitas. Ini akan membuat browsing yang akan lebih cepat dengan mengurangi tugas yang berulang yang kita melakukan. Misalnya, ketika memilih teks pada halaman Web akan muncul pop up yang memungkinkan kita untuk mencari istilah tersebut di Google. Ini akan memuat halaman web berikutnya yang akan muncul, pada halaman berseris, seperti blog arsip dll.

RSS Ticker

RSS Ticker akan menampilkan Live Bookmarks tepat di layar dengan cara bergulir. Ini akan diperbarui secara otomatis, sehingga tidak harus me-refresh, atau login ke feed reader anda untuk mendapatkan RSS feed.

KGen

KGen adalah singkatan Keyword Generator. Ini adalah tools kecil yang sangat berguna yang memberitahukan apa kata kunci dari situs yang sedang kita kunjungi. Dengan begitu, jika kita mengujungi situs yang mempuntai reputasi dan sesuai dengan niche website kita, kita dapat mempelajari apa kata kunci yang sebaiknya digunakan untuk website yang kita buat.

Adsense Notifier

Ini adalah plugin yang sangat sederhana. Plugin ini terhubung ke account Google AdSense, dan akan menunjukkan berapa banyak pendapatan AdSense yang telah dibuat.

Similar Web

Ini adalah alat yang sangat baik untuk melakukan riset. Ketika mengunjungi sebuah website, memberikan Anda beberapa alternatif, dan halaman web yang mirip dengan halaman web yang anda saat ini.

Xmarks

Plugin ini adalah real time saver! Plugin ini pada dasarnya adalah alat bookmark. Ia menyimpan semua bookmark, tab yang terbuka, dan password. Plugin ini akan menyelaraskan semua hal-hal ini untuk setiap komputer lain yang mungkin kita miliki, jadi jika ketika kita perlu mengganti laptop kita tidak harus kehilangan tap yang telah kita buka, Kita dengan mudah bisa melakukannya! Seperti halnya ketika harddiks mengalami crash, atau jika kita perlu untuk memformatnya, jangan khawatir tentang kehilangan bookmark yang telah kita lakukan. Xmarks dibuat untuk memudahkan kita dalam mengembalikanya!

Greasemonkey

Greasemonkey adalah tool yang dibuat untuk menyesuaikan tampilan pada web. Menggunakan javascripts kecil untuk memodifikasi halaman, sehingga kita dapat menghapus konten yang tidak ingin terlihat.

Gmail Manager

Gmail Manager adalah pemberi notifikasi yang dapat mengelola beberapa account GMail. Plugin ini memberikan pemberitahuan tentang email baru, dan juga dapat mengakses mailbox. Dapat untuk mengirim email, membuka pesan yang diterima, sampah, draft, dan sebagainya.

Ga usah pake basa basi ya langsung to the point aja gw juga udah lama ga post ._. dicobain aja trik simpel ini kebanyakan juga orang udah pada tau jadi jangan dibata ya saya juga masih belajar :(

Langkahnya :

1. Klik kanan ditempat yg kamu mau cari tau CSSnya , contohnya saya klik kanan diheader

Assalamualaikum wr wb ~

Pada kali ini saya akan bagikan Cara Membuat Blog SEO 100% Di Chkme versi Scuiszz-Creation , sebenernya ini tutor yang paling gampang buat gw *hehe sombong , tapi ini SEO hanya di chkme ya kalau yg lain lainnya ga tau dah :v

Kalo masih ga ngerti apa itu seo baca baca dulu yg ini Apa Itu SEO? , dan kalo udah ngerti baca yg ini aja Cara Membuat Blog SEO Friendly Dengan Mudah kalo masih ga ngerti dan belum 100% nih gw masih ada caranya lagi

Ada baiknya backup template dulu sebelum nyoba yg ini karna saya ga tanggung jawab atas kerusakan template atau malah nurun SEOnya :v

1. Perhatikan Meta Tag Kamu
    Nah ini mungkin yang paling penting karna ini yg paling banyak nambah % nya , kalo meta content amburadul jangan harap SEO , diliatnya aja udah ga enak banget :v , mana meta contentnya? nih gw kasih contohnya ya

<title><data:blog.title/> | Shadow Immortal</title>
<meta content='Isi dengan keyword blog kamu' name='keywords'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/></title>
<meta expr:content='data:blog.pagfeName + &quot;, Keyword anda, &quot; + data:blog.pageName' name='Keywords'/>
</b:if>
<b:if cond='data:blog.homepageUrl == data:blog.url'><meta content='Isi dengan deskripsi blog kamu' name='description'/>
<meta content='Isi dengan keyword blog kamu' name='keywords'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>
<meta content='Isi dengan kode verifikasi google kamu' name='google-site-verification'/>
<meta content='Isi dengan kode verifikasi alexa kamu' name='alexaVerifyID'/>
<meta content='Isi dengan kode verfikasi Bing kamu' name='msvalidate.01'/>
<meta content='index, follow' name='robots'/>
<meta content='2 days' name='revisit-after'/>
<meta content='general' name='rating'/>
<meta content='never' name='expires'/>
<meta content='id' http-equiv='Content-Language'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<meta content='Isi dengan nama kamu' name='author'/> 

 Peletakannya dimana? nih gw kasih SSnya biar enak :D

Klik untuk memperbesar
Kalo masih ada yg kurang atau aneh aneh dan salah tambahin aja sendiri ya tuh udah dikasih SSnya atau cari digoogle

2. Header Blog ( Tag h1)
    Header yg gw maksud bukan header yg gambar gambar anime atau apalah yg ga jelas , header yg gw maksud adalah teks header yg kaya gini <h1> ya pokonya tag h1 lah belum tentu header juga si xD dan letaknya juga ga selalu diheader dicocokin aja ditempat yang kamu mau misalnya disidebar nih contohnya yang penting tag h1
Mungkin sekilas kalian liatnya cuma tulisan biasa tapi padahal itu fontnya udah gw kecilin pake CSS
Contoh HTMLnya :

<div class='widget Header' id='Header1'>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
Scuiszz-Creation
</h1>
</div>
</div>
</div>

Taro ditempat yg kamu mau
Contoh CSS :

.titlewrapper{text-shadow:1px 2px 2px rgba (0,0,0,0.5);text-align:left;font-size:10px;color:#ca2f2f;font-family:Passeo One;}

Taro diatas kode ]]></b:skin>

Kalo trik diatas udah dijalani tapi masih belum SEO 100% dicoba pasang widget widget ini ya

3. Pasang Breadcrumb
    Pasti kalian udah pada tau kalo ga tau cari aja digoogle :v

4. Pasang Permalink
    Nah ini juga sama cari aja digoogle

5. Pasang Related Post Atau Artikel Terkait
    Ini juga sama lagi cari aja digoogle 

Kalau udah dicoba semuanya sekarang saatnya cek di chkme.com kalau belum 100% berati FF ( factor face xD )

Nah sekian tutor dari saya kalo ada yang mau nanya nanya silakan berkomentar aja jangan malu malu :v kalo ada yang mau betulin atau ngasih saran juga silakan :v , kalau mau COPAS kasih sumbernya dengan Live Link hargailah gw yg udah ngetik ngetik panjang begini

Udah ya segini aja Bye ~

Hallo all karna saya baru ganti tampilan ke V4 sekarang saya akan bagi bagi tutor Cara Membuat Label Keren , sebenernya juga ini udah banyak yg make tutornya tapi gw post aja dah biar pada tau bagi yg belum tau :D

Untuk screenshotnya kaya gini :


Oke ikutin caranya ya

• Bagi yang belum ada labelnya bikin dulu , caranya

1. Login Blogger
2. Pilih tata letak
3. Add label atau pilih label

• Kalau yang udah ada langsung aja dicoba caranya ini

1. Login Blogger > Template > Edit HTML > Cari kode ]]></b:skin> , gunakan CTRL + F biar gampang
2. Copy kode ini diatas kode ]]></b:skin>

#Label1 .widget-content {background:#1d2124;border-right:5px solid #201e4e;border-left:5px solid #201e4e;}
#Label1 .widget-content li {margin-top: 2px;
margin-bottom:2px;
margin-left:10px;
margin-right:10px;padding: 0px 0px 5px 5px;font-size: 20px;width: 160px;height: 30px;float: left;overflow: hidden;background: #201e4e;border-radius: 0px 0px 0px 0px;text-align: left;line-height: 15px;-webkit-transition:All .9128s ease;-moz-transition:All .9128s ease;-o-transition:All .9128s ease;}
#Label1 .widget-content li:hover {
margin-top: 2px;
margin-bottom:2px;
margin-left:10px;
margin-right:10px;
padding: 0px 0px 5px 5px;
font-size: 20px;
width: 160px;
height: 30px;
float: left;
overflow: hidden;
background: #222;
border-radius: 0px 0px 0px 0px;
text-align: left;
line-height: 15px;-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#Label1 ul li {
font-family: 'Wire one',sans-serif;}

Kalau udah save templatenya

Saya ga bertanggung jawab atas kerusakan template ya inget DO WITH YOUR OWN RISK !! kalau ga tau artinya cari digoogle aja hehe

Sekian tutornya Bye ~~

Halo sobat kali ini saya akan ngepost Cara Membuat Recent Comment Dengan Avatar yang ada dipojok kiri bawah blogku , kalo masih bingung yang mana sekarang saya kasih SSnya aja

1. Compress terdahulu CSS blog anda di http://www.cssdrive.com/index.php/main/csscompressor atau di http://htmlcompressor.com/compressor.html itu sih suka suka kamu aja


2. Ambil kode CSS mu, lalu encrypt di http://tools.irvankadhafi.com/jsencrypt/, Sebelum di encrypt jadikan css mu menjadi HTML seperti ini

<style>Isi CSS blog mu</style>

Jika masih gak ngerti ini aku kasih contohnya. Misalkan css blogmu 

body{background:url(blablabla);font-family:verdana}#wrapper{border:2px solid #000;color:#fff;border-radius:8px}

3. Setelah di encrypt, copy hasil encrypt itu ke notepad, dan simpan dengan format .js  misalnya cssku.js (Bisa juga tanpa format)

4.  Upload file yang disimpan itu ke GoogleCode kalo ga tau cara uploadnya cari aja digoogle banyak

5. Copy link js nya, lalu jadikan linker, seperti ini

<script src='link-js-kamu' type='text/javascript'/> 

6. Setelah itu taruhlah linker tersebut diatas html </head>
7. ^_^ Blog anda sudah terproteksi

Jika ada css yang tidak bekerja setelah anda proteksi, lebih baik css itu tidak usah ikut di encrypt :)

NB : Walaupun kamu sudah memproteksinya seaman-aman pun semuanya tetap bisa dibongkar, tapi cara ini hanya untuk mengakali perbuatan Plagiator agar tidak gampang menyuri css anda ^_^ 

Sumber

Keyword : Dampak Negatif Mengambil Template Blog Orang Lain, Akibat Buruk Mencuri Kode HTML Blog Orang Lain, Resiko Mencuri Template Orang Lain.

Sumber Artikel : http://anonymous-bunshin.blogspot.com/2013/02/bahaya-dampak-mencuri-template-blog.html