Blogger Consultants

Saturday, April 25, 2015

Cara Membagi Kolom Header Menjadi 2 Bagian

Seringkali Blogger pemula yang memakai default template blogger merasa kurang nyaman dengan tampilan headernya yang hanya ada satu kolom saja, yaitu kolom untuk meletakkan Judul Blog dan Deskripsi Blog. Ya, itu juga yang terjadi pada Blog ini pada pertama kali dibuat.

Sebenarnya, untuk membagi kolom header itu menjadi dua sangatlah mudah. Di postingan kali ini Saya mempunyai dua cara.

Cara Membagi Kolom Header Menjadi 2 Bagian

Oke, langsung saja simak dua cara yang Saya berikan berikut ini.

Cara Pertama

1. Masuklah ke menu edit HTML.

2. Masukkan kode CSS berikut ini di atas kode </b:skin>

.swt-blogheader {position: relative;width: 100%;}
#header {padding: 0;margin:0;overflow:hidden;float:left; width:35%;}
#swt-blogheader-right {padding: 0;margin:0;overflow:hidden;float:right;width:65%;}

3. Cari kode yang seperti ini "<b:section class='header'>". Jika sudah ketemu dengan kode tersebut, maka kopi dan tempelkan kode berikut ini tepat di atas kode yang Anda cari tadi.

<div class='swt-blogheader'>

4. Jika Anda lihat dengan baik, disitu anda akan melihat kode Anda menjadi seperti ini:

<div class='swt-blogheader'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Blogger Consultants (Header)' type='Header'>
<b:includable id='main'>...</b:includable>
<b:includable id='description'>...</b:includable>
<b:includable id='title'>...</b:includable>
</b:widget>
</b:section></div>
</div>

5. Oke, perhatikan langkah nomer 4, lihatlah pada kode yang berwarna merah tersebut adalah kode yang Anda pasang ketika melakukan langkah nomor 3. Kemudian lihatlah kode yang berwarna biru diatas (</b:section>). Letakkan kode dibawah ini tepat diatas kode yang bewarna biru.

<b:section class='swt-blogheader-right' id='swt-blogheader-right' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
<div style='clear: both'/>

6. Simpan template anda, masuklah ke dalam menu Tata Letak kemudian refresh browser Anda.

Jika dirasa cara tersebut di atas terlalu susah untuk dilakukan maka ikuti cara yang kedua.

Cara Kedua

1. Masuklah ke menu edit HTML.

2. Masukkan kode CSS berikut ini di atas kode </b:skin>

#header, body#layout #header {width:300px;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:468px;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}

Kode yang berwarna biru berarti untuk kolom yang sebelah kiri, dan kode yang berwarna kuning berarti untuk kolom yang sebelah kanan. Gantilah sesuka hati Anda.

3. Carilah kode seperti di bawah ini:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Blogger Consultants (Header)' type='Header'>
<b:includable id='main'>...</b:includable>
<b:includable id='description'>...</b:includable>
<b:includable id='title'>...</b:includable>
</b:widget>
</b:section>

4. Letakan kode berikut ini di atas kode yang berwarna hijau pada langkah yang ketiga.

<b:section id='header-right' maxwidgets='1' showaddelement='no'/>
<div style='clear: both;'/>

5. Simpan Template Anda.

Manfaat dan Cara Membuang Gambar Obeng dan Tang di Widget Blog

Jika Anda seorang Blogger yang sering mengoprek pada bagian widget blog, maka Anda akan menemukan gambar sebuah "Obeng dan Tang". Namun, gambar "Obeng dan Tang" ini hanya akan muncul setelah Anda menambahkan widget baru di blog Anda.

Ironisnya, jika Anda tidak sesegera mungkin menghapus gambar "Obeng dan Tang" ketika baru saja menambahkan beberapa widget di blog, maka gambar "Obeng dan Tang" tersebut akan terlihat oleh pengunjung blog Anda.

Walaupun gambar "Obeng dan Tang" tersebut tidak bisa diutak-atik oleh pengunjung blog Anda, tapi pastinya pengunjung blog Anda akan merasa bahwa desain blog yang sedang dikunjunginya tersebut masih tahap pembenahan, dan tidak menutup kemungkinan si pengunjung tersebut akan menertawakan blog Anda.

All right, jika anda sudah paham dengan apa yang Saya tulis di atas, sekarang masuklah ke dalam topik pembahasan. Saya bagi topik pembahasan menjadi 2, yaitu cara manual dan cara otomatis.

1. Cara Manual

Masuklah ke dashboard blog anda.
Klik menu template, lalu pilih edit HTML.
Cari semua kode yang bertuliskan seperti di bawah ini:

<b:include name='quickedit'/>

Ada banyak kode seperti di atas. Jadi, buanglah satu persatu.

Yang dimaksud dengan cara manual adalah Anda harus membuang satu persatu kode yang saya sisipkan tadi di atas. Kemudian, jika setelah Anda menambahkan widget baru di blog Anda, maka Anda pun harus melakukan cara ini lagi.

2. Cara Otomatis

Seperti cara di atas, masuklah ke menu edit HTML.
Kopi kode CSS berikut ini:

.quickedit{display:none;}

Tempelkan kode CSS di atas tepat di atas kode "</b:skin>"
Kemudian simpan template.

Pilihlah salah satu dari 2 cara di atas yang menurut Anda paling mudah.

Catatan: Jika Anda tidak menghapus gambar "Obeng dan Tang" tersebut, maka akan memudahkan Anda untuk merubah-rubah widget yang Anda punya di Blog langsung ketika Anda sedang di halaman Blog Anda (tanpa harus masuk ke dalam dashboard Blogger). Namun dalam catatan Anda masih masuk ke dalam akun Blogger Anda, jika Anda sedang tidak masuk di akun Blogger Anda, maka tidak bisa merubah-rubahnya.

Cara Mendaftarkan dan Memasang Widget Histats

Histast adalah salah satu sistem informasi berbasis web yang digunakan untuk melihat jumlah visitor, page views, users online, total visitor di blog atau di website.

Jika Anda adalah salah satu admin di blog atau website, maka dengan cara mendaftarkannya di Histats, Anda bisa melihat visitor, page views, users online, total visitor dengan mudah.

Oh iya untuk catatan, di Histats tidak ada pendaftaran yang mengharuskan Anda untuk membayar. Intinya, mendaftar dan menggunakan Histats di blog atau website adalah gratis.

Oke, di atas adalah sedikit ulasan tentang Histats. Sekarang, bagaimana caranya mendaftar Histats??? Mari simak tulisan berikut ini.

1. Masuklah ke alamat Histats.com.

2. Isikan URL blog Anda di kolom Register Your Website.

3. Buatlah akun di Histats. Isikan formulirnya dengan lengkap.

Email
Password
Nama
Zona Waktu
Captcha
Lalu, beri tanda centang di checkbox privacy Histats

4. Setelah Anda klik tulisan Register, maka Histats akan membawa Anda menuju halaman baru, halam yang menyuruh Anda untuk memverifikasi alamat Email Anda. Jadi, pergilah ke Email Anda, lalu klik tombol verifikasi yang dikirimkan oleh pihak Histats.

5. Setelah mengklik tombol verifikasi, Anda akan dibawa ke halaman Add Website di Histats. Klik tombol Add Website yang ada di situ.

6. Buatlah akun website di Histats.

Isilah URL blog Anda
Bahasa yang digunakan di blog Anda
Zona waktu
Kategori yang digunakan di blog Anda
Judul blog
Deskripsi singkat tentang apa yang ada di blog Anda
Captcha
Lalu, beri tanda centang pada kolom Accept with Terms of use & Privacy Policy.

7. Setelah anda mengklik tombol Register, Anda akan dibawa ke halaman Dasboard Histats blog Anda.

8. Carilah tombol "Counter Code" yang mirip dengan gambar di bawah ini.

9. Kemudian klik "Add New Counter".

10. Pilihlah jenis Histats yang mana yang akan di pasang di halaman blog Anda.

11. Jika sudah memilih, klik pada Counter ID yang telah Anda buat.

12. Setelah itu, kopi Counter Code yang Standart seperti gambar di bawah ini.

13. Masuklah ke Dashboard blog Anda.

14. Pasanglah Widget HTML/Javascript di blog anda, kemudian tempelkan kode yang telah kopi tadi di kolom konten widget.

Cara Membuat Tombol Share di Blog

Tombol share sangat mempunyai peranan penting di dalam sebuah blog. Dengan adanya tombol social share memungkinkan pengunjung blog untuk membagikan postingan tersebut. Kemudian, setelah postingan tersebut sudah di bagikan ke Facebook, Twitter, Dig, Pinterest, atau sosial media yang lainnya, maka teman dari pengunjung yang membagikan postingan tersebut bisa ikut menjadi pengunjung blog juga.

Jadi, yang blognya belum menggunakan tombol share, sebaiknya mulai sekarang buatlah tombol share. Jika belum tahu caranya, maka lakukan langkah-langkah berikut ini:

Pertama, Pililhlah terlebih dahulu share manakah yang ingin anda gunakan.

1. Tombol Share Seperti Punya Saya

Masuklah ke menu Edit HTML. Kemudian tempelkan kode berikut ini di atas kode <head>.

<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

Kemudian masukkan kode CSS berikut ini di atas kode </b:skin>

ul.social_bossconsultants {

list-style:none;

display:inline-block;

margin:15px auto;

}

ul.social_bossconsultants li {

display:inline;

float:left;

background-repeat:no-repeat;

}

ul.social_bossconsultants li a {

display:block;

width:50px;

height:50px;

padding-right:10px;

position:relative;

text-decoration:none;

}

ul.social_bossconsultants li a strong {

font-weight:400;

position:absolute;

left:20px;

top:-1px;

color:#fff;

z-index:9999;

text-shadow:1px 1px 0 rgba(0,0,0,0.75);

background-color:rgba(0,0,0,0.7);

-moz-border-radius:3px;

-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);

-webkit-border-radius:3px;

-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);

border-radius:3px;

box-shadow:0 0 5px rgba(0,0,0,0.5);

padding:3px;

}

ul.social_bossconsultants li.abfacebook {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcT47pMb1xaH6D1hZ4WetuK_cILAeuTsT1zJ73qO3XVnyEqSasIGG0wepp0hpk3ter_mvqo9_4PguWqzWLuDKVBb9sC5vLmrvk57VjE9dB9cveRyfsHJshsM_l3t9W3CIw9zp3sXTKG_Mk/s1600/btrix-facebook-icon.png);

}

ul.social_bossconsultants li.abtwitter {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6c19G4hDv0jdjomoj76bQXBCkaObluF0WWUSZ9s1ACLH48mA2msrtT5VLyLKCr_oLkA1idRWz9vhjCaMXAYNk5-Z91COfYHvsljVD5JCvuJ2Ui4zLue6KZXqb3KyzNutvEuKtSI1FFcKD/s1600/btrix-twitter-icon.png);

}

ul.social_bossconsultants li.abgoogleplus {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmbJbUghcQcpDavmvtMaDv8X6Td7QZRd0kyLJpG4I5vI7qB1f-FeWZCIaf3o5sfn7u3y6YJ5FJddU9RRQOCV4F9oOPMx9L26gq90AvoXRhsp9mMSGjOjc3Q4nkVMzSvuPnDRnD_dsE4Qkz/s1600/btrix-google-icon.png);

}

ul li.abpinterest {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzLLREza9gAQuzhMoma3BQzN9mRb_WMXfTt2BfGN0TjcdGhRNkWaRllUmQ2TePsyoYzHuZilI5qCtLc0WFB6dXkSh-wj6E9FjWan7iNoRJroIuhnI2hw2D7puX-upMIlIlSf9OcC5Xcn7s/s1600/btrix-Pinterest-icon.png);

}

ul.social_bossconsultants li.abstumbleupon {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIbNihUYb8-dYch619vD4i-zy4hjxwuZyncsArHsNhQ7WMa2ZJ34to6h0tPGVjXuFCCLEXFteMhyphenhyphen8DNGjHOJGVhoPxU6eWB2VHIY0wpL19nfbu5d6igkD15kGipTgG28NqlgXhzCj3wJUj/s1600/btrix-StumbleUpon-icon.png);

}

ul.social_bossconsultants li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyfTMMob7yw4S5pZeB-dTyj_rTu-GZONC5bX3QX4XxScZC0fqJuO0QTb608kFnypbhZwn1nq1t629eFbfS6mpdXZOEwCkONEMjJ-T_xH7_lCrDdANAdCd22MThxGoAqpxUI1ZbaCWHGkYa/s1600/btrix-Digg-icon.png);

}

ul.social_bossconsultants li.ablinkedin {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJxh77DvNeBD4T7mMQ85Y6l1U8urco5bQ6AJ995KPHL2WsPBzp1BZ_B_6hZ9zZA-sPpn6iqGGEsUL6ZUxe6q_vSu3rin2apx3IVc08l13g7lPAxMsw38SsuKAbQ4ai-7QnaJ_X1pbdiQf/s1600/btrix-Linkedin-icon.png);

}

#animation_bossconsultants:hover li {

opacity:0.2;

}

#animation_bossconsultants li {

-webkit-transition-property:opacity;

-webkit-transition-duration:500ms;

-moz-transition-property:opacity;

-moz-transition-duration:500ms;

}

#animation_bossconsultants li a strong {

opacity:0;

-webkit-transition-property:opacity, top;

-webkit-transition-duration:300ms;

-moz-transition-property:opacity, top;

-moz-transition-duration:300ms;

}

#animation_bossconsultants li:hover {

opacity:1;

}

#animation_bossconsultants li:hover a strong {

opacity:1;

top:-10px;

}

Carilah kode <data:post.body/>, kemudian tempelkan kode berikut ini di bawah kode <data:post.body/> yang paling akhir.

<b:if cond='data:blog.pageType == "item"'>

<div style='font-size: 22px;padding: 7px;margin: 0px auto;text-align: center;font-family: Oswald;text-transform: uppercase;color: #216A93;background: none repeat scroll 0% 0% #DDD;border: 1px dotted #AAA;'><b>Share this article with your friends</b></div>

<div style='text-align:center'>

<ul class='social_bossconsultants' id='animation_bossconsultants'>

<li class='abfacebook'>

<a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' ><strong>Facebook</strong></a>

</li>

<li class='abtwitter'>

<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' title='Twitter' target='_blank'><strong>Twitter</strong></a>

</li>

<li class='abgoogleplus'>

<a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' title='G+' target='_blank'><strong>Google+</strong></a>

</li>

<li class='abpinterest'>

<a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());' target='_blank' title='Pinterest'><strong>Pinterest</strong></a>

</li>

<li class='abstumbleupon'>

<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' title='Stumbleupon' target='_blank'><strong>StumbleUpon</strong></a>

</li>

<li class='abdig'>

<a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' title='Dig' target='_blank'><strong>Dig</strong></a>

</li>

<li class='ablinkedin'>

<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' target='_blank' title='LinkedIn'><strong>LinkedIn</strong></a>

</li>

</ul></div>

</b:if>

Simpan template Anda.

2. Tombol Social Share Ala Flat UI Color

Masuklah ke menu Edit Template.
Simpan kode di bawah ini tepat di atas kode </head>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

<style type='text/css'>

.sosial ul{position:relative;height:45px;margin:0;padding:0;list-style:none}

.sosial li {position:relative;float:left;margin:0;padding:0;width:20%;height:20px}

.sosial li a {display:block;height:40px;line-height:40px;font-weight:bold;color:#fff;text-align:center;border-top:4px inset rgba(0,0,0,.1)}

.sosial li a span{display:block;font-family:FontAwesome;font-size:40px;line-height:50px;width:50px;height:50px;border-radius:100px;border-bottom:3px solid #fff;position:absolute;background:#666;color:#fff;left:35%;top:135%;transition:all 0.3s ease 0s;opacity:0;visibility:hidden}

.sosial li a:hover span{content:"";position:absolute;top:-150%;left:35%;display:block}

.sosial li:hover span{opacity:1;opacity:1;visibility:visible}

.sosial li:nth-child(1) a,.sosial li:nth-child(1) a span{background: #4A5E99}

.sosial li:nth-child(2) a,.sosial li:nth-child(2) a span{background: #00BFFF}

.sosial li:nth-child(3) a,.sosial li:nth-child(3) a span{background: #d34836}

.sosial li:nth-child(4) a,.sosial li:nth-child(4) a span{background: #C92228}

.sosial li:nth-child(5) a,.sosial li:nth-child(5) a span{background: #F99C58}

@media screen and (max-width:414px){

.sosial ul{height:220px}

.sosial li {float:right;width:100%;height:44px;transition: all .5s}

.sosial li a span{left:35%;top:135%}

.sosial li a:hover span{content:"";position:absolute;top:-40%;left:-10%}

.sosial li:hover{width:90%}

}

</style>

Carilah kode <data:post.body/>, kemudian tempelkan kode berikut ini di bawah kode <data:post.body/> yang paling akhir.

<div class='sosial' id='sosial'>

<ul>

<li><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank'><span class='fa-facebook'/>Facebook</a></li>

<li><a expr:href='"http://twitter.com/intent/tweet?url=" + data:post.url' rel='nofollow' target='_blank'><span class='fa-twitter'/>Twitter</a></li>

<li><a expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'><span class='fa-google-plus'/>Google +</a></li>

<li><a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url' rel='nofollow' target='_blank'><span class='fa-pinterest'/>Pinterest</a></li>

<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' rel='nofollow' target='_blank'><span class='fa-rss'/>My Feeds</a></li>

</ul>

</div>

Simpan template Anda.

3. Tombol Share Dengan Smile Jempol

Masuklah ke menu Edit Template.
Sisipkan kode CSS berikut ini di atas kode </b:skin>

/* social share buttons */

.social-buttons-box {

height: 67px;

background: url(https://lh4.googleusercontent.com/-V-DWAgASUW8/VTtcnHOOboI/AAAAAAAAAIQ/pHPUZ8H0MpY/w246-h60/berbagi%2Bgratis.png) no-repeat 200px 0px;

margin:20px 0 15px;

overflow:hidden;

}

.social-buttons {

margin:0 0;

height:67px;

float:left;

}

.social-buttons .share {

float:left;

margin-right:10px;

display:inline-block;

}

.share-btn {

margin:15px 0 25px;

height:20px;

overflow:hidden;

}

Masukkan kode berikut ini di atas kode </body>

<script>

window.___gcfg = {lang: 'id'};

(function() {

var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

po.src = 'https://apis.google.com/js/plusone.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

})();

</script>

<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><div id='fb-root'/>

<script type='text/javascript'>

//<![CDATA[

(function(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&version=v2.0";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

//]]>

</script>

Carilah kode <data:post.body/>, kemudian tempelkan kode berikut ini di bawah kode <data:post.body/> yang paling akhir.

<div class='social-buttons-box'>

<div class='social-buttons'>

<div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>

<div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>

<div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>

</div>

</div>



<div style='clear: both;'/>

Simpan template Anda.

Jika langkah-langkah itu semua sudah Anda lakukan dan ternyata berhasil. Sekarang, alangkah baiknya untuk membagikan postinangan ini.

Membuat Widget Popular Posts Valid HTML5

Ternyata widget popular posts tidak hanya untuk menunjukan kepada pengunjung bahwa di dalam blog Anda tersebut memiliki postingan yang paling banyak dikunjungi saja. Namun, Gambar (Thumbnail) yang ada di widget popular posts ini juga mempengaruhi skor SEO blog Anda. Jadi, jika Anda ingin skor SEO blog Anda bertambah, maka setidaknya lakukanlah langkah-langkah berikut ini:

1. Masuklah ke menu template.

2. Carilah kode yang seperti ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>...</b:widget>

Jika Anda merasa kesulitanya mencarinya, anda bisa menggunakan fitur CTRL+F, atau bisa juga dengan menggunakan fitur jump to widget, kemudian pilihlah yang Popular Post1.

3. Nah, setelah kode tersebut sudah ketemu, hapus semua kode yang berhubungan dengan popular post yang sudah Anda cari tadi. Kemudian ganti dengan kode berikut ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content popular-posts'>

<ul>

<b:loop values='data:posts' var='post'>

<li>

<b:if cond='data:showThumbnails == "false"'>

<b:if cond='data:showSnippets == "false"'>



<a expr:href='data:post.href'>

<data:post.title/>

</a>

<b:else/>



<div class='item-title'>

<a expr:href='data:post.href'>

<data:post.title/>

</a>

</div>

<div class='item-snippet'>

<data:post.snippet/>

</div>

</b:if>

<b:else/>

<b:if cond='data:showSnippets == "false"'>



<div class='item-thumbnail-only'>

<b:if cond='data:post.thumbnail'>

<div class='item-thumbnail'>

<a expr:href='data:post.href' target='_blank'>

<img expr:alt='data:post.title' expr:src='data:post.thumbnail' expr:title='data:post.title' />

</a>

</div>

<b:else/>

<div class='item-thumbnail'>

<a expr:href='data:post.href' target='_blank'>

<img expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS2HKg1O0ljMRxb9uILbzc7uE1sOAjagqmamJnYH_o6esmx8pqXDu8Dt3tnAnwr89n42Mh_sCvCjqSs9VgKfsTJXV4zX1WW9v6POqju28qgFT0hXq8sxMNiPfEltMiwC8Y5i6ESDZRXCUs/s1600/no+image.jpg' />

</a>

</div>

</b:if>

<div class='item-title'>

<a expr:href='data:post.href'>

<data:post.title/>

</a>

</div>

</div>

<div style='clear: both;' />

<b:else/>



<div class='item-content'>

<b:if cond='data:post.thumbnail'>

<div class='item-thumbnail'>

<a expr:href='data:post.href' target='_blank'>

<img expr:alt='data:post.title' expr:src='data:post.thumbnail' expr:title='data:post.title' />

</a>

</div>

<b:else/>

<div class='item-thumbnail'>

<a expr:href='data:post.href' target='_blank'>

<img expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS2HKg1O0ljMRxb9uILbzc7uE1sOAjagqmamJnYH_o6esmx8pqXDu8Dt3tnAnwr89n42Mh_sCvCjqSs9VgKfsTJXV4zX1WW9v6POqju28qgFT0hXq8sxMNiPfEltMiwC8Y5i6ESDZRXCUs/s1600/no+image.jpg' />

</a>

</div>

</b:if>

<div class='item-title'>

<a expr:href='data:post.href'>

<data:post.title/>

</a>

</div>

<div class='item-snippet'>

<data:post.snippet/>

</div>

</div>

<div style='clear: both;' />

</b:if>

</b:if>

</li>

</b:loop>

</ul>

</div>

</b:includable>

</b:widget>

4. Save template anda.

Lalu, apa sih yang menjadi perbedaan dengan kode popular posts yang tidak diganti dengan kode popular posts yang sudah diganti dengan kode di atas?

Yang menjadi perbedaan adalah tag ALT <img>. Karena, jika tidak anda rubah dengan kode di atas, maka ALT <img> yang sebenarnya bisa digunakan untuk menambah skor SEO malah tidak muncul di widget popular posts yang kodenya belum diganti tadi.

Note: ada dua kode yang berwarna merah, kode tersebut digunakan ketika di dalam postingan Anda yang masuk ke dalam widget popular post tidak memiliki gambar. Jadi, jika anda ingin merubanya, silahkan rubahlah sesuai dengan keinginan Anda.

Friday, April 24, 2015

Cara Membuat Artikel Terkait Dengan Gambar Berjalan

Artikel dengan gambar berjalan ini adalah salah satu internal link yang dibuat tepat dibawah postingan blog. Konsep kerjanya yaitu dengan mencocokkan label yang dipakai oleh postingan blog tersebut. Jadi, jika diantara beberapa postingan blog yang anda punya tidak memiliki kesamaan di labelnya, maka artikel terkait ini tidak akan muncul.

Sesuai dengan judulnya, artikel terkait yang saya buat ini bisa berjalan ke kanan dan kiri jika postingan yang terkait itu melebihi dari lebar kolom yang dibuat di artikel terkait. Oke, mungkin Anda sudah paham. Jadi, langsung saja masuk ke dalam proses pembuatannya.

1. Masuklah ke dalam menu edit HTML, kemudian tempelkan kode CSS berikut ini diatas kode "</b:skin>"

/* Artikel Terkait Bossconsultants

-------------------------------------------- */

#artikel-terkait-bossconsultants {font-weight:bold; font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; font-size:12px;}

#artikel-terkait-bossconsultants h3{border-bottom: 3px dotted #DBDBDB; font-family: Arial; font-size: 20px; color: #232D74; padding-bottom: 0px; text-transform: uppercase; font-weight: normal; text-align: center; height: 25px; margin-bottom: 10px; margin-top: 10px;}

#artikel-terkait-bossconsultants ul {width:570px; margin-bottom: 20px; padding:0px; list-style:none; display:inline;}

#artikel-terkait-bossconsultants li{float:left; display:inline; list-style:none; height:150px; margin:0 0px 10px 8px; width:133px;}

#artikel-terkait-bossconsultants ul li a{margin:0; line-height:18px;}

#artikel-terkait-bossconsultants img{padding:0; margin:0; width:133px; height:90px; border:1px solid #eaeaea;}

#artikel-terkait-bossconsultants img:hover{opacity:0.7;}

Jika Anda ingin memahami kode CSS diatas, maka anda bisa mengubah kode CSS yang berwarna merah tersebut sesuai dengan keinginan anda.

2. Selanjutnya, cari kode berikut ini "<div class='post-footer'>". Jika Anda kesulitan mencarinya, maka gunakan fitur CTRL+F untuk memudahkan mencarinya.

3. Apabila kode di atas sudah ketemu, tempelkan kode berikut ini tepat di bawah kode yang Anda cari tadi.

<b:if cond='data:blog.pageType == "item"'>

<div id='artikel-terkait-bossconsultants'>

<script type='text/javascript'>//<![CDATA[

var ry='<h3 class="artikelterkait"><span>Artikel Terkait</span></h3>';rn='<h3 class="artikelterkait"><span>Jelajah Artikel Lainnya</span></h3>';rcomment='comments';rdisable='disable comments';commentYN='yes';

var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS2HKg1O0ljMRxb9uILbzc7uE1sOAjagqmamJnYH_o6esmx8pqXDu8Dt3tnAnwr89n42Mh_sCvCjqSs9VgKfsTJXV4zX1WW9v6POqju28qgFT0hXq8sxMNiPfEltMiwC8Y5i6ESDZRXCUs/s1600/no+image.jpg'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><div class="pthumb"><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+ thumb[c].replace("/s72-c/","/s150/")+'"/></a></div><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a><div class="clear"></div></li></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('artikel-terkait-bossconsultants').innerHTML=dw};

//]]></script>

<b:loop values='data:post.labels' var='label'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=19"' type='text/javascript'/>

</b:loop>

<script type='text/javascript'>var maxresults=4;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>

</div>

<div class='clear'/>

</b:if>

Catatan:

Jika anda ingin merubah ingin merubah judul Artikel Terkait, maka rubahlah kode yang berwarna seperti tulisan ini di atas.
maxresults=4, sesuaikan dengan kode diatas sebelumnya. jika dirubah jadi "8" maka artikel menjadi 2 baris.
Sedangkan kode yang berwarna biru tersebut berguna jika postingan yang anda punya tersebut tidak ada gambarnya. Artinya, ini adalah gambar default jika postingan tidak memiliki gambar. Jika Anda ingin merubahnya, maka rubahlah sesuai keinginan Anda.

Untuk melihat contohnya, Anda bisa melihat di bawah postingan Saya ini. Karena Saya pun menggunakan kode seperti di atas juga.

Cara Membuat Tombol Back To Top untuk Blog

Pernahkah Anda melihat ada blog yang mempunyai tombol yang ada di sebelah badan blog, dan jika tombol di klik maka secara otomatis scroll blog tersebut akan kembali ke yang paling atas. Nah, cara itulah yang bisa membantu pengunjung yang sudah membaca blog Anda yang panjang kemudian ingin kembali lagi ke antarmuka yang paling atas tanpa harus ribet-ribet menggeser scroll menggunakan jarinya.

Yang perlu Anda ketahui bahwa membuat tombol seperti itu tidak perlu masuk ke dalam menu edit HTML. Jadi, Anda hanya perlu masuk ke menu tata letak, di menu tata letaklah Anda bisa memasukkan kode untuk membuat tombol kembali ke atas (back to top).

Oke, jika Anda sudah mengerti apa yang Saya maksud diatas, sekarang coba anda buatlah tombol tersebut menggunakan cara berikut ini:

1. Masuklah ke menu Tata Letak.

2. Klik Tambahkan Gadget, kemudian pilihlah menu yang berjudulkan HTML/Javascript. Jika sudah, pada kolom Judul biarkan saja kosong, lalu pada kolom Konten isilah dengan kode berikut ini:

<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="http://www.mandpbuildersltd.co.uk/images/back-to-top.png" />', //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>

4. Simpan Konfigurasi tersebut, dan refreshlah blog anda, kemudian lihatlah perubahannya.

Jika anda ingin merubah gambar tombolnya, maka rubahlah pada kode yang berwarna merah diatas dengan beberapa kode berikut ini:

Silahkan pilih salah satu dari gambar diatas

https://lh5.googleusercontent.com/--7bq2sw6umw/VTsjXJz1tgI/AAAAAAAAACI/hLFIM7xezf0/s40-no/back%2Bto%2Btop%2B1.png

https://lh5.googleusercontent.com/-Ys7wJWyh8iU/VTsja1p5lCI/AAAAAAAAACs/9_rgz5mN9tc/s40-no/back%2Bto%2Btop%2B2.png

https://lh3.googleusercontent.com/-Isy9rcOvtuE/VTsjezJqnWI/AAAAAAAAADQ/roqx9v5EYrA/s40-no/back%2Bto%2Btop%2B3.png

https://lh5.googleusercontent.com/-KrUT4pVaZUE/VTsjh4piUBI/AAAAAAAAAD0/MmWYiQ0myz0/s40-no/back%2Bto%2Btop%2B4.png

https://lh5.googleusercontent.com/-7B8au2TIq1o/VTsjkmp2caI/AAAAAAAAAEY/C8Qgg4Col0A/s40-no/back%2Bto%2Btop%2B5.png

https://lh5.googleusercontent.com/-HN4xFShpbnw/VTsjnoIf7XI/AAAAAAAAAE8/xB972kMTMYs/s40-no/back%2Bto%2Btop%2B6.png

https://lh3.googleusercontent.com/-chZGXc331Yk/VTsjq2CnKXI/AAAAAAAAAFc/-LYdpk2nS6c/s40-no/back%2Bto%2Btop%2B7.png

Untuk memodifikasi efeknya, Anda bisa melakukan konfigurasi pada kode yang berwarna biru di atas.

Pages