Tampilkan postingan dengan label Tutorial Anissa. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Anissa. Tampilkan semua postingan
Powered by Google
Powered by Blogger means Powered by Google
Pada empat template terbaru: Contempo, Soho, Emporio dan Notable warna ikon blogger secara default (bawaan) adalah gelap sehingga jika latar atau background footer blog kita hitam maka ikon tersebut tidak akan terlihat
Bagaimana cara mengatasi ini?
Kami akan memberikan opsi yang mudah saja jika anda tidak ingin mengedit HTML blogger, jadi lakukan saja petunjuk berikut:
  • Masuk kepengaturan blogger'
  • Pilih tema
  • Saat muncul preview template pilih "sesuaikan"
  • Begitu sesuaikan anda klik akan muncul opsi Desainer Tema Blogger, maka pilih atau klik "lanjutan"
  • Maka akan muncul menu Desiner tema blogger dan scroll menu ke atas sampai muncul "Tambahkan CSS" karena tempatnya memang paling bawah dari list menu tesebut:
Tambahkan CSS
Tambahkan CSS
Setelah "Tambahkan CSS" di klik atau dipilih, maka akan muncul kotak blanko kosong CSS lalu copy kode dibawah dan pastekan ke dalam kotak blanko CSS kosong tadi:
.widget.Attribution svg{
fill: white
kotak blanko kosong CSS
kotak blanko kosong CSS
Karena kami membuat background hitam maka: fill : kami tuliskan dengan nilai "white". Tentu saja anda bisa merobahnya sesuai dengan latar belakang footer anda, jika anda menetapkan warna latar footer hitam maka ganti tulisan menjadi : white, yellow, blue dst sesuai selera anda.

Kode tersebut didalam HTML template blog aslinya adalah:
.widget.Attribution svg{
fill:$(attribution.icon.color)}
Kami menemukannya ketika menemukan kok ikon kredit blogger tidak nampak? Prinsipnya penting sekali untuk menghormati Blogger sebagai penyedia platform dan template default yang hebat buat blogging!

Sekarang karena kita menulis nilainya menjadi "white" (artinya putih) maka ikon menjadi terlihat berwarna putih...
ikon blogger 2
sekarang ikon blogger telah terlihat dan berwarna melati putih
Jika anda menyukai tutorial Anissa, kunjungi juga blog aku: AdelinaSasa Terimakasih dan salam:

Anissa


  • www.editblogtema.net

SHARE YA:

template editblogtema

"Trik" ini dapat meningkatkan pageviews untuk konten secara drastis. Artikel juga cepat sekali terindex Google, sudah dicobakan kebeberapa artikel yang menyertakan tool ini. Kami benar benar belum tahu apa penyebab robot txt terlihat menyukainya. Artikel ini 2 hingga 3 lipat lebih cepat dan lebih banyak mendapatkan pageviews dan klik.

Ini aneh,  tapi nyata.  Belum jelas apakah jumlah misalnya 2 hingga 4 wigdet yang sama jika di pasang akan terus meningkatkan dan melipatgandakan pageviews,  apakah karena terkait dengan pageviews tautan video di youtube?

Sebenarnya trik ini tidak sengaja kami temukan, contoh:
Demo template editblogNotable, silahkan eksplorasi pada image dibawah ini, scroll saja gambar dibawah karena kalian dapat mengklik menu navigasi secara live, mengeksplorasi halaman, konten, sidebar langsung:

DEMO TEMPLATE EDITBLOGNOTABLE:


Caranya: cukup buat sebuah postingan berisi video atau postingan berisi video youtube pada halaman lain blog kalian lalu kopikan ke postingan yang ingin kalian batkan demo "live" template.

Tentu saja ini mungkin bug, karena pada preview postingan sebelum kita publish terdapat peringatan seperti ini:
bug atau bukan
Yang jelas ini telah terjadi semenjak lama, namun ternyata bagus banget buat di jadikan tool demo jika misalnya kalian membuat template dan mau mendemo dan mempromosikannya melalui halaman blog kalian, bukan?

Tapi sebelumnya kami mau menjelaskan fakta mengenai fitur "insidental" diatas:
  1. Fitur demo itu terkait dengan format video yang berjalan di halaman web dengan flatform blogger, kemungkinan pada wordpress, drupal, wix dll tidak akan berjalan.
  2. pada opsi atau fitur "view" sebelum konten di publish terdapat peringatan "Invalid securityToken" artinya ada yang salah pada saat fitur ini di view namun dapat berjalan normal pada saat telah di publish.
  3. "Trik" ini dapat meningkatkan pageviews untuk konten secara drastis. Artikel juga cepat sekali terindex Google,  sudah dicobakan kebeberapa artikel yang menyertakan tool ini.  Kami benar benar belum tahu apa penyebab robot txt terlihat menyukainya.  Artikel ini 2 hingga 3 lipat lebih cepat dan lebih banyak mendapatkan pageviews dan klik. 
  4. Kami belum melaporkan hal ini ke pihak google, dengan harapan artikel ini akan mewakili laporan tersebut.
Format yang berjalan adalah sebagai berikut:
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/4uUfUKoC6M4/0.jpg" frameborder="0" height="350" src="?feature=player_embedded" width="auto"></iframe></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
Selamat mencoba!

www.editblogtema.net

SHARE YA:

profile penulis diatas artikel
Tampilan profile penulis diatas artikel dekstop dan mobile
4 Template terbaru (layout versi 3) bawaan blogger siap di modifikasi! Mereka ini memiliki keunikan tersendiri jika dibanding dengan template versi yang lebih lama:
  1. Lebih banyak CSS, kode pembentuk HTML yang membuat template-template dengan layout 3 ini dapat dengan mudah dibentuk.
  2. Hanya memiliki satu satunya <data:post.body/>pada 7 varian template model lama kan punya 2,3 bahkan diantaranya ada yang sampai 4 <data:post.body/> Jadi gak bingung buat menambahkan atau meletakan elemen dan material desain template kalian.
  3. Penutup tag</body> ditulis  paling terakhir pada template itu lho tag tempat kalian biasa menempatkan material JavaScript buat mengoptimalkan fungsi dan "action" template
Diantaranya adalah kita tidak perlu repot membuat elemen baru untuk menampilkan profile author atau pengarang atau penulis konten. Misal jika satu blog memiliki bebarapa penulis maka photo profile setiap penulis akan ditampilkan diatas postingan dengan posisi cantik. Pada homepage diatas judul postingan hanya akan terlihat tulisan: Oleh: Mr X akan tetapi ketika konten di buka, tulisan tadi berubah menjadi photo Mr.X..keren bukan?
Empat template terbaru inilah yang  paling sering dijadikan oleh admin editblogtema dalam membuat template-template-nya, yakni: Contempo, Soho, Emporio dan Notable (Terkemuka). Namun kali ini ada hal yang lebih menarik yang terdapat pada salah satu varian template ini, yakni terdapat pada tema Notable (atau Terkemuka) template ini mampu menampilkan gambar profile pengarang di atas atau dibawa postingan (Letaknya bisa disesuaikan dengan keinginan)

Tentu saja pada template lain kita bisa saja menambahkan widget ini tetapi harus melakukan penambahan dan memodifikasi beberapa elemen didalam template. Namun notable telah memiliki  itu secara bawaan dan kita tinggal membentuk ukuran profile, bentuk bingkai menggunakan perintah atau aba aba CSS yang telah ada. Untuk bingkai agar  terbentuk menjadi bulat seperti cermin kita bisa menambahkan sedikit perintah dalam bentuk border-dash CSS.

Langkah pertama: masuk kepengaturan blogger yang menggunakan template notable, pilih tataletak, pilih edit "blog post" dengan mengklik tanda pena, begitu pena tersebut di klik muncul pengaturan atau konfigurasi blog post klik atau centang "oleh" atau "by" (lihat gambar)
kofigurasikan blog post

Langkah kedua: Masuk kepengaturan blogger dengan template terbaru notable, pilih tema, lalu pilih edit HTML dan cari kode berikut:
body.item-view .Blog .post-author-profile-pic{
max-height:100%
border: solid;
border-radius: 50px;
}
Defaultnya tidak ada kode yang saya tandai warna merah, itu kode css yang sengaja saya tambahkan agar bentuk gambar profile penulis jadi berbingkai lingkaran. Gambar profile pengarang ini akan muncul pada bagian atas postingan, Dan fitur ini mensupport multi penulis (penulis blog yang bebeda beda, jika blog ditulis oleh bebeerapa orang atau tim)
Lihat DEMO

Lalu bagaimana caranya meletakan gambar atau photo profile penulis pada template template lain? 

Untuk 3 template terbaru:
CARA MELETAKAN PHOTO PROFILE DI ATAS SETIAP POSTINGAN PADA TEMPLATE BLOGGER TERBARU

Untuk template yang lebih lama:
BEGINI CARA MELETAKAN GAMBAR PROFILE PENULIS SECARA OTOMATIS DI ATAS SETIAP POSTINGAN TEMPLATE BLOGGER LAMA 

Jika berminat templatenya silahkan request...www.editblogtema.net

SHARE YA:

Sudah banyak sekali teknik dan trik membuat templat dari nol sekalipun, tetapi tidak begitu mudah diikuti oleh seorang pemula. Maka dari itu kami mencoba memberikan trik sederhana, jika teman teman kepingin membuat template bawaan blogger menjadi "gaya" dan tidak kalah dengan template template premium, mungkin petunjuk dibawah ini akan membantu. Cobalah terapkan ketemplate yang lebih lama, misalnya template awsome (PT. Keren sekali) atau tema sederhana.

Gunakan blog percobaan sebelum diterapkan ke blog utama sendiri.

1. Memindahkan widget header keatas navbar.

Ini penting agar header nantinya berada didepan latar gambar yang kita pilih untuk menghisi blog, bisa juga gambar teman teman sendiri. Cara memindahkan widget header tidak bisa dengan menyeret/drag melalui pengaturan widget, harus melalui edit HTML.

Pertama masuk kepengaturan>>tataletak>>dan pastikan widget header telah terpasang disana (letaknya pada template klasik selalu dibawah navbar)




Nah posisi itu yang harus kita robah dengan cara: Masuk kepengaturan blogger>pilih tema/theme>pilih edit HTML.

Pada menu bar diatas halaman editor HTML ada terdapat menu "lompat widget" tekan itu maka kita akan dibawa ke kode HTML-nya header tersebut, sebagai berikut:

<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Sethahoh (Header)' type='Header'>...</b:widget></b:section> 

Perhatikan kode dengan huruf dimerahkan adalah widget header1 yang harus kita copy dan karena aturan widget harus dimulai dengan <b:section> lalu diakhiri dengan </b:section> maka semua kode harus di copy, perhatikan ada tiga titik yang jika di klik double akan memunculkan rangkaian kode dan berakhir pada </b:section>

Copy semua kode dari mulai dari <b:section class='header' id...sampai dengan </b:section>, jika sudah di copy hapus seluruh kodenya. Lalu cari kode </head> pastekan seluruh kode tersebut dibawahnya. Tambahkan kode <center> diawal <b:section> lalu tambahkan atau tutup dengan</center> pada akhir </b:section> ini nanti berguna agar deskripsi blog menjadi center dan rapi.

Save terlebih dahulu template.

2. Meletakan HTML. 


Persis dibawah </b:section> kode header yang telah kita pindahkan diatas tadi letakan kode HTML berikut:

<div class='bg-img'>
<div class='container'>
<div class='topnav'>
<a href='/'><i class='fas fa-home'/></a>
<a href='#news'>sitemap</a>
<a href='#contact'>Privacy</a>
</div>
</div>
</div>

Kemudian tepat dibawah kode <body> atau <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> letakan kode berikut:

<a class='icon' href='javascript:void(0);' onclick='myFunction()'/><div class='overlay' id='myOverlay'><span class='closebtn' onclick='closeSearch()' title='Close Overlay'>&#215;</span><div class='overlay-content'><form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' placeholder='cari...dan tekan enter' size='25' type='text'/></form></div></div>
<button class='openBtn' onclick='openSearch()'><i class='fa fa-search' style='color:#fff;'/></button>
Save template.

3. Tambahkan CSS style.


Masih berada didalam opsi editor HTML tepat diatas kode </head> letakan kode berikut:

<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.bg-img {
/* The image used */
background-image: url(&quot;https://1.bp.blogspot.com/
-t5taLmDfdik/XQXNb6madgI
/AAAAAAAAm20/
ATib2OEhbQsY2JalQ52ZzqkVuhGpBMFPQCLcBGAs/
s1600/4k-wallpaper-art-beautiful-325044.jpg&quot;);
min-height: 200px;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* Needed to position the navbar */
position: relative;
}
/* Position the navbar container inside the image */
.container {
position: absolute;
margin: 20px;
width: auto;
}
/* The navbar */
.topnav {
overflow: hidden;
background-color: transparent;
}
#Header1 {
overflow: hidden;
background-color: transparent;
padding:0px 40px;
position: absolute;
z-index: 100;
}
/* Navbar links */
.topnav a {
float: left;
color: #fff;
text-align: center;
padding: 85px 18px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: transparent;
color: black;
}
</style><link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.6.3/css/all.css' integrity='sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/' rel='stylesheet'/> <style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
.openBtn {
background: transparent;
border: none;
border-radius:180px;
border-color: transparent;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
position: absolute;
z-index: 99;
top: 100px;
right:1%;
}
.openBtn:hover {
background: transparent;
}
.overlay {
height: 62px;
width: 100%;
display: none;
position: fixed;
z-index: 100;
top: 0;
left: 9;
background-color:#DDDDDD;
}
.overlay-content {
position: relative;
top: 3%;
width: 100%;
text-align: center;
margin-top: 10px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 5px;
right: 3%;
padding: 0px 0px 0px 0px;
z-index: 99;
font-size: 40px;
cursor: pointer;
color: #87CEFA;
}
.overlay .closebtn:hover {
color: #000;
}
.overlay input[type=text] {
padding: 15px;
font-size: 17px;
border: solid;
border-color: transparent;
border-radius:0px;
float: left;
width: 100%;
background: #fff;
height: 56px;
}
.overlay input[type=text]:hover {
background: #fff;
}
.overlay button {
float: left;
width: 10%;
padding: 15px;
background: transparent;
font-size: 17px;
border: none;
cursor: pointer;
}
.overlay button:hover {
background: transparent;
}
</style> 

Save Template.

Bagaimana cara membuat image atau gambar background header tersebut? Rahasianya adalah link gambar img. Perhatikan URL yang aku sisipkan ke dalam kode css yang menggunakan hightlight atau disorot warna kuning URL gambar dengan formasi img adalah yang diberi warna merah. Cara mengambil link gambar dari halaman web adalah klik gambar setelah gambar tampil klik kanan mouse pada menu yang muncul pilih "open in new tab" atau pada tab baru maka link url image akan berbentuk awal sebagai berikut : https://1.bp.blogspot.com/-....dst..dst...yakni ada kode //1.bp.

Copy link tersebut dan pastekan untuk mengganti url gambar ikan hias milik editblogtema. Untuk menyiapkan gambar teman teman harus menyimpannya di penyimpanan online milik sendiri atau di dalam blog kita pada bagian laman atau page blog. Namun tentu saja jangan lupa diterbitkan, jangan dibagikan.

4. Membuat related post Upaya membuat related post pada templat model lama jika template tersebut masih asli tidaklah mudah, karena biasanya related post hanya akan muncul pada tampilan laptop dan PC desktop atau layar yang lebih lebar daripada ukuran sebuah hape. Untuk mengatasinya ketimbang membuat teman teman pusing tujuh keliling memodifikasi struktur tema aku memilih mengkombinasikan kode HTML dan CSSnya.
Langkah pertama masuk kepengaturan blogger pilih tema, jika tema dipilih akan tampil opsi desainer sebagai berikut:

Gambar sebelah kiri yang layarnya besar adalah tampilan desktop PC atau laptop, yang sebelah kanan pada layar atau kolom yang lebih kecil adalah tampilan seluler. Tekan roda bergerigi seperti yang ditunjukan oleh panah merah.
Sekali itu ditekan akan muncul pilihan, teman teman harus memilih yang "custom" atau "Khusus" yang paling bawah sepeti terlihat pada gambar berikut:


Lalu save tema.

Sekarang masuk kepengaturan pilih >tema dan lalu pilih > edit HTML, cari kode :
]]></b:skin> Dan letakan kode berikut tepat diatasnya:

#related_posts{margin-top:20px} #related_posts h4{color:#fff;background:#3498db;padding:10px;margin:0 0 5px;font-size:110%;} #related_img{margin:0;padding:0;} #related_img:hover{background:0} #related_img ul{list-style-type:none;margin:0;padding:0} #related_img li{min-height:62px;border-bottom:1px solid #f1f1f1;list-style:none;margin:0 0 5px;padding:5px;} #related_img li a{color:#2672a0;} #related_img li a:hover{text-decoration:underline} #related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;} #related_img .news-text{display:block;font-weight:normal;text-transform:none;color:#888;font-size:11px;} #related_img img{float:left;margin-right:10px;width:60px;height:60px;max-width:100%;background:#fff} 

Lalu cari kode </head> dan letakan kode CSS style berikut diatasnya:

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ol>');
while (i < relatedTitles.length && i < 5) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write('</ol>');}
//]]>
</script>
<script type='text/javascript'>/*<![CDATA[*/var relnum=0;var relmaxposts=5;var numchars=135;var morelink=" ";function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgthum(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnum]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnum]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url:"http://lh3.ggpht.com/_xcD4JK_dIjU/SnamIh0KTCI/AAAAAAAADMA/hLjqmEbdtkw/d/noimagethumb.gif",relgambar[relnum]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnum]=e.link[n].href;break}relnum++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function relatpost(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],s=relurls[t],i=relcuplikan[t],o=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=s,relcuplikan[a]=i,relgambar[a]=o}for(var g,m=0,h=Math.floor((reljudul.length-1)*Math.random()),c=h,d=document.URL;m<relmaxposts&&(relurls[h]==d||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[h]+"' rel='nofollow' target='_top' title='"+reljudul[h]+"'><img src='"+relgambar[h]+"' /></a>",g+="<a href='"+relurls[h]+"' target='_top'>"+reljudul[h]+"</a>",g+="<span class='news-text'>"+relcuplikan[h]+" ... <a href='"+relurls[h]+"' target='_top'>"+morelink+"</a><span class='news-text'>",g+="</li>",document.write(g),m++,m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;/*]]>*/</script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"/>
Lalu cari kode <data:post.body/> (ada beberapa buah didalam HTML, pilih yang ke-2) letakan kode berikut dibawahnya:

<div id='related_posts'> <h4><center><i class="fa fa-book gradient-icon" aria-hidden="true">Artikel Terkait</i></center></h4> <b:loop values='data:post.labels' var='label'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/> </b:loop> <ul id='related_img'> <script type='text/javascript'>relatpost();</script> </ul> </div> Jika terjadi kesalahan ulangi dan pastikan kode HTML diatas ditempatkan dengan benar dibawah salah satu daripada <data:post.body/> yang kusebutkan di atas tadi 
Terakhir masih pada halaman editor HTML blogger cari Kode ini <div class='post-footer-line post-footer-line-2'>, yang terletak di antara kode <b:includable id='mobile-post' var='post'> dan </b:includable>. Pastekan kode berikut tepat dibawahnya:
<
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='mobile-related-posts'>
<div style='text-align: justify;'>
<h4><b>Related Posts: </b></h4>
<b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
</div>
</b:if>



Selanjutnya SAVE template.


Tampilan template awsome setelah dimodifikasi

Selamat belajar menjadi desainer template web...Semoga sukses.

Kedepannya kami akan membuatkan tutorial membuat header blog mengecil dan membesar saat konten atau halaman utama blog di scroll...

SHARE YA:

Menu navigasi blogspot yang mobile dan responsive
Zaman mobile, data menunjukan sudah semakin banyak para blogger generasi Z yang ngeblognya pakai mobile alias hape, ya terang aja gagdet mobile ini semakin lama semakin mumpuni: Jeroannya semakin kuat, layarnya semakin lebar karena bezelnya sudah dihilangkan. Masuk akal kalau ngeblog itu sekarang ini sudah mirip melakukan kegiatan medsos saja layaknya baik dari segi kemudahan UX (user experience) hingga UI (User Interface) yang semakin memanjakan pengguna.

Tapi untuk ngeblog kita masih dihadapkan kepada urusan tema atau template. Seperti yang teman teman sudah ketahui, template zamannya zen-Z itu wajib mobile friendly, so bukan sekedar responsive doang ya...Nah blogger belum meningkatkan UI dan UX untuk urusan yang satu ini coba bandingkan sama wordpress tinggal lakukan di pengaturan kita sudah bisa membentuk tema yang mobile dengan Manu navigasi yang ramah tamah terhadap pengunjung. Oh oce, maklum Google sibuk tapi ada untungnya buat pelajar seperti aku, jadi belajar mendesain tema walaupun manual ya lumayanlah.

Oke, mari kita mulai tutorialnya:

1. Navigasi mobile gaya vertikal:
Menu mobile gaya vertikal
Menu navigasi mobile gaya vertikal

Lihat DEMO
Bentuknya adalah tombol navigasi yang memiliki menu hamburger atau tiga balok sebagai pembukanya. Jika tombol ini diklik akan bermunculan sub-menu vertikal kebawah atau dropdwon.
Cara membuatnya: Siapkan template bawaan blogspot yang akan tema teman jadikan template ngeblog nantinya.

  1. Masuk kepengaturan blogger
  2. pilih tema atau template
  3. Pilih edit HTML

MENAMBAHKAN CSS

Di halaman editor HTML teman teman cari kode </head> copy dan letakan kode berikut tepat diatasnya:

<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: #555;
height: 500px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #333;
color: white;
}
</style>

MENAMBAHKAN HTML

Masih halaman editor HTML teman teman cari kode <body> copy dan letakan kode berikut tepat diatasnya atau letakan saja dibawah kode </head>:

<!-- digunakan untuk smartphone / tablet -->
<div class="mobile-container">
<!-- Top Navigation Menu -->
<div class="topnav">
<a href="/" class="active">Nama Blog</a>
<div id="myLinks">
<a href="#berita">Berita</a>
<a href="#kontak">Hubungi</a>
<a href="#perihal">Perihal</a>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<!-- selesai smartphone / tablet look -->

MENAMBAHKAN JavaScript

Masih halaman editor HTML teman teman cari kode </body> copy dan letakan kode berikut tepat diatasnya:
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
Selesai SAVE TEMPLATE. Gaya atau style diatas amat di rekomendasikan karena sekecil apapun ukuran layar hape dia pasti akan menyesuaikan.

2. Navigasi mobile gaya horisontal:
Menu navigasi mobile gaya horisontal
Menu navigasi mobile gaya horisontal

Lihat DEMO
Bentuknya adalah tombol navigasi yang memiliki menu hamburger atau tiga balok sebagai pembukanya. Jika tombol ini diklik akan bermunculan sub-menu horisontal berjajar atau inline.

Untuk ukuran ponsel 5 inch keatas menu navigasi model satu ini juga keren sekali teman teman, cara membuatnya juga sama hanya kode kodenya saja yang di robah. Menurut aku menu mobile ini sangat cocok buat tablet ukuran 7 inchi keatas.
Menunya akan muncul setelah tombol menu utamannya diklik.
Cara membuatnya: Siapkan template bawaan blogspot yang akan tema teman jadikan template ngeblog nantinya.

  1. Masuk kepengaturan blogger
  2. pilih tema atau template
  3. Pilih edit HTML

MENAMBAHKAN CSS

Di halaman editor HTML teman teman cari kode </head> copy dan letakan kode berikut tepat diatasnya:
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: #555;
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: #333;
color: white;
}
</style>

MENAMBAHKAN HTML

Masih halaman editor HTML teman teman cari kode <body> copy dan letakan kode berikut tepat diatasnya atau letakan saja dibawah kode </head>:

<!-- Mulai navigasi smartphone / tablet -->
<div class="mobile-container">
<!-- Top Navigation Menu -->
<div class="topnav">
<a href="#home" class="active">Judul Blog</a>
<div id="myLinks">
<a href="#Berita">Berita</a>
<a href="#Kontak">Kontak</a>
<a href="#perihal">Perihal</a>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<!-- Berakhir Navigasi smartphone / tablet -->
</div>

MENAMBAHKAN JavaScript

Masih halaman editor HTML teman teman cari kode </body> copy dan letakan kode berikut tepat diatasnya:
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
Selesai dan SAVE template

Demikianlah 2 cara membuat menu navigasi yang sangat mobile friendly. Ayolah jangan bertahan di zaman "old" Google sudah tidak menyukainya lagi.

Mengapa harus mobile dan mobile, ya teman teman sudah tahulah. Perangkat pengakses internet zaman ini adalah hape yang jumlahnya bermilyar milyar di atas dunia yang fana ini. 

Artinya itu adalah pasar, pasar adalah kegiatan bisnis. Bisnis adalah uang. Kalau pakai desktop itu sudah zaman "old" zaman jadul. Paling banter sekarang orang masih pakai laptop. Tapi pasar mereka terus menyusut, aku gak akan membahas masalah ini disini. 

www.editblogtema.net

SHARE YA:

gambar kartu profile anissa
Gambar kartu profile blogspot baru
Halooo guys,
Aku Anissa, sudah lama vacum gak menulis,  awalnya bingung mau nulis apa ya soalnya blog ini tutor dan teknis. Namun setelah baca baca akhirnya kutemukan bahannya, sederhana saja. Cara membuat kartu profile beda dengan efek animasi. Kebetulan aku kan suka utak atik HTML CSS dan JavaScript juga. Jadi cucoklah :D.

Ini sebenarnya hanyalah manipulasi daripada link profile asli  profile kita namun dibuat agar lebih keren dan beda. Seperti yang telah kita ketahui blogger itu telah menyediakan gadget profile atau widget bawaan (default) yang tinggal dipasang saja disidebar atau dimana saja yang kita inginkan (tinggal di geser, drag pake mouse).

Nah berdasarkan kode yang telah dibuat oleh pemilik blog ini (editblogtema) yang ditulisnya dengan judul:

MEMBUAT KARTU PROFILE: PERANAN CSS DAN HTML DALAM DESAIN WEB 

Aku mencoba memodifikasi agar tampilannya tampak lebih keren, diantara hal hal yang aku edit adalah:
  1. Warna CSS-nya
  2. Link URL dan image profile ke profile asli blogspot kita
  3. Manipulasi border-dash untuk membentuk kartu (persegi, bundar, bulat dll)
Ini hanyalah bentuk kreasi, anggap saja teman teman sedang menggambar dengan bentuk dan warna warni, begitu juga dengan memodifikasi tampilan visual suatu objek melalui HTML.

Mari kita lanjutkan. Aku menggunakan tablet dan sering melakukan pengeditan kode yang telah ada tersebut melalui aplikasi Android Dcoder. Kalau teman teman mau mendownloadnya silahkan ikut link berikut resmi kok dari Play Store Android klik saja gambar dibawah ini:
Dcoder image Android application

Zaman serba mudah ya teman teman, belajar saja sudah bisa dan mudah melalui mobile. Dari sana aku mengedit seluruh kode scriptnya, jangan kuatir kode kodenya sudah dalam bentuk jadi kok, teman teman tinggal menggunakannya saja.
Namun sebenarnnya aku juga memanfaat CodePen untuk belajar utak atik script dan koding.

Langkah pertama Menambahkan blanko widget HTML/JavaScript
  1. Masuk kepengaturan blog
  2. Pilih Lay out atau tataletak
  3. Pilih tambahkan gagdet/widget
  4. klik widget HTML JavaScript
Akan muncul kotak widget dalam bentuk blanko kosong dengan kolom judul diatasnya, oke tulis saja misalnya "My Profile" sebagai judul, contohnya:
https://play.google.com/store/apps/details?id=com.paprbit.dcoder
widget blanko kosong HTML/JavaScript


Langkah kedua menambahkan kode modifikasi HTML/Java Script

Nah pada blanko kosong diatas pastekan kode yang telah aku modifikasi diabawah ini:
<style>body { font-family: Arial, Helvetica, sans-serif;}.flip-card { background-color: transparent; width: 150px; height: 150px; perspective: 1000px;}.flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
border: solid; border-radius:180px;color: #E9967A; background: #E9967A;}
.flip-card:hover .flip-card-inner { transform: rotateY(180deg);}.flip-card-front, .flip-card-outer { position: absolute; width: 100%; height: 100%; backface-visibility: hidden;}.flip-card-back { background-color: transparent; color: white;}.flip-card-front { background-color: #E9967A; color: blue; transform: rotateY(180deg);}</style>

<div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <a href="https://www.blogger.com/profile/01675010269156057449"><img src="https://1.bp.blogspot.com/-XqdFpHFx8Vc/XPmXOUYz-nI/AAAAAAAAmVk/u7_NPPE1WzkDYEf2HnWmurUNPaCUdVsuACLcBGAs/s113/Screenshot_20190607-054314.jpg" alt="Avatar" style="width:150px;height:auto;" /></a> </div> <div class="flip-card-back"> <p>Touch me</p> <p>If you want to see</p> <p>My Profile</p> </div> </div></div>
Tunggu, jangan di save dulu! Teman teman perhatikan untaian kode yang aku sorot (highlight) warna warni:
  • Hijau itu kode warna background border-dash dan background muka kartu
  • Ganti kode yang disorot Kuning itu dengan link URLprofile blogger milik teman teman sendiri
  • Sedangkan yang aku sorot merah harus di ganti dengan link URL  image atau gambar profile profile blogger milik teman teman sendiri.
Kita abaikan yang disorot warna hijau. Mari mari kita bahas link URL profile dan link gambarnya saja.


Langkah ketiga Cara menambahkan URL atau link profile blogger milik sendiri:
  1.  Langsung saja akses halaman blog teman teman, pada bagian bawah konten atau artikel lihat kebagian komentar. 
  2. Klik profile teman teman sendiri
contoh:

profile kita pada komentar blog
Image profile kita pada komentar blog.

Begitu profile di klik, teman teman akan masuk ke URL atau link profile milik sendiri copy alamat pada bar, contoh milik aku:

gambar link profile pada url bar

URL profile blogspot

Hapus kode yang aku sorot pada langkah kedua diatas ganti dengan alamat URL profile blogger teman teman sendiri.

Langkah keempat menambahkan URL atau Link image/gambar blogspot ke kartu

Selanjutnya adalah cara  mengambil link atau URL image/gambar dari profile blogspot diri kita sendiri agar kartu yang kita buat memiliki gambar profile asli blogspot.

Masih melalui edit profile pada bagian bawah image atau gambar profile klik tampilkan layar ukuran penuh
tampilkan gambar ukuran penuh

Maka akan muncul tab atau halaman baru perhatikan bagian atas bar alamat URL copy link tersebut

image URL
URL link gambar atau image disorot kuning

Perhatikan baik baik link gambar formatnya harus diawali https://1.bp.blogspot.com/...dst.... gunanya ya untuk menampilkan image profile
Ganti link yang aku sorot merah diatas  pada langkah kedua dengan link teman teman sendiri melalui cara ini.

Save template
Untuk melengkapi tutorial aku telah buatkan contoh pada video berikut:


Contoh profile aku ada dibawah konten artikel ini.

Contoh di atas juga telah aku "CodePen" di CodePen, jadi jangan kuatir up to date banget guyssss....Dibawah ini adalah CdePen aku:

Selamat mencoba teman teman....sampai jumpa lagi.
See the Pen Profile blogger blogspot alternative by Anissa Auliasari (@anissa-auliasari) on CodePen.

SHARE YA: