EditBlog

Help you by sincere

November 13, 2018

MEMASANG TOMBOL BERBAGI ADDTHIS DI BLOG AMP

1
addthis share button atau tombol berbagi AddThis sangat terkenal responsive dan untuk AMP sendiri sampai saat ini AddThis merupakan satu satunya pilihan tombol berbagi yang kompitabel, pemasangan juga dapat dilakukan dengan cara di kustomisasi menurut selera pemasang agar tampilannya nampak beda.
Tampilan Tombol berbagi medsos pada halaman AMP Anissa
Namun disini kita hanya akan membahas bagaimana cara pemasangan tombol berbagi ini secara default ke bloggger AMP. Jika pemasangannya nanti sudah benar maka akan tampil tombol share inline berjajar pada halaman postingan di blog AMP seperti tampak pada gambar di atas.
Gambar letak kode unik dan kode inline AddThis

Langkah pertama:
Tentu saja buat terlebih dahulu akun AddThis melalui: AddThis
Tentu saja membuat akun adalah gratis.

Langkah kedua:
Setelah akun dibuat masuk ke dasbor pengaturan AddThis, untuk membuat kustomisasi tombol berbagi anda, hingga saat ini tampilan tombol berbagi untuk Blogger AMP adalah berjajar atau inline.

Langkah ketiga:
Pilih Tombol tombol medsos yang anda sukai setelah dirasa cukup, tekan "activate tool" untuk mengaktifkan tool. dari sini akan muncul kotak halaman kodenya.

Langkah ke empat:
Copy kode unik tersebut dengan menekan tombol "snippet code" di bawah halaman kode tersebut. Pastekan kode tersebut tepat diatas </head> kode HTML template AMP anda. Tampilan kode </head> pada AMP bisa saja normal bisa jadi dibungkus seperti pada kode yang saya sorot warna hijau:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script async='async' custom-element='amp-addthis' src='https://cdn.ampproject.org/v0/amp-addthis-0.1.js'/>
</b:if>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5aac9c0a5226a9c5' type='text/javascript'/>
<!--letakan kode unik AddThis disini--!>
&lt;/head&gt;&lt;!--<head/>--&gt;
  <body>
  
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<amp-sidebar id='sidebar1' layout='nodisplay' side='right'>
  <div aria-label='close sidebar' class='close-sidebar' on='tap:sidebar1.toggle' role='button' tabindex='0'>&#10005;</div>

Langkah ke 5.
Terakhir tapi penting, Copy-Paste-kan kode inline AddThis pada bagian body (tepatnya diatas </body> templat dimana anda inginkan tombol share itu tampil nantinya. Pada tampilan template AMP bisa saja seperti contoh dibawah ini:
  <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
&lt;/div&gt;
<b:else/>
&lt;/div&gt;
</b:if>
    <b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;index&quot;}'>
&lt;/div&gt;
</b:if> 
<!--letakan kode inline AddThis disini--!>
&lt;!--</body>--&gt;&lt;/body&gt;

</HTML>

Mudah mudahan ini bisa membantu karena jika tidak ada perbedaan susunan struktur kode pada template yang berbeda, misalnya anda memodifikasi tampilan dengan menambahkan kode CSS diatas kode </style> atay kdoe ]]></b:skin> maka hapus saja kode CSS tambahan tersebut agar tidak mengganggu tampilan tombol berbagi AddThis ini yang seharusnya dipasang secara default, maka seharusnya AddThis share Button dapat bekerja dengan baik pada template blog AMP anda.
Selengkapnya... »

OSIRIS MENU NAVIGASI UNTUK TEMA BLOGGER REKOMENDASI EDITBLOG

0
Tema klasik masih menjadi pilihan hingga tahun 2018 dan perkiraan hingga akhir 2022, klasik adalah non-AMP, sebabnya di dalam halaman dasbor blogger - tidak seperti Wordpress yang pilihan template bawaannya banyak - template template Blogger ketersediaannya sangat terbatas, jadi para blogger yang menggunakannya harus kreatif merobah, mengedit, dan memodifikasi atau bahkan mendesain ulang template template bawaan tersebut menjadi: Responsif, mobile firendly, lebih cepat dan lebih SEO.

 Kali ini Editblog memberikan rekomendasi kepada anda yang mencoba mendesain ulang tema blogger bawaan dan bermaksud memasang MENU NAVIGASI yang responsive dan mobile - diantara selusin menu navigasi buatan editblog tema guna untuk mendesain ulang template bawan blogger, bulan ini kami merekomendasikan: Menu NAVIGASI OSIRIS.

TAPI, APA SIH ISTILAH ISTILAH ITU TADI? Baiklah akan kita jelaskan saja satu persatu persatu terlebih dahulu:
  1. Responsif. Artinya menu navigasi pada template dapat beradaptasi dengan berbagai ukuran layar: Bisa cocok untuk PC/desktop/laptop, bisa sesuai untuk ukuran layar tablet, dan cocok juga apabila di viewing atau dibuka melalui hape. Responsive automatis menyesuaikan dirinya sendiri pada layar tersebut yang kita sebutkan diatas
  2. Mobile friendly. Artinya mudah digunakan untuk ukuran layar layar ukuran ponsel, tidak mengurangi kecepatan dan kenyamanan saat di eksplorasi melalui ponsel, tampilannya tetap menarik dan unik (Termasuk menu Navigasinya)
  3. Lebih cepat dan SEO friendly. Dengan tetap memiliki fitur dan kecepatan walau dilayar ukuran lebih kecil tentunya adalah sebuah PR agar kecepatan web bisa tetap gegas pada tampilan tersebut hal ini sangat menunjang SEO (Search Engine Optimism) sebuah website atau blog. Jika pada layar besar ada fitur Menu Navigasi maka pada layar kecilpun hal itu harus ada tanpa harus mengorbankan kecepatan loading web/blog anda.
Sudah dapat gambarannya bukan? Bayangkan ketika di buka laptop sebuah blog memiliki menu navigasi horisontal yang sederhana atau yang rumit sesuai pilihan anda. Maka, pada halaman mobilpun dia harusnya memilikinya juga. Dengan menu navigasi hasil rekayasa dasar buatan saya yang sangat responsive ini anda akan mendapatkan tampilan pada laptop, desktop dan tablet  kurang lebih seperti pada gambar dibawah ini:
Tampilan Navigasi osiris pada laptop/PC
Menu itu berwarna biru, namun anda bisa merobah backgroundnya yang biru itu  menjadi warna merah, ungu, hitam dsb. Menu navigasi tersebut lay-outnya adalah horisontal pada tampilan laptop maupun desktop pc, dengan judul menu berjajar dari kiri ke sebelah kanan laptop. Menu pencarian diletakan dibawahnya sebenarnya menu tersebut baru akan muncul apabila Tombol atau ikon "bars" disebelah ujung kanan disentuh contohnya pada gambar dibawah, keduanya berlaku untuk segala ukuran hingga ke ukuran layar hape yang paling kecil:

Perhatikan, Judul menu baru akan terlihat pada saat bar disentuh! kami sadar pada tampilan layar kecil hal ini berguna untuk menghemat ruang namun jika anda misalnya lebih menyukai menu menjadi dropdown, anda tentu saja akan diberikan petunjuk melalui blog ini bagaimana merobah menu tersebut menjadi dropdown seperti contoh tangkapan layar dibawah ini:
Pada tampilan menu dropdown diatas terlihat jelas menu dapat disembunyikan dengan baik pada layar yang lebih kecil dan cukup hanya dengan menyentuh ikon bar disebelah kananya maka menu akan muncul sangat responsive sekali bukan?
Kalau anda lebih teliti template diatas adalah contempo! Saya memasangkannya pada template blogger terbaru seperti contempo, soho dan emporio trik ini ternyata bekerja dengan sangat baik! Padahal tadinya saya hanya mencobakannya pada template template blogger yang lebih tua seperti sederhana, Awsome, Perjalan dan tanda air. Semuanya berjalan baik baik saja.

Kelebihan menu ini adalah: Cepat, sederhana, responsive dan mobile friendly yang memang saya rancang untuk tujuan SEO. Saya membuatnya berdasarkan elemen dasar html dari belajar "halo world!" sangat mudah di coba sendiri dan mudah juga untuk di modifikasi sekalipun bagi anda hanya memiliki pengalaman mengutak atik kode kode html minim.

DROP DOWN KONTROVERSI???

Ketika membaca blognya NeilPatel saya tetap tidak setuju dengan pendapatnya dan menuliskannya di halaman komentar. Dia berpendapat membuat web desain seperti itu adalah hal yang kritis. Dan hal itu berpengaruh terhadap bisnis. Dia mengatakan orang datang berkunjung dan berharap melihat Menu Navigasi horisontal bukan dropdown, karena mata manusia jauh lebih cepat daripada mouse saat kursornya menyentuh. Saya tidak tahu, tapi pada menu navigasi situsnya juga terdapat beberapa menu yang dilengkapi dengan fitur drop down pada saat disentuh oleh kursor mouse!

Bagi saya alasan ponsel semakin banyak dan marak di pakai di seluruh dunia masa kini adalah mengapa menu drop down menjadi keniscayaan. Itu sudah sangat "mobile dan user friendly"

Neil mungkin lupa walau mata manusia lebih cepat dari kursor mouse menampilkan menu yang tersembunyi, namun reaksi syaraf, daya pikir dan nalar manusia jauh lebih cepat beradaptasi, jika syaraf gagal memerintahkan mata, maka dia akan memerintahkan kita mencari dan beralih ke opsi lain. Lagipula adalah aneh jika kemampuan indra manusia termasuk mata dan rasa  tidak memiliki kemampuan beradaptasi ketimbang sekedar berharap kemudahan dari rangsangan tool sebuah aplikasi web.

 Hari ini menurut saya menu dropdown sudah sangat akrab dengan tampilan desain web dan boleh dikatan sudah menjadi keharusan pada saat diakses di layar yang lebih kecil seperti ponsel. Mungkin saja saya telah membaca tulisan tua dari Neil yang seharusnya telah dia update sekarang. Well, kita kembali membicarakan menu navigasi yang saya beri nama OSIRIS diatas.

CARA MEMASANG MENU NAVIGASI OSIRIS DI BLOGGER

Saya menyebutnya menu Navigasi Osiris, nama yang saya sukai karena itulah saya menamainya demikian. Cara memasangnya?


Langkah Pertama masuk pengaturan blog, pilih tema, lalu klik edtit-HTML. Cari kode: </head> dan letakan kode css di bawah ini sebelum atau diatas tag </head> tadi:

<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.mobile-container {
  max-width: 480px;
  margin: auto;
  background-color: #fff;
  height: 500px;
  color: white;
  border-radius: 10px;
}

.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  float: left;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a.icon {
  float: right;
}
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}
</style>

Langkah Kedua Masih dalam mode edit-HTML cari kode </header> lalu masukan kode html dibawah ini sebelum atau diatas tag </header> tadi:

<div class='topnav'>
  <a class='active' href='#home'>Logo</a>
  <div id='myLinks'>
    <a href='#news'>News</a>
    <a href='#contact'>Contact</a>
    <a href='#about'>About</a>
  </div>
  <a class='icon' href='javascript:void(0);' onclick='myFunction()'>
    <i class='fa fa-bars'/>
  </a>
</div>

<div style='padding-left:16px'>

</div>

Langkah ketiga, masih pada opsi edit-HTML, cari kode </body> setelah ketemu letakan kode JS dibawah ini diatas tag </body> tadi:

<script>
function myFunction() {
  var x = document.getElementById(&quot;myLinks&quot;);
  if (x.style.display === &quot;block&quot;) {
    x.style.display = &quot;none&quot;;
  } else {
    x.style.display = &quot;block&quot;;
  }
}
</script>

Terakhir SAVE tema dan lihat Demo  animasi tangkapan layar yang saya buat melalui hape:

Sekilas memang mirip dengan menu navigasi editblogtema yang sedang kami pakai (Menu navigasi EditblogTema sedang dalam penyempurnaan terutama pada menu pencarian), tetapi menu osiris saya buat dengan material dan elemen HTML yang jauh lebih ringan dan bersih, Atau silahkan lihat demo template langsung di sitenya:
DEMO

Catatan: pastikan anda telah membuat template bawaan yang anda pilih telah menjadi responsive terlebih dahulu, tutorialnya juga ada dalam blog ini:
 7 LANGKAH...
Terimakasih telah berkunjung dan selamat ngeblog teman teman... 
Selengkapnya... »

MENGAPA PENGHASILAN ADSENSE RENDAH?

0
1. Faktor demografi
Anda mungkin bertanya berapa penghasilan seorang blogger Eropa atau Singapura perklik? Melebihi 3 ribu rupiah perklik! Saya mengujinya waktu berada disana (minta tolong kawan Klik) lalu menguji lagi minta kawan dari indonesia klik, benar benar jauh perbedaannya, itulah sebabnya Google juga menyarankan kita mentarget penghasilan dengan mengoptimalkan jangkauan demografi.
Apakah kita harus membuat blog berbahasa Inggris? Tidak harus juga, hari ini secara global persaingan sudah sangat ketat, jika anda tidak yakin tunda dulu rencana yang akan menguras energi anda itu. Tapi jika anda siap bertempur sampai ke titik darah penghabisan, maka peluang anda mungkin sangat besar untuk sukses menghasilkan pendaptan tinggi berdasarkan CPC dan CTR adsense ini.

Namun beberapa hal mengenai ini sudah pernah saya singgung pada postingan saya yang berjudul:

CARA MENINGKATKAN CTR: ADSENSE ITU KUALITAS BISNIS BUKAN MORALITAS


Tentu saja yang saya maksud moralitas adalah bahwa fakta beberapa jenis iklan melanggar norma moralitas agama dan budaya ternyata cukup signifikan mempengaruhi penghasilan publisher adsense yang di beri tugas menayangkan iklan ini, Saya pernah menyinggung, mengapa penghasilan adsense berdasarkan CPC rendah sebagai berikut:

  • Geografi atau wilayah. Ini terkait dengan darimana pengunjung blog kita datang, pengunjung yang berlokasi di wilayah negara tertentu terutama negara dengan penghasilan rendah akan mendatangkan CPC yang rendah juga. Indonesia saja sangat luas masih di kotak kotak oleh Google dalam hitungan nilai CPC, daerah daerah kaya pusat perekonomian lebih mendatangkan CPC yang tinggi, kita tidak bisa menyalahkan hukum pasar ekonomi telah berlaku dimana mana. Google juga tidak ingin rugi.
  • Niche. Mungkin blog anda memiliki Niche yang kurang menguntungkan dimana pengunjung anda tidak tertarik mengklik iklan di blog anda. Misalnya jika anda punya blog dengan niche politik, bukan salah anda juga kalau CTR blog anda menjadi rendah, di lain pihak blog dengan niche real estate memiliki CTR yang tinggi.
  • Mobile. Perhatikan juga mungkin blog anda tidak mobile, atau tidak cocok buat tampilan hape. Sejak tahun 2015 Google sudah mem-finalti blog blog atau website yang tidak mobile friendly menjadi rendah SERP dan rendah CTR. Perhatikan bukan hanya terpengaruh pada penghasilan jika kebetulan anda adalah publisher adsense, tapi blog  dan website yang tidak mobile friendly akan memiliki trafik yang rendah dan lama lama ditinggalkan karena sulitnya mengaksesnya melalui hape.
  • Programmatic media buys. Pembelian terprogram oleh pihak pengiklan telah mengakibatkan penurunan drastis penghasilan para publisher blogger. Setiap trik bisnis bisa saja datang sewaktu waktu. Nasib Google adsense juga sangat tergantung daripadanya. Tidak ada yang dapat kita lakukan untuk hal yang satu ini, karena tidak ada yang abadi di dunia kecuali perubahan itu sendiri.
  • Pemblokiran iklan. Anda mungkin telah memblokir beberapa jenis iklan dengan alasan tertentu, misalnya anda mungkin memblokir iklan dari pihak yang tidak sejalan dengan akidah, pandangan politik dan agama anda, atau beberapa jenis iklan dari perusahaan yang anda rasa kurang setuju. Well, pemblokiran iklan oleh anda segera disampaikan oleh pihak Google kepada perusahaan pemilik yang segera mem-finalti anda selamanya walaupun akhirnya mereka memiliki banyak sekali jenis iklan berkualitas dengan CPC tinggi, anda tidak akan mendapatkannya lagi selamanya. Ingatlah disini mereka tidak bisa bicara tentang moral, mereka tidak ada urusan dengan anda kecuali semata mata bisnis. Mungkin anda harus mempertimbangkan ini.
  • Perubahan teknologi yang semakin cepat. Anda mungkin tidak atau kurang setuju jika suatu hari blogger benar benar dianggap sebagai kegiatan masa silam alias sudah kuno dimata aplikasi media yang datang dari para start - up muda yang jenius. Saya percaya Google sendiri sudah siap demi bisnis mereka, namun kesiapan mereka bisa saja berbentuk "menutup" satu media demi kelangsungan bisnis yang berkesinambungan. Bisa juga mengikuti perubahan dengan update besar besaran, artinya para blogger harus selalu update dan belajar keras.
2.Programatic media buys akhir akhir cukup menjadi sorotan serius, Program ini membuat cara menayangkan iklan di blog menjadi nampak kuno, lamban, tidak efisen dan berbeaya mahal bagi para pengiklan. Mereka perlahan lahan memilih opsi yang cukup mengejutkan ini. Walau tidak semua pengiklan dapat dengan mudah mengikuti programmatic media buy, namun kemudahan demi kemudahan terus di update, sampai suatu hari sekeras apapun Google berusaha, blogger mungkin akan memiliki wajah dan fungsi yang jauh berbeda di masa depan atau bahkan lenyap ke tepi seperti tukang ojek pangkalan yang tersingkir oleh aplikasi GOJEK dari hape hape Android. Zaman semakin cepat berubah ya brooo....

Mengenai hal ini saya singgung dalam postingan: 


CTR 
Ada hal lain lagi, yakni CTR masih bagian dari CPC, CTR atau Click trough Rate adalah prosentasi daripada jumlah klik terhadap iklan dari pengunjung blog kita, pastinya kita berharap banyak pengunjung yang mengklik iklan di blog kita bukan?

Perbandingannya begini: Jika memiliki CTR sebanyak 4%, dengan CPC RP.15.000,- dan terindikasi ada 4 pengunjung pada tiap 100 klik iklan, maka itu berarti jauh lebih baik daripada CTR 2% sedangkan CPC sudah mencapai RP. 24.000,-. Karena pada kasus pertama kita akan menghasilkan RP.20.400,- perhari, jika trafik harian kita telah mencapai 1000 orang pengunjung. Sedangkan pada kasus kedua, kita hanya mendapatkan penghasilan RP.16.320,-perhari meskipun trafik harian telah mencapai 1000 pengunjung. Bingung? Lihat besaran CTR 4% berbanding 2% nya ya...

Jadi memang tidak cukup hanya memiliki CPC yang tinggi, kita juga perlu CTR yang tinggi untuk mendapatkan penghasilan yang nyata sebagai publisher adsense melalui blog.

DAN APA YANG HARUS KITA LAKUKAN UNTUK MENINGKATKAN PENGHASILAN:

1. Optimalkan konten demi keyword berharga tinggi. Adsense bekerja berdasarkan penawaran keyword dengan harga tertinggi, ingat keyword ini sebagian besar datang dari hasil aktivitas mereka para pemilik iklan tersebut. Berdasarkan bisnis mereka. Maaf bukan dari kepintaran para blogger menentukan keyword. Termasuk saya tentunya

Kepada keyword keyword inilah seharusnya konten berkualitas anda fokuskan demi untuk mendapatkan CTR yang tinggi. Ada banyak terdapat keyword yang bernilai hingga $100 atau lebih, dibawah ini mungkin adalah daftarnya:

25 keyword top termahal :

  • Business services =$58.64
  • Bail Bond=58.48
  • Casino=55.48
  • Lawyer=54.86
  • Asset Management=$49.86
  • Insurance=48.41
  • Cash Service & Payday Loans=$48.18
  • CleanUp & Restoration services=$46.84
  • Degree=$47.36
  • Medical Coding Services=$46.84
  • Rehab=$46.14
  • Phychic=$43.78
  • TimeShare=$42.13
  • HVACSoftware=$41.24
  • BusinessSoftware=$41.12
  • Mdical Needs=$40.73
  • Loans=$40.69
  • Plumber=$39.19
  • Termites=$38.88
  • Pest Control=$38.84
  • MortGages=$36.76
  • Online Gambling=$32.84
  • Banking=$31.43
  • Hair Transplant=$31.37
  • Google Adwords=$30.06
2. Fokus kepada "Long tail Keywords", ya sesungguhnya tidak cukup hanya bermain dengan keyword terbaik yang sudah ada, kita sebaiknya melakukan riset dengan Tool SEO seperti Google keyword Planner atau SEMrush lalu cari dan kenali Keyword panjang yang relevan terhadap pembaca, dan tentu saja keyword ini yang harus kita sertakan dalam konten atau artikel kita. Tapi lakukan itu secara alami alias tidak di buat buat, periksa kembali dan sesuaikan gramar bahasanya dalam pemuatan penulisan.

3. Ciptakan keterlibatan, kualitas dan manfaat konten. karena konten yang berkualitas itu amatlah penting, ide anda harus jelas perihal apa yang pembaca ingin baca di blog anda karena sebagian besar mereka ingin mendapatkan pemecahan daripada problem yang sedang mereka hadapi. Artinya konten anda cukup berharga untuk dijadikan sebagai target bagi pembaca, SEO friendly. Itu sederhana dan insyaalah blog anda akan selalu mendapatkan CPC yang tinggi.

4. Selalu ikuti saran Google adsense untuk pengoptimalan iklan. Ini juga simple, Google memperhatikan bentuk, perubahan dan kondisi blog kita setiap waktu, melalui Google analitik mereka mengetahui segalanya perihal lini bisnis mereka. Lebih mengetahui banyak hal daripada kita sendiri. Maka dari itu kita sering menerima notifikasi pengoptimalan ads atau iklan perihal penempatan, posisi dsb. Beberapa hal mereka lakukan secara otomatis atas seizin kita.

Saya sendiri sebagai seorang pekerja yang nyambi sebagai seorang blogger tidak akan memiliki waktu yang cukup untuk mempelajari semua hal dalam waktu singkat, apalagi blog ini umurnya baru beberapa bulan.

5. Mobile friendly. Blog anda juga harus responsive dan mobile friendly artinya mudah dibuka melalui semua perangkat terutama melalui hape. Sejak tahun 2015 Google telah mem-finalti blog yang tidak mobile friendly, bagi yang belum mengerti perihal tampilan blog yang mobile friendly segera lakukan test atau uji coba ke situs uji coba mobile, ketikan saja di pencarian Google: "test blog mobile friendly". 

Jika ternyata belum ganti template blog anda dengan template yang mobile friendly. Atau silahkan donlot template buatan kami di: 

Baca juga:
3. TEMPLATE BLOGGER TERBAIK ADELINASASA:

Paling tidak anda telah selamat satu langkah.

6. Perhatikan tataletak iklan yang baik dan benar, Namun dengan tema premium hal kesalahan peletakan iklan dapat teratasi dengan sendirinya.
Demikianlah hasil membaca blog bantuan adsense milik Google dan menganalisa beberapa blog blog buatan kami yang selalu gagal...he he he dan akhirnya telah kami tuangkan menjadi artikel ini, mungkin telah banyak artikel serupa anda temukan. Tapi membaca dan memahami saja tidaklah cukup bagi kita - kadang secara moral kita harus total untuk mendapatkan hasil yang maksimal. Ingat bisnis bukanlah moral walaupun ada moral bisnis, namun lebih banyak hal yang bertentangan dengan moral yang kita anut pada saat kita menekuni pekerjaan sebagai publisher adsense demi uang.

Dalam berbisnis adsense walaupun kita tidak akan melanggar aturan Google, mungkin kita akan melanggar aturan moral yang telah kita anut semenjak lama....
Selengkapnya... »

November 12, 2018

TOMBOL SHARE PALING RESPONSIVE UNTUK BLOGGER DI TAHUN 2018

2
Menurut saya sih ini tombol share paling responsive telah dibuat oleh rekan blogger kita. Seperti anda ketahui  tombol share cukup signifikan mendukung kinerja SEO sebuah blog, jadi tidak perlu dibahas lagi manfaatnya.
Persiapan:

  1. Masuk ke pengaturan blogger
  2. Pilih tema atau template
  3. Pilih editHTML

Langkah 1
Untuk memasang tombol share ini pastikan template blogger anda telah terpasang kode pemanggil font awsome yang harus anda pasang dibawah kode <head>:

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/>

Dan juga pastikan telah terpasang kode API (Application Programming interface) pada template anda untuk memastikan semua kode perintah widget share yang mau kita pasang berjalan sempurna, masangnya sama yakni dibawah kode <head> atau diatas kode </head> kodenya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Note: Jika kedua kode diatas telah terdapat pada template anda (template tempalte premium telah memiliki kode kode ini) maka langkah diatas dapat diabaikan.

Langkah 2

Cari kode </head> letakan kode di bawah ini sebelum atau sesudahnya (pembuatnya menyarankan sesudahnya, saya berpendapat lebih baik sebelumnya)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>


.bsd_horizontal_sharebar {
position: relative;
background: none;
z-index: 2;
width: 100%;
padding: 10px 0;
display: inline-block;
font-family: sans-serif;
margin: 5px 0px;
border-top: 1px dotted rgba(0, 0, 0, 0.05);
border-bottom: 1px dotted rgba(0, 0, 0, 0.05);
}
.bsd_horizontal_sharebar .Share_buttons {
display: block;
}
.bsd_horizontal_sharebar .Share_buttons .wrap {
text-align: center;
margin: 0 auto;
display: inline-block;
min-width: 41px;
}
.bsd_horizontal_sharebar .Share_buttons .wrap1 {
display: inline-block;
width: 31px;
float: left;
}
.bsd_horizontal_sharebar .Share_buttons ul {
margin: 0;
padding: 0;
}
.bsd_horizontal_sharebar .Share_buttons ul li a, .bsd_horizontal_sharebar .Share_buttons ul li a:hover {
color: #FFF !important;
cursor: pointer;
line-height: 25px;
height: 100%;
display: block;
text-decoration: none;
}
.bsd_horizontal_sharebar .Share_buttons ul li {
list-style: none;
list-style-type: none;
padding: 0;
margin: 1px;
float: left;
width: 16%;
max-width: 115px;
display: inline-block;
font-size: 13px;
overflow: hidden;
text-align: left;
height: 25px;
line-height: 25px;
color: #fff;
border: 1px solid rgba(0,0,0,0.04);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.bsd_horizontal_sharebar .Share_buttons ul li .fa {
color: #fff;
font-size: 17px;
font-weight: normal;
font-family: FontAwesome;
display: inline-block;
text-align: center;
padding: 0;
height: 25px;
line-height: inherit;
width: 30px;
background-color: rgba(0,0,0,0.1);
border-right: 1px solid rgba(0,0,0,0.05);
}
/*--Facebook---*/
.bsd_horizontal_sharebar .Share_buttons .bs_fb {
background: #3a579a;
}
.bsd_horizontal_sharebar .Share_buttons .bs_fb:hover {
background: #314a83;
}
/*--Tweeter---*/
.bsd_horizontal_sharebar .Share_buttons .bs_twtr {
background: #00abf0;
}
.bsd_horizontal_sharebar .Share_buttons .bs_twtr:hover {
background: #0092cc;
}
/*--Google Plus---*/
.bsd_horizontal_sharebar .Share_buttons .bs_gplus {
background: #df4a32;
}
.bsd_horizontal_sharebar .Share_buttons .bs_gplus:hover {
background: #be3f2b;
}
/*--Pinterest---*/
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst {
background: #cd1c1f;
}
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst:hover {
background: #ae181a;
}
/*--linkedin---*/
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin {
background: #2554BF;
}
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin:hover {
background: #224EB4;
}
/*---Total Share----*/
.bsd_horizontal_sharebar .Share_buttons .share.h6 {
font-size: 10px;
font-weight: bold;
text-shadow: none!important;
text-decoration: none;
text-align: center;
color: #000000;
border-top: 3px solid #FFF600 !important;
border-bottom: 0;
padding: 0px !important;
padding-top: 5px!important;
margin: 0 !important;
line-height: 8px;
border-radius: 75% 0;
}
.bsd_horizontal_sharebar .Share_buttons .share {
border: none;
margin: 0px 5px 0px 1px;
overflow: visible !important;
width: 95px !important;
}
.bsd_horizontal_sharebar .Share_buttons .share .count.h4 {
font-size: 18px;
font-weight: bold;
text-shadow: none;
text-decoration: none;
font-family: sans-serif;
text-align: center;
color: #FF0000;
line-height: 15px;
margin-top: 0px;
margin: -4px 0px 2px 0;
min-height: 15px;
padding: 0px;
border: none;
}
.bsd_horizontal_sharebar .Share_buttons .bs_fb .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_twtr .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_gplus .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin .share-bs {
position: relative;
color: #C3C3C3;
display: inline-block;
text-align: center;
font-weight: bold;
font-size: 11px;
float: right;
min-width: 12px;
font-family: sans-serif;
padding: 0px 5px;
background-color: rgba(0,0,0,0.28);
border-radius: 0px 0px 0px 15px;
}
@media only screen and (max-width: 979px) {
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin {
width: 34px;
}
.bsd_horizontal_sharebar .Share_buttons .bs_fb .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_twtr .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_gplus .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst .share-bs
{
display: none !important;
}
}


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

.bsd_horizontal_sharebar .Share_buttons ul li a, .bsd_horizontal_sharebar .Share_buttons ul li a:hover {
color: #FFF !important;
cursor: pointer;
line-height: 25px;


font-size: 11px;
height: 100%;
display: block;
text-decoration: none;
}
.bsd_horizontal_sharebar .Share_buttons .wrap {
min-width: 34px;
}
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin,
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst {
width: 30px;
}
.bsd_horizontal_sharebar .Share_buttons ul li {
margin: 1px 3px;
}
@media only screen and (max-width:479px) {
.bsd_horizontal_sharebar .Share_buttons .share {
border: none;
margin: 0px 5px 0px 1px;
overflow: visible!important;
width: 80px!important;
}
.bsd_horizontal_sharebar .Share_buttons ul li {
width: 25px !important;
margin: 2px;
border-radius: 50px;
border: 2px solid rgba(0, 0, 0, 0.14);
}
.bsd_horizontal_sharebar .Share_buttons .wrap {
display: none !important;
}
.bsd_horizontal_sharebar .Share_buttons ul li .fa {
width: 25px !important;
}
}
</style>
</b:if>

Langkah ke 3:
Di dalam template anda (opsi editHTML) cari kode: share buttons kodenya dalam template aka terlihat seperti:

<!--share buttons-->

di bawahnya ada kode berikut:

<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

Kalau tidak ada pasti bentuknya seperti ini:

<div class='post-share-buttons goog-inline-block'>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
</div>

Hapus kode dibawah share button tersebut dan ganti dengan kode di bawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
var shareUrl = $("link[rel=canonical]").attr("href");
$.getJSON('http://bloggersstand.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
shares = data.shares;
$(".count").each(function (index, el) {
service = $(el).parents(".share-bs").attr("data-service");
count = shares[service];
if (count > 1000) {
count = (count / 1000).toFixed(1);
if (count > 1000) count = (count / 1000).toFixed(1) + "M";
else count = count + "k";
}
$(el).html(count);
});
});
});
//]]></script>
<div class='bsd_horizontal_sharebar'>
<div class='Share_buttons'>
<ul>
<li class='share'>
<div class='share-bs' data-service='total'>
<div class='count h4'></div>
<div class='share h6'>SHARES</div>
</div>
</li>
<li class='bs_fb'><a expr:href='&quot; http://www.facebook.com/share.php?v=4&amp; src=bm&amp; u=&quot; + data:post.url + &quot; &amp; t=&quot; + data:post.title' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'>
<div class="wrap1"><i class="fa fa-facebook"></i> </div>
<div class="wrap">Share</div>
<div class='share-bs' data-service='facebook'>
<div class='count'/></div>
</a>
</li>
<li class='bs_twtr'><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @bloggersstand - &quot;' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'>
<div class="wrap1"><i class='fa fa-twitter'></i></div>
<div class="wrap">Tweet</div>
<div class='share-bs' data-service='twitter'>
<div class='count'/></div>
</a>
</li>
<li class='bs_gplus'><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='javascript:window.open(this.href,&quot; &quot; ,&quot; menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot; ); return false; ' rel='nofollow'>
<div class="wrap1"><i class='fa fa-google-plus'></i></div>
<div class="wrap">Share</div>
<div class='share-bs' data-service='google'>
<div class='count'/></div>
</a>
</li>
<li class='bs_pntrst'><a data-pin-config='beside' expr:href='&quot; http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot; &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=500&quot; ); return false;' rel='nofollow'>
<div class="wrap1"><i class='fa fa-pinterest'></i></div>
<div class="wrap">Pin</div>
<div class='share-bs' data-service='pinterest'>
<div class='count'/></div>
</a>
</li>
<li class='bs_linkdin'><a expr:href='&quot; http://www.linkedin.com/shareArticle?mini=true&amp; url=&quot; + data:post.url + &quot; &amp; title=&quot; + data:post.title + &quot; &amp; summary=&amp; source=&quot; ' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=500&quot; ); return false;' rel='nofollow'>
<div class="wrap1"><i class='fa fa-linkedin'></i></div>
<div class="wrap">Share</div>
<div class='share-bs' data-service='linkedin'>
<div class='count'/></div>
</a>
</li>
</ul>
</div>
</div>
</b:if>
</b:if>


Demo telah di cobakan ke blog edittema ini.
Selengkapnya... »

CARA PASANG IKLAN ADSENSE DI BLOGGER TANPA PARSE

4
Terimakasih kepada pertanyaan pertanyaan yang masuk, ternyata menulis blog jauh lebih mudah dengan berdiskusi bersama, karena ada yang bertanya, maka saya harus menulis artikel pendek ini:
Tanya:
"Apakah setiap iklan yang akan di sisipkan ditengah postingan tanpa melalui widget bawaan blogger harus di "Parse" atau di Parsing terlebih dahulu?"

Seharusnya memang demikian, tetapi pertanyaannya adalah apakah ada cara lain selain di parse?

1. Contoh 1: Cara pasang iklan di tengah postingan dengan kode unit iklan adsense yang dengan cara "di parse"

Lihat saja tutorial selalu mengharuskan kita "memparsing" terlebih dahulu iklan kita agar dapat diterima di dalam templat blog, jadi jelas parse itu sendiri adalah untuk memformat kode iklan adsense agar dapat diterima oleh template blog. Sedangkan bagi browser sendiri, mau di parse atau tidak kode iklan adalah sama saja. Akan tetapi kode iklan yang tidak diparse akan menghasilkan error dengan kode merah. Dan bisa saja iklan tidak akan muncul di tengah postingan

Langkah pertama: Biasanya kalau mau meletakan iklan pasti disuruh cari kode: <data:post.body/> yang nomor dua atau yang nomor tiga, tergantung template sebenarnya. Setiap template blog tidak sama susunan perintah dan kodenya. Hapus saja kode <data:post.body/>  yang nomor 2 lalu ganti dengan kode di bawah ini:


<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='googlepublisherads' style='margin:20px 0'>
<center>


--Letakan kode unit adsense hasil parse disini--

</center>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

Langkah ke-2: Ambil kode iklan di akun adsense kita dan lalu parse di BlogCrowd hasil parse di copy dan lalu hapus kode --Letakan kode unit adsense hasil parse disini--  setelah terhapus ganti/pastekan kode adsense yang telah di parse tadi. Save tema. Unit iklan akan terpasang di tengah postingan.

2. Contoh 2: Memasang kode unit adsense tanpa memparsingnya terlebih dahulu

Sebenarnya tidak perlu melakukan cara diatas, yakni memparsing kode unit adsense. Karena sebenarnya,  jika akan memasukan kode iklan ketengah kode diatas cukup menambahkan ="async" setelah kode async pada kode iklan adsense misalnya sbb:

<script async ="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>.....dst dst....

Jadi dengan menambahkan ="async" setelah async sebenarnya sudah cukup untuk menampilkan iklan adsense di tengah postingan blog tanpa harus memparsenya lagi, template blog umumnya menerima setiap asinkronisasi script yang di embed kedalammnya.

Semoga bermanfaat.
Selengkapnya... »

November 11, 2018

CARA MENGHAPUS GRADASI WARNA TEMA VIOMAGZ TERBARU DAN MENGGANTINYA DENGAN WARNA INFINITY

15
Tampilan Navigasi tema buatan Mas Sugeng

Ada pertanyaan yang diajukan melalui email (gmail):

Dear Mas Sofyan,
Saya membeli dan memakai viomag terbaru buatan mas Sugeng tapi saya ingin merobah tampilan menu navigasinya menjadi berwarna warni daripada sekedar gradasi dua warna, bisakah anda memberikan tutorial cara membuat menu navigasinya berwarna warni sperti layaknya infinity color buatan Arlina...bla..bla..bla..
Template viomag terbaru ini sebenarnya sudah memiliki warna gradasi dua warna pada navigasi menunya, yang sebelah kanan dan sebelah kirinya bisa dirubah berbeda warna dengan mudah melalui opsi pengaturan blogger yakni melalui Desainer Tema Blogger. Tapi ada yang mencoba untuk merobah tampilannya menjadi infinity color.

Sebenarnya saya ragu untuk memenuhinya karena pertanyaan serupa pernah diajukan melalu blog comment di blog ini pada salah satu tutorial:

CARA MEMBUAT GRADASI WARNA PADA HEADER BLOGGER

Dan saya telah menjawabnya, akan tetapi karena pertanyaan terulang saya akan memberikan triknya sbb:


  1. Buka template viomag anda melalui pengaturan blogger seperti biasa saat anda mau menambahkan widget pada blog.
  2. Pilih "Tema atau Template"
  3. Pilih editHTML
Pada halaman HTML cari kode berikut di template mas Sugeng yang keren ini:
/* HEADER */
#header-container {

Dibawah kode tersebut terdapat kode dibawah ini:

background: $(header.background.kiri);
background: linear-gradient(to right, $(header.background.kiri), $(header.background.kanan));
-webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 999;
height: 48px;
}

Dan lalu hapus saja seluruh kode yang saya sorot dengan warna kuning tersebut silahkan diganti dengan kode yang telah saya modifikasi di bawah ini:

background: linear-gradient(-50deg, #F0FFFF#FFB6C1, #20aadb, #87CEFA);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

Lalu SAVE template.

KELEMAHAN:
Navigasi akan kehilangan "sticky" alias tidak fix berada diatas header pada saat di scroll , namun anda bisa memodifikasinya dan akan kami sediakan tutorialnya dilain waktu. Banyak juga yang berpendapat Tutorial diatas sudah cukup membantu karena tidak semua orang menyukai menu navigasi yang sticky.

Kode dibawah ini tidak akan berfungsi lagi untuk opsi "sticky mode" pada viomag versi terbaru tersebut.

position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 999;
height: 48px;
}


Semoga bermanfaat jika ada pertanyaan, kami akan menjawab dan memberikan penjelasan se simpel mungkin.
Selengkapnya... »

November 10, 2018

CARA PALING MUDAH MEMASANG DAN MENERAPKAN TOMBOL SHARE ARLINA

6
Bang, ane coba pasang tombol share dari tutorialnya Arlina sudah pilih banyak post.body tetap saja tombol sharenya gak muncul, buatin tutorialnya don.
-Reza-
Tombol share juga penting,  tujuannya untuk memudahkan kita berbagi atau agar pembaca mudah membagikan artikel/postingan kita. Saya membaca banyak blog dan  diantaranya beberapa teman mengajukan pertanyaan karena kesulitan memasang tombol share yang terdapat dalam tutorial blognya Arlina Desizn yang berjudul:
MEMASANG TOMBOL SHARE DI BLOG
Silahkan baca tutorial tersebut. Kesulitannya adalah pada saat memilih pemasangan setelah tag <data:post.body/> saya meneliti koleksi struktur blog yang saya simpan di notepad ternyata para blogger pemula kesulitan memilih diantara 1,2,3 sampai empat kode serupa walaupun Arlina mengatakan pilih kode ke-2 dalam mark up post (bukan mobile) tetap saja membingungkan. 

Karena ketika cara tersebut diterapkan dan ternyata tidak berhasil, anda harus mencari kodenya kembali untuk dihapus dalam HTML, mencari diantara beberapa kode <data:post.body/> ribet bukan?

Anggaplah saya sedang mengoreksinya, cara yang cukup mudah dilakukan adalah: 
  1. Masuk kepengaturan blog
  2. Pilih Tema atau template
  3. Pilih editHTML
Seperti pada tutorial Arlina, cari kode ]]></b:skin>  atau </style> dan letakan kode CSS dibawah ini di atasnya, (cara ini sudah benar):

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='tombol-berbagi-arlina'> <div class='tombol-berbagi-arlina-fb'> <a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a> </div> <div class='tombol-berbagi-arlina-tw'> <a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a> </div> <div class='tombol-berbagi'> <a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a> </div> <div class='tombol-berbagi'> <a class='tombol-berbagi-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a> </div> </div> </b:if>

Lalu bagaimana dengan langkah yang kedua? Berbeda dengan cara yang arlina tunjukan pada blognya, alih alih harus memilih salah satu kode <data:post.body/>, saya lebih menyarankan anda mencari kode <!--Share buttons--> di dalam HTMl, tekan ctrl+f dan pada kotak pencarian diatas kolom HTML ketikan saja: Share Button, bentuknya sbb
Dibawah "Share buttons" ada barisan kode:
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

Atau kalau tidak terdapat kode diatas pasti ada kode sbb:

<div class='post-share-buttons goog-inline-block'>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
</div>

Hapus semua kode tersebut, tapi tinggalkan kode <!--share buttons--!> diatasnya, dan gantikan dengan kode dari Arlina dibawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='tombol-berbagi-arlina'> <div class='tombol-berbagi-arlina-fb'> <a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a> </div> <div class='tombol-berbagi-arlina-tw'> <a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a> </div> <div class='tombol-berbagi'> <a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a> </div> <div class='tombol-berbagi'> <a class='tombol-berbagi-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a> </div> </div> </b:if>

Dan silahkan SAVE template blogger anda.

Tampilannya adalah seperti di bawah ini dan kami cobakan diblog editblogtema untuk membuktikan "keampuhannya".
Terimakasih, semoga bermanfaat!
Selengkapnya... »

MENGAPA MENU NAVIGASI ITU PENTING UNTUK BLOG ANDA

2
Sekalipun tema bawaan blog menyediakan opsi "page" atau "halaman" yang dapat kita fungsikan sebagai "menu navigasi" untuk blog kita misalnya dengan masuk kepengaturan blogger, pilih "Tataletak" lalu pilih tambahkan "page" atau "halaman" Tuliskan Judul pada setiap item yang mau kita tambahkan, tambahkan lagi link baik berdasarkan label blog maupun halaman mandiri dari blog anda yang lain.
Hasilnya akan sama sama saja dengan menu navigasi horisontal yang apabila di klik akan mengantarkan pembaca ke link sesuai yang di tunjukan oleh menu yang telah kita buat berdasarkan "page atau halaman" ini.

Tapi taukan kekurangannya? Untuk template bawaan blog yang lebih tua menu hanya cocok buat tampilan desktop dan laptop, tidak cocok untuk tampilan tablet ukuran kecil apalagi hape. Kita menyebutnya tidak responsive walaupun misalnya template blog telah kita modifikasi menjadi responsive.

Kecuali pada 4 template terbaru blogger seperti Contempo, Soho, emporio dan terkemuka, baru menu yang dibuat dengan "Page atau Halaman" ini jadi responsive dan dapat di gunakan untuk tampilan hape yang paling kecil sekalipun karena pada tampilan PC dan laptop akan menampilkan menu horisontal sebaliknya ketika kita gunakan hape menu akan otomatis jadi "dropdown" dan ini menarik.

Jadi jika anda ingin membuat menu Navigasi berdasarkan widget "Page atau Halaman" terapkan saja pada keempat template blogger terbaru: Yakni Soho, Contempo, Emporio dan Terkemuka yang kami sebutkan di atas tadi. Jika anda lebih tertarik menggunakan template blogger yang lebih tua seperti "Sederhana, Jendela gambar, PT keren sekali (awsome), Tanda air, kelembutan dan Perjalanan. Sebaiknya ikuti Tutorial kami di:

MENU MENU NAVIGASI BLOGGER RESPONSIVE EDIT BLOG TEMA

Anda akan di bimbing selangkah demi selangkah bagaimana memasang menu menu navigasi yang responsive ke dalam template blogger yang lebih tua dan tentu saja jika ada pertanyaan kami akan menjawab dan memberikan penjelasan sesederhana dan semudah mungkin untuk dimengerti.

MENGAPA MENU NAVIGASI ITU PENTING?

Walaupun tidak esensial, tapi dengan menu navigasi itu berfungsi sebagai: Pemandu untuk pengunjung karena didalamnya berisi link link utama yang ingin disampaikan oleh pemilik website atau blog agar lebih mudah menentukan kategori apa yang sedang ingin mereka cari tanpa bersusah payah mengobrak abrik isi dan judul artikel di dalam website atau blog tersebut.

Jadi dia akan mempermudah pembaca mencari Judul, sub-judul berdasarkan label website atau blog yang dikunjunginya.

Dan yang penting adalah:


  1. Mempercepat sitelink karena pembaca akan melihat judul di submenu dan menentukan pilihan apa yang akan mereka baca
  2. Terlihat professional, karena kita telah melakukan penyekatan yang sistematis dengan mengelompokan artikel menurut jenisnya. Pengunjung lebih tertarik mengunjungi blog yang mudah memandu mereka untuk mendapatkan apa yang sedang mereka cari.
  3. Tentu saja di nilai baik dari segi SEO dan oleh Google karena usaha kita memanjakan pembaca dengan kemudahan navigasi sedemikian rupa.
  4. Tampilan blog terlihat jadi lengkap dan unik dengan dekorasi navigasi menu yang unik dan user friendly.
Syarat menu navigasi yang baik:

Contoh tampilan menu navigasi pada layar besar
  1. Mudah di fahami cara penggunaannya, mengikuti standar umum yang user friendly. Biasanya yang paling umum persis seperti menu navigasi perkantoran akan tetapi tentu saja terkadang akan terlihat monoton
  2. Menarik dan kadang memiliki menu pencarian pada ujungnya
  3. Tidak mengganggu penampilan blog secara keseluruhan maupun mengganggu atau merusak tampilan artikel dan postingan.
  4. Responsive dan mobile friendly. Artinya bisa di pakai untuk layar ukuran paling besar dan hingga ukuran kecil. Misal untuk tampilan PC/laptop menu navigasi tampak horisontal, tetapi pas ketika dipakai untuk layar tablet yang lebih kecil dan ponsel menu akan berubah menjadi auto dropdown, jika disentuh akan tampil menu dari atas kebawah (vertikal/dropdown) dan jika dilepas akan segera jadi tersembunyi dalam satu tombol saja. Contoh pada Gambar:
    Tampilan Tombol Navigasi menu pada layar kecil/ponsel
    Intinya jika anda bermaksud mengabaikannya anda akan kehilangan beberapa hal: Interest sebagian besar pembaca, kemudahan navigasi yang penting seperti kita memandu orang yang belum tahu jalan ke tempat tujuan, kecepatan pencarian pada atikel tertentu yang diminati oleh pembaca.
Apalagi jika suatu hari blog anda telah menjadi besar dan memiliki beribu ribu konten dan artikel, memiliki menu navigasi adalah sebuah keniscayaan. Namun memang tanpa menu navigasi sekalipun blog anda tidak akan terbunuh. Hanya saja akan terasa "ada yang kurang" bagi pengunjung dan pembaca blog anda.
Selengkapnya... »

Follow

Follow: