Kamis, 12 September 2013

Mempercepat Loading Blog Dengan jQuery Lazy Load

fast speed load blogMempercepat Loading Blog Dengan jQuery Lazy Load – melanjutkan pembahasan sebelumnya mengenai tips trik mempercepat loading blog tidak hanya dilakukan dengan menggunakan satu cara saja, namun untuk lebih memaksimalkan loading blog kita bisa menerapkan beberapa cara. Dengan memanfaatkan jQuery Lazy Load untuk meningkatkan loading blog agar proses load image bisa semaksimal mungkin merupakan salah satu usaha yang cukup untuk membantu halaman blog tampil lebih cepat dari sebelumnya. Waktu yang biasanya digunakan untuk menunggu proses loading untuk memuat gambar yang biasanya tampil lebih lama, maka setidaknya jQuery Lazy Load bisa meminimalisir kemungkinan tersebut untuk memunculkan gambar yang terlihat pada halaman blog akan nampak lebih awal sedangkan load gambar yang lainnya akan bekerja apabila pada halaman tersebut kita scroll. Sehingga pada dasarnya jQuery Lazy Load memiliki cara kerja untuk menayangkan bagian gambar yang terlihat dari halaman blog terlebih dahulu untuk meningkatkan page load. Seperti apa langkah-langkahnya untuk menerapkan kedalam blog, berikut tutorialnya untuk cara Mempercepat Loading Blog Dengan jQuery Lazy Load.

1. Login ke akun blogger.
2. Masuk menu Template dan pilih Edit HTML.
3. Selanjutnya copy kode berikut ini lalu paste di atas kode </head>

<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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKRB-rhERazBrtvhlVmSAmvyy3pCd3c8PZ1pM_IJNX55X9XByBxah8O58jck5ejhMo_-HzZtFj2TMp03v8362fG1tWt_qlq-ADUANOQGczbzOG4_-pORWSqEhSdvzNjsN3w51XFllD_EA/h120/lazy+image.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>
4. Langkah terakhir Simpan Template.

Setelah terpasang kini beban load image menjadi lebih ringan dan waktu page load juga meningkat, sekian tutorial cara Mempercepat Loading Blog Dengan jQuery Lazy Load.

Selasa, 10 September 2013

Tips Trik Mempercepat Loading Blog

Loading BlogTips Trik Mempercepat Loading Blog - memang benar bahwa biasanya template blog dengan desain yang di sisipi gambar bervariasi terkadang memiliki tampilan yang elegant dan terlihat cantik. Apalagi jika blog tersebut juga dilengkapi dengan fitur slider, jelas beban loading blog juga akan bertambah ketika terdapat beberapa URL gambar dimasukan kedalam slider tersebut untuk di tampilkan. Namun bagaimana jika gambar yang akan anda upload ke dalam blog memiliki ukuran besar? Bagaimana pula agar gambar tersebut bisa di upload dengan sempurna tanpa mengurangi kualitas gambar? Bukankah jika ukuran gambar di perkecil juga akan berpengaruh terhadap kuliatas gambar, bukankah jernih atau tidaknya suatu gambar tergantung dari ukuran gambar tersebut.

Hal ini perlu di siasati dengan baik agar agar tetap utuh dan tampil maksimal seperti apa yang sudah dikehendaki dari sebelumnya. Namun banyak pula dari beberapa blogger yang seringkali mengabaikan ukuran gambar dan tetap mengupload gambar namun tidak memperhatikan berapa besar size gambar tersebut. Untuk meringankan beban load gambar didalam blog sebenarnya cukup mudah namun memang butuh sedikit waktu untuk melakukannya. Gunakan bantuan software Photoshop untuk mengatur kualitas gambar. Namun pada saat akan menyimpan gambar jangan langsung klik file lalu Save atau Save As, namun gunakan pilihan “Save for Web & Devices” maka disitu akan banyak pilihan tentang format file dan kualitas gambar yang akan anda simpan. Jika anda akan menyimpan menggunakan format JPEG maka dibawahnya akan terdapat opsi kualitas gambar mulai dari low, medium, high, dll. Entah itu format GIF, PNG, dll gunakan opsi kualitas gambar yang sesuai.

Setelah gambar tersebut sudah di simpan, langkah berikutnya adalah mengupload gambar. Anda harus jeli pada saat akan mengupload gambar, perhatikan berapa besar size gambar yang akan di upload dan perhatikan dimana letak gambar tersebut akan ditaruh. Hal ini yang sering di abaikan sebagian blogger, terutama mereka yang menggunakan fitur slider didalam template blognya. Sekarang kita ketahui dimana anda akan menaruh gambar yang anda upload kemudian akan ditampilkannya. Jika gambar tersebut langsung anda upload ke hosting blogspot kemudian akan ditampilkan didalam postingan blog mungkin itu tidak terlalu menjadi masalah pada proses load gambar baik itu gambar berukuran kecil maupun besar. Namun bagaimana bagaimana jika gambar tersebut berukuran besar dan akan di tampilkan kedalam slider blog, apakah gambar tersebut bisa tampil dengan maksimal? Saya rasa tidak! sebut saja gambar tersebut memiliki ukuran lebih dari 80 KB. Jika pada slider terdapat 5 gambar yang ditampilkan dan masing-masing memiliki ukuran rata-rata 80 KB sudah pasti loading blog akan semakin lambat, bahkan masih untung jika gambar tersebut bisa langsung muncul secara cepat.

Sebenarnya masih ada cara yang lebih baik lagi untuk mengupload dan mengambil URL gambar agar bisa tampil secara cepat di blog, terutama pada slider blog maupun seluruh gambar yang anda masukan kedalam template blog. Dengan mengupload gambar ke Picasa Web Album bisa menjadi solusi yang tepat untuk mengatasi proses load gambar. Mengambil URL gambar dari Picasa Web Album akan sedikit lebih membantu speed load blog anda dalam menampilkan gambar secara cepat. Google support merekomendasikan cara ini untuk mengurangi beban load gambar yang terdapat didalam template blog yang anda gunakan, namun banyak juga blogger yang mengabaikan hal ini atau bahkan sebagian ada juga yang belum tahu sama sekali hal ini. Ini baru di lihat dari segi gambar, belum lagi jika ditambah dengan banyaknya kode maupun jumlah widget yang terdapat didalam template blog. Lamanya oading blog juga dapat dipengaruhi oleh jumlah posting yang ditampilkan pada halaman utama atau homepage blog anda. Untuk mengatasi hal tersebut anda dapat dengan mudah mengedit jumlah posting yang ditampilkan di halaman utama dari Setelan Pos dan Komentar pada dashboard blog.

Sekarang kita tinjau dari segi CSS, copy seluruh kode CSS yang terdapat didalam template blog kemudian compress kode tersebut. Langkah berikutnya untuk mengetahui seberapa banyak jumlah kode yang error maupun tidak berfungsi didalam template blog silahkan tinjau di jigsaw.w3.org dengan memasukan URL blog anda kemudian klik Check. Maka di situ akan menampilkan seluruh kode yang error atau tidak berfungsi didalam template blog anda. Selanjutnya anda bisa memperbaiki kode tersebut atau bisa juga menghapusnya jika tidak penting. Pada tahap ini sekaligus untuk memastikan template blog bahwa sudah valid CSS3.

Setelah CSS terselesaikan dengan benar, sekarang optimalkan juga fungsi javascript. Browser cenderung memakan waktu lebih lama untuk membaca javascript di banding CSS. Apabila javascript di taruh pada bagian atas template blog maka browser akan terlebih dahulu membaca seluruh javascript yang ada, sedangkan sebelum proses loading tersebut selesai maka elemen lain juga harus menunggu sampai proses tersebut selesaikan baru elemen-elemen lain akan terbaca. Untuk mengatasi hal ini sebaiknya jika terdapat widget yang menggunakan javascript sebaiknya di taruh pada bagian bawah template blog. Namun apabila javascript ingin di muat secara eksternal maka usahakan untuk mengupload file javascript tersebut ke layanan host yang di gunakan secara pribadi dan jika ingin menggunakan layanan yang gratis gunakanlah layanan gratis dari google karena dapat memuat dengan cepat.

Untuk melakukan semua langkah di atas juga butuh waktu dengan cukup menguras tenaga dan perlu ketelatenan. Namun jika yang anda lakukan sudah beres dan terselesaikan dengan rapi maka hasilnya bisa anda rasakan dan tentu bisa tergantikan. Untuk mengetahui speed loading sudah maksimal atau belom, anda bisa meninjau di Google Insights dengan memasukan URL blog anda kemudian klik Analyze.

Minggu, 08 September 2013

Tips Meningkatkan Traffic Blog Dengan Facebook

Traffic FacebookTips Meningkatkan Traffic Blog Dengan Facebook - Facebook merupakan salah satu situs jejaring sosial yang paling populer didalam media komunikasi dunia internet. Pengguna Facebook sangat banyak bahkan setiap kalangan memiliki akun Facebook baik itu usia anak, remaja maupun orang tua. Jejaring sosial Facebook memiliki sifat kepribadian seseorang, sehingga disitu banyak teman yang bisa kita jumpai. Setiap orang pasti memerlukan informasi dan Facebook bisa membantu untuk menemukan informasi tersebut dengan mengarahkan mereka menggunakan link-link yang mengarahkan dan mungkin bisa membantu apa yang sedang mereka cari. Apabila kita menemukan seseorang yang mempunyai kriteria tidak jauh berbeda seperti kita dalam artian sama-sama mempunyai aktifitas blogging, hal tersebut bisa kita manfaatkan untuk mendatangkan sejumlah lalu lintas ke blog. Berikut beberapa Tips Meningkatkan Traffic Blog Dengan Facebook sebagai upaya dalam mengarahkan visitor dan menjaring mereka kedalam blog.

1. Lengkapi Informasi Profil
Pertimbangkan tujuan anda untuk membangun profil Facebook. Jika ingin menggunakannya sebagai alat untuk mengarahkan lalu lintas ke blog anda, maka anda perlu memastikan profil anda mengandung informasi untuk daya dukung dalam mengarahkan lalu lintas dengan menyertakan link blog anda. Hati-hati dengan foto, video, dan informasi pribadi yang anda publikasikan didalam Facebook. Untuk menggunakan Facebook sebagai alat untuk mengarahkan lalu lintas ke blog, anda harus memiliki banyak teman Facebook.

2. Perbanyak Teman
Gunakan alat bantu pencarian untuk menemukan orang-orang di Facebook, anda dapat mencari berdasarkan nama, sekolah, perusahaan, dll. Jika anda menemukan orang yang sesuai dengan kriteria dan mungkin tertarik pada konten blog anda, kirimkan permintaan teman.

3. Buat Group
Anda dapat membuat grup di Facebook dan mengundang orang atau teman-teman anda untuk bergabung. Namun jika itu membutuhkan waktu lama untuk mengundang banyak orang, anda dapat mengambil langkah efektif dengan mencari Group yang terkait dengan topik blog anda kemudian bergabung dengan Group tersebut dan selanjutnya aktif dalam percakapan yang terjadi di dalam Group tersebut.

4. Buat Fanspages
Fitur Halaman Facebook merupakan cara yang bagus untuk menemukan jaringan dengan orang-orang di Facebook. Anda dapat membuat halaman fanspage kemudian cari orang sebanyak mungkin untuk mengikuti fanspage anda. Disitu anda bisa berkontak langsung dengan banyak orang dan terus update halaman status untuk menambahkan informasi yang menarik dan menjaga percakapan atau diskusi.

5. Hubungkan Akun Lain ke Profil Facebook

Ada banyak piranti tersedia untuk membantu anda membangun sebuah profil Facebook yang besar atau halaman yang dapat mengarahkan lalu lintas secara langsung maupun tidak langsung ke blog anda. Luangkan waktu untuk menghubungkan akun Facebook anda dengan jejaring sosial lainnya seperti Twitter, Networked Blog, dll. Namun sebelumnya pastikan terlebih dahulu bahwa blog anda sudah terhubung dengan jaringan sosial tersebut, sehingga pada saat mempublikasikan artikel baru pada blog anda akan secara otomatis muncul pada jejaring sosial yang sudah terhubung.

6. Bersifat Aktif
Agar usaha anda untuk mengarahkan lalu lintas ke blog bisa berjalan mulus, anda perlu secara aktif mengupdate status, berbagi konten, dan bergabung dalam percakapan. Dengan membangun hubungan dengan teman-teman anda di Facebook, secara tidak langsung juga dapat menumbuhkan trafik blog anda.

7. Perhatikan Sekeliling
Jangan hanya menghabiskan waktu untuk memperbarui profil dan berbagi konten anda sendiri. Namun luangkan waktu juga untuk mengomentari status orang lain dan ikut kedalam percakapan, membagikan konten orang lain dan sebagainya.

8. Menyiasati Promosi Facebook

Facebook memiliki sifat yang mengarah ke pribadi seseorang, tidak seperti LinkedIn yang bersandar lebih ke arah bisnis. Perlu berhati-hati dalam melakukan promosi di Facebook karena terlalu promosi juga seringkali justru akan di abaikan oleh orang lain. Maka dari itu anda bisa menyiasati dengan mencampurkan status dan konten antara informasi promosi dan menghibur.

Jumat, 06 September 2013

Tips Meningkatkan Kualitas Konten Blog

Tips BloggerTips Meningkatkan Kualitas Konten Blog - Ada berbagai perubahan sederhana yang dapat diperbuat untuk menulis posting blog yang dapat meningkatkan lalu lintas ke blog dan memiliki pengaruh yang signifikan terhadap pertumbuhan blog dalam jangka panjangnya. Selain mengandalkan trik Search Engine Optimization (SEO) untuk mendapatkan perhatian dari search engine seperti Google atau lainnya, fokus pada saat menulis posting juga sangat berpengaruh untuk meningkatkan potensi konten terhadap search engine yang tentu dapat mendatangkan trafik ke blog. Trik meningkatkan pengalaman dalam menulis dapat membuat konten blog lebih akrab terhadap setiap serach engine agar konten yang setiap di publikasikan tidak tersia-siakan, maka dengan adanya hal ini berikut adalah Tips Meningkatkan Kualitas Konten Blog dan membuat halaman blog agar lebih ramah search engine.

1. Spesifikasi Judul
Sebuah judul yang menarik dan relevan adalah pilihan terbaik dalam memaksimalkan konten. Jika dalam judul posting saja sudah terdapat kata kunci, maka semakin baik pula konten tersebut di halaman hasil pencarian search engine. Ingat, relevansi harus selalu menjadi prioritas lebih tinggi daripada kata kunci.

2. Link Internal
Hubungkan artikel terbaru yang sedang anda tulis kedalam halaman konten yang terkait. Hal ini bermaksud untuk mengangkat kembali prioritas konten yang lama dengan dihubungkannya kedalam konten yang lebih baru, konten yang bermanfaat jika dihubungkan melalui link internal dalam posting tentu juga akan lebih memudahkan pengunjung dalam menemukan halaman yang terkait dengan isi konten tersebut. Namun tidak hanya itu, menghubungkan setiap konten dengan link internal tentu juga dapat membantu optimasi search engine dalam menemukan dan menampilkannya pada halaman penelusuran, asalkan anda menghubungkannya ke konten internal yang berguna dan relevan.

3. Penempatan Link Internal
Link internal yang terdapat di konten blog sangatlah penting, tetapi perlu diperhatikan juga untuk memasukkan dimana penempatan letak link internal tersebut. Sebaiknya link internal digunakan dalam tiga dari posting anda dan dengan penempatan yang di prioritaskan sebelum link eksternal digunakan. Sekali lagi, menempatkan link internal seimbang dan sesuai agar tidak merusak isi dari posting blog dengan memprioritaskan penempatan link.

4. Penggunaan Anchor Text
Pada saat menghubungkan suatu halaman, hindari menggunakan satu kata kunci yang sama atau frase kata kunci ke beberapa URL. Demikian pula, hindari menghubungkan suatu halaman yang bervariasi dari kata kunci yang sama ke URL yang sama. Search engine tidak menyukai salah satu dari taktik ini. Semakin konsisten dalam menghubungkan konten, semakin baik pula konten tersebut di dalam lalu lintas pencarian.

5. Batasi Jumlah Link
Jangan menyebar link di dalam satu halaman posting. Tidak hanya membuat sulit bagi pengunjung untuk mengetahui link mana yang paling penting dan berguna, tetapi ini juga merupakan teknik spam yang tidak disukai oleh search engine. Gunakan penggunaan batas link (baik itu link internal maupun eksternal) untuk setiap link minimal berjarak 200 kata.

6. Optimalkan Gambar
Mengambil sedikit waktu untuk memberi title gambar yang digunakan dalam posting dengan judul yang berguna dan menjelaskan apa dari isi gambar tersebut. Anda dapat memasukkan kata kunci kedalam title gambar secara spesifik. Ketika mengupload gambar, pastikan untuk selalu menambahkan Alt-Tag dan title gambar. Menggunakan kata kunci didalam Alt-Tag dan title gambar juga akan meningkatkan kualitas konten.

7. Jumlah Karakter
Dalam menulis posting blog membutuhkan waktu yang cukup lama untuk menyediakan konten yang cukup baik untuk orang-orang dan search engine agar memahami keseluruhan konten yang anda tulis. Oleh karena itu, dalam menulis posting pastikan bahwa jumlah karakter kata yang anda gunakan cukup untuk membuat search engine dapat mengindeks, tetapi hindari menulis terlalu banyak sehingga orang tidak mau meluangkan waktu untuk membacanya. Usahakan setiap konten tidak kurang dari 500 karakter dan tidak lebih dari 900 karakter.

8. Terupdate dan Terjadwal
Frekuensi posting blog mempengaruhi lalu lintas visitor secara signifikan. Tidak hanya search engine yang akan memberikan lebih banyak lalu lintas ke blog dengan konten yang selalu up to date, melainkan akan lebih banyak juga orang yang akan membagikan konten tersebut kedalam jejaring sosial.

9. Kualitas Konten
Ini unsur yang paling penting. Menulis konten berkualitas yang berguna untuk semua orang adalah diatas segalanya. Walaupun sudah menggunakan trik SEO tidak akan membantu jika konten berkualitas rendah. Perubahan algoritma Google dan rekomendasi para ahli SEO, satu hal yang akan tetap konstan adalah konten yang berkualitas tinggi. Konten berkualitas tinggi inilah yang akan terus mengarahkan lalu lintas ke blog.

Rabu, 04 September 2013

Memasang Widget Social Subscribe Minimalis With CSS

Widget Social Subscribe CSSMemasang Widget Social Subscribe Minimalis With CSS – lama rasanya tidak membahas widget social subscribe, dan pada tutorial kali ini kembali akan membahas widget media social subscribe yang sederhana menggunakan CSS. Widget social subscribe ini bisa diterapkan dengan mudah didalam area posting, tepatnya di bawah posting blog. Jika pada tutorial Cara Membuat Author Box Dibawah Posting Blogger widget social subscribe sudah sekaligus saya gabungkan pada widget tersebut, namun apabila ingin memasang widget social subscribe saja maka cara pemasangannya pun masih sama persis seperti pada tutorial tersebut. Untuk membuat widget social subscribe agar tampil di bawah posting blog caranya bisa mengikuti langkah-langkah yang ada dibawah. Seperti tampilannya yang sederhana, untuk membuat widget social subscribe ini juga cukup sederhana dan dengan warna-warna yang sudah sesuai dengan warna widget aslinya. Apabila ingin memasangnya kedalam blog, berikut tutorialnya untuk cara Memasang Widget Social Subscribe Minimalis With CSS di bawah posting blog.

1. Login akun blogger.
2. Selanjutnya klik Template dan pilih Edit HTML.
3. Copy kode berikut ini lalu paste di atas kode ]]></b:skin>
.widgetsubscribe {
position: relative;
margin: 15px auto;
padding: 8px 3px;
width:500px;
border: 1px solid #52e052;
background: #e9fbe9;
}
.titlesubscribe p{
background: #52e052;
width:73px;
left: -12px;
margin-top: 0px;
font: bold 14px Tahoma;
padding: 5px 0px 6px 10px;
position: relative;
float:left;
}
.titlesubscribe :before {
content: ' ';
position: absolute;
bottom: -8px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 0 8px;
border-color: #55B05A transparent transparent transparent;
}
.titlesubscribe :after {
content: ' ';
position: absolute;
top: -8px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 8px 8px;
border-color: transparent transparent #52A435 transparent;
}
.subscribe-social{
overflow: hidden;
}
.subscribe-social a{
display: block;
color: #fff !important;
font: bold 12px Tahoma;
text-align: center;
text-decoration: none;
transition: border-radius 0.50s;
padding: 7px 0px;
}
.subscribe-social a:hover{
border-radius: 10px 0px;
}
.subscribe-social div{
float: left;
margin-right: 5px;
width: 79px;
}
.subscribe-social .subscribefacebook a{
background: #3B5999;
}
.subscribe-social .subscribefacebook a:hover{
background: #52e052;
}
.subscribe-social .subscribetwitter a{
background: #01BBF6;
}
.subscribe-social .subscribetwitter a:hover{
background: #52e052;
}
.subscribe-social .subscribegoogleplus a{
background: #D54135;
}
.subscribe-social .subscribegoogleplus a:hover{
background: #52e052;
}
.subscribe-social .subscriberss a{
background: #fb8938;
}
.subscribe-social .subscriberss a:hover{
background: #52e052;
}
.subscribe-social .subscribeyoutube a{
background: #ff0000;
}
.subscribe-social .subscribeyoutube a:hover{
background: #52e052;
}
.subscribe-social .subscribeyoutube{
margin-right: 0;
}
4. Copy lagi kode berikut ini kemudian paste dibawah kode <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='widgetsubscribe'>
<div class='titlesubscribe'>
<p>Subscribe</p></div>
<div class='subscribe-social'>
<div class='subscribefacebook'>
<a href='https://www.facebook.com/andestyle' target='_blank' title='Follow Me on Facebook'>Facebook</a>
</div>
<div class='subscribetwitter'>
<a href='https://twitter.com/rizkyandes' target='_blank' title='Follow Me on Twitter'>Twitter</a>
</div>
<div class='subscribegoogleplus'>
<a href='https://plus.google.com/104093787575230359634' target='_blank' title='Follow Me on Google+'>Google+</a>
</div>
<div class='subscriberss'>
<a href='http://feeds.feedburner.com/masandes' target='_blank' title='Subscribe on RSS'>RSS</a>
</div>
<div class="subscribeyoutube">
<a href="http://youtube.com/AndesJunkies" target="_blank" title='Subscribe on Youtube'>Youtube</a>
</div>
</div>
</div>
</b:if>
Keterangan:
Ganti tulisan warna merah dengan social ID masing-masing.

5. Langkah terkahir klik Simpan Template dan lihat hasilnya.

Demikian langkah-langkah tutorial cara Memasang Widget Social Subscribe Minimalis With CSS di bawah posting blog, sangat mudah tentunya.

Senin, 02 September 2013

Cara Membuat Author Box Dibawah Posting Blogger

widget Author Box BloggerCara Membuat Author Box Dibawah Posting Blogger – melanjutkan widget  author box yang sudah saya posting sebelumnya pada tutorial yang berjudul membuat permalink blogger maupun membuat author box dibawah posting blog, maka sekarang kembali melanjutkan tutorial tersebut namun tentu saja dengan versi yang berbeda. Untuk warna yang digunakan masih sama dengan tema-tema yang sebelumnya karena saya paling suka menggunakan dominan warna hijau. Cara penerapan maupun fiturnya juga masih sama seperti pada author box sebelumnya. Semua pasti sudah sangat paham dan lebih tahu benar fungsi dari widget author box, sedikit penjelasan tentang author box adalah selain untuk biodata dari penulis atau admin blog yang tidak lain merupakan untuk informasi detail author ke visitor dan bisa juga untuk menaruh permalink dll. Supaya lebih mudah untuk penerapannya, berikut tutorial Cara Membuat Author Box Dibawah Posting Blogger.

1. Login akun blogger.
2. Kemudian klik Template dan pilih Edit HTML.
3. Copy kode berikut ini lalu paste tepat diatas kode ]]></b:skin>
.evolutions-authorbox { position: relative; margin: 15px auto; padding: 10px 10px 5px 10px; width:500px; border: 2px solid #52e052; background: #e9fbe9; } .evolutions-avatar { background: #52e052; float: left; height: 128px; width: 128px; left: -22px; padding: 5px 5px 5px 25px; position: relative; } .evolutions-avatar img { height: 125px; width: 125px; border: 2px solid #000; } .evolutions-authorcontent { margin-left: 160px; } .evolutions-titlebox { background: #52e052; width:364px; left: -22px; margin-bottom: 5px; padding: 5px 0px 5px 20px; position: relative; } .evolutions-titlebox a{ color: #000;} .evolutions-titlebox :before { content: ' '; position: absolute; bottom: -118px; left: -160px; width: 0; height: 0; border-style: solid; border-width: 10px 0 0 10px; border-color: #55B05A transparent transparent transparent; } .evolutions-titlebox :after { content: ' '; position: absolute; bottom: -10px; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent transparent #55B05A; } .evolutions-authorbox h3 { font:bold 14px Verdana; color: #000; line-height: 20px; margin: 0; } .evolutions-info { font:12px Trebuchet MS; text-align:justify; color:#000; } .evolutions-info a { color: #000; text-decoration: none; } .evolutions-footerbox{ padding:10px 0 0 0; font:12px Trebuchet MS; } .evolutions-social{ overflow: hidden; } .evolutions-social a{ display: block; color: #FFFFFF !important; font-weight: 600; font-family: "Tahoma",Verdana,Arial; text-decoration: none; transition: border-radius 0.50s; } .evolutions-social a:hover{ border-radius: 10px 0px; } .evolutions-social div{ float: left; margin-right: 6px; width: 79px; } .evolutions-social .evolutionsfacebook a{ padding: 7px 0px; text-align: center; background: #3B5999; } .evolutions-social .evolutionsfacebook a:hover{ background: #52e052; } .evolutions-social .evolutionstwitter a{ padding: 7px 0px; text-align: center; background: #01BBF6; } .evolutions-social .evolutionstwitter a:hover{ background: #52e052; } .evolutions-social .evolutionsgoogleplus a{ padding: 7px 0px; text-align: center; background: #D54135; } .evolutions-social .evolutionsgoogleplus a:hover{ background: #52e052; } .evolutions-social .evolutionsrss a{ padding: 7px 0px; text-align: center; background: #fb8938; } .evolutions-social .evolutionsrss a:hover{ background: #52e052; }
4. Selanjutnya copy lagi kode berikut ini lalu paste tepat dibawah kode <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='evolutions-authorbox'>
<div class='evolutions-avatar'><img alt='Mas Andes' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr9V4KyoRpHiQMC-IIq-DDPBmR_VyDjFDRtfepF2fouzopHHIKhMJtAs1ybaM7xZ4sONaNmxosmgxC67zDctzeSxplfthQYda8zEi7R_VOvhzQ4dGjkJR3PSu05QpZ0q5IBdwZK56z8hY/s96-c/mas-andes.jpg'/>
</div>
<div class='evolutions-authorcontent'>
<div class='evolutions-titlebox'>
<h3>Author : <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a></h3></div>
<div class='evolutions-info'>
Setelah anda membaca artikel berjudul <b><a expr:href='data:post.url'><data:post.title/></a></b> jika ingin menyalin (copy-paste) artikel ini, sertakan <b><i>link dibawah ini sebagai sumbernya :</i></b>
<textarea cols='39' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
</div>
<div class='evolutions-footerbox'>
<div class='evolutions-social'>
<div class='evolutionsfacebook'>
<a href='https://www.facebook.com/andestyle' target='_blank' title='Join on Facebook'>Facebook</a>
</div>
<div class='evolutionstwitter'>
<a href='https://twitter.com/rizkyandes' target='_blank' title='Join on Twitter'>Twitter</a>
</div>
<div class='evolutionsgoogleplus'>
<a href='https://plus.google.com/104093787575230359634' target='_blank' title='Join on Google+'>Google+</a>
</div>
<div class='evolutionsrss'>
<a href='http://feeds.feedburner.com/masandes' target='_blank' title='Join on RSS'>RSS</a>
</div></br>
<span style='font:10px arial;float:right;padding-top:5px;'><a href='http://mas-andes.blogspot.com/2013/09/membuat-widget-author-box-blogger.html' target='_blank'>[ Get This Widget ]</a></span>
</div></div></div>
</div>
</b:if>
Keterangan:
Ganti teks warna biru dengan URL foto anda.
Ganti teks warna merah dengan ID masing-masing.

5. Langkah terakhir klik Simpan Template.

Yang perlu diperhatikan pada saat menerapkan adalah kode <data:post.body/> karena pada suatu template blog biasa terdapat 2 kode tersebut atau bisa juga lebih. Jika pada template blog yang saya gunakan pada point ke-4 diatas saya taruh kode tersebut tepat dibawah kode <data:post.body/> yang terakhir, silahkan bisa disesuaikan dengan template blog yang digunakan masing-masing. Lebar maupun warna dari widget author box ini saya sesuaikan dengan warna template blog ini, jadi apabila lebar maupun warna yang kurang sesuai silahkan bisa anda sesuaikan sendiri.

Minggu, 01 September 2013

Membuat Author Box Dibawah Posting Blog

widget Author Box BloggerMembuat Author Box Dibawah Posting Blog – selama berselancar didalam internet mungkin anda pernah mengunjungi suatu blog dan terdapat kotak dibawah posting blog yang berisi tentang informasi atau biodata penulis atau bisa juga tentang peringatan kecil mengenai artikel yang di publikasikan, kotak itulah yang biasa disebut-sebut author box. Bahwa biasanya pada author box juga disisipi sejumlah link yang berkaitan dengan artikel posting blog dengan menaruh judul posting yang sudah tersetting secara otomatis agar setiap author box tersebut muncul di setiap akhir posting blog bisa memunculkan judul posting yang tidak lain hal tersebut biasa disebut sebagai permalink. Selain yang sudah saya terangkan di atas, pada author box agar lebih lengkap bisa juga kita custom agar disitu sekalian terdapat form email subscriber dan tombol social share. Untuk membuat author box muncul di setiap posting blog juga penerapannya tidak sulit, hanya dengan sedikit menambahkan kode yang terdapat dibawah kedalam edit HTML template blog maka author box sudah terpasang. Untuk langkah-langkah penerapannya, berikut tutorial cara Membuat Author Box Dibawah Posting Blog.

1. Login akun blogger.
2. Kemudian klik Template dan pilih Edit HTML.
3. Copy kode berikut ini lalu paste tepat diatas kode ]]></b:skin>
.evolutions-boxauthor{ position: relative; margin: 15px auto; width:505px; padding:10px 10px 5px 10px; border:2px solid #52e052; background:#e9fbe9; color:#000; } .titlebox h3{ padding: 10px 0px 10px 25px; color:#000; font:bold 14px Georgia; background: #52e052; margin:0px 0px 0px -22px; width:524px; } .titlebox h3 a {color:#000;} .titlebox h3:before { content: ' '; position: absolute; top: 47px; left: -12px; width: 0; height: 0; border-style: solid; border-width: 10px 0 0 10px; border-color: #55B05A transparent transparent transparent; } .titlebox h3:after { content: ' '; position: absolute; top: 47px; right: -12px; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent transparent #55B05A; } .boxcontent { font:12px Trebuchet MS; text-align:justify; color:#000; float: left; margin: -95px 160px 5px 0; display: block; } .boxcontent a { color: #000; text-decoration: none; } .boxauthor_photo{ float:right; margin:-22px 0 0 10px; padding:30px 5px 5px 5px; background: #52e052; } .boxauthor_photo:before { content: ' '; position: absolute; top: -12px; right: 144px; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent #52A435 transparent; } .boxauthor_photo:after { content: ' '; position: absolute; top: -12px; right: 0; width: 0; height: 0; border-style: solid; border-width: 0px 10px 10px 0; border-color: transparent transparent #52A435 transparent; } .boxauthor_photo img{ width:120px; height:120px; border:2px solid #000; } .linediv{ height:0px; clear:both; display:block; border-top:1px solid #00ff00; border-bottom:1px solid #52e052; } .email-button{ background:#52e052; border:1px solid #52e055; margin:0; color:#000; cursor:pointer; font: bold 13px Tahoma; padding:6px 10px; position:absolute; right:-20px; top:0; display:block; } .email-button:hover{ background:#00ff00; text-decoration:none !important; } .wrap-email{ clear:both; width:230px; margin:5px 0 0 0; float:left; } .email-form{ position:relative; margin:0 auto; width:98% !important; box-sizing:border-box; height:auto; } .email-input{ width:150px; height:15px; margin:0 auto; padding:8px 10px; border:1px solid #52e052; font:14px georgia; font-style:italic; color:#666; } .evolutions-social{ overflow: hidden; float: right; } .evolutions-social a{ display: block; color: #FFFFFF !important; font: bold 13px Tahoma; text-decoration: none; transition: border-radius 0.50s; border-radius: 10px 0px; } .evolutions-social a:hover{ border-radius: 0px; } .evolutions-social div{ float: left; margin: 5px 5px 0 0; width: 70px; } .evolutions-social .evolutionsfacebook a{ padding: 7px 0px; text-align: center; background: #3B5999; } .evolutions-social .evolutionsfacebook a:hover{ background: #52e052; } .evolutions-social .evolutionsgoogleplus a{ padding: 7px 0px; text-align: center; background: #D54135; } .evolutions-social .evolutionsgoogleplus a:hover{ background: #52e052; } .evolutions-social .evolutionsrss a{ padding: 7px 0px; text-align: center; background: #fb8938; } .evolutions-social .evolutionsrss a:hover{ background: #52e052; }
4. Selanjutnya copy lagi kode berikut ini lalu paste tepat dibawah kode <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='evolutions-boxauthor'>
<div class='boxauthor_photo'>
<img alt='mas andes' src='http://lh3.googleusercontent.com/-DHMRnvuMJfo/AAAAAAAAAAI/AAAAAAAAAAA/6f7Kf2lfwCE/s96-c/photo.jpg'/>
</div>
<div class='titlebox'>
<h3>Author : <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a></h3></div>
<div class='boxcontent'>
Setelah anda membaca artikel berjudul <b><a expr:href='data:post.url'><data:post.title/></a></b> jika ingin menyalin (copy-paste) artikel ini, sertakan <b><i>link dibawah ini sebagai sumbernya :</i></b>
<textarea cols='42' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
</div>
<div class='linediv'></div>
<div class='wrap-email'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='email-form' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=masandes&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='masandes'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='email-input' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
<input class='email-button' title='' type='submit' value='Submit'/>
</form>
</div>
<div class='evolutions-social'>
<div class='evolutionsfacebook'>
<a href='https://www.facebook.com/andestyle' target='_blank' title='Join on Facebook'>Facebook</a>
</div>
<div class='evolutionsgoogleplus'>
<a href='https://plus.google.com/104093787575230359634' target='_blank' title='Join on Google+'>Google+</a>
</div>
<div class='evolutionsrss'>
<a href='http://feeds.feedburner.com/masandes' target='_blank' title='Join on RSS'>RSS</a>
</div>
</div></br>
<span style='font:10px arial;float:right;padding-top:5px;'><a href='http://mas-andes.blogspot.com/2013/09/membuat-author-box-dibawah-posting-blog.html' target='_blank'>[ Get This Widget ]</a></span>
<div style='clear:both;'></div>
</div>
</b:if>
Keterangan:
Ganti teks warna biru dengan URL foto anda.
Ganti teks warna merah dengan ID feedburner anda.
Ganti teks warna hijau dengan ID masing-masing.

5. Langkah terakhir klik Simpan Template.

Lebar maupun warna dari widget author box ini saya sesuaikan dengan warna template blog ini, jadi apabila lebar maupun warna yang kurang sesuai silahkan bisa anda sesuaikan sendiri.