tips-trik

Tampilkan postingan dengan label tips-trik. Tampilkan semua postingan

Blog Blogging, memasang HTML Optimizer

Blog Blogging pada kesempatan kali ini ingin berbagi tutorial tentang memasang HTML Optimizer di blog, yang mana tool ini sangat bermanfaat untuk membantu kita dalam upaya mengkompress kode-kode CSS maupun HTML template blog dalam rangka upaya meningkatkan kecepatan proses loading sebuah blog yang saat ini telah menjadi sebuah kebutuhan bagi seorang blogger yang ingin agar blognya menjadi berkembang serta dapat memperoleh posisi yang bagus pada SERP.

Tool HTML Optimizer ini selain dapat kita gunakan sendiri untuk mempercepat proses loading blog, juga dapat dimanfaatkan oleh pengunjung atau sahabat-sahabat blogger yang lainnya. Proses pembuatannya juga tidaklah sulit, cukup anda membuka sebuah halaman postingan atau halaman statis pada blog anda, kemudian masuk ke mode HTML (bukan compose), selanjutnya copy kan rangkaian script di bawah ini kedalamnya.

<form action="http://www.iwebtool.com/tool/tools/html_optimizer/html_optimizer.php" method="post" name="pageform" onsubmit="return validate(this);" target="pageframe">
<input name="action" type="hidden" value="whois" />
<input name="show" type="hidden" value="1" />
<table border="0" style="border-collapse: collapse; width: 100%px;"><tbody>
<tr><td height="50" valign="top" width="956"><table class="tooltop" style="border-collapse: collapse; height: 76px; width: 100%px;"><tbody>
<tr><td><table border="0" cellspacing="5" style="border-collapse: collapse; width: 100%px;"><tbody>
<tr><td height="50" width="924"><b><span style="font-size: x-small;">Insert
your HTML code to optimize: </span></b></td></tr>
<tr><td height="21" width="931"><textarea cols="20" name="code" rows="2" style="height: 384; width: 100%;"></textarea></td></tr>
<tr><td height="21" width="931"><input style="float: left;" type="submit" value="Optimize!" /></td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
<tr><td width="956"><iframe class="toolbot" frameborder="0" height="284" name="pageframe" width="100%">
</iframe></td></tr>
</tbody></table>
</form>
<script language="JavaScript">
function validate(theform) {
if (theform.code.value == "") { alert("No HTML"); return false; }
return true;
}
</script>

Langkah berikutnya adalah simpan halaman anda tersebut dan kemudian publikasikan, HTML Optimizer Tool telah siap untuk dipergunakan.

Sekian, semoga bermanfaat.

Berikut ini contoh hasil HTML Optimizer yang kita buat di atas :

Rangkaian script sebelum di optimasi :

<b:widget id='HTML4' locked='false' title='Recent Komentar' type='HTML'>
    <b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
    <data:content/>
</div>

</b:if></b:includable>
</b:widget>

Rangkaian script setelah di optimasi :

<b:widget id='HTML4' locked='false' title='Recent Komentar' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.pageType == "item"'>  <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div>  </b:if></b:includable> </b:widget>

Blog Blogging, mempercepat loading blog

Blog Blogging pada kesempatan terbaik ini ingin berbagi tips-trik tentang cara-cara mempercepat loading sebuah blog, yang mana dewasa ini menjadi penting sebagai sebuah metode dalam menghadapi algoritma Google MobileGeddon sebagai algoritma Google yang terbaru. Secara faktual algoritma ini mendasarkan pemeringkatan pada tingkat responsivitas sebuah template blog, namun di balik itu semua, kecepatan loading blog juga menjadi penting untuk mendukung model responsive tersebut.

Banyak hal yang mesti dilakukan untuk dapat mempercepat proses loading sebuah blog ini, mulai dari yang paling mudah sampai kepada proses-proses yang cukup rumit untuk dilakukan karena menyangkut perubahan signifikan pada kombinasi script-script HTML Template blog, yang bilamana dilakukan dengan sembarangan akan dapat merusak tampilan sebuah blog.

Pada artikel ini penulis akan mengungkapkan cara-cara sederhana yang dapat dengan mudah untuk dilakukan, namun membawa dampak peningkatan kecepatan loading blog yang cukup signifikan. Perlu pula anda ketahui, untuk mendeteksi tingkat kecepatan loading blog ini anda dapat mempergunakan dua tool online yang sangat akurat yaitu Google PageSpeed Insights dan GT Metrix.

Langkah-langkah pertama yang dapat dilakukan :

1. Jumlah Postingan pada halaman homepage.

Bila anda ingin memperingan loading blog, batasilah jumlah postingan blog yang anda tampilkan pada halaman homepage ini, setidaknya maksimal hanya 4 atau 5 postingan blog saja. Gunakanlah model Readmore otomatis (bilamana anda mempergunakan template asli bawaan blogger). Pembatasan jumlah postingan yang ditampilkan pada halaman homepage ini secara logika akan membuat mesin telusur tidak akan melakukan proses crawl terlalu banyak, sehingga secara otomatis proses loading blog akan semakin cepat.

2. Jumlah Iklan dalam sebuah blog.

Fitur iklan yang banyak dalam sebuah blog tentu akan memperlambat loading sebuah blog, karena setiap fitur iklan tentu akan mengakses situs atau blog pihak ketiga (pemasang iklan yang bersangkutan). Oleh karenanya membatasi pemasangan jumlah iklan pada halaman homepage adalah merupakan sebuah langkah yang bijaksana dalam upaya untuk mempercepat loading blog.

3. Mengurangi jumlah Widget Blog.

Widget blog pada satu sisi cukup diperlukan untuk menunjang informasi tentang keberadaan blog atau admin blog, namun di sisi lain, pemasangan widget blog ini juga dapat memperlambat loading blog. Widget Alexarank, Widget Pagerank Blog dan lain-lain juga berpotensi untuk memperlambat loading blog, oleh karenanya bijaksanalah untuk menempatkan widget-widget blog ini pada halaman homepage.

4. Mengkompress script-script CSS dan Javascript.

Kedua script tersebut (baik CSS maupun Javascript) sangat berpotensi untuk memperlambat proses loading sebuah blog, dan oleh karenanya kita wajib melakukan kompress terhadap kedua script tersebut. Dalam ini HTML Optimizer menjadi pilihan terbaik untuk mengkompress script-script atau kode-kode CSS dari sebuah template blog. Lakukanlah proses kompress ini dengan hati-hati agar tidak merusak tampilan blog anda.

5. Optimasikan gambar-gambar postingan blog.

Gambar-gambar postingan blog juga wajib dioptimasi atau dikompress agar tidak membebani proses loading sebuah blog. Banyak tool yang dapat dipergunakan untuk mengoptimasi gambar-gambar postingan blog ini.

Demikianlah lima langkah sederhana yang dapat membantu mempercepat proses loading sebuah blog, semoga dapat bermanfaat.

Membuat Widget Recent Komentar berputar

Widget Recent Komentar adalah sebuah widget blog yang berisikan tentang komentar-komentar pengunjung blog pada artikel-artikel blog yang ada. Widget Recent Komentar ini biasanya diletakkan pada bagian sidebar sebuah blog. Banyak model widget recent komentar ini, dan pada kali ini penulis ingin memberikan tips-trik membuat widget recent komentar dengan thumbnail yang berputar saat tersentuh ujung mouse komputer.

Cara pembuatan widget recent komentar berputar ini tidaklah terlalu sulit, anda cukup menambahkan widget HTML/Javascript pada bagian sidebar blog anda, dan selanjutnya copykan rangkaian script berikut ini ke dalamnya :

<style type="text/css">
ul.mojoblog_recent_comments{list-style:none;margin:0;padding:0;}
.mojoblog_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;}
.mojoblog_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;
border-radius:999px;
-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;}
.mojoblog_recent_comments li .avatarImage:hover{
-o-transform: scale(1) rotate(360deg); -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg);
border-radius:1px;
}
.mojoblog_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.mojoblog_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">
//<![CDATA[
// Recent Comments Settings
var
numComments = 7,
showAvatar = true,
avatarSize = 40,
characters = 60,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://yourjavascript.com/8512057551/mojoblogspin.js"></script>
<script type="text/javascript" src="http://majalahblog67.blogspot.com/feeds/comments/default?alt=json&callback=mojoblog_recent_comments&max-results=9999"></script>

Selanjutnya, gantilah alamat url blog yang tercetak tebal dengan alamat url blog atau situs anda sendiri, kemudian simpan widget anda, dan selesai.

Membuat widget Artikel Terkomentari

Blog Blogging kali ini akan berbagi tips-trik tentang membuat widget Artikel Terkomentari yang pada dasarnya merupakan sebuah widget blog berisikan tentang informasi artikel-artikel blog yang telah mendapatkan komentar dari pengunjung berikut dengan jumlah komentar yang ada pada artikel tersebut. Widget ini cukup membantu pemilik blog untuk mengetahui sejauh mana perkembangan blog yang dimilikinya, khususnya berkaitan dengan perkembangan artikel-artikel blog yang telah ditulisnya.

Widget Artikel Terkomentari ini cukup bagus karena dapat berubah warna saat tersentuh oleh mouse komputer. Conatoh aktifnya dapat anda lihat pada bagian sidebar Blog Blogging ini. Sekali lagi, pemakaian widget ini sangat baik untuk memantau perkembangan artikel-artikel blog yang ada, khususnya berkaitan dengan artikel-artikel mana yang paling diminati oleh para pengunjung blog.

Cara pembuatan widget Artikel Terkomentari ini tidaklah terlalu sulit, cukup anda menambahkan widget HTML/Javascript pada bagian sidebar atau footer blog anda, dan kemudian copykan rangkaian script di bawah ini ke dalamnya :

<div id="most-comments"></div>
    <style scoped='' type='text/css'>
    #most-comments li,#most-comments ul,#most-comments ul li{margin:0;list-style:none;color:#444;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:14px}#most-comments ul li{position:relative;overflow:hidden;background:#fff;margin:3.5px 0;padding:7px 10px 7px 50px;white-space:nowrap;text-overflow:ellipsis;box-shadow:inset 0 0 #fc4f3f;border:1px solid #e6e6e6;transition:all .6s}#most-comments ul li:hover{box-shadow:inset 310px 0 #fc4f3f}#most-comments ul li a{color:#444;font-weight:700;text-decoration:none;transition:all .3s}#most-comments ul li a:hover,#most-comments ul li:hover a{color:#fff}.count-most{position:absolute;left:0;top:0;width:40px;height:100%;margin:0;padding:7px 0;background-color:#383838;color:#fff!important;text-align:center;transition:all .3s}#most-comments ul li:hover .count-most{background-color:#fc4f3f}
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    var numPosts=5;
    var homePage="www.blog67blogging.blogspot.com";
    var postTitlear=new Array();
    var postUrlar=new Array();
    var postCommentar=new Array();
    var totalpost;document.write('<div id="most-comments"><ul>');
    function mostComment(j){var a=j.feed.entry.length;totalpost=a;
    for(var f=0;f<a;f++){
    var h=j.feed.entry[f];
    var c=h.title.$t;var b;
    var g;if(f==j.feed.entry.length){break}
    for(var d=0;d<h.link.length;d++){
    if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}
    for(var d=0;d<h.link.length;d++){
    if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];}};
    postTitlear.push(c);
    postUrlar.push(g);
    postCommentar.push(b)}sortPosts();
    for(var f=0;f<numPosts;f++){var e='<li><span class="count-most">'+postCommentar[f]+'</span><a href="'+postUrlar[f]+'" title="'+postTitlear[f]+'" target="_blank">'+postTitlear[f]+'</a>';
    document.write(e)}}
    function sortPosts(){function c(d,f){var e=postTitlear[d];
    postTitlear[d]=postTitlear[f];
    postTitlear[f]=e;
    var e=postUrlar[d];
    postUrlar[d]=postUrlar[f];
    postUrlar[f]=e;
    var e=postCommentar[d];
    postCommentar[d]=postCommentar[f];
    postCommentar[f]=e}
    for(var b=0;b<postTitlear.length-1;b++){
    for(var a=b+1;a<postTitlear.length;a++){
    if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}
    document.write('<script src="http://blog67blogging.blogspot.com/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment"><\/script>');
    document.write('</li>')
    document.write('</ul>')
    document.write('</div>');
    //]]>
    </script>

Selanjutnya gantilah alamat url yang tercetak tebal dengan alamat url web atau blog anda, simpan widget anda, dan kemudian tinggal anda lihat hasilnya.

Membuat Daftar Halaman Otomatis di Blog

Blog Blogging, Daftar Halaman Otomatis adalah sebuah daftar yang memuat keseluruhan halaman blog atau artikel blog berdasarkan kategori atau label tertentu yang telah kita tentukan sebelumnya, pada saat kita membuat atau menuliskan artikel blog. Dengan adanya Daftar Halaman ini, para pengunjung blog dapat dengan mudah untuk melihat sekaligus menelusuri keseluruhan isi blog dengan hanya sekali klik. Daftar Halaman ini biasanya diberi judul Sitemap.

Pada artikel ini, penulis ingin memberikan sebuah tips-trik untuk membuat Daftar Halaman tersebut secara otomatis tanpa kita harus menyusunnya secara manual. Hal ini akan sangat memudahkan kita dalam melakukan proses update artikel blog. Semua artikel yang baru kita tulis akan secara otomatis masuk dalam Daftar Halaman ini berdasarkan kategori atau labelnya masing-masing.

Berikut ini cara membuatnya : Buka sebuah halaman baru, bisa berupa halaman postingan ataupun halaman statis, masuk ke menu HTML (bukan compose), lalu copykan rangkaian script di bawah ini ke dalamnya :

<style type="text/css">
.judul-label{
background-color:#9400D3;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #9400D3;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');}

.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;}

.list-ganjil{background-color:#DCDCDC;}

.headactive{
color: #9400D3;
border: 2px solid white !important;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');}
</style>
<script type="text/javascript" src="http://yourjavascript.com/7157415382/halaman2.js"></script><script src="http://blog67blogging.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script><script type="text/javascript">var accToc=true;</script>

Selanjutnya, gantilah alamat url yang tercetak tebal dengan alamat url blog anda, simpan halaman tersebut dan publikasikan. Semoga bermanfaat.

Membuat navigasi permalink di blog

Blog Blogging kali ini akan berbagi tutorial tentang cara membuat navigasi permalink di bawah postingan blog. Ada berbagai macam dan ragam cara membuat navigasi permalink ini, namun kali ini kita akan membahas cara yang cukup sederhana dengan menampilkan sebuah thumbnail di bagian sampingnya. Permalink adalah istilah untuk link aktif permanen pada suatu artikel di halaman posting yang mana biasanya di letakan pada bagian bawah masing-masing postingan blog, fungsinya tidak lain dan tidak bukan yaitu untuk meningkatkan seo on page sebuah blog.

Manfaat dari memasang permalink ini akan berpengaruh pada nilai rating SEO yang menjadikan keyword semakin kuat, dimana biasanya orang-orang di seluruh dunia menggunakan kata tersebut (buat kata / phrase kata lebih familiar) yang selalu kita harapkan dapat melekat pada judul yang di buat pada blog.

Berikut cara memasang permalink di blog:

1. Login pada blog
2. Rancangan
3. Edit HTML
4. Expand template widget
5. Cari kode ]]></b:skin>
6. Copy kode di bawah ini dan paste di atas kode ]]></b:skin>

.permalink {background:#e4e4e0;border-radius:10px;-webkit-border-radius:10px;-opera-border-radius:10px;-moz-border-radius:10px;color:#000;text-decoration:none;-moz-box-shadow:inset 2px 2px 2px #404040;-webkit-box-shadow:inset 2px 2px 2px #404040;box-shadow:inset 2px 2px 2px #404040;width:auto;padding:9px;}
.permalink img {float: left;}

7. Setelah itu cari kode <data:post.body/>
8. Copy kode di bawah ini dan paste di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='permalink'>
<img height='60' src='http://png-1.findicons.com/files//icons/195/office_men/128/man_grey.png' width='60'/>
<span class='Apple-style-span'>"Terima kasih sudah membaca artikel <b:loop values='data:post.labels' var='label'>
<b><data:label.name/></b>
<b:if cond='data:label.isLast != "true"'> /</b:if> </b:loop> dengan judul <span style='color:red;'>
<b><data:blog.pageName/></b></span>. Anda bisa bookmark halaman ini dengan URL <span style='color:green;'>
<b><data:post.url/></b></span>. Apabila ada yang kurang jelas silahkan tinggalkan komentar atau pesan."</span>
</div>
</b:if>

Catatan:

Untuk penempatan permalink bisa disesuaikan dengan tempate masing-masing (untuk contoh diatas saya pasang dibawah kode <data:post.body/> , untuk template yang lain mungkin berbeda.
Kalimat yang saya tulis diatas hanya sebagai contoh saja, silahkan di modifikasi sesuai selera masing-masing.

9. Simpan Template.

Dan hasilnya akan muncul dibawah postingan seperti contoh pada bagian bawah artikel ini, demikianlah cara membuat navigasi permalink di bawah postingan, semoga bermanfaat.

Blog Blogging 67