Kamis, 16 Mei 2019

CARA MENGHAPUS TOMBOL SHARE BAWAAN BLOGSPOT

Gambar tombol Share pengganti pada blogspot
Tombol bawaan blogspot atau blogger itu yang kami maksud bentuknya yang seperti ini:
Terlihat kecil dan monoton, dan trik untuk menggantinya sangat mudah. 

Masuk ke pengaturan blogspot/blogger, pilih TEMA lalu klik "editHTML" cari salah satu kode di bawah ini:

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


Atau kalau tidak ketemu cari kode dibawah ini, kita dapat menerapkan ini dengan mudah pada template jenis sederhana, awsome dst:

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


Atau......
Perhatikan gambar baik-baik: Gunakan saja ctrl+F untuk mempercepat pencarian, dan kalau sudah ketemu hapus saja. Kode yang kita sebutkan diatas terlihat dalam HTML blogspot sebagai berikut:

Dan perhatikan setelah di hapus akan tertinggal sub-title kode : <!--share buttons--> di atasnya:

Maka kopi pastekan kode di bawah ini ke dalam ruang kosong di bawah kode <!--share buttons--> sebagai pengganti share button atau tombol share yang telah kita hapus tadi:

&lt;script type=&quot;text/javascript&quot; src=&quot;//platform-api.sharethis.com/js/sharethis.js#property=5998595b6692a7001120ec54&amp;product=inline-share-buttons&quot;&gt;&lt;/script&gt;

Lalu Save dan lihat hasilnya akan terlihat seperti pada gambar diatas postingan ini

Label: , , ,

MEMBUAT RECENT POST RESPONSIVE GAYA EDITBLOG

Recent post adalah adalah ujud lain dari thumbnail dan snippet home page blogger yang di olah secara singkat dari isi posingan blog secara berurut di mulai dari yang terbaru, untuk melengkapi tutorial pemakaian tema blogger editblog mungkin ada yang tertarik menambahkan widget ini ke dalam tema blog. Jika tidak abaikan saja.
Image recent post pada side bar editblog
Cara pemasangan recent post sangat mudah tingga masuk ke pengaturan blog masuk ke lay out pilih HTM/Java script kopi pastekan saja kode dibawa ini kedalam kotak widget HTM/Java script tadi:
Setelah HTML/Javascript kita pilih akan muncul kotak dialog widget yang dapat ditulis atau di pastekan kode seperti ganbar dibawah ini:
Kopi pastekan kode dibawah ini kedalam kotak widget tersebut:

<div class="recentpoststyle"><script type="text/javascript">function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... Baca selengkapnya..";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}</script><script type="text/javascript">var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script><script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts"></script><a style="font-size: 9px; color: #E6E6FA;margin-top:10px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a><noscript>Your browser does not support JavaScript!</noscript><style type="text/css">.recentpoststyle {counter-reset: countposts;list-style-type: none;}.recentpoststyle a {text-decoration: none;color: #49A8D1;}.recentpoststyle a:hover {color: #000;}.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#FF69B4;background:#E6E6FA; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}.recent-post-title a {color: #444;text-decoration: none;font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}.post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}.recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}</style></div>
Demikian cara membuat widget recent post yang responsive dan ringan. Selamat ngeblog!

Label: , , , ,

SEPERTI APAKAH SEORANG BLOGGER ITU?

Setelah merenungkannya saya memutuskan, saya bukan seorang blogger samasekali. Karena pada awal membuat blog juga hanya iseng tanpa niat, dan pada saat kebetulan melihat opsi "$Earnings" saya mencobanya dan satu minggu baru mengerti kalau hal tersebut adalah adsense! Itupun setelah membaca tulisan para masta Blog di Google Plus.

Yang saya niatkan hanyalah pingin menulis dan berbagi karena sering membaca tulisan para blogger di web, mereka nampak keren dimata saya. Tapi hal tersebut tidak lantas membuat saya kepingin menjadi seorang blogger, mungkin karena saya telah memiliki pekerjaan tetap yang selama ini terbukti dapat menghidupi dan membuat saya sedikit hidup tenang. Satu satunya alasan yang membuat saya akhirnya ikut ikutan ngeblog adalah karena rasa keinginan tahuan.

HAUS PENGATAHUAN
Mungkin kelebihan yang diberikan oleh Tuhan kepada saya adalah rasa ingin tahu yang kuat walau kadang nampak seperti kutukan dalam hidup saya. Karena saya tidak sampai melewati kuliah dan hanya melewati bangku sekolah tanpa dapat menikmati setiap mata pelajaran kecuali matimatika, namun sayangnya mata pelajaran tersebut begitu langka dibangku sekolah yang pernah saya duduki dikampung, seiring waktu saya belajar bahasa bahasa asing seorang diri, belajar komputer dan diterima bekerja dibeberapa perusahaan hanya dengan rekomendasi dan sertifikat yang didapatkan di luar bangku sekolah. Anggaplah saya beruntung.
Keinginan kuat belajar koding adalah ketika saya mulai hobi membeli gagdet seperti ponsel dan tablet juga laptop. Yang saya pikirkan adalah sistem operasinya seperti windows dan linux dari hasil utak atik gagdet saya mendapatkan banyak pelajaran berharga. Dan tentu saja belajar itu mahal, namun tidak semahal jika saya harus duduk dibangku kuliah. Dari layar gagdet gagdet saya banyak membaca dan mulai berhenti membeli buku dan koran. Jujur pertama hal yang saya geluti adalah teknik "hacking", dari sana saya belajar melihat kesempatan dan celah celah kelemahan yang dapat di eksploitasi. Mencobakannya pernah membuat saya hampir tergelincir kedalam risiko hukum.

Sejak itu saya mulai belajar: Segala hal tidak boleh di pamerkan, kesederhanaan justeru adalah benteng hidup yang paling kuat buat melindungi diri kita dari marabahaya. Walaupun suka juga bercerita, namun saya mulai belajar bagaimana mengatakan hal hal secara terselubung.

MULAI NGEBLOG.
 Dan saya benar benar mulai aktif ngeblog adalah awal tahun 2017, walaupun sebelumnya pernah mencoba namun tidak dilanjutkan dan blognya "hilang" alias mati. Hanya berselang sebulan ketika mendapat pemberitahuan bahwa blog saya diterima adsense, jujur waktu itu belum benar benar mengerti adsense.

Adsense terpasang, permulaan karena selalu gatal ingin menulis tanpa pengatahuan SEO, dan tidak perduli ads mau pasang dimana saja. Hanya menulis saja dan publish. Ketika adsense meminta rekening saya sempat ragu, itu adalah bentuk penipuan. Namun saat membaca artikel para blogger saya akhirnya mengirimkannya. 3 bulan ternyata saya berhasil mendapatkan 100 Dollar. Semua uangnya saya berikan kepada seseorang kerabat yang sedang sangat membutuhkannya. Penghasilan itu sedikit memberikan motivasi saya untuk menggali ilmu blogging walau jujur saja saya tetap ragu.

Namun saya sangat bersyukur, ternyata dari ngeblog saya mengenal koding dan web programming lebih jauh saya baru menyadari mengapa saya belajar ngeblog. Saya akhirnya terbiasa melihat untaian kode kode HTML, XML, PhP, JS, dan CSS. Belajar saya adalah otodidak, sama seperti pada saat belajar bahasa Inggris, awalnya tidak mengerti mengapa harus belajar grammar. Saya mengabaikan segala urusan misalnya istilah  syntax yang terdengar aneh. Akan tetapi tanpa disadari ternyata telah saya praktikan tanpa mengetahui istilah istilah tersebut! Jadi saya menganjurkan kita semua agar meluangkan waktu untuk belajar secara otodidak.

POTENSI BLOGGER DI MASA DEPAN
Para blogger sebenarnya adalah orang orang yang berpotensi menjadi orang hebat dan jelas beruntung. Terlepas apakah kita akhirnya menlanjutkan niat kita menjadi seorang blogger.

Hanya saja perlu diingat, blogging adalah hal lama dan berbasis software dan aplikasi yang suatu hari bisa saja mati alias tidak ada lagi di dunia dalam sepuluh tahun mendatang atau digantikan oleh hal yang samasekali baru. kita telah menyaksikan beberapa platform web akhirnya mati setelah sempat berjaya dan mengantarkan para pegiat platform tersebut ke jenjang kesuksesan.

Blogger hanyalah sebuah profesi yang platformnya dibuat oleh manusia dalam hal ini Google, bisa saja jika suatu hari platform ini dianggap mulai tidak menguntungkan perusahaan dan akan ditutup.

15 tahun yang lalu youtuber bukanlah apa apa, boleh dikatakan mereka dianggap "tak ada"  namun dalam beberapa tahun belakangan para youtuber mendapatkan tempat di planet ini dan mendapatkan pengakuan sebagai sebuah profesi. Apakah youtube sebagai basis para youtuber mampu bertahan 10 tahun lagi tanpa diterpa persaingan atau kompetesi dari platform video lain? Jika melihat posisi Google yang begitu perkasa, rasanya memang sulit mengatakan akan ada pesaing lain yang berpotensi menjadi kompetitor kuat baginya.

Sedangkan untuk blogger sendiri tidak sedikit para ahli yang skeptis dan beranggapan bahwa "Blogging is old time job" atau "ngeblog adalah pekerjaan lama alias profesi jadul". Namun jika terlihat dari usaha Google yang terus menerus melakukan inovasi terhadap platform yang mereka akuisasi dari Pyra Labs di tahun 2003 ini, rasanya untuk masa sekarang pekerjaan ngeblog masih konsisten bagi para blogger.

Akan lahir segala kemungkinan yang sulit diprediksi ketika populasi manusia membengkak, dengan peningkatan kecerdasan akibat dari ketatnya persaingan dan di prediksi akan melahirkan inovasi hebat dari para inventor web dalam menawarkan dan menyalurkan ide penulisan yang pastinya jauh lebih menjanjikan di masa yang akan datang.

Ingat, tidak ada yang abadi di dunia, KECUALI PERUBAHAN ITU SENDIRI. Entah mengapa hukum relativitas Einstein selalu berlaku hingga ke sendi sendi dan aspek kehidupan kita...dan waktu berjalan semakin cepat dalam ujud relativitas.

Label: , , ,

Sabtu, 04 Mei 2019

Aku pernah hidup hanya separoh hati

Sekelumit kisah dari masa lalu

Notebook

Sesayup ingatan

Semua orang punya kisah pada masa lalu mereka, tanpa mereka sadari apa yang telah berlalu itu begitu sulit jika kita harus melewatinya sekarang ini, untungnya semua itu telah berlalu .
Batam Island 1999
Bau lumpur bercampur aroma anyir kerang saat pertama aku mendarat di Pulau ini. Angin seolah memaksanya berjejal dihidung. Kami datang menggunakan perahu bermotor yang berlabuh dipantai kotor berlumpur hitam ketika air sedang surut.

Kami datang berempat, hubungan kami semua adalah sudara sepupu, tiga laki laki termasuk aku dan seorang prempuan yang masih belum berumur 16 tahun.

Yang masih kuingat dengan jelas adalah senja mulai turun di tanjung Uma pulau Batam, bayang bayang memanjang dari pelantar dan demaga kayu yang berdiri diatas lumpur, tongkat tongkatnya hitam dan posturnya yang tua tampak begitu rapuh.

Benar, ketika kami berempat menaiki tangga kayu itu terasa goyah. Nona satu satunya cewek diantara kami nampak ketakutan menaikinya saudaraku yang berada dibawahnya membantunya naik.

Diatas tidak kalah memprihatinkan, papan lantainya disusun jarang jarang sehingga lumpur dibawahnya nampak berkilau diterpa cahaya matahari senja. Aku berfikir ini jauh lebih buruk daripada keadaan dermaga kayu dikampung.

Dikampung dermaganya dibuat di pinggir sungai, aromanya bukan lumpur tetapi bau kopra yang dijemur, papannya lebih tebal dan nampak berminyak namun disusun lebih rapat. Dikampung tidak ada orang yang menyambut kami dengan kebisingan dan menawarkan tiket tumpangan dengan harga yang mahal.

Bayangan pertama tentang Batam adalah tg. Uma. Kampung tua dengan rumah rumah yang dibangun dari kayu atau setengah batu.

Tetapi ketika kami mulai naik taksi mulailah terlihat pemandangan yang berbeda, gedung gedung hotel, pekik klakson dan teriakan orang batak yang menjadi kondektur, toko hingga pedagang kaki lima disepanjang perjalanan. Aku menebak nebak dimana nanti kami akan tinggal.

Ternyata kami membelok masuk sebelah kanan jalan yang sangat kontras, itu jalan setapak tanpa aspal. Taksi berhenti dan tidak mungkin masuk hingga kedalamnya. Memasuki jalan itu saya cukup heran jalan itu menurun dan kadang mendaki dengan rumah rumah yang dibuat seadanya di kiri dan kanannya. Jalannya sempit tidak beraspal kadang seperti undakan tanah liat yang terbentuk alami. Kini barulah saya menyadari setelah mengingat apa yang pernah kudengar: perumahan liar Batam!

Cukup jauh kami berjalan dan jalan itu semakin mendaki. Saya lihat Novi mulai kecapean dengan ransel cukup besar di punggungnya. Dua saudara sepupuku yang laki laki malah nampak biasa biasa saja.

Kami sampai sebuah rumah yang terbuat dari kayu, bertingkat namun nampak papan papan bangunannya yang telah banyak lapuk. Kami disambut seorang lelaki separoh baya berasal dari kampung kami, dia telah lama menetap di kota pulau ini rumah kayu ini dibangunnya di lahan liar perbukitan dekat dengan permukiman kontras dan bagus Jodoh Square. Dia hidup dari menyewakan kamar kamar dua bangunan rumah kayu dua tingkat itu, di depan rumahnya di sisihkan satu ruangan untuk menjadi warung untuk berjualan kelontongan pelanggannya tentu saja penghuni yang menyewa kamar kamarnya yang tentu saja terkadang berhutang terlebih dahulu.

Aku sudah membayangkan, tidak akan tinggal ditempat itu berlama lama, begitu mendapatkan pekerjaan yang bagus aku pasti akan mencari rumah kontrakan yang layak, atau bahkan membeli rumah dipermukiman yang layak. Tapi tentu saja aku harus bekerja keras terlebih dahulu

Cerita ini ditulis melalui mode HTML bukan compose..Image link to Sofyan-Yaan (Bersambung)


Label: , ,

Sabtu, 08 September 2018

CARA UNINSTAL/REMOVE SISTEM KOMENTAR DISQUS DARI BLOGSPOT

Mengapa orang membuang sistem komentar disqus?

Ada beberapa teman yang ingin membuang sistem komentar disqus pada blogspot mereka, dan menanyakan cara meremove / uninstall sistem komentar disqus yang sudah terlanjur terpasang pada template blogger
Caranya sih sederhana saja tetapi ingat pastikan terlebih dahulu agar mensinkronkan semua komentar kita.
editblogtema
Sebenarnya kalau menurut kami sistem komentar disqus ini memiliki banyak kelebihan walaupun memiliki banyak minus menurut orang orang di barat sana:

  • Disqus mulai secara massive menerapkan basis ads ke dalam platform mereka yang membuat kecepatan blog melambat drastis.
  • Menurut sumber GTMetrix 90% waktu tes hompage blog pada kebanyakan kasus loading disqus sangat lama pada homepage blogspot, termasuk memperlambat blogger AMP, dan termasuk indivual test terhadap setiap postingan itu sendiri.
  • Dan perlambatan juga berlaku untuk mobile blogger, bukan hanya versi desktop.Laptop.
  • Komentar disqus tidak lagi sinkron dengan blogspot.
Hanya itu saja informasi yang dapat kami kumpulkan dari sumber smber di network, perhatikan matrix kecepatan yang terpengaruh oleh sistem komentar disqus di bawah ini:


 Cara mensinkronkan komentar disqus yang akan buang?
Pertama pastikan blogger kita bukan AMP, nah kalau bloggernya HTML klasik biasa dibawah ini kami beritahukan caranya:

  1. Masuk ke akun disqus
  2. Temukan tool >>Import>>Blogger - lalu klik sync atau sinkron
Lamanya waktu penyinkronan tergantung seberapa besar dan banyak konten atau isi blog kita, tunggu sampai penyinkronan selesai agar aman pelepasan disqusnya.

Cara melepaskan sistem komentar disqus dari blogspot:

Langkah 1: Masuk ke akun blogger kita
Langkah 2: Masuk ke pengaturan Lay out /Tata letak dan cari widget dengan nama 'Disqus'
Edit dan remove saja Wodget dengan tulisan 'Disqus Comments' tersebut diatas.
Jika masih ada sisa kode/script yang tertinggal, kita dapat melakukan pembersihan lebih jauh melalui pengaturan blogger >>Lay out >>

Label: , , ,

Rabu, 05 September 2018

MAU MEMASANG IKON AWSOME DENGAN GRADASI WARNA DI BLOG? BEGINI CARANYA!

Rekan rekan blogger! Kita bahas sedikit perihal kecenderungan kita sebagai seorang blogger yang terkadang memiliki sensasi sebagai desainer, dan tanpa kita sadari keinginan tersebut telah membawa kita mendekati kedua hal ini: Menjadi seorang programmer dan atau menjadi seorang desainer.

Dalam hal mendesain template peranan css, kemudian elemen ikon ikon seperti awsome misalnya sudah tidak bisa di abaikan lagi, ada yang bertanya apakah elemen elemen serupa seperti itu tidak memberatkan loading sebuah tema atau template blogger? Jawabannya tergantung, jika ditulis dan ditempatkan dengan benar tentu saja tidak akan terlalu berpengaruh pada kecepatan, bahkan tema tema blogger AMP tidak dapat meninggalkan kaidah kaidah keindahan elemen elemen template seperti ini.

PROGRAMMER vs DESAINER
Disana ada terletak perbedaan persoalan yang harus dihadapi oleh seorang programmer dengan seorang desainer. Seorang programmer harus dapat membuat semua fungsi bekerja menurut standard kebutuhan atau membuat sebuah template dapat bekerja dan berfungsi sebagai sebuah template menurut permintaan klien. Mampu bekerja dengan bahasa program dan koding sepenuhnya. Sedangkan seorang desainer harus membuat sebuah tema agar memiliki "wajah" berdasarkan pemikiran estitika atau keindahan. Sementara pekerjaan seorang programmer lebih pasti, tugas seorang desainer justeru menjadi rumit.

Seorang desainer tema selain harus memahami dasar koding juga harus memiliki cita rasa seni yang dapat dijual. Seorang desainer misalnya akan bertanya dengan kode apa saya bisa membuat kombinasi warna yang menarik? Atau sekedar menempatkan Menu di tempat yang tepat di atas template sehingga enak dipandang mata? Atau membuat menu tersebut tidak hanya sedap dipandang mata tapi justeru menjadi sangat user friendly? Seorang desainer kadang dituntut agar dapat membuat sebuah tema justeru menjadi manusiawi dan cocok dengan kepribadian calon penggunanya.

Dan disanalah letak kehebatannya: Kombinasi seorang programmer dengan seorang desainer akan menghasilkan seorang 'KREATOR'

MEMBUAT IKON MENJADI BERWARNA DENGAN STYLE GRADASI

Pernah memperhatikan template template yang didesain untuk wordpress blog? Atau pernah melihat karya karya envanto yang sangat "mobile" namun dengan loading cepat tanpa kehilangan keindahannya. Disinilah peranan dan sentuhan seorang desainer dan seorang programmer sekaligus diperlukan dalam pembuatan sebuah template yang indah, gegas, dan cepat!

Bukan hanya template bergaya  infinite yang dominan warna gradasi pada headrnya akan tetapi setiap ikon dapat kita berikan warna gradasi sesuka hati dan menurut selera kita asalkan mengikuti syarat ini: Mengkombinasikan kode css dengan ikon "fa fa awsome" dan atau sejenis dengan itu.

Langkah pertama kita harus  masuk ke pengaturan blogger langsung ke opsi "edit TEMA" saja ya karena dengan asumsi kita sudah mengerti caranya jika telah membaca tutorial tutorial kami sebelumnya.

Dengan asumsi kita sedang mengedit tema bawaan, maka cari kode </head> lalu kopi kode dibawah ini dan pastekan diatas kode </head> tadi.

<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Save. Dan lalu untuk percobaan kembali ke pengaturan blogger - pilih add widget - pilih HTML/java script, lalu pastekan kode ikon fa fa awsome yang telah kami pilih dibawah ini kedalam kotak widget HTML/javascript tadi atau lihat gambar dibawah.

<i class="fa fa-facebook-official" aria-hidden="true"></i>


Save. Jika mau geser saja widgetnya biar berada diatas postingan,  maka kode  tersebut akan berbentuk ikon facebook seperti dibawah ini, masih dalam ujud ikon yang berwarna hitam putih

Agar Widget tadi berwarna gradasi (kombinasi dua warna) kita perlu menambahkan kode dibawah ini dan meletakannya diatas kode: ]]></b:skin>, begini kodenya:

.gradient-icon {
    background: -webkit-gradient(linear, left top, left bottom, from(#1E90FF), to(#FFC0CB));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: initial;
}

Dan langkah berikutnya adalah kembali ke kode ikon fa fa awsome yang berada didalam widget HTML/java script yakni: <i class="fa fa-facebook-official" aria-hidden="true"></i> Edit dengan menambahkan: "gradient-icon" jadi kode fa fa awsomenya akan menjadi seperti ini:
<i class="fa fa-facebook-official gradient-icon fa-5x" aria-hidden="true"></i>

Perhatikan letak posisi kode perintah pemanggil tambahan yang di sorot warna kuning. Maka ikon akan berganti warna dari hitam dan putih menjadi gradasi! Lihat gambar:

Cobakan kepada semua ikon fa fa awsome ada ratusan kode kode ikon sejenis gratis dan bebas di pergunakan di Internet. Jika kita ingin mengganti warna gradasi atau kombinasi warna kita dapat melakukannya dengan merubah kode css yang telah kita letakan di atas kode ]]></b:skin> diatas.

.gradient-icon {
    background: -webkit-gradient(linear, left top, left bottom, from(#1E90FF), to(#FFC0CB));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: initial;
}
Ganti saja kode warna dengan kode warna css, cari daftar kode warna warni di internet, semuanya gratis.

Selamat mencoba menjadi desainer template! Kalau kita berfikir kita bisa, kita pasti bisa, Tujuan dan pencapaian besar itu selalu di awali dengan sebuah langkah kecil dan biasa saja pada awalnya dahulu....

Label: , , , , , ,

Minggu, 02 September 2018

CARA MEMBUAT MENU PENCARIAN BERBENTUK BULAT DIDALAM HEADER TEMA AWSOME

Sengaja dengan bentuk gaya bahasa sesederhana mungkin kami memberikan trik ini dan berbagi, ingat tidak pada setiap jenis tema blogger hal ini dapat dilakukan, kami telah mencobakannya pada tema awsome hasil modifikasi kami dengan gaya header berwarna infinite mirip Desain Arlina, namun jangan salah, gaya itu kami buat (baca: modifikasi) dengan teknik kami sendiri menggunakan elemen elemen yang tersedia gratis di internet dan siapapun bebas menggunakannya tanpa perlu kuatir, termasuk menggunakan template hasil kerja kami.

MEMBUAT MENU PENCARIAN BERBENTUK BULAT DAN MELETAKANNYA DI POJOK KANAN HEADER BLOG?

Setelah kami mencari tutorialnya kebanyakan dalam bahasa Inggris, dan itupun adalah tutorial bagaimana membuatnya, bukan trik untuk mendapatkannya. Nah untuk tema atau template awsome gratis bawaan blogger yang telah kita edit agar nampak premium dan professional ikutilah tutorial kami sebelumnya perihal membuat warna gradasi baik yang tidak animasi maupun yang animasi, baca: CARA MEMBUAT GRADASI WARNA DI HEADER BLOGGER

Dan selanjutnya agar header tersebut menjadi lebih keren dan premium kita dapat meletakan kotak pencarian seperti terlihat pada gambar di bawah ini:
ilustrasi ini triknya beda
Perhatikan perbedaannya sesudah diberi kotak pencarian sebelah atas bar header dan sebelumnya di bawahnya.
  • Untuk template bawaan (default) blogspot pasang terlebih dahulu script awsome dibawah ini. Caranya adalah dengan masuk ke pengaturan blogger dan pilih opsi "edit HTML" cari kode </head> letakan kode:    <link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> pas diatas kode </head> tadi.
  • Masih di pengaturan blogger lalu pilih opsi "edit HTML" cari kode ]]></b:skin>  dan kopi kode css dibawah ini dan letakan di atas kode ]]></b:skin> tersebut:

/* Search Button Popup */ #search-wrapper{width:90%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-animation:shownow 0.3s ease-in-out;-moz-animation:shownow 0.3s ease-in-out;animation:shownow 0.3s ease-in-out} @keyframes shownow{0%{transform:scale(0.9)}50%{transform:scale(1.01)}100%{transform:scale(1)}} #search-wrap{clear:both;width:75%;margin:0 auto;padding:0;display:block;overflow:hidden} #search{border:1px solid #fff;border-radius:5px} #searchformku{color:#111;width:100%;margin:0 auto;overflow:hidden;position:relative;} .button-searchku,.button-searchku:hover{clear:both;background:none;border:3px;color:#3f3f3f;width:40px;height:40px;line-height:40px;padding:0;text-align:center;font-size:23px;cursor:pointer;position:absolute;top:5px;right:10px;font-weight:700} .button-searchku:active{border:none;outline:none;background:none;} #search-formku{background-color:transparent;width:100%;height:57px;line-height:57px;padding:0 60px 0 20px;-moz-box-sizing:border-box;box-sizing:border-box;border:none;font-weight:700;font-size:20px;color:#fff!important} #search-formku{-webkit-box-sizing:border-box} #search-formku:focus{border:none;outline:0;color:#fff;} #searchformku:focus{border:none;outline:0;color:#3f3f3f} #box{margin:0 auto;display:none;padding:60px 0 0;width:100%;height:100%;position:fixed;top:0;left:0;z-index:999999;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);background-color:rgba(0,0,0,.94);text-align:center;-webkit-transition:all ease-in-out .25s;-moz-transition:all ease-in-out .25s;-ms-transition:all ease-in-out .25s;-o-transition:all ease-in-out .25s;transition:all ease-in-out .25s;} #hide span.tombolkecil{color:#fff;font-weight:700;padding:0;text-align:center;cursor:pointer;font-size:20px;height:35px;width:35px;line-height:35px;float:right;overflow:hidden;display:block} #hide span.tombolkecil:hover{color:#eee;border-color:#eee} #box p{font-size:14px;margin:15% auto 70px;color:#fff;letter-spacing:2px;text-transform:uppercase} .icon-searchku span{font-weight:normal;width:auto; height:50px;line-height:50px;position:absolute;top:0;right:15px;cursor:pointer;padding-left:5px;font-size:23px;color:#fff}

  • Selanjutnya cari kode </body> lalu kopi pastekan kode dibawah ini diatasnya. Ingat </body> juga di nyatakan sebagai kode penutup pada template.

<div id='box'> <div class='search-wrapper' id='search-wrapper'> <div id='hide'><span class='tombolkecil' href='javascript:void(0)' onclick='document.getElementById(&apos;box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show&apos;).style.display=&apos;block&apos;'><i aria-hidden='true' class='fa fa-times'/></span></div> <div id='search-wrap'> <p>Ketik dan Tekan Enter</p> <div id='search'> <form action='/search' id='searchformku'> <input name='cof' type='hidden' value='FORID:10'/> <input name='ie' type='hidden' value='ISO-8859-1'/> <input id='search-formku' name='q' placeholder='Search....' required='required' type='text'/> <button class='button-searchku' title='Search' type='submit'><i aria-hidden='true' class='fa fa-search'/></button> </form> </div> </div> </div> </div>

Nah yang terakhir letakan kode ini di bawah atau diatas kode </header> dengan catatan ini khusus buat template awsome, jika untuk tema jenis lain bisa dicobakan sesudah kode <body> yang di sebut juga sebagai kode pembuka pada template.

<div class='icon-searchku'> <div id='show'><span class='tombolkecil' href='javascript:void(0)' onclick='document.getElementById(&apos;box&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;block&apos;'><font color='#f39c12'><i aria-hidden='true' class='fa fa-search'/></font></span></div> </div>

Sekarang kita telah mendapatkan sebuah tema dengan sentuhan kombinasi Desain gayanya Arlina dan Sugeng sekaligus, dan gaya ini juga terdapat pada tema tema premium buatan Gooyabi. Untuk melihat contoh klik demo dibawah ini:

DEMO

Namun sekali lagi kami ingatkan, cara ini berlaku dengan baik pada tema tema awsome bawaan blogger, tapi jika anda mencobakannya terhadap tema yang sekarang sedang dipakai untuk blogger "editblogtema", dijamin anda akan gagal karena Anisa telah merancang dan merobah sedikit struktur dasar templatenya yang saya sendiripun masih sedang mencari trik agar dapat memasang beberapa jenis widget kedalamnya termasuk memasang widget pencarian ini ke dalam header tema "editblogtema" ini.

Jika ada pertanyaan seputar pemasangan jangan ragu untuk menanyakannya melalui komentar dibawah blog ini. Sekian & Salam dari kami.

Label: , , , ,

Sabtu, 01 September 2018

CARA MEMBUAT GRADASI WARNA PADA HEADER BLOGGER

Para desainer tema blogger mempunyai gaya dan style dalam mendesain template blogger. Misalnya Mas Sugeng dengan header menu navigasi gradasi warna, ArlinaDesign dengan gradasi animasi. Beberapa trik dapat kita intip melalui inspect elemen, walau beberapa situs berhasil menyembunyikan inspect elemen beberapa jenis browser, namun trik untuk menampilkan inspect elemen semakin bagus. Melalui itu kita dapat mengetahui bagaimana cara mereka mendesain template mereka. Paling tidak kita dapat meniru beberapa style yang kita inginkan.

 1. HEADER DENGAN DUA WARNA BERBEDA (Style Pemula)
Membuat warna header blog bawaan  menjadi dua warna secara sederhana adalah mudah misalnya untuk tema sederhana tinggal masuk ke pengaturan blog pilih TEMA lalu masuk ke "Edit HTML" cari kode dibawah ini:

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none;
}


Dengan cara menekan CTRL+F pada sebelah atas kanan akan muncul kotak dialog ketik saja .header-outer { Maka akan muncul kode yang segera dapat kita kenali sebagai untaian kode diatas. Hapus dan ganti kode yang kami sorot dengan warna kuning diatas dan ganti dengan kode yang juga kami sorot dengan warna yang sama di bawah ini:

.header-outer {
background-image: -ms-linear-gradient(left, #ADD8E6 50%, #FFB6C150%);
background-image: -moz-linear-gradient(left, #ADD8E6 50%, #FFB6C1 50%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, #0c8d2a), color-stop(0.5, #0d4fa9));
_background-image: none;
}

Lalu Save/Simpan. Selesai.


2. HEADER DENGAN WARNA GRADASI TANPA ANIMASI (Style lanjutan)
Akan tetapi dua warna pada header terkadang suka menampilkan pemandangan yang kontras, walaupun warna yang kita pilih berdekatan namun terlihat jelas batas perbedaannya, pada perbedaan warna warna gradasi batas terlihat halus, cara memasangnya sama: Cari kode diatas yakni:

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none;
}
Hapus bagian bawah yang di sorot kuning keseluruhannya dan ganti dengan kode css linier yang sudah saya modifikasi dibawah ini:

background:#0F466E;
background:-webkit-linear-gradient(right,#0F466E 0%,#5093C4 75%);
background:-moz-linear-gradient(right,#0F466E 0%,#5093C4 75%);
background:-o-linear-gradient(right,#0F466E 0%,#5093C4 75%);
background:-ms-linear-gradient(right,#0F466E 0%,#5093C4 75%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5093C4',endColorstr='#0F466E',GradientType=1);
height:100px;

Silahkan bermain dengan komposisi warna dengan merobah kode warna yang saya sorot warna kuning menurut selera kita masing masing. Kode warna css dapat di telusuri di internet.
Header ini sering dipakai oleh mas Sugeng dalam membuat menu navigasinya. Gradasi warna tanpa animasi terutama  terdapat tema tema vioMag terbarunya.

3. HEADER DENGAN GRADASI WARNA ANIMASI (Style Advance)
 Sedangkan untuk membuat gradasi warna dengan efek animasi pada template sederhana bawaan blogger agar supaya mirip desainnya template infinite Arlina kita hanya perlu merobah:
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none;
}
Hapus bagian bawah yang di sorot kuning keseluruhannya dan ganti css dibawah ini:

background: linear-gradient(-50deg, #ee5952, #ea3a7e, #20aadb, #23e0b3);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%}}

Desain dengan header dan Navigasi menu gradasi warna animasi adalah ciri ciri khas tema tema buatan ArlinaDesizn, kami mempelajarinya dari beberapa contoh dan mencobakannya ke tema tema bawaan blogger seperti tema Sederhana, PT.Keren sekali dll. Kebanyakan tema tema itu masih meninggalkan jejak struktur dan elemen elemen penting HTML dari tema tema asli bawaan blogger namun telah di rombak sedemikian rupa. Sama halnya dengan tema tema buatan Gooyabi.

Sebagai catatan pada template berbeda yang kami uji sebelumnya kode ini diletakan dibawah kode:

#header-wrapper {background:#fff; max-width: 1000px; margin: 0 auto; position: relative;}

Dengan menghapus kode yang di sorot dengan warna kuning dan menggantinya dengan kode diatas. Setiap template memiliki struktur yang sedikit berbeda satu sama lain

Label: , , , ,

Jumat, 31 Agustus 2018

MEMBUAT MENU NAVIGASI BERGERAK DENGAN MEMANFAATKAN KODE MARQUEE

Desain adalah kreativitas dan seorang desainer selayaknya harus bisa menemukan cara memanipulasi tampilan desainnya dengan hal baru dan agar supaya terlihat lain dari yang lain dengan memanfaatkan elemen elemen desain html.
Pernah melihat huruf dan untaian kata kata berjalan? Dalam dunia blogger itu dinamakan "MARQUEE" dan marquee ini dapat dengan mudah dibuat dengan menggunakan kode HTML.



Kode dasar marquee:
<marquee>Teks Berjalan</marquee>
Teks Berjalan

Dengan hanya memanfaatkan kata kata "teks berjalan" kedalam kode marquee maka teks terlihat berjalan. Kali ini kita akan memanipulasi kode marquee untuk membuat menu navigasi berjalan yang berisi link label pada setiap postingan blogger

MEMANFAATKAN LABEL
Masuk kepengaturan blog (atau dasbor blog) klik Tambahkan widget, lalu pilih label dan SAVE. Ketika label terlihat cari label postingan terbanyak maka kita akan dibawa kepada link postingan dengan label tersebut. Misal jika kita klik label "Blogger" maka yang akan tampil hanyalah postingan terkait blogger, jika klik label Teknologi, maka yang akan muncul hanyalah postingan terkait teknologi. Fungsi label seperti "memfilter" dan mengelompokan postingan yang terkait dan serupa.

Sekarang kita kembali ke kode marquee, kami melakukan sedikit manipulasi  script dengan memanfaatkan marquee agar menjadi menu navigasi yang berjalan dalam hal ini dapat diletakan dibawah header melalui  "lay out" di pengaturan blogger, kami menambahkan widget baru dan memililih menabahkan widget "HTML/javascript" seperti pada gambar:
Setelah muncul kotak dialog HTML/Javascript, kami memasukan kode yang telah kami buat untuk membuat menu navigasi melayang di bawah Judul blog seperti gambar dibawah:
Dengan memanfaatkan behavior="alternative" dan menambahkan kode fa fa awsome dan menambahkan link dari label yang telah di copy kita dapat membuat beberapa buah sub menu navigasi yang keren perhatikan kodenya:

<marquee behavior="alternate"> <i class="fa fa-heart-o" aria-hidden="true"></i>
<a href="https://editblogtema.blogspot.com/search/label/blogger"><i class="fa fa-rss fa-2x" aria-hidden="true">Blogger</i>
<span class="sr-only"></span><i class="fa fa-heart-o" aria-hidden="true"></i>
<a href="https://editblogtema.blogspot.com/search/label/template"><i class="fa fa-paint-brush fa-2x" aria-hidden="true">Template</i><i class="fa fa-heart-o" aria-hidden="true"></i>
<a href="https://editblogtema.blogspot.com/p/blog-page_30.html"><i class="fa fa-sitemap fa-2x" aria-hidden="true">SiteMap</i><i class="fa fa-heart-o" aria-hidden="true"></i>

<a href="https://editblogtema.blogspot.com/search/label/english"><i class="fa fa-language fa-2x" aria-hidden="true">English</i><i class="fa fa-heart-o" aria-hidden="true"></i></a></a></a></a></marquee>


Kita dapat merobah nama menu dan mengganti link yang disorot warna kuning dengan link kita sendiri. Dan juga merubah kode fa fa awsome sehingga ikonnya cocok dengan nama menu blog kita sendiri. Tetapi supaya font awsome dapat berjalan pada template blog bawaan kita harus menambahkan kode pemanggilnya dan meletakannya di atas kode </head> dengan cara masuk ke pengaturan blog dan langsung masuk ke "edit HTML" kodenya adalah:


<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>


Rumus kode marquee kami diatas adalah sebagai berikut:



<marquee behavior="alternate">Teks Berjalan memantul</marquee>
Teks Berjalan memantul

Sebagai catatan marquee memiliki 3 sifat atau behaviour:

  1. Scroll : marquee menghilang ketika menabrak sisi kiri (kode default)
  2. Slide : marquee berhenti ketika menabrak sisi kiri
  3. aternate : marquee memantul ketika menabrak sisi
Marquee yang kami pergunakan adalah alternate, kita tentu saja bebas memilih, selain itu cara kerjanya adalah sama dengan html kita dapat menambah ukuran font, memberi warna dll. 

Contoh dapat dilihat dari menu navigasi blog ini.

Label: , ,

Selasa, 28 Agustus 2018

CARA MENGGUNAKAN TEMPLATE EDITBLOGTEMA UNTUK DIPAKAI SENDIRI SECARA GRATIS

Jika kita belum berniat atau mampu membeli tema blogger, sedangkan tema bawaan jika tidak di modifikasi dengan benar akan kelihatan sangat standar. Maka kami memberikan solusinya dengan tema tema buatan kami, baik hasil edit/modifikasi penuh template bawaan hingga tema tema buatan kami sendiri. Semua gratis. Simple, bersih anda tidak perlu kuatir repot membuang script.

Tema ini sudah dicoba dipergunakan oleh beberapa teman dari Indonesia, Malaysia, Singapore hingga Australia, Dan sebagian menyarankan kami agar memberikan dukungan teknis pemasangan. Selebihnya Alhamdulillah mereka menyatakan puas terutama karena dukungan teknis yang kami berikan secara inbox.

Jadi sebelum menggunakannya kami ingatkan langkah langkah yang harus anda tempuh terlebih dahulu:
1. Mengosongkan Blanko Editorial HTML blogger.  Masuk ke pengaturan blog, pilih "Tema" lalu langsung masuk ke opsi "edit HTML" 
Gambar opsi "edit HTML"
Akan muncul HTML editor berisi kode kode bawaan blogger seperti pada gambar dibawah ini:

Hapus semua kode tersebut dengan cara arahkan kursor mouse tekan dimana saja lalu tekan CTR+A, semua kode akan ter-highlight atau tersorot, maka tinggal tekan 'del' pada keyboard kode akan terhapus semua tinggal blanko edit HTML yang kosong
2. Langkah selanjutnya adalah masuk ke : UPDATE TEMA "EDITBLOGTEMA" 27.08.18.
Pada bagian bawah artikel terdapat link download tekan dan akan muncul link  berisi seluruh kode tema "editBlogTema" kopi semua dan pastekan ke blanko edit HTML yang telah kosong.

3. Kita dapat melanjutkan pengeditan sampai tema benar benar 100% menjadi milik kita sendiri:
  • Mengganti Judul blog
  • Mengganti link kredit atau footer
  • Mengedit Menu Navigasi
  • Menambah widget adalah urusan anda.
Mengganti Judul Blog
Terlebih dahulu save tema yang sudah di isi dengan kode EditTemaBlog, lalu pada pengaturan blog pilih "Tata Letak"  lalu pada tajuk pilih opsi HTML/javascript, dan klik edit. Hasilnya akan nampak seperti gambar dibawah ini:
Yang perlu di edit adalah kode yang telah kami buat untuk EditBlogTema berikut seperti nampak pada gambar:

<center><a href='https://editblogtema.blogspot.com/'><i class="fa fa-edge fa-2x" aria-hidden="false">dit<span style="font-weight:bold;">B</span>logTema</i></a></center>

<center>Just dedicated for simple and clean</center>Ganti link warna merah  https://editblogtema.blogspot.com/ dengan alamat blog /homepage sendiri. Jika belum tahu harus mengganti dengan apa hapus saja kode ikon fa fa font wara hijau. Lalu ganti tulisan "dit" yang di sorot warna kuning dengan judul blog anda sendiri, hapus logTema dan robah keterangan judul yang di sorot warna pink dengan motto blog anda sendiri. Save.
Mengganti kredit footer
Masuk ke pengaturan  blogger pilih Tema dan langsung pilih "edit HTML" ctrl+f jika muncul kotak dialog pencarian tuliskan saja "powered" maka kita akan diarahkan kepada kode dibawah ini:
<center>
<br/>Copyright &#169; 2017 ~ 2018
<a href='http://www.adedansasa.com'>AdelinaSasa </a> |
Powered by <a href='http://www.blogger.com/'>Blogger</a></center>
Ganti link yang disorot warna kuning dengan link blog anda sendiri. Lalu ganti Judul AdelinaSasa yang disorot warna merah muda dengan nama blog anda sendiri. SAVE.

Merobah link navigasi menu 
 Masuk ke pengaturan  blogger pilih Tema dan langsung pilih "edit HTML" ctrl+f jika muncul kotak dialog pencarian tuliskan saja "Beranda" maka kita akan diarahkan kepada sekelompok kode dibawah ini (letaknya persis di bawah </header>:

<nav id='menutop'><input type='checkbox'/><label/><ul><li><a href='https://editblogtema.blogspot.com/'><i aria-hidden='true' class='fa fa-home'/>Beranda</a></li><li><a href='your-link'><i aria-hidden='true' class='fa fa-flask'/>Sains</a></li><li><a href='https://editblogtema.blogspot.com/'><i aria-hidden='true' class='fa fa-globe'/>Teknologi</a></li><li><a href='your-link'><i aria-hidden='true' class='fa fa-phone'/>Contact</a></li><li><a href='https://editblogtema.blogspot.com/p/var-cathomehttpwww.html'><i aria-hidden='true' class='fa fa-sitemap'/>Daftar Isi:</a></li><li class='sorting-01 facebook'><a href='your-link'><i class='fa fa-facebook fa-lg'/><span class='inv'/></a></li><li class='sorting-02 twitter'><a href='your-link'><i class='fa fa-twitter fa-lg'/><span class='inv'/></a></li><li class='sorting-03 googleplus'><a href='your-link'><i class='fa fa-google-plus fa-lg'/><span class='inv'/></a></li><li class='sorting-06 rss-square'><a href='your-link'><i class='fa fa-rss-square fa-lg'/><span class='inv'/></a></li><li class='sorting-04 youtube'><a href='your-link'><i class='fa fa-youtube fa-lg'/><span class='inv'/></a></li></ul></nav>

Ganti semua link yang di sorot warna kuning terang diatas dengan link blog atau link yang anda kehendaki. Dan ganti juga Nama navigasi yang di sorot warna biru dengan nama yang di kehendaki,  jika sudah selesai SAVE.
 Menambahkan widget
Menambahkan widget dapat dilakukan seperti layaknya pada saat menambahkan widget ke dalam tema blogger bawaan. Opsi lanjutan juga bekerja secara default sehingga anda dapat mengganti warna font, warna link, warna header dst.

Jangan keliru: Walaupun gratis tema ini premium, sangat responsive dan mobile friendly.

Label: , , ,

Senin, 27 Agustus 2018

MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOG

Tulisan ini di posting adalah karena beberapa problem muncul setelah template di buat dan postingan di cobakan atau di publish. Terutama karena hal ini terjadi pada tema EditBlogTEma yang dibuat berdasarkan tema sederhana bawaan blogger.
Problem tersebut muncul karena pada saat menuliskan beberapa item dalam bentuk daftar atau list ternyata tidak terlihat pada postingan padahal sudah di publish ke hadapan pembaca. Ini pasti celah kelemahan tema jadi harus di perbaiki.

Ketika menulis pada dasbor blog sepertinya tidak ada yang salah diatas tool "compose" terdapat add numbering dan add bullets dan pada saat dilakukan penulisan dalam bentuk list keduanya berfungsi dengan baik, tapi apa yang terjadi pada saat artikel setelah di publish? Maksud menampilkan daftar atau list tadi hanya menampilkan tulisan berurut seperti tumpukan untaian kata kata tanpa penomoran dan tanda bahwa itu adalah bentuk daftar.
Dan menurut kami semua fungsi dalam penulisan apalagi yang mendasar adalah sangat penting dalam desain, karena ia akan menampilkan bentuk professional dan keseriusan seseorang dalam menulis, dan tentu saja kami tidak akan membiarkan hal itu terjadi pada template buatan atau hasil editan kami.
Pada saat penulisan baik add numbering maupun add bullets nampak berfungsi tapi apa yang terjadi setelah artikel di publish?  Yang terjadi adalah fungsi diatas gagal tampil. Hanya seperti untaian kata yang menumpuk:
Perhatikan bedanya, walaupun kita mungkin mengaggapnya tidak terlalu penting tetapi sesungguhnya hal diatas penting sekali untuk menunjukan bahwa kita adalah penulis yang terstruktur dan sistematis.

Cara mengatasi hal diatas jika terjadi pada tema blog kita sebenarnya ada bebarapa cara, dan tergantung tipe dan jenis template juga. Karena perbaikan dikhususkan buat template 'editblogtema' maka kode dibawah ini sudah cukup manjur untuk mengatasi peroblem diatas.

ini kodenya:
.post ul,.post ol{margin:20px;margin-top:5px}.post ol li{list-style-type:Decimal;padding-left:1px;margin:5px 0 0 20px}.post ul li{list-style-type:Disc;padding-left:1px;margin:5px 0 0 20px}.widget .post-body ul {padding: 0 1em;margin: 0.5em;line-height: 1.3;}
Cara pemasangannya adalah: Masuk kepengaturan blog-langsung saja ke opsi "edit HTML" cari kode ]]></b:skin> untuk mempermudah tekan ctrl+f jika sudah ketemu letakan kode diatas tadi diatasnya ]]></b:skin> 
SAVE

Demikian cara memperbaiki "bug" editblogtema templat diatas silahkan perbaiki sendiri atau jika ingin mendownload silahkan ikuti link di ADELINASASA: UPDATE EDITTEMABLOG.

Label: , , ,

MEROBAH GAYA DAN UKURAN FONT POSTINGAN BLOG DENGAN OPSI CSS PADA BLOGGER

Mungkin yang kami kemukan hanyalah masalah kecil bagi sebagian teman teman blogger. Akan tetapi baik gaya maupun ukuran font cukup berperan besar pada seni desain sebuah template blog. Bagaimanapun secara mendasar dalam dunia tulis menulis kita menggunakan font dalam penulisan.

1. MEROBAH UKURAN DAN GAYA FONT POSTINGAN BLOG
Tidak bisa dilewatkan begitu saja dalam hal tampilan maupun ciri ciri khas, font akan terlihat sangat signifikan berperan dalam seni pembuatan sebuah templat blogger. Sama dengan gaya tulisan tangan manusia yang berbeda, atau tanda tangan setiap orang yang tidak sama, di era digital pada zaman kita terhubung ke internet gaya huruf dan ukuran font akan menjadi ciri khas sebuah blogger professional.
 Sayangnya opsi merobah langsung melalui Desainer tema blogger kadang tidak berhasil untuk gaya font, lihat gambar:
Maka dari itulah disarankan menggunakan cara yang akan kami jelaskan di bawah ini.
Pada blog "editTemaBlog" kami menggunakan kode di bawah ini:
.post-body{font-size:18px;  font-family:Neucha;}
 Pertama pada kode tersebut adalah memperlihatkan ukuran font yakni 18px selanjutnya menunjukan jenis font pada "editblogtema" yakni font-family:Neucha;}

Cara meletakan kode diatas cukup melalui opsi tema blogger desainer, yakni: Masuk kepengaturan blog - pilih Tema selanjutnya lalu pilih "Sesuaikan"
Selanjutnya akan muncul gambar seperti dibawah ini, dimana kita masuk ke pengaturan blogger desainer:
Keatas pilih saja opsi lanjutan, dari opsi lanjutan kita akan masuk ke kotak dialog "Tambahkan CSS" maka tambahkan saja kode yang kami tulis diatas dengan cara mengkopi dan pastekan kedalam kotak dialog CSS, lihat gambar:
Kemudian SAVE. Anda dapat merobah 18px menjadi 20px atau 12px dst. Sedangkan untuk gaya huruf anda cukup mencarinya pada gaya font yang sudah tersedia di blogger. Misalnya gaya huruf editblogtema adalah  font-family:Neucha;} Namun kita bisa merobahnya menjadi  font-family:calibri;} atau bahkan menjadi gaya font klasik yang indah, kami menganjurkan pilihan sederhana atau klasik saja.

Cara ini untuk sementara efektif jika digunakan pada tema sederhana terkemuka. Lihat pengaruh gaya tulisan terhadap penampilan blog pada blog contoh kami dengan mengunjungi 

Label: , ,

Minggu, 26 Agustus 2018

CARA MEMBERI NOMOR URUT UNTUK "POPULAR POSTS" BLOGGER

Kalau kita bosan dengan tampilan widget bawaan blog tidak ada salahnya mengedit widget tersebut melalui "edit HTML" Dalam hal ini jika yang ingin kita robah tampilannya adalah widget "popular posts". Kita dapat memberi penomoran dengan label penomoran berwarna seperti contoh popular post milik EditBlog dibawah ini:
Gambar popular posts tema editblog
Caranya masuk kepengaturan dasbor blogger, pilih tema dan lalu pilih "edit HTML". Cari kode:
 ]]></b:skin>
Dan letakan kode dibawah ini tepat diatasnya:

/*--- TRI Popular Posts --- */
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #FF1493;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #FF1493;
box-shadow: 1px 2px 9px #666666; }
.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}
.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}
.popular-posts ul li a:hover {
text-decoration:none;

}


Lalu save.

Selanjutnya masuk pengaturan blog, pilih lay-out - tambahkan widget - pilih popular posts - save
Lihat kita telah berhasil memodifikasi tampilan "popular posts" menjadi memiliki nomor urut. Kalau kita ingin merobah warna nomor urut cukup merobah kode warna cssnya (kami beri highligt kuning) silahkan robah sendiri kodenya.

font-size: 16px;
background: #FF1493;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #FF1493;

Tinggal hapus kode warna bawaan pilih dan kopi kode wanra baru yang dapat kita cari di web, lalu pastekan sebagai pengganti kode warna yang telah kita hapus tadi.

Trik ini bekerja dengan baik pada tema sederhana blogger

Label: , ,