Lastest Articles

Showing posts with label TUTORIAL. Show all posts
Showing posts with label TUTORIAL. Show all posts

Wednesday, July 16, 2014

Cara Membuat Pesan diatas Kotak Komentar

0 komentar
Cara Membuat Pesan diatas Kotak Komentar - Menambahkan atau membuat pesan komentar diatas kotak komentar memang sangat bagus dan penting untuk mengingatkan para komentator blog, baik itu peraturan berkomentar ataupun larangan berkomentar. Menambahkan pesan komentar pada blog sangat cocok bagi blog yang memiliki komentar yang banyak dan ini bisa dijadikan sebagai pengingat kepada para komentator blog kita tentang aturan berkomentar pada blog kita.

Membuat pesan komentar diatas form komentar terkadang ada sedikit kendala terutama ketika sebelum ada komentar pada sebuah artikel dan sesudah ada komentar pada sebuah artikel, kendala atau masalah yang sering dialami adalah ketika artikel belum ada yang berkomentar ternyata pesan komentar masih ada diatas kotak atau form komentar, tetapi ketika artikel tersebut sudah ada yang berkomentar maka pesan komentar pindah jadi dibawah kotak atau form komentar, inilah kendala atau masalah yang sering dialami oleh para Blogger, dan pada kesempatan kali ini blog Downloadakan membuat artikel mengenai tutorial membuat pesan komentar diatas kotak komentar sekaligus membahas mengenai mengatasi pesan komentar menjadi dibawah kotak komentar.

Dalam pembahasan kali ini saya akan sekaligus memodifikasi kotak pesan komentar sehingga lebih terlihat bagus lagi dan lebih cantik lagi dengan ditambahkan beberapa kode CSSkedalamnya. Tidak hanya kode CSS saja yang ada didalamnya tentu didampingi dengan kodeHTML yang menjadi foktor utama dalam pembahasan membuat pesan komentar diatas kotak komentar. Oke langsung saja lihat tutorial cara membuat pesan komentar diatas kotak atau form komentar dibawah ini :


Cara Membuat Pesan diatas Kotak Komentar 1 - Ficri Pebriyana

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode seperti ini ]]></b:skin>
4. Copy kode CSS dibawah ini, lalu Paste diatas kode ]]></b:skin>

/*Pesan Komentar*/

#threaded-comment-form p {

    position: relative;

    background: #666;

    border: 3px solid #000;

    padding: 10px;

    font-size: 11px;

    line-height: 1.6em;

    color: #fff;

    margin-top: 10px;

    font-size: 11px;border-radius:2px;

    }

#threaded-comment-form p::after, #threaded-comment-form p::before {

    top: 100%;

    border: solid transparent;

    content: " ";

    height: 0;

    width: 0;

    position: absolute;

    pointer-events: none

    }

#threaded-comment-form p::before {

    border-top-color: #000;

    border-width: 15px;

    left: 10%;

    margin-left: -35px;

    }

#threaded-comment-form p::after {

    border-top-color: #666;

    border-width: 10px;

    left: 10%;

    margin-left: -30px

    }
5. Cari kode seperti ini <p><data:blogCommentMessage/></p> biasanya ada 4 kode.
Mungkin hasilnya akan seperti ini :


<p><data:blogCommentMessage/>

</p><data:blogTeamBlogMessage/>

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
7. Lalu tambahkan kode berikut :

<div id='threaded-comment-form'>

KODE PERTAMA

</div>
8. Hasilnya akan seperti ini :

<div id='threaded-comment-form'>

<p><data:blogCommentMessage/></p>

<data:blogTeamBlogMessage/>

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

</div>
Catatan :
- Silahkan lakukan pada kode ke 2 dan kode ke 4 dari hasil pencarian kode 
<p><data:blogCommentMessage/></p>
- Kode ke 2 agar pesan komentar muncul sebelum ada komentar
- Kode ke 4 agar pesan komentar muncul setelah ada komentar

9. Cari kode sperti dibawah ini :


document.getElementById(domId).insertBefore(replybox, null
Lalu ganti dengan kode dibawah ini :

document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);
10. Klik Simpan Template.


Proses modifikasi tampilan pesan komentar dan mengatasi pesan komentar yang muncul dibawah kotak komentar sudah selesai, sekarang tinggal tambahkan pesan komentar. Caranya seperti dibawah ini :
1. Masuk ke Blogger.com
2. Klik Setelan => Pos dan Komentar
3. Klik Tambahkan
4. Silahkan masukkan pesan komentar Anda
5. Klik Simpan Setelan

Cara Membuat Pesan diatas Kotak Komentar 2 - Ficri Pebriyana

more.

Sunday, July 13, 2014

Membuat Daftar Isi Dengan label Tertentu

0 komentar
  1. Login ke halaman blogger
  2. Masuk ke menu "Tata Letak"
  3. Klik Tambah Gadget >> Pilih HTML/JavaScript
  4. Masukkan Kode di bawah ini dan SIMPAN

<script style="text/javascript">
      var numposts = 5;
      var standardstyling = true;
</script>
<script type='text/javascript' src='http://coepoe.googlecode.com/files/label.js'></script>
<ul><script src="http://darmawaninnodderz.blogspot.com/feeds/posts/default/-/GAME?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></ul>
Catatan :
Perhatikan text yang berwarna Merah :

  • var numposts = 5, Angka 5 menunjukkan jumlah posting, bisa di ganti maksimal 999
  • darmawaninnodderz.blogspot.com, Silahkan ganti dengan blog atau domain sobat
  • GAME, Adalah contoh Nama Label, silahkan ganti dengan label yang ingin sobat tampilkan sebagai daftar posting. 
Bagaimana sobat ? - sangat mudah bukan ?
Demikian tutorial dari Blogger Coepoe, Bagaimana Tip Membuat Daftar Posting Berdasarkan Pengelompokan Label. Selamat mencoba, semoga bermanfaat.

Salam Persahabatan,
more.

Cara Membuat kotak Komentar Menarik dan bagus dalam Blog

0 komentar
Cara Membuat kotak Komentar Keren Blog Menjadi Menarik,Pengunjung Tutorial Blog | Tips BLog Kali ini melanjutkan postingan sebelumnya Cara Membuat Kotak Komentar Blog Keren, merupakan request dari teman blogger aguz. Kronolologi Komentar ini Sebelum nya saya tertarik dengan komentar blogmate om-dayz sempat bingung bagaimana membuat kotak komentar, akan tetapi dengan usaha akhirnya bisa juga.
Ini Priview nya



Login ke akun blogger dan masuk ke Edit HTML

Untuk berjaga-jaga, ada baiknya jika kita backup dulu template kita, siapa tau ada kesalahan yang tak terdugaCentang "Expand Widget HTML" ( bila perlu )
Kemudian copy semua kode berikut ini tanpa terkecuali agar berhasil di atas code ]]></b:skin> 


/* CSS Komentar */ #form-wrapper {margin-top:20px;} #comments{overflow:hidden;} .comments {clear: both;padding: 20px 30px 30px;margin: 10px 0px;background: none repeat scroll 0% 0% rgb(34, 34, 34); border: 1px solid rgb(51, 51, 51);box-shadow: 0px 0px 3px black inset;color: white;} #comments h4{display:block;padding:5px;line-height:30px} #comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative} #comments h4{background:rgba(255, 0, 0, 0.2); text-align:center;} #comments h4,.comments .user a{font-size:14px} #comments h4{font-weight:normal;color:#fff} #comments h4:after{content:"";position:absolute;bottom:-10px;left:20px;width: 0px;height: 0px;border-style: solid; border-width: 10px 7.5px 0 7.5px;border-color: rgba(255, 0, 0, 0.2) transparent transparent transparent;line-height:0} h4#comment-post-message {display:none} #comments .avatar-image-container img {border: 0px none; padding: 0px;box-shadow: none;border-radius: 30px;-webkit-border-radius:30px;-moz-border-radius:30px;} .comments .comments-content .datetime { float: right; font-size: 10px; margin-right:4px} .comments .comments-content .comment:first-child {padding-top: 0px;} .comments .thread-toggle { display: none;} .comments .comment .comment-actions a {padding: 2px 10px;background: rgb(51, 51, 51);border: 1px solid rgb(70, 70, 70);position: absolute;box-shadow: 0px 1px 2px black;color:rgb(230, 230, 230);-webkit-transition: all .05s linear;-moz-transition: all .05s linear;-o-transition: all .05s linear;transition: all .05s linear;} .comments .comment .comment-actions a:hover {background: none repeat scroll 0% 0% rgb(40, 40, 40);border: 1px solid rgb(51, 51, 51);text-decoration: none;box-shadow: 0px 0px 1px black;} .comment-thread{color:rgb(230, 230, 230); font-size:13px;} .comment-thread a{color:#777} .comment-thread ol{margin:0 0 20px} .comment-thread .comment-content a, .comments .user a, .comments .comment-thread.inline-thread .user a {color: rgb(230, 230, 230);font-weight: bold;font-size: 13px;text-shadow: 1px 1px rgb(0, 0, 0);} .comments .avatar-image-container, .comments .avatar-image-container img {width: 45px;max-width: 100%;height: 45px; max-height: 100%;margin: 0px 0px 3px;vertical-align: middle;border: 1px solid rgb(51, 51, 51);padding: 4px;box-shadow: 0px 1px 2px black;background-color: transparent;background-clip: content-box;transition: all 0.5s ease-out 0s;border-radius: 30px 0px 0px 30px;-webkit-border-radius:30px 0px 0px 30px;-moz-border-radius:30px 0px 0px 30px;overflow:hidden;} .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:58px} .comments .comment-block{ border: 1px solid rgb(51, 51, 51);padding: 6px;background: none repeat scroll 0% 0% rgb(40, 40, 40);box-shadow: 0px 1px 2px black;position: relative; transition: all 1s ease-out 0s;} .comments .comments-content .comment-header {margin: 2px 0px 0px; padding: 5px 10px 7px; border: 1px solid rgb(65, 65, 65);background-color: rgb(51, 51, 51); word-wrap: break-word; } .comments .comments-content .comment-content {margin: 2px 0px 10px; padding: 5px 10px 7px; border: 1px solid rgb(65, 65, 65);background-color: rgb(51, 51, 51); word-wrap: break-word; } .comments .comments-content .comment{margin:20px 0 0;padding:0;width:100%;line-height:1em} .comments .comments-content .comment-thread {margin: 20px 0px;} .comments .comments-content .icon.blog-author{display:block; width:0; height:0; border:13px solid transparent; border-right-color:rgba(255, 0, 0, 0.1); position:absolute; right:-1px; bottom:4px;animation:author-icon .9s infinite;-moz-animation:author-icon .9s infinite; -webkit-animation:author-icon .9s infinite; } .comments .comments-content .inline-thread{padding:0 0 0 20px} .comments .comments-content .comment-replies{margin-top:0} .comments .comment-content{padding:5px 0;line-height:1.4em} .comments .comment-thread.inline-thread{border-left: 1px solid rgb(20, 20, 20);background: none repeat scroll 0% 0% transparent;box-shadow: -1px 0px 0px rgb(51, 51, 51);} .comments .comment-thread.inline-thread .comment{width:auto} .comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0} .comments .comment-thread.inline-thread .comment-block{margin-left:48px} .comments .comment-thread.inline-thread .user a{font-size:13px} .comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px} .comments .continue{border-top:0;width:100%} .comments .continue a, .comments .comments-content .loadmore a {background: none repeat scroll 0% 0% rgb(40, 40, 40); font-size: 16px;font-weight: normal;color: rgb(255, 255, 255);padding: 10px 0px;text-align: center;box-shadow: 0px 1px 2px black; text-transform: capitalize;text-shadow: 1px 1px rgb(0, 0, 0);-webkit-transition: all 0.26s ease-out 0s;-moz-transition: all 0.26s ease-out 0s;-o-transition: all 0.26s ease-out 0s;transition: all 0.26s ease-out 0s;border: 1px solid rgb(59, 59, 59);} .comments .continue a:hover, .comments .comments-content .loadmore a:hover{box-shadow: 0px 0px 1px black;} .comments .continue a:active, .comments .comments-content .loadmore a:active{box-shadow: none;background:rgb(70, 70, 70);} .comments .comments-content .loadmore {margin-top:0px;} .comment .continue{display:none} #comment-editor{width:103%!important;} .comment-form{width:100%;max-width:100%;margin-top:20px;}
Kemudian simpan dan lihat hasilnya….!Semoga sesuai keinginan ya…! Kalau gak berhasil, wah keterlaluan, Cuma copas script doank gak bisa… :D hehehe
more.

Cara membuat Komentar Reply Pada Blog

0 komentar
Akhirnya langsung saja saya pasang saat itu juga. Karena jika tidak dipasang maka komentar "tanya jawab" antara admin dan visitor akan saling berjauhan. Sehingga pembaca lain tidak bisa memetik informasi dari komentar tanya jawab atau komentar bersambung tersebut.



Oke, Caranya:

1. Login ke dasbor blogger anda, lalu langsung menuju HTML template seperti biasanya.

2. Cari kode berikut ini;

<b:include data='post' name='comments'/>

3. Ganti kode tersebut dengan kode berikut ini;


<b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if>

4. Terakhir klik Preview, jika oke klik Simpan Template.

Selesai. Mudah bukan?

Keterangan;

Jika kode <b:include data='post' name='comments'/> ada dua, maka ganti kode yang dibagian bawah.

Begitulah, semoga bermanfaat.
more.

Saturday, July 12, 2014

Cara membuat Breadcrumbs/ Anak Panah di Blog

0 komentar


Cara membuat Breadcrumbs di Blogspot / Blogger
Login di Blogger
Pilih Template
Pilih Edit HTML (lebih baik back up template dulu untuk menghindari kesalahan)
Centang Expand Widget Templates
Kalau sebelumnya anda sudah memasang breadcrumbs silahkan dihapus dulu kode breadcrumb yang lama
Kemudian cari kode ]]></b:skin>
Copy kode di bawah ini dan paste tepat di atas kode ]]></b:skin>

.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}

Kemudian cari kode <b:includable id='main' var='top'> gunakanlah CTRL+F untuk mempermudah pencarian
Ganti kode <b:includable id='main' var='top'> dengan kode yang dibawah ini


<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
Terakhir simpan template anda dan navigasi breadcrumbs akan siap di index Google
more.

Friday, July 11, 2014

Cara Menampilkan Rating Bintang di Hasil Pencarian Google

0 komentar
Cara Menampilkan Rating Bintang di Hasil Pencarian Google, Cara membuat richsnippets, Cara membuat rich snippets - Setelah sekian lama mencari artikel tentang cara menampilan rating star di hasil percarian google, akhirnya ane dapat juga tutorialnya. Caranya sangat mudah dan berbeda dengan tutorial lain yang pernah saya coba sebelumnya yang tentuhnya nggak berhasil, entah mungkin karna masalah template atau apalah ..ane nggak tahu..

Untuk bisa menampilkan rating bintang ini, sobat terlebih dahulu harus memiliki akun di google plus dan sudah harus terhubung dengan blog sobat dengan cara mengklaim sebagai kontributor untuk blog sobat tersebut. Masih bingung? Khusus yang belum punya akun di google plus, entar akan ane posting tutorialnya.

Sekedar tambahan, rating bintang ini nantinya akan dimunculkan di hasil pencarian untuk artikel - artikel blog sobat terutama artikel yang baru diposting sesaat setelah mengikuti dan memasang ratting bintang di tutorial kali ini..

Cara Menampilkan Rating Bintang di Google
1. Login ke akun blog sobat2. Klik Rancangan --> Edit HTML --> Centang kotak kecil di samping tulisan Expand Template widget
3. Letakkan kode berikut tepat diatas kode <b:skin><![CDATA[/*
<b:if cond='data:blog.url == data:blog.homepageUrl'><link href='https://plus.google.com/112092088130426761224' rel='publisher'/>
</b:if>
catatan:
ganti angka berwarna
biru dengan Url google plus milik sobat.

4. Kemudian letakkan kode berikut sesudah kode <body>
<div><div itemscope='' itemtype='http://data-vocabulary.org/Review'>

dan tag penutup </div></div> sebelum tag penutup </body>

5. Cari kode
<data:post.body/> dan letakkan kode berikut tepat dibawahnya.

Description: <span itemprop="description"><data:post.title/></span>
Rating: <span itemprop='rating'>4.5</span>
Reviewer: <span itemprop='reviewer'><data:post.author/></span> -
ItemReviewed: <span itemprop='itemreviewed'><data:post.title/></span>
Tambahan:Kode <data:post.body/> akan berjumlah 2 jika sobat telah memasang readmore, pilih kode yang ke 2.
6. Klik save dan lihat hasilnya. Cek Disini http://www.google.com/webmasters/tools/richsnippets?
more.

Cara untuk mempercepat loading blog

0 komentar
Cara untuk mempercepat loading blog memang banyak, Akan tetapi menurut saran kami dalam mempercepat loading blog jangan menggunakan script mempercepat loading blog, saya memang menganjurkan kepada anda agar tidak menggunakan script mempercepat loading blog karena selain script itu mengurangi nilai SEO terhadap blog anda, juga akan memperbanyak ukuran dari template yang anda gunakan serta script mempercepat loading blog ini belum tentu cocok dengan dengan kode-kode yang anda pasang pada template anda. Benarkah? Saya sendiri tidak yakin jika script ini tidak cocok karena saat saya menemukan kode ini diberbagai blog, para pemilik blog yang menuliskan script ini mengatakan jika ada beberapa template yang tidak mendukung atau tidak bekerja pada script mempercepat loading blog ini

Mempercepat loading blog atau blog yang ringan merupakan salah satu faktor utama yang akan mempengaruhi trafik pengunjung. Karena pengunjung kebanyakan tidak ingin menunggu lamanya loading tersebut untuk dapat membaca artikel blog anda, dan efek bounce yang tinggi pula akan selalu menghantui blog tersebut. Hal inilah penyebab para blogger melakukan berbagai upaya untuk meningkatkan kecepatan loading blog atau pun meringankan blognya. Saya kira ukuran loading suatu blog dapat dikatakan cepat apabila mendapat nilai minimal 80 bila menggunakan indikator pengukuran bagian desktop darihttp://developers.google.com/speed/pagespeed/insights/, jika kurang dari 80 maka bisa dikategorikan lambat dan harus ada upaya lebih lanjut agar dapat mencapai angka tersebut. Nah melalui postingan kali ini saya akan berbagi cara mempercepat loading blog diantaranya adalah :

A. Cara Mempercepat Loading Blog dengan Menggunakan CSS CompressorKompress lah CSS blog anda baik secara manual maupun secara otomatis, Secara manual tentunya anda harus lebih teliti memilah mana yang dapat dirangkum dan mana yang berdiri sendiri, Jadi saran saya gunakan saja tool yang telah banyak disediakan diberbagai situs. Sebagai contoh sobat bisa menggunakan http://www.csscompressor.com, http://cssoptimiser.com, http://imabblog.com/cssoptimizer/compress.html, http://tools.arantius.com/css-compressor, http://www.cssdrive.com/index.php/main/csscompressor
Langkah Kompres Template Blog
Blog atau website yang kita miliki mempunyai Loading yang Ringan dan ini akan memicu setiap pengunjung yang masuk ke halaman Blog/website Anda tidak kelamaan menunggu tampilan blog anda terbuka dengan sempurna. Terkadang kita juga suka bertanya-tanya apa sih yang membuat Blog/Website Loadingnya Lama? salah satu Faktor penyebabnya ialah karena terlalu banyak kode-kode HTML yang di pasang di blog.

Sebagai gambaran saja untuk memulai melakukan kompres HTML
Login dulu ke Blogger anda
ke rancangan
Edit HTML
Untuk berjaga-jaga download terlebih dahulu template anda
Copy semua Kode HTML template,(gunakan Ctrl+A agar lebih cepat)
Buka halaman Text Fixer ( http://www.textfixer.com/html/compress-html-compression.php )
perhatikan gambar di bawah ini dan ikuti langkah-langkahnya
Centang "Don't compress HTML head of document", lalu lik Compres HTML. Maka kode script HTML hasil kompresan akan muncul di bawahnya. Lalu copy kode tersebut dan pastekan di HTML Template anda tadi untuk mengganti kode HTML Template yang lama secara keseluruhan.











8. simpan template (lihat perbedaanya)


sebenarnya ada banyak layanan yang menyediakan KOmpres Kode HTML

http://cssoptimiser.com
http://mabblog.com/cssoptimizer/compress.html
http://tools.arantius.com/css-compressor
http://iceyboard.no-ip.org/projects/css_compressor
http://www.cssdrive.com/index.php/main/csscompressor

B. Cara Mempercepat Loading Blog dengan Memperkecil Ukuran Gambar Sudah pastilah bahwa ukuran gambar yang besar dalam parameter pixel ataupun kbyte akan menambah berat loading blog. Sobat blogger bisa mengurangi kualitas gambar sebagai salah satu cara tersebut ataupun sobat blogger bisa kompress gambar tersebut. Jadi usahakanlah ukuran file gambar atau foto yang digunakan sekecil mungkin.

C. Mempercepat Waktu Loading Blog dengan Meletakkan Script pada akhir editor templateWalaupun tidak semua script bisa diletakkan pada akhir, upayakanlah bagian script lebih diperioritaskan untuk diletakkan pada bagian akhir halaman edit template tersebut, karena pada bagian ini akan dibaca oleh browser jika bagian lain sudah selesai diproses..

D. Mempercepat Loading Blog dengan tidak mengulangi upload gambar yang samaGunakanlah Url gambar yang sama untuk dipakai berulang ulang jika memang diperlukan, tetapi jangalah mengupload gambar yang sama dengan alamat baru. Misalnya suatu gambar mempunyai alamat seperti :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJCZBZW3NYLTsdvdTihuHGsqFEteZ_1VioJcLBDz_RYiDmXn5mNiJB6E7NBd4m4IC1eaqawif0VvrR5y8HDuJeWR9MVOfzelinHIQn3OM2VTwav-q-vwkNZaisDdlSTAokKgvkpH26Ing/s1600/lagu.jpg
dan sudah digunakan pada suatu artikel blog kita, maka bila ada postingan lain yang menggunakan gambar yang sama maka sebaiknya menggunakan kembali alamat tersebut.

E. Meringankan blog dengan menghindarkan iklan yang berlebihanSeperti yang kita ketahui bahwa iklan selalu menggunakan gambar dan script, jadi usahakanlah jangan menambah iklan yang akan memperburuk waktu loading blog anda, Semakin sedikit iklan yang tampil di blog semakin menambah ringan suatu blog. Jikalau berkenan tidak ada iklan tentu akan lebih cepat lagi.

F. Mempercepat Loading Blog dengan tidak menggunakan background gambarBackground gambar sudah pasti lebih menarik dari pada background berupa warna saja bukan ?, Tetapi background gambar akan menambah lemot loading blog sobat, jadi sebaiknya ganti saja dengan background berupa warna jika anda menginginkan tambahan kecepatan loading tersebut. Jika anda belum tahu cara mengganti background bisa membaca artikel Daftar Kode warna background blog dengan warna

G. Mempercepat Loading Blog dengan membuang widget tertentuBuanglah widget yang tidak perlu, maksud saya adalah widget yang akan mempengaruhi jalannya loading blog sobat, misalnya saja widget jam, widget kalender, widget translate dan lain lain.

H. Mempercepat loading blog dengan CSS SpritesCara ini memang memerlukan suatu pengetahuan ataupun keahlian yang cukup agar kita dapat menggabungkan beberapa gambar ke dalam satu gambar. Agar pemanggilan gambar tersebut tidak serta merta menjadi berulang ulang yang tentunya akan memakan waktu loading. Karena setiap image akan selalu menggunakan ektra request http. Saudara bisa mencoba untuk menggunakan SpriteMe dengan mengunjungi situs http://spriteme.org.

I. Meringankan loading blog dengan LazyloadAda juga yang menambah kecepatan loading dengan menguunakan script lazyload, lazyload akan menunda loading gambar dengan mengutamakan script terlebih dahulu, sehingga seoalh-olah berjalan dengan lebih cepat. Dan anda bisa mencoba untuk meletakkan kode script di bawah ini di atas kode </head>, jika dirasakan tidak ada perubahan pada loading anda, maka ada baiknya dilepaskan lagi script tersebut.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/><script src='http://googledrive.com/host/0B2fPWv1fLnEnSjZSNUdIaXhscEk' type='text/javascript'/><script type='text/javascript'> $(function() { $(&#39;img&#39;).lazyload({ placeholder : &quot;http://2.bp.blogspot.com/-sJ-tZahntLI/T9coeqmdqMI/AAAAAAAADUQ/ztxIT1Fht4g/s1600/grey.png&quot;, effect : &quot;fadeIn&quot;, threshold : 100 }); });
</script>Jika di blog anda sudah ada jquery maka hapus <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/> di atas, dalam 1 blog hanya boleh ada 1 jquery.

Itulah sedikit pembahasan cara mempercepat loading blog, karena selain cara cara di atas masih banyak cara lain yang dapat digunakan yang tentunya selalu berkembang setiap saat, harapan saya semoga artikel ini dapat memberikan sedikit manfaat untuk blog anda.
Itulah sedikit pembahasan cara mempercepat loading blog, karena selain cara cara di atas masih banyak cara lain yang dapat digunakan yang tentunya selalu berkembang setiap saat, harapan saya semoga artikel ini dapat memberikan sedikit manfaat untuk blog anda.
more.

Cara Memasang Tanda Tangan di Blog

0 komentar
Cara Memasang Tanda Tangan di Blog - Apa kabar sobat blogger! Senang di pagi yang cerah ini saya kembali menyapah sobat blogger... Hmmm. sekedar info, mungkin beberapa hari kedepan ane tak mungkin ngapdet posting serutin ini jadi kali ini saya akan kasih tutorial cara memasang tanda tangan dengan selengkap - lengkapnya.
Pada postingan sebelumnya kita telah membahas tentang Membuat menu accroding di Blog , dan kali ini setelah sekain lama tersimpan di draft akhirnya artikel ini di Poskan dengan judul Cara Bikin Tanda Tangan di Blog. Mungkin di antara sobat blogger sudah pernah melihat hiasan yang satu ini, biasanya diletakkan di bagian bawah postingan yang semakin menegaskan bahwa sobat adalah pemilik resminya. Bagi sobat yang tertarik, silahkan ikuti tutorial berikut.
Cara Memasang / Membuat Tanda Tangan di Blog
1. Kunjungi situs http://mylivesignature.com
2. Klik pada tombol bertuliskan Proceed untuk membuat tanda tanda tangan tanpa perlu registrasi.
3. Setelah itu, klik tulisan Using the signature creation wizard.
4. Silahkan masukkan nama sobat di kotak yang di sediakan dan klik Next Step
tanda tangan
5. Pilih jenis huruf yang di inginkan dan klik Next Step. 
6. Setelah itu, tentuhkan ukuran tanda tangan yang di inginkan dan klik next step.
tanda tangan
7. Kemudian sobat akan melihat tampilan seperti berikut yang bertanda bahwa tanda tangan sobat akan segera jadi. Pilih warna background dan warna tanda tangan yang di inginkan.
Tambahan :
Untuk warna background direkomendasikan menggunakan background ( latar ) transparan agar nantinya cocok dengan semua warna.
8. Atur kemiringan ( slope ) teks dan klik Next Step
tanda tangan
9. Nah dengan demikian maka tanda tangan online sobat telah berhasil dibuat.
Membuat Tanda Tangan di Blog
Tambahan :
Klik Copy Image Location untuk mengambil URL gambarnya
Klik Save Image As untuk mendownload Tanda Tangannya.
Beginilah hasilnya
Membuat Tanda Tangan di Blog
more.

Tuesday, July 8, 2014

Cara Membuat Judul Blog Bergerak

0 komentar
Cara Membuat Judul Blog Bergerak - Cara membuat marquee pada judul blog atau cara memodifikasi judul blog agar bisa bergerak dan berjala n. Beberapa waktu lalu saya sudah posting artikel tentang cara membuat random post di blog , dan kali ini saya akan posting artikel yang sejenis tapi beda dan penerapannya kali ini ini pada judul blog dengan judul artikel cara membuat judul blog bergerak. Judul / Title blog secara default, berada dalam kondisi statis. Namun, kita bisa memberikan efek pada judul blog kita dengan kode JavaScript, sehingga bisa bergerak dari kanan ke kiri. Langsung saja berikut ini cara memodifikasi judul blog agar bisa bergerak dan berjalan - Judul blog berjalan :


Login ke dashbor blog sobat.
Klik Tata Letak >> Tambah Gadget >> Pilih HTML / Java Script.
Copy dan paste code berikut di HTML / Javascript

<script language=javascript>msg = "Test Blog ...Test Blog ...";
msg = "..." + msg;pos = 0;function scrollMSG() {document.title = msg.substring(pos, msg.length) + msg.substring(0, 
pos);pos++;if (pos > msg.length) pos = 0window.setTimeout("scrollMSG()",200);}scrollMSG();</script>


Note: Ganti 'Test Blog ...Test Blog ...' dengan teks yang diinginkan. Save/Simpan, dan lihat hasilnya.
Saya kira cukup penjelasan mengenai cara membuat judul blog bergerak kali ini. Semoga bermanfaat.
more.

PASANG FOLLOW TWITTER DI BLOG

0 komentar


Cara Memasang Tombol Follow Twitter di Blog - Cara membuat/menambah tombol follow twitter di blog atau cara membuat/menambah twitter follow button di blog.

Twitter merupakan salah satu jejaring sosial yang cukup banyak peminatnya, oleh karena itu tak heran jika banyak orang telah menggunakan twitter untuk berbagai keperluan, misalnya memasarkan produk, mencari pelanggan, tukar pengalaman, dan lain sebagainya. Dan kita sebagai blogger pun harus mampu memanfaatkan jejaring sosial yang satu ini untuk mengoptimalkan traffic di blog kita. Bagaimana caranya? Oke langsung saja jelaskan sedikit. Bila kita sudah punya banyak follower, lalu setiap update posting artikel blog kita kita masukkan di twitter, maka tentu artikel kita tersebut akan bisa dilihat banyak orang dan pastinya akan banyak yang tertarik yang mengunjungi blog kita. Selain dengan cara tersebut, kita juga bisa menambah follower twitter kita dengan cara memasang tombol follow twitter di blog kita. Jadi setiap pengunjung yang tertarik untuk mengikuti kita di twitter bisa langsung mengklik tombol ini dan dia otomatis menjadi follower kita. Lantas bagaimana caranya? Mudah saja, silahkan ikuti cara membuat twitter follow button di blog - Membuat icon follower twitter di blog berikut ini:

1. Silahkan masuk ke akun blog kalian


2. Copy kode di bawah di bagian blog mana saja, terserah sobat, misalnya di header, sidebar, footer atau yang lainnya.


<a href="https://twitter.com/baim_melodick" class="twitter-follow-button" data-show-count="false">Follow @baim_melodick</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
more.

Cara Membuat Efek Salju di Blog

0 komentar


Cara Membuat Efek Salju di Blog - Cara menambah/menciptakan efek salju di blog - Memasang efek blog.
Membuat efek salju merupakan salah satu langkah yang bisa kita lakukan untuk menghias dan mempercantik blog kita. Kita juga bisa mempercantik blog kita dengan mengubah kursor penunjuk di blog dengan penunjuk yang unik dan beda dengan yang lain. Oke, langsung saja berikut cara menciptakan efek salju di blog kita:

1. Login pada blog sobat.

2. Klik Tata Letak >> Tambah Gadget >> Pilih HTML/Java Script. 

3. Copy code script dibawah dan paste di kotak tadi , untuk judulnya kosongkan saja.

<script src="http://ayriyzone.googlecode.com/files/salju.js"></script><a href ="http://www.seowaps.com/"target ="_blank ">seowaps</a>

Simpan Template

postingan mengenai cara membuat efek salju di blog. Semoga bermanfaat
more.

Cara Memasang Scroll pada Kotak Komentar

0 komentar
Cara Memasang Scroll pada Kotak Komentar - Cara agar komentar blog bisa menjadi scroll atau cara membuat/menjadikan kotak komentar menjadi scroll. Cara Membuat Scroll Pada Kotak Komentar - Kita semua pasti tahu apa fungsi scroll, yaitu untuk menghemat pemakaian ruang pada blog terutama tinggi suatu elemen widget. Selain itu, untuk menghemat tempat di blog kita, kita juga bisa membuat tab view di blog kita. Baca: cara membuat efek salju di blog. Oke lanjut.. Saya akan berbagi tips bagaimana cara agar komentar blog bisa menjadi scroll - Membuat scroll komentar blog. Kadang kala,sebagian blogger memilih untuk tidak memasang scroll pada kotak komentar agar terlihat ramai dan pengunjung terkesan "waahh" seperti blog saya ini...hehehe. Tetapi sebagian blogger lain memilih untuk menggunakan Scroll Pada Kotak Komentar agar blognya terlihat lebih rapi dan tertata. Scroll Pada Kotak Komentar juga dapat dilakukan pada threaded coment,tapi caranya berbeda-beda. Langkah dibawah ini adalah Cara Membuat Scroll Pada Kotak Komentar biasa. Untuk membuat scroll pada threaded comment ada dibagian akhir postingan ini.
  1. Login ke akun blogger sobat.
  2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).
  3. Setelah itu sobat cari kode seperti ini #comments-block{
  4. Kalo sudah ketemu kemudian ganti dengan kode CSS dibawah ini untuk membuat fungsi Scroll Pada Kotak Komentar.
#comments-block{max-height:300px;border:1px solid #eee;overflow:auto;
Langkah terakhir save. Sekarang sobat lihat hasilnya.
Kalo setelah disave tidak bisa maka gunakan cara ke dua yaitu cari kode #comments h4.Setelah itu letakkan kode dibawah ini tepat diatas kode #comments h4

#comments {height:200px; overflow:auto; }
 Penjelasan: 
max-height:300px (Tinggi maksimal kotak komentar)
border:1px solid #eee (Ketebalan garis border solid,dan warna border)
overflow:auto (Jika sudah melebihi batas 300px,maka scroll akan berfungsi (akan muncul) 


Sekarang kita mencoba untuk membuat scroll pada Threaded Coment.Caranya hampir sama dengan diatas.Pada langkah ke-3 diatas.Sobat harus mencari kode seperti ini.


<div class='comments' id='comments'>

Biasanya selama ini yang saya alami saya menemukan dua kode semacam itu.Jadi,ganti ke-2 kode tersebut dengan kode berikut.

<div class='comments' id='comments' style='max-height:300px;overflow:auto;'>

Saya jamin pasti berhasil.Karena semuanya sudah saya uji. hehehehe. Dan semoga postingan cara memasang scroll pada kotak komentar ini bisa bermanfaat buat sobat..

more.
Credits