3 Author Box Keren Untuk Blogger

Anda mungkin telah melihat Author Box Widget atau Kotak Tentang Penulis di blog yang pernah Anda kunjungi atau seperti yang saya terapkan. Kotak Tentang Penulis penting untuk ditambahkan di blog Anda, yang mana akan memberikan tampilan yang profesional di blog dan juga hal ini dimaksudkan untuk memberikan sekilas informasi tentang penulis.

Nah, pada kesempatan ini saya akan berbagi 3 Author Widget Keren atau Kotak Tentang Penulis dan juga cara membuatnya. Kotak Tentang Penulis yang akan kita buat ini akan tampil disetiap bawah posting blog Anda dan cara menambahkannya cukup mudah. Selain sekilas informasi tentang penulis, widget dibawah ini juga mempunyai fitur lain yaitu media sosial yang akan menguhubungkan pengunjung dengan akun sosial Anda. Untuk lebih jelasnya mari kita praktikan...

MD Author Box

• Download

Tutor :

• Download script
• Login ke Blogger - masuk ke halamanDashboard Blog Anda
• Klik Template - Pilih Edit HTML
• Tekan Ctrl+F dan cari tag ]]></b:skin>
• setelah Anda temukan salin Script STYLE tepat diatas
• selanjutnya, cari tag <div class='post-footer-line post-footer-line-1'> gunakan Ctrl+F untuk memudahkan pencarian.
  satu-delapan
• kemudian salin script HTML tepat dibawahnya
• klik Simpan Template - selesai

　

Satu-Delapan Author Box

satu-delapan

• Download

Tutor :

• Download script
• Login ke Blogger - masuk ke halaman Dashboard Blog Anda
• Klik Template - Pilih Edit HTML
  satu-delapan
• Tekan Ctrl+F dan cari tag <data:post.body/>
• saat pencarian ada lebih dari 3 atau 4 kode yang sama, penulis menggunakan kode yang ke-dua. Kemudian salin script AUTHOR tepat dibawah <data:post.body/>
• klik Simpan Tempalte - selesai

　

Facnciest Author box

satu-delapan

• Download

Tutor :

• Download script
• Login ke Blogger - masuk ke halaman Dashboard Blog Anda
• klik Tata Letak - dan pilih Tambahkan Gadget
• pilih HTML/javascript - dan salin script HTML/JAVASCRIPT
• klik simpan
• Selanjutnya, klik Template - dan pilih Edit HTML
• tekan Ctrl+F dan cari tag <data:post.body/>
• saat pencarian ada lebih dari 3 atau 4 kode yang sama, penulis menggunakan kode yang ke-dua. Kemudian salin tepat tepat dibawah <data:post.body/>
• klik Simpan Tempalte - selesai

satu-delapan

Dengan mengikuti langkah diatas Anda telah berhasil menambahkan Widget Kotak Tentang Penulis di halaman posting blog. Apabila Anda mendapatkan kesulitan dengan penjelasan saya diatas, silahkan tinggalkan komentar Anda. Akhir kata semoga posting kali ini memperindah tampilan blog Anda. salam satu-delapan !

Cara Membuat Artikel Terkait Vertikal Dengan Thumbnail Di Blogger

Posting berikut saya akan membawa tutorial tentang cara membuat Widget Artikel Terkait dengan style vertikal serta dilengkapi dengan thumbnail/gambar dan ringkasan artikel. Pada posting sebelumnya saya sudah membahas tentang cara membuat artikel terkait di blog Anda tapi dengan menggunakan aplikasi ke-tiga seperti LinkWhitin dan nRelate. Manfaat dengan menambahkan Artikel Terkait di blog Anda sangat banyak, selain sebagai interlink antara artikel di blog juga sebagai menu navigasi artikel yang akan menampilkan posting yang terkait sehingga memudahkan pengunjung dalam menjalajahi blog Anda. Selain itu juga Artikel Terkait dapat meningkatkan lalu lintas di blog Anda dan mengurangi tingkat bouncing di blog sehingga hal ini akan menjadi nilai plus buat blog Anda. 

satu-delapan

Artikel Terkait :

• Cara Membuat Relate di BLogger Dengan Style CSS
• Cara Instsll nRelate atau Related Post di Blogger

Langkah-langkah Membuat Widget Artikel Terkait :

• Login ke BLogger- masuk ke Dashboard Blog Anda
• Klik Template - dan PIlih Edit HTML
• Cari tag dibawah, tekan Ctrl+F

satu-delapan

</head>

• Setealah Anda menemukan tag diatas, salin script dibawah ini tepat diatas/sebelumnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related_posts{}
#related_posts h4{ border-top:1px solid #333; border-bottom:1px solid #333; color:#333; font-size:14px; letter-spacing:0; line-height:20px; margin:0 0 5px; padding:5px 10px; background:#03C}
#relpost_img_sum{/* height:320px; overflow:auto; */margin:0; padding:0px; line-height:16px}
#relpost_img_sum:hover{background:none}
#relpost_img_sum ul{list-style-type:none; margin:0; padding:0}
#relpost_img_sum li{border:1px solid #ccc; background:#fff; margin:0 0 5px; padding:5px; height:65px; list-style:none}
#relpost_img_sum .news-title{display:block; font-weight:bold !important}
#relpost_img_sum .news-text{display:block; text-align:justify; font-weight:normal; text-transform:none; color:#333}
#relpost_img_sum img{float:left; margin-right:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff}
</style>
<script type='text/javascript'>//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var numchars = 150;
var morelink = "selengkapnya";
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a><17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]></script>
</b:if>

satu-delapan

• Selanjutnya cari tag dibawah ini, gunakan Crtl+F untuk memudahkan pecarian :

<data:post.body/>

• Kemudian salin script dibawah ini tepat dibawahnya, dalam pencarian Anda akan menemukan beberapa script yang sama gunakan script yang kedua atau ketiga.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts' style='margin-top:35px;'>
<h4 style='color:#ffffff; text-shadow:none; border-radius:5px; border:2px solid #ddd; background:#6fa8dc;'>Artikel Terkait</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<ul id='relpost_img_sum'>
<script type='text/javascript'>relatpost();</script>
</ul>
</div>
</b:if>

satu-delapan

• Langkah terakhir klik Simpan Template - Selesai !

　

Tambahan :

• var relmaxposts = 5, jumlah artikel terkait yang ditambilkan
• var numchars = 150, jumlah dari ringkasan artikel
• Untuk mengubah style dari widget seperti ukuran huruf, warna, dll. Edit pada script yang ada didalam tag <style> ... </style>

Diatas Anda telah membaca Cara Membuat Widget Artikel Terkait Vertikal dengan thumbnail dan ringkasan artikel. JIka Anda mendapatkan kesulitan dengan penjelasan saya, silahkan tinggalakan komentar Anda. Akhir kata semoga Artikel yang singkat ini bermanfaat buat Anda semua. Salam satu-delapan !

Menampilkan Komentar Disqus Di Halaman Statis Blogger

Kalau pada posting sebelumnya saya membahas tentang cara menghilangkan kotak komentar di blogger, nah pada tutorial ini membahas tentang cara menampilkan komentar disqus di halaman statis blogger serperti halaman Tentang, Kontak maupun Sitemap. Untuk menampilkan komentar disqus di halaman statis blogger kita harus menghapus atau dengan memberi tag komentar ( <!-- tag komentar --> ) pada scritp percabangan yang ada di widget disqus. Caranya sangat mudah untuk lebih jelasnya ikuti langkah dibawah ini:

satu-delapan

Artikel Tekait

• Menghilangkan Kotak Komentar di Blogger
• Cara Menggunakan Template Blogger Versi Baru 2013
• Menambahkan Judul Dan Atribut di Posting Gambar Agar Lebih SEO

Menampilkan Kotak Komentar Disqus Di Blogger (update)

• Login ke Blogger Anda dan masuk ke Dashboard blog Anda
  satu-delapan
• Klik Template - pilih Edit HTML
• Tekan Ctrl+F dan cari kode dibawah ini

disqus_blogger_canonical_homepage_url

• Selanjutnya akan tampil serperti dibawah ini 
  satu-delapan

• langkah selanjutnya beri tag komentar pada script yang ditandai merah pada gambar diatas ini menjadi seperti dibawah ini :
  satu-delapan

<!-- <b:if cond='data:blog.pageType == &quot;item&quot;'> -->

dan

<!-- </b:if> -->

• selanjutnya klik Simpan Template dan lihat hasilnya dihalaman statis

　

satu-delapan

Untuk menghilangkan kembali kotak komentar disqus dihalaman statis blogger hapus tag komentarnya (<!-- ... -->). Akhir kata semoga tutorial yang singkat ini bermanfaat buat Anda. Salam satu-delapan !

Menghilangkan Kotak Komentar Di Halaman Blogger

Pada kesempatan ini saya akan bebagi tutorial mudah tentang cara Menghilangkan Kotak Komentar di Halaman Blogger. Komentar pada posting blog merupakan hal penting karena dengan adanya kotak komentar di setiap posting memudah dari pembaca untuk meninggalkan komentar mereka atau umpan balik dan juga sebagai media yang akan membangun hubungan antara penulis dan pembaca. Dari jumlah komentar yang ada disetiap posting juga menunjukan keterlibatan pembaca terhadap blog Anda dan tentunya sebagai penilaian buat kita tentang lalu lintas yang terjadi diblog Anda. Namun pada beberapa halaman terntentu seperti halaman kontak, halaman tentang, halaman daftar isi kotak komentar tidak perlu ditambahkan. Nah, langsung aja kita praktikan...

satu-delapan

Artikel Tekait

• Cara Menampilakn Kotak Komentar Disqus di Halaman Statis Blogger (segera)
• Cara Menggunakan Template Editor Blogger Versi Baru 2013
• Menambahkan Judul dan Atribut di Gambar Agar Lebih SEO

satu-delapan

Menghilangkan Kotak Komentar Blogger

• Login ke Blogger Anda dan masuk ke Dashboard blog Anda
• Klik Setelan - pilih Pos dan komentar
• Klik pada "Lokasi komentar" dan pilih sembunyikan

　

satu-delapan

Menghilangkan Kotak Kometar di Halaman Posting

• Login ke Blogger Anda dan masuk ke Dashboard blog Anda
• Klik Pos - klik edit di bawah title posting

satu-delapan

• Klik Pilihan pada sidebar kanan editor - pilih "jangan bolehkan, sembunyikan yang ada"

satu-delapan

• terakhir klik selesai

Menghilangkan Kotak Komentar di Halam Statis Blogger

• Login ke Blogger Anda dan masuk ke Dashboard blog Anda
• klik laman dan pilih edit dibawah judul laman

• sama seperti di halaman posting klik pilihan dan pilih "jangan bolehkan, sembunyikan yang ada"

• Terakhir klik selesai

　

Untuk menampilkan kembali kotak komentar blogger kembalikan pengaturan diatas seperti semula ke pengaturan default blogger. Akhir kata semoga tutorial yang mudah ini bermanfaat buat Anda. Salam satu-delapan !

Mempercepat Loading Blogger : jQuery Lazy Load Plugin

Ada banyak faktor kenapa lalu lintas blog kehilangan pengunjung, salah satunya adalah kecepatan loading blog yang memerlukan waktu lama. Hal seperti ini benar-benar akan berdampak buruk buat blog Anda, jadi penting buat Anda untuk memperhatikan beban dari template blog Anda. Salah satu yang membuat blog kita loading lebih lama karena gambar atau photo, lantas apa kita tidak harus menggunakan gambar untuk blog kita? Tentu saja tidak, seharusnya kita harus mengambil suatu langkah tertentu sehingga beban dari blog kita berkurang dan tampil lebih cepat.

satu-delapan

Nah, pada posting ini saya akan berbagi satu tips untuk mempercepat loading blog Anda dengan menggunanakan Plugin jQuery Lazy Image Load. Cara kerja plugin ini adalah memperlambat atau menunda loading gambar di blog Anda. Gambar yang muncul hanya pada halaman yang terlihat dan gambar yang lain akan terlihat saat kita mengscroll halaman blog ke bawah. Dengan begitu loading blog akan lebih cepat dan dalam beberapa kasus tertentu dapat membantu mengurangi beban server. Untuk lebih jelasnya silahkan kunjungi Appelsiini

Artikel Terkait :

• Menambahkan Judul dan Atribut Alt Di Gambar Posting Agar Lebih SEO

　

Cara Install Lazy Image Load di Blogger

• Login  ke Blogger Anda
satu-delapan
• Klik Temlate dan pilih Edit HTML
• Cari tag </head> gunakan Ctrl+F untuk mencari
• Selanjutnya salin javascript dibawah ini tepat sebelum tag </head> :

<!-- lazy load start www.satu-delapan.blogspot.com -->
<script type='text/javascript'>//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>
<!-- lazy load end www.satu-delapan.blogspot.com -->

satu-delapan

• Langkah terakhir klik Simpan template - selesai !

Dengan menyelesaikan langkah diatas Anda telah berhasil menginstall lazy image load diblog Anda. Akhir kata semoga tips yang mudah ini bermanfaat buat Anda dan jangan lupa untuk memberi 1+, like atau share posting ini. Salam satu-delapan!

Responsif Sitemap Blogger Keren

Sebelum berangkat untuk mengerjakan solat saya ingin berbagi sitemap responsif blogger, sitemap ini menampilkan gaya basic dari sitemap wordpress dan terlihat keren yang dibuat oleh Chandeep. 

LIVE DEMO

satu-delapan

Artikel Terkait :

• Cara Membuat Sitemap HTML di Halaman Blogger
satu-delapan
• Membuat Halaman Statis Blogger Dan Lebih Dari 20 Halaman　

Cara Menambahkan Sitemap di Blogger :

• Masuk ke Dashboard blog Anda - klik Laman
satu-delapan
• klik Laman baru - dan pilih Laman kosong
• Ubah ke mode html dan salin kode di bawah ini :

<script src="https://dl.dropboxusercontent.com/u/36169749/scripts/widgets/btnt-sitemap.js" type='text/javascript'></script>

<script src="http://satu-delapan.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

<style type="text/css">

.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }

.post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }

.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}

.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }

.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }

.ct-columns-3 p a:hover { background: #555; color: #fff; }

satu-delapan

@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }

</style>

• ganti http://satu-delapan.blogspot.com/ dengan url blog Anda
• kemudian, klik pilihan di bawah "Setelan Laman" dan "komentar pembaca" jadikan "jangan bolehkan, sembunyikan yang ada mode tulis" - hal ini dilakukan untuk menyembunyikan komentar di halaman statis - klik selesai
• Langkah terakhir beri nama pada judul dan publish untuk melihat hasilnya.

Semoga artikel yang singkat ini bermafaat buat Anda. salam satu-delapan!

　

Cara Install nRelate atau Related Post Di Blogger

Related post adalah posting yang terkait di blog Anda dan ini merupakan bagian yang harus Anda tambahkan di blog Anda karena widget ini akan membantu meningkatkan lalu lintas di blog Anda dan pada kesempatan ini saya akan berbagi tutorial tentang Menginstal nRelate atau widget posting yang terkait di blog Anda. Sebelumnya saya telah membahas tentang cara menambahkan related post menggunakan linkwhitin yang pada dasarnya sama seperti nRelate. Namun nRelate lebih mudah untuk ditambahkan di blog atau website dan juga mudah dalam pengaturan serta terdapat beberapa varian untuk tampilannya yang bisa dengan mudah Anda ganti.

satu-delapan

FItur :

• Menampilkan posting dengan Thumbnail atau hanya Teks
• Menambahkan gambar default untuk posting yang tanpa gambar
• Terdapat 6 style tata letak yang berbeda seperti Polaroid, LinkWithin, ToonBarn, dll.
• Menyesuaikan jumlah posting yang ingin ditampilkan
• Menampilkan judul posting
• pilihan relevansi posting yang akan ditampilkan

satu-delapan

Artikel Terkait :

　

- Cara Membuat Related Post Dengan Style CSS

- 5 Popular Post Widget Terbaik Untuk Blogger

Cara Install atau Menambahkan nRelate di Blogger :

satu-delapan

• Klik DISINI  untuk membuat akun baru di nRelate
• klik "create an account"

• Masukan beberapa informasi yang dibutuhkan, seperti username, email dan password yang akan Anda gunakan. dan pada kolom Profile Details masukan nama blog Anda dan URL dari blog Anda.

• Selanjutnya, buka email Anda dan periksa kotak masuk, akan ada pesan dari nRelate untuk mengaktifkan akun Anda. klik alamat url yang ada dalam pesan tersebut
• Setelah melakukan langkah diatas, Login dengan username dan password yang Anda gunakan saat membuat akun baru. Akan muncul pesan TOS klik accept untuk mengkonfirmasi selanjutnya klik install pada menu bar.

　

• Akan muncul halaman baru dan pilih platform Blogger (ikon blogger)

satu-delapan

• Memasukan alamat dari URL blog Anda dan klik submit

• Untuk menampilkan di blog Anda ada 2 pilihan, pertama menampilkan hanya di posting atau pilihan kedua menampilkan di halaman posting dan home. pilih salah satunya dan copy..

• langkah berikutnya adalah menambah nRelate di blog Anda, Masuk ke Dashboard Blogger Anda - klik Tata Letak - Tambah Gadget - dan Pilih HTML/Javascript
• Salin script yang Anda copy tadi - dan klik simpan

　

satu-delapan

Setelah melakukan langkah di atas Anda telah berhasil menambah nRelate di blog Anda. Pada tahap selanjutnya kita akan akan melakukan bebereapa penyesuain untuk tampilan widget yang Anda telah tambahkan. 

• Kembali lagi ke halaman nRelate dan klik setting, kita akan melakukan beberapa pengaturan dasar, akan tampak seperti dibawah ini :

　

　

Keterangan :

• Nomor 1 : Menampilkan Thumbnails atau hanya teks
• Nomor 2 : Pengaturan ukuran dari Thumbnails
• Nomor 3 : Memasukan URL gambar untuk posting yang tidak memiliki gambar, jadi secara otomatis link gambar yang Anda masukan disini akan menjadi default buat posting yang tidak ada gambar. Anda bisa bisa menggunkan gambar Anda sendiri atau menggunakan gambar sudah saya sediakan dibawah ini :

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbhsuK22Sw7A0PrDyeD7fQJko_DoqgS5S8yBSprr0-og5EUmYZHSvkSZ_whmkKWNZ7akeoNdQlCZGSiCLgUrzmRUTPeZhQzO10-FWM_RkPFgH98Q3Z8iyDM7DmZJ1GS1M2ULKWS3nhW9TK/s1600/satu-delapan.blogspot.com.png

• Nomor 4 : Tampilan dari tata leatk widget dengan 6 pilihan style
• Nomor 5 : Title bar untuk widget related, bisa Anda ganti dengan kalimat Anda sendiri
• Nomor 6 : Berapa posting yang ingin Anda tampilkan
• Untuk pengaturan lainya bisa Anda biarkan secara default
• Dan pengaturan lainnya bisa Anda klik DISINI

　

Semua langkah diatas adalah cara menginstall nRelate atau membuat widget posting terkait di Blogger Anda dan dengan beberapa pengaturan penyesuain tampilan widget. Dengan menambahkan Related Post ini harapannya Anda akan menigkatkan lalu lintas di blog Anda. Dan akhir kata semoga artikel yang cukup panjang ini bermanfaat untuk Anda dan jangan lupa untuk like dan share...ok. salam satu-delapan!

Menambahkan Judul dan Atribut Alt Di Gambar Posting Agar Lebih SEO

Di tutorial kali ini saya akan membahas bagaimana cara menambahkan judul dan atribut alt untuk gambar disaat Anda menggunakanya di posting. Tutorial kali ini sangat mudah dan bermanfaat untuk mengoptimasi blogger Anda agar menjadi lebih SEO. Dan dengan memanfaatkan fitur ini juga akan membantu blog Anda lebih mudah temukan di mesin pencarian. ok langsung saja kita praktikan bagaimana cara menambahkan judul dan atribut alt pada gambar

satu-delapan

Artikel Terkait :

• Cara Menggunakan Template Editor Blogger Versi Baru 2013

satu-delapan

Optimasi Gambar Posting Blogger :

• Login ke blogger Anda - masuk ke dashboard
• klik pada ikon pencil "Buat entri baru"
• klik pada ikon gambar "insert image" dan uploud gambar apa saja untuk bahan latihan
satu-delapan
• Untuk menambahkan judul dan atribut alt pada gambar klik gambar dan pilih properties

• Selanjutnya akan muncul pop up, masukan judul dan alt (deskripsi singkat) tentang gambar tersebut ganti spasi dengan tanda strip '-'.

• langkah terakhir klik ok - Selesai

　

Hal ini kadang terlupakan namun tanpa kita sadari hal kecil seperti ini sangat berpengaruh terhadap blogger Anda. Akhir kata semoga tips yang sangat mudah ini bermanfaat buat Anda. Salam satu-delapan!

3 Cara Mudah Share Posting Blog Di Media Sosial

Jika Anda ingin memudahkan pengunjung blog Anda untuk share posting atau konten blog Anda, dan ingin mengingkatkan lalu lintas ke blog Anda maka penting untuk Anda menambah widget sosial share di blog Anda. Di bawah ini ada 3 layanan yang akan membantu Anda dengan mudah menambah widget tombol share sosial di blog Anda. let's check out...

Artikel Terkait :

• Membuat Horizontal Floating Share Sosial Di Blogger
• Floating Share Sosial Horizontal Baru Untuk Blogger

1. Markerly

Markerly adalah tombol share sosial baru dan unik yang memungkinkan pembaca berbagi konten dari posting blog Anda, termaksud gambar atau potongan teks. Jika pengunjung blog Anda memblok atau menyoroti teks di blog Anda, maka akan muncul tombol share yang akan memudahkan mereka untuk berbagi posting. layanan ini sangat mudah ditambahkan di blog Anda dan ini gratis.

　

2. ShareThis

Untuk paltform blogger sharethis memiliki 3 macam style yang bisa Anda tambahkan di blog Anda. Yang perlu Anda lakukan untuk menambahkan plugin ini ke blog Anda hanyalah mengikuti tiga langkah mudah untuk mendapatkan kodenya.

　

3. Shareaholic

Plugin ini akan menampilkan deretan tombol sosial share dibawah posting Anda (bisa juga diatas) disetiap halaman posting blog Anda. Plugin ini ditampilkan dengan gaya yang unik dan juga dengan ukuran ikon yang kecil sehingga lebih cepat saat load dan juga Anda bisa mengatur dari style tombol shareaholic. 

　

　

Senangnya bisa berbagi disetiap ada kesempatan, jika Anda menyukai posting ini bisa dengan share atau like this.. okey. Salam satu-delapan!

Menampilkan Foto Profil Di Hasil Pencarian Google - Blogger

Anda pasti sudah melihat situs atau blog yang muncul di hasil mesin pencarian dengan foto profil dari penulis. Hal ini merupakan fitur tambahan dari google webmaster yang akan menampilkan foto profil Anda di hasil mesin pencarian. Setelah Anda menambahkan fitur ini di blog atau situs Anda maka secara otomotis hasil mesin pencarian akan menampilkan foto profil Google Plus Anda disetiap posting yang Anda miliki. Untuk menambahkan fitur ini di blog Anda sangatlah mudah, untuk lebih jelasnya ikuti langkah-langkah dibawah ini :

Artikel Terkait :

• Cara Memperbaiki Missing Required Filed Updated
• Tampilan Baru Google Plus 2013

Cara Menampilkan Foto Profil Penulis Di Hasil Pencarian Google :

Langkah Pertama :

• Membuat akun di Google Plus klik DISINI , kalau sudah punya silahkan lewati langkah ini
• Selanjutnya masuk ke dashboard blogger Anda - Klik Template - Edit HTML
• letakan script di bawah ini bisa di header, sidebar maupun di footer. disini penulis meletakanya pada tag <head>

<link href='https://plus.google.com/117416892402116201557/posts' rel='author'/>

• Ganti kode berwarna kuning dengan Nomor ID Google Plus Anda, lihat di URL browser Anda.
• Simpan template

Langkah kedua :

• Masuk ke halaman Google Plus, klik DISINI
• Selanjutnya arahkan mouse ke Beranda dan pilih Profil
• kemudian klik Tentang dibagian menu navigasi
  
  
  

• Cari kolom Tautan - klik edit
• lihat pada Kontributor di - klik Tambahkan tautan khusus
• Masukan nama blog Anda dan alamat URL dari blog Anda 
  
• klik Simpan
• Untuk melihat hasilnya bisa klik Disini Google Webmaster Richsnippets
  
• Masukan alamat URL blog Anda dan klik PRATINJAU

Catatan :

Butuh waktu 10 hari atau lebih untuk menampilkan foto profil Anda di hasil pencarian Google.

Demikian yang bisa saya bagikan hari ini, jika Anda mengalami kesulitan dengan tutorial diatas silahkan tinggalkan komentar Anda. Dan akhir kata semoga artikel Menampilkan Foto Profil Penulis di Hasil Pencarian Google  bermanfaat buat Anda. Salam satu-delapan!

Membuat Horizontal Floating Share Sosial Di Blogger

Sebelumnya mau curhat dikit, maaf karena baru sempat posting karena belakangan ini banyak tugas campus dan juga kesehatanku yang kurang baik. Nah, di weekend yang ceria ini saya ingin berbagi widget sosial share floating atau melayang horizontal. Pasti Anda sudah tidak asing lagi mendengarnya karena pada postingan sebelum saya banyak membahas tentang tutorial widget sosial melayang dengan gaya horizontal maupun vertikal. Tapi widget ini berbeda dengan yang telah saya bahas sebelumnya, karena widget ini akan ditempatkan di bawah judul posting dan akan melayang bersama dengan layar saat Anda scroll ke bawah. Berikut fitur widget horizontal sosial share floating:

• widget dilengkapi dengan tombol sosial sepert facebook, twitter dan google+.
• menggunakan jQuery yang sederhana sehingga lebih cepat saat load
• mengapung sampai bagian komentar blog
• sebuah ikon link komentar yang akan mengarahkan pengunjung ke kotak komentar
  
  
  

LIVE DEMO

Artikel Terkait :

• Cara Membuat Tombol Share Media Sosial di Blog
• Cara Menambah Tombol Share Sosial Media Floating atau Melayang di Blogger
• Tombol Share Sosial Floating Bar di Blogger
• Membuat Stickybar Dengan Tombol Sosial Di Blogger

Menambahkan Horizontal Floating Share Bar di blog :

• Login ke Blogger Anda - klik Template dan pilih Edit HTML
• Cari tag </head>, gunakan Ctrl+F untuk mencari
• Selanjutnya salin kode dibawah ini tepat sebelum tag </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
　　　 .horizontalsocial .sharertitle{float: left; border-right: 1px solid #d2d2d2; padding: 3px 10px 2px 0px; margin: 0 0px 0 0; color: #b1a9a5; font-family:'Oswald', Arial, Helvetica, sans-serif;text-transform: uppercase; line-height: 25px; vertical-align: middle;　 font-size: 14px;}
　　　 .horizontalsocial .fb-like{width: 100px; float: left; border-right: 1px solid #d2d2d2; padding: 3px 0 2px;　 height: 25px; }
　　　 .horizontalsocial .sharertwitter{float: left; width: 115px; border-right: 1px solid #d2d2d2; margin: 0 15px 0 0; padding: 3px 0 2px; height: 25px;}
　　　 .horizontalsocial .sharergplus{float: left; width: 90px; margin: 0 15px 0 15px; padding: 3px 0 2px; border-right: 1px solid #d2d2d2; height: 25px;}
　　　 .horizontalsocial .sharerbubble{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2XX0ixp7Qz78pVgZlB98jRe_v_gpsBAdlABay2oMaxX3INhyphenhyphen19X-XORlXE3D4Bn-HVShsI_V3_MRnTLt8AivBFMihHrXVf1dDhmH9vsZF1qyuWgo2wqHYbnSuQ2uoY0PzS1nHf0aN70s/s1600/Commentz.png) no-repeat;　 height: 25px; min-width: 25px; float: left; margin: 7px 0 0; line-height: 18px; vertical-align: top;}
　　　 .horizontalsocial .sharerbubble a{color: #2d2520;　 padding: 0px 0 0px 30px; font-size: 18px !important; font-family: 'Lora', Arial, Helvetica, san-serif !important; }
　　　 .horizontalsocial.fixed{ position:fixed; top: -2px; z-index: 99999;}
　　　 #w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
　　　 #w2bSocialFloat td{padding:4px;margin:0;border:none;}
　　　 #w2bSocialFloat td iframe{max-width:82px;width:82px !important;}
　　　 #w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Set the Top Offset
$theOffset = 0;

jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
/*]]>*/
</script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-blogger-pinit.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
　　　 // Twitter
　 　　 (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
　　　 // Google + (plus)
　　　 (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();

/*]]>*/
</script>
</b:if>

• langkah selanjutnya cari kode dibawah ini, gunakan Ctrl+F :

<data:post.body/>

• kemudian salin script dibawah ini tepat diatas <data:post.body/> :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='horizontalsocial social-buttons' id='horizontalsocial'>
<div class='w2bSocialFloat' id='w2bSocialFloat'>
<table class='w2bSocialFloat' width='100%'>
　　　 <tr>
<td><div class='sharertitle'>Socialize It &#8594;</div>
</td>
　　　 　　　 <td>
　　　 　　　 　　　 <div class='sharertwitter'><a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
　　　 　　　 </td>

　　　 　　　 <td>
　　　 　　　 <div class='fb-like'>　　　 <iframe allowTransparency='true' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/></div>
　　　 　　　 </td>
　　　 　　　
　　　 　　　 <td>
　　　 　　　 <div class='sharergplus'>　　　 <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/></div>
　　　 　　　 </td>
　　　 　　　
　　　 　　　 <td>
<div class='sharerbubble'><span class='thecomments'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/> </b:if></a>
</b:if>
</span></div>
</td>
　　　 </tr>
</table>
</div></div>
</b:if>

• Terakhir, klik Simpan template - selesai !

Tambahan :
Untuk menghilangkan fitur melayang, hapus script yang berwarna merah dan Anda juga bisa mengganti ikon komentar dengan ikon yang komentar yang Anda miliki cukup ganti link url yang berwarna kuning dengan link url ikon Anda.

Saya telah menambahkan Widget Horizontal Floating Share Bar ini diblog saya, bisa Anda lihat dibawah judul posting. Seperti biasa semoga artikel ini bermanfaat buat Anda semua dan bila Anda mengalami kesulitan tidak ada salahnya untuk berbagi dengan saya. Salam satu-delapan!



 

Download Alternatif Editor Windows Live Writer 2012 Untuk Blogger

Windows Live Writer adalah salah satu editor blog yang paling popular dan sangat cocok buat blogger, selain itu juga cocok buat WordPress, Sharepoint, TypePad dan lain-lain. Jika Anda belum memiliki Blog, Anda dapat membuatnya dari WLW atau Anda juga bisa menambah akun blog Anda. Saya sendiri sangat terbantu dengan menggunakan WLW untuk melakukan postingan, dengan memanfaatkan fitur yang ada seperti di blogger tapi lebih mudah untuk digunakan. Berikut beberapa fitur yang sudah saya rangkum :

 

Fitur Windows Live Writer :

• Mengubah ukuran gambar
• Menambahkan Wtermark
• Menambahkan teks/judul gambar
• Menambahkan hyperlink untuk teks
• Menambahkan hyperlink untuk gambar
• Menambahkan Video Online
• Menambahkan Peta Bing

Fitur lainnya dari Windows Live Writer :

• Penghitung kata
• Otomatis Spell check
• Mencari kata atau kalimat
• Mengatur tanggal posting
• Edit, untuk menulis posting
• Preview, untuk menunjukan posting akan terlihat seperti apa.
• Source, untuk melakukan editan dalam bentuk HTML.
• Kegunaan dari keseluruhan fitur WLW mirip dengan Microsoft Word.

Intinya saat kita menggunakan WLW sama halnya seperti kita menggunakan Microsoft Word jadi hal ini pasti tidak akan menyulitkan kita untuk menggunakan fitur yang ada. Anda akan merasakan sendiri kemudahannya saat menggunakan WLW dan recommended sekali buat Anda yang suka nge-blog. Setelah Anda mengetahui apa itu Windows Live Writer, langsung aja di download link dibawah ini.

Download Windows Live Writer 2012 – Install Online

Download Windows Live Writer 2012 – Install Offline

　

Diatas Anda telah membaca salah satu Alternatif Editor Blogger yang popular dan akhir kata semoga posting ini bermanfaat buat Anda. Salam satu-delapan!

　

Cara Menghilangkan Link Pengeditan Cepat dan link kunci di Blogger

Saat melakukan pratinjau atau melihat blog Anda, pasti Anda akan melihat logo pengeditan cepat atau ikon pencil dan ikon obeng. kedua link tersebut akan membantu Anda untuk lebih mudah mengolah posting Anda atau gadget yang ada di blog Anda. Tetapi jika Anda merasa tidak nyaman atau ingin menghilangkanya dari blog Anda itu bisa lakukan dengan cara mudah di bawah ini.

Dengan menghapus link tersebut berarti Anda mengurangi jumlah link eksternal di Blog Anda dan juga membuat lebih Search Engine Friendly. Namun langkah dibawah hanya untuk menghilangkan bukan menghapusnya.

　

Artikel terkait :

• Cara Menggunakan Template Editor Blogger Versi Baru

　

Cara Menghilagkan Link Kunci Inggris dan Pengeditan Cepat

　

• Login ke Blogger Anda
• klik Tata Letak - pilih Posting Blog gadget klik Edit
• Hapus tanda centang "Tunjukan pengeditan cepat" - Simpan
  
  
  
• Langkah selanjutnya klik Template - pilih Edit HTML
• Cari kode di bawah ini, gunakan Ctrl-F untuk mencari :

<b:include name='quickedit'/>

• Ganti semua kode diatas dengan dibawah ini :

<!--b:include name='quickedit'/-->

• langkah terakhir Simpan Template dan lihat kembali halaman blog Anda.

　

Tambahan :

Jika Anda ingin mengembalikan kedua link pengeditan cepat diatas, Anda hanya perlu mengembalikan atau mengulang langkah yang telah Anda lakukan.

Cara diatas adalah untuk menghilangkan logo link Pengeditan cepat dan kunci inggris. Akhir kata semoga trik kecil ini bermanfaat buat Anda. Salam satu-delapan !