Solusi Mengatasi Postingan Blog Berkurang Pada Homepage Hanya Menampilkan Satu atau Dua Artikel
Hanya...
Solusi Mengatasi Postingan Blog Berkurang Pada Homepage Hanya Menampilkan Satu atau Dua Artikel
Solusi Mengatasi Postingan Blog Berkurang Pada Homepage Hanya Menampilkan Satu atau Dua Artikel
Hanya berbagi pengalaman selama ngeblog, mungkin di antara anda yang sering ngeblog pernah mengalami hal yang serupa sehingga menimbulkan kepanikan seperti ketika saya mengalamai masalah ini.
Ketika saya mengalami ini saya sempat otak atik isi template blog saya sampai berjam-jam namun hasilnya nihil, sampai ahirnya saya mendiamkannya dan menunggu keesokan harinya, sambil browsing lewat smartphone kesayangan, saya mencari penyebabnya namun tidak mendapatkan hasil, sayapun semakin risau dan memutuskan untuk bersantai di warkop untuk menenangkan pikiran, sambil minum segelas kopi saya berfikir, apakah saya harus ganti template lagi? TIDAKHanya berbagi pengalaman selama ngeblog, mungkin di antara anda yang sering ngeblog pernah mengalami hal yang serupa sehingga menimbulkan kepanikan seperti ketika saya mengalamai masalah ini.
Saya kembali browsing dengan menggunakan metode penyaringan hasil penelusuran pada google, dengan alasan semua keywork yang saya gunakan hanya menampilkan artikel-artikel yang sudah lama dan rata-rata hanya menampilkan isi artikel yang sama dengan judul yang berbeda mungkin saja hasil kerja keras para COPAS (Kopi Paste).
Dan setelah menyaring penelusuran fokus pada artikel dengan terbitan setahun terakhir ahirnya saya mendapat pencerahan dari empuhnya yakni Mas Sugeng dengan judul artikelnya :
Cara Mengatasi Postingan Yang Hanya Tampil Satu di Homepage.
Sebelum kita melanjutkan tutorial ini ada baiknya jika anda mengetahui penyebab dari masalah ini, menurut Mas Sugeng seperti yang di jelaskannya dalam postingannya bahwa :
''Hampir semua penyebab dari masalah tersebut sama. Yaitu karena postingannya ditulis melalui Microsoft Word.Kenapa bisa begitu? Karena MS Word merupakan program word processor bukan text editor. Jadi ketika sobat menulis di MS Word setelah itu tulisannya disalin, maka yang tersalin bukan hanya text, tapi kode-kode di belakangnya juga ikut tersalin. Nah ketika dipaste ke blogger kode-kode tersebut akan mengalami konflik dengan kode-kode yang ada di blogger. Itulah yang menyebabkan error.''
Setelah mengetahui permasalahan di atas dan penyebabnya, berikut pemecahan masalahnya :
Pertama :
Pilih Pos - dan edit postingan terahir anda seperti pada gambar berikut :
Pada baris pertama artikel anda pasang atau inser jump break seperti pada gambar berikut :
Semoga bermanfaat.
''Silahkan kunjungi Sugen.id sebagai sumber referensi dari artikel ini''
Menerapkan Menu Navigation Simple Pada Blog Dengan Desain Responsive
Sesuai dengan judul artikel ini "Menerapkan Menu Navigation Simple Pada Blog Dengan Desa...
Apakah anda yakin artikel atau konten anda mampu memberi daya tarik kepada para pengunjung?
Jika meman anda yakin, berarti anda harus memanjakan pengunjung anda.Salah satu cara yang paling efektif untuk menarik pengunjung membaca artikel anda dan berselancar pada situs atau blog anda adalah dengan menjadikan situs atau blog anda responsive atau Mobile friendly.
Apa itu Mobile friendly? Mobile friendly secara sederhana saya bahasakan adalah ketika situs atau blog anda diakses melalui perangkat mobile handphone/HP, blog anda dapat menyesuaikan tampilannya dengan perangkat handphone/HP yang digunakan.
Gambar di atas adalah tampilan situs atau blog yang mobile friendly dan tidak mobile friendly.Cara praktis dan mudah mengetahui situs atau blog anda mobile friendly adalah dengan menggunakan Testing Tool yang sudah di sediakan oleh google, berikut prakteknya :
1. Silahkan anda kunjungi developers.google
2. Anda akan disajikan dengan tampilan seperti berikut :
3. Klik pada link sudut kiri yang bertuliskan Test Your URL lihat pada gambar yang telah saya tandai di atas.
4. Selanjutnya anda akan di sajikan dengan tampilan seperti berikut :
5. Ketik atau paste alamat situs atau blog yang akan anda tes pada form yang di sediakan, selanjutnya klik JALANKAN PENGUJIAN perhatikan gambar di atas.
6. Selanjutnya silahkan anda tunggu beberapa saat sampai muncul tampilan kurang lebih seperti berikut:
Selamat anda berhasil mengetahui situs atau blog anda mobile friendly atau tidak mobile friendly.
Sekian Praktek kali ini, semoga bisa membantu bagi anda yang membutuhkannya.
Ini Dia Cara Mudah Tes Situs Blog Mobile friendly atau Tidak
Bagi anda yang memiliki situs atau blog yang dipublikasikan kepada para pencari informasi tentu...
Saya tidak akan menjelaskan secara terperinci karna saya yakin anda sudah mengetahui fungsi dari search box tersebut. Namun perlu anda ketahui, bahwa Praktek/tutorial kali ini akan menggunakan desain yang menurut saya sangat sederhana minimalis namun menarik perhatian, gambar di atas adalah hasil dari kreasi saya dalam menerapkannya di blog ini:
Saya yakin anda bisa bereksperimen lebih dari pada saya sehingga hasilnya bisa jauh lebih menarik.1. Masuk ke Dashboard.Bagaimana cara penerapan dan pemasanganya? Berikut prakteknya bisa anda ikuti step by step.
2. Lalu pilih template.
3. Selanjutnya pilih Edit HTML.
4. Lalu cari kode aside (Gunakan CTRL + F agar pencarian lebih mudah).
5. Lalu pastekan kode HTML di bawah ini tepat di bawah kode <aside id
HTML :
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Seacrh Here...' type='text'/>
<button id='search-button' type='submit'><span><i aria-hidden='true' class='fa fa-search'/> Search</span></button></form></div>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Seacrh Here...' type='text'/>
<button id='search-button' type='submit'><span><i aria-hidden='true' class='fa fa-search'/> Search</span></button></form></div>
Ket : Anda bisa mengganti teks warna biru sesuai dengan keinginan anda. Warna hijau bisa anda hilangkan atau anda ganti dengan icon lain. Warna ungu bisa anda ubah kedalam bahasa lain misalkan CARI DISINI, CARI ARTIKEL dan sebagainya.6. Lanjut dengan mencari </head> Jika sudah ketemu letakkan CCS berikut di atasnya
<style>
#search-box{position:relative;top:20px;margin:10px auto;border:1px solid #ccc;padding:5px;}#search-form{height:35px;background-color:#fff;overflow:hidden}#search-text{font-size:12px;color:#ddd;border-width:0;background:transparent;line-height:15px}#search-box input[type="text"]{width:90%;padding:10px 0 5px 1em;color:#333;outline:none}
#search-button{position:absolute;top:5px;right:5px;height:35px;width:80px;font-size:12px;color:#fff;text-align:center;border-width:0;background-color:#ff5848;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}#search-button:hover{background:#333}
</style>
#search-box{position:relative;top:20px;margin:10px auto;border:1px solid #ccc;padding:5px;}#search-form{height:35px;background-color:#fff;overflow:hidden}#search-text{font-size:12px;color:#ddd;border-width:0;background:transparent;line-height:15px}#search-box input[type="text"]{width:90%;padding:10px 0 5px 1em;color:#333;outline:none}
#search-button{position:absolute;top:5px;right:5px;height:35px;width:80px;font-size:12px;color:#fff;text-align:center;border-width:0;background-color:#ff5848;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}#search-button:hover{background:#333}
</style>
Ket : Sesuaikan dengan template anda text warna merah di atas adalah pengaturan letaknya, untuk yang warna kuning adalah ukuran huruf, wana biru adalah untuk mengatur lengkungan pada sudut search. Jika ada yang kurang jelas silahkan berkomeentar atau melalui email pada bagian Kontak.7. Save template anda dan lihat hasilnya.
Itulah cara penerapan kolom pencarian yang menurut saya cukup praktis dan mudah diterapkan pada blog anda.
Praktek Penerapan dan Cara Mengatur Form Search Responsive pada Blog dengan Mudah
Berbicara mengenai search box atau kotak pencarian adalah hal yang biasa-biasa saja, setiap kita...
Ok, mari kita mulai praktek kali ini dengen menghapus terlebih dahulu semua kode related post yang ada di template anda jika sudah pernah menerapkannya dan merasa kurang puas dengan tampilan related post atau artikel terkait yang anda miliki sekaran.
Tetapi kalau anda belum pernah memasang artikel terkait atau related post di blog anda, lewati langkah di atas dan mulai ke tahap berikutnya.
- Seperti biasa pilih Template kemudian Edit HTML. Bagi pemula jika kurang jelas lihat gambar berikut : Bagi anda yang sudah paham abaikan gambar di atas dan lanjut ketahap selanjutnya.
- Pasang kode CSS dan JavaScript Related Post Gambar Thumbnail Responsive berikut di atas kode </head> <!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove -->
<b:if cond='data:blog.pageType == "item"'>
<style>
#related-post {margin:0 auto;padding:0;}
#related-post h4{position:relative;overflow:hidden;margin:10px 0 20px 0;font-size:120%;font-weight:700}
#related-post h4:after{position:absolute;top:51%;overflow:hidden;width:78.3%;height:1px;
content:'a0';background-color:#ccc}
#related-post h4 span{position:relative;display:inline-block;margin:0 10px 0 0}
.relhead {font-size:100%;font-weight:normal;line-height:150%;overflow:hidden;padding:10px 0;}
#related-summary .news-text {display:none;}
ul#related-summary{margin:0 auto;padding:0;list-style:none;word-wrap:break-word}
ul#related-summary li{position:relative;float:left;list-style:none outside none;padding:0;overflow:hidden;margin:0 10px 0 0;width:100%;max-width:175px;height:170px;transition:opacity .2s ease}
ul#related-summary li a {display:block;}
ul#related-summary li img{background-color:#fafafa;display:block;width:100%;height:auto;max-width:100%;max-height:100px;vertical-align:middle;overflow:hidden;margin:0 0 10px;transition:all 1s ease-out}
ul#related-summary li:hover img {opacity:0.96;}
ul#related-summary li a.relinkjdulx{background-image:none;color:#444;display:block;font-size:13px;font-weight:700;line-height:normal;overflow:hidden;padding:0;text-align:left;text-transform:none}
ul#related-summary li a.relinkjdulx:hover{color:#c00;}
@media only screen and (max-width:640px){
ul#related-summary li {float:left;list-style:none;overflow:hidden;width:100%;border-bottom:1px solid #e6e6e6;padding:10px 0;max-width:100%;height:auto;}
ul#related-summary li:last-child{border-bottom:none;}
ul#related-summary li img{max-width:72px;float:left;margin:0 10px 0 0;}
ul#related-summary li a.relinkjdulx {display:block;font-size:15px;font-weight:700;line-height:normal;overflow:hidden;padding:0 10px 10px 0;}}
@media screen and (max-width:384px){
ul#related-summary li img{display:none}}
</style>
<script type='text/javascript'>
//<![CDATA[
//Related Post
var relnojudul = 0;
var relmaxtampil = 6;
var numchars = 120;
var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<relmaxtampil){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
//]]>
</script>
<script type='text/javascript'>
$("ul#related-summary li img").each(function(){$(this).attr("src",$(this).attr("src").replace(//s[0-9]+(-c)?//,"/w175-h100-c/"))});
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End--> - Langkah terahir pemasangan kode HTML di bawah kode <data:post.body/> yang kedua atau ketiga, bisa juga di bawah kode <div class='post-footer'> atau <div class='post-footer-line post-footer-line-2'> atau <div class='post-footer-line post-footer-line-3'> berikut kodenya :<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-post'>
<div class='relhead'>
<h4><span>Related Posts</span></h4>
<div class='clear'/>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50"' type='text/javascript'/>
</b:loop>
<ul id='related-summary'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</div>
</div>
<div class='clear'/>
</b:if>
<!-- Related Posts with Thumbnails Code End--> - Save Template!
CATATAN : Jika ada masalah lebar gambar, bisa diatur pada kode CSS (bagian width), caranya cari kode berikut: max-width:175px;height:170px;transition:opacity .2s ease dan sesuaikan dengan lebar postingan anda dengan mengganti 175px sesuai lebar postingan anda.Praktek ini di adopsi dari Contoh Blog Sebagai sumber dari admin.
Praktek Penerapan, Postingan Terkait atau Related Post Dengan Gambar Thumbnail Responsive
Tema pada kali ini adalah Postingan Terkait atau Related Post Responsive, begitulah kira-kira...
Kali ini admin DGP akan memberikan praktek penerapan kotak seleksi kode Script HTML/CCS/Javascript di Dalam Posting Blog.
Artikel-artikel yang biasanya kita temui biasa adalah artikel tutorial yang menyajikan script sebagai tutorial, tujuannya bukan hanya untuk menambah kerapian postingan artikel tetapi juga sangan memudahkan pembaca untuk mencopy paste script tersebut supaya mudah dipraktekkan saat ingin diterapkan oleh pengunjung.
Bagi para blogger atau mereka yang sudah terbiasa mendesain blog/webs tentu hal ini bukanlah hal yang baru dan luar biasa karna sudah familiar dengan tampilan tutorial yang seperti ini, namun bagi para pemula hal ini bukanlah sesuatu yang mudah, oleh karena itu postingan ini khusus dedikasikan hanya untuk blogger pemula yang ingin belajar oleh admin DGP.
Untuk lebih jelasnya berikut sedikit gambaran dari praktik ini:
Atau liahat demonya di SINI
Untuk penerapannya mari kita mulai dengan masuk ke blog anda pilih Template kemudian Edid HTML lihat gambar berikut:
Untuk penerapannya mari kita mulai dengan masuk ke blog anda pilih Template kemudian Edid HTML lihat gambar berikut:
Sebelum ]]></b:skin> atau di atasnya sudah saya kasi kotak, nantinya disitulah posisi CCS berikut disisipkan ;
Selanjutnya, sisipkan kode script berikut sebelum atau di atas body </body>
Setelah langkah di atas selesai save template anda, kemudia cobalah membuat suatu postingan seperti biasanya pada mode Compose, namun ketika anda ingin memasukkan sebuah CCS/JS pilih mode HTML, lihat gambar berikut :
Saat postingannya selesai pratinjau dan lihat hasilnya, selesai.
Praktek Penerapan Kotak seleksi Kode Script HTML/CCS/Javascript di Dalam Posting Blog
Kali ini admin DGP akan memberikan praktek penerapan kotak seleksi kode Script HTML/CCS/Javascript...
Kali ini kita akan mempraktekkan penerapan header responsive dengan menu navigasi dan kotak search pada blog, untuk lebih jelasnya berikut screnshoot setelah penerapannya :
Berikut langkah-langkah penerapan header responsive dengan menu navigasi dan search pada blog.
Pertama : Sisipkan scritp berikut di atas <body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'/>
Script di atas bisa anda abaikan jika sudah terpasang pada blog anda, jadi sebaiknya di cek dulu, jika sudah selesai, kita ketahap selanjutnya bagian,
Kedua : Terapkan HTML berikut Pada header atau ganti bagian header dengan HTML berikut:
Bagian ketiag Sisipkan CCS berikut di bawah <head><div>
<div class='header-blue'>
<nav class='navbar navbar-default navigation-clean-search'>
<div class='container'>
<div class='navbar-header'><a class='navbar-brand navbar-link' href='#'>Cara Cara</a>
<button class='navbar-toggle collapsed' data-target='#navcol-1' data-toggle='collapse'><span class='sr-only'>Toggle navigation</span><span class='icon-bar'/><span class='icon-bar'/><span class='icon-bar'/></button>
</div>
<div class='collapse navbar-collapse' id='navcol-1'>
<ul class='nav navbar-nav'>
<li class='dropdown'><a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#'>Kontak <span class='caret'/></a>
<ul class='dropdown-menu' role='menu'>
<li role='presentation'><a href='#'>First Item</a></li>
<li role='presentation'><a href='#'>Second Item</a></li>
<li role='presentation'><a href='#'>Third Item</a></li>
</ul>
</li>
</ul>
<form class='navbar-form navbar-left' target='_self'>
<div class='form-group'>
<label class='control-label' for='search-field'><i class='glyphicon glyphicon-search'/></label>
<input class='form-control search-field' id='search-field' name='search' type='search'/>
</div>
</form>
</div>
</div>
</nav>
</div>
</div>
Selesai, untuk lebih jelas anda bisa cek hasil penerapannya pada mode DEMO<style>
.header-blue{
background:linear-gradient(135deg, #172a74, #21a9af);
background-color:#184e8e;
padding-bottom:80px;
font-family:'Source Sans Pro', sans-serif;
}
@media (max-width:767px) {
.header-blue{
padding-bottom:30px;
}
}
.header-blue .navbar{
background:transparent;
padding-top:12px;
padding-bottom:10px;
color:#fff;
border-radius:0;
box-shadow:none;
border:none;
}
@media (max-width:767px) {
.header-blue .navbar{
padding-top:0;
padding-bottom:0;
}
}
@media (max-width:767px) {
.header-blue .navbar .navbar-header{
padding-top:10px;
padding-bottom:10px;
}
}
@media (max-width:767px) {
.header-blue .navbar .navbar-right{
margin-bottom:20px;
}
}
.header-blue .navbar .navbar-brand{
font-weight:bold;
color:inherit;
}
.header-blue .navbar .navbar-brand:hover{
color:#f0f0f0;
}
.header-blue .navbar .navbar-brand img{
height:100%;
display:inline-block;
margin-right:10px;
width:auto;
}
.header-blue .navbar .navbar-toggle{
border-color:rgba(255,255,255,0.3);
}
.header-blue .navbar .navbar-toggle:hover, .header-blue .navbar-toggle:focus{
background:none;
}
.header-blue .navbar .navbar-toggle .icon-bar{
background-color:#eee;
}
.header-blue .navbar .navbar-collapse, .header-blue .navbar .navbar-form{
border-color:rgba(255,255,255,0.3);
}
.header-blue .navbar .navbar-nav > .active > a, .header-blue .navbar .navbar-nav > .open > a{
background:none;
box-shadow:none;
}
.header-blue .navbar.navbar-default .navbar-nav > .active > a, .header-blue .navbar.navbar-default .navbar-nav > .active > a:focus, .header-blue .navbar.navbar-default .navbar-nav > .active > a:hover{
color:rgba(255,255,255,0.3);
box-shadow:none;
background:none;
pointer-events:none;
}
.header-blue .navbar.navbar .navbar-nav > li > a{
padding-left:18px;
padding-right:18px;
}
.header-blue .navbar.navbar-default .navbar-nav > li > a{
color:#d9d9d9;
}
.header-blue .navbar.navbar-default .navbar-nav > li > a:focus, .header-blue .navbar.navbar-default .navbar-nav > li > a:hover{
color:#fcfeff !important;
background-color:transparent;
}
.header-blue .navbar .navbar-nav > li > .dropdown-menu{
margin-top:-5px;
box-shadow:0 4px 8px rgba(0,0,0,.1);
background-color:#fff;
border-radius:2px;
}
.header-blue .navbar .dropdown-menu > li > a:focus, .header-blue .navbar .dropdown-menu > li > a{
line-height:2;
font-size:14px;
color:#37434d;
}
.header-blue .navbar .dropdown-menu > li > a:focus, .header-blue .navbar .dropdown-menu > li > a:hover{
background:#ebeff1;
}
@media (max-width:767px) {
.header-blue .navbar .navbar-nav .open .dropdown-menu{
box-shadow:none;
background:none;
color:#fff;
}
}
@media (max-width:767px) {
.header-blue .navbar .navbar-nav .open .dropdown-menu > li > a{
color:#fdfeff;
padding-top:12px;
padding-bottom:12px;
line-height:1;
}
}
.header-blue .action-button, .header-blue .action-button:active{
border:1px solid rgba(255,255,255,0.7);
border-radius:20px;
color:#ebeff1;
box-shadow:none;
text-shadow:none;
padding:6px 15px;
background:transparent;
transition:background-color 0.25s;
outline:none;
}
.header-blue .action-button:hover{
color:#fff;
}
.header-blue .action-button.btn-lg{
padding:7px 18px;
}
.header-blue .navbar .navbar-form label{
color:#ccc;
}
.header-blue .navbar .navbar-form .search-field{
background:none;
border:none;
border-bottom:1px solid transparent;
border-radius:0;
color:#ccc;
box-shadow:none;
color:inherit;
transition:border-bottom-color 0.3s;
}
@media (max-width:767px) {
.header-blue .navbar .navbar-form .search-field{
display:inline-block;
width:80%;
}
}
.header-blue .navbar .navbar-form .search-field:focus{
border-bottom:1px solid #ccc;
}
</style>
Praktek Penerapan Header Responsive Dengan Menu Navigasi Dan Search
Kali ini kita akan mempraktekkan penerapan header responsive dengan menu navigasi dan kotak search...
Lalu apa itu ferivikasi? berikut sedikit pengertian ferivikasi.
Verifikasi adalah suatu penilaian terhadap sumber-sumber. Penilaian yang dimaksud sangat berkaitan dengan dua aspek yakni aspek ekstern dan aspek intern. Aspek esktern ini mempersoalkan sumbernya sedangkan aspek intern ini mempersoalkan apakah sumber tersebut dapat memberikan suatu informasi yang dibutuhkan. Umumnya proses verifikasi ini dibutuhkan untuk menilai beberapa naskah dokumen penting ataupun surat.
Verifikasi adalah proses pembuktian bahwa Anda adalah pemilik situs atau aplikasi yang diklaim sebagai milik anda.
Blog yang anda buat dengan artikel-artikel yang anda buat akan percuma tanpa anda menverifikasi bahwa itu adalah hasil karya anda yang anda publikasikan melalui blog anda.
Lalu bagaimana cara menverifikasi blog anda?
Berikut prektek yang bisa anda terapkan untuk menferivikasi kepemilikan blog anda.
Pertama :
Masuk ke blog anda pilih setelan berikut gambarannya :
Selanjutnya pilih preferensi penelusuran seperti pada gambar berikut :
Lanjut perhatikan tanda panah, pas disamping GOOGLE SEARCH CONSOLE pilih edit
Secara otomatis anda akan ditujukan pada tab baru pada browser anda menuju beranda search console
perhatikan gambar berikut :
Selanjutnya anda bisa menambahkan properti atau blog anda dengan memasukkan url blog anda, jika sudah selesai pilih kelola properti dan verifikasi properti perhatikan gambar tandah panah di atas.
Selanjutnya anda akan menuju pada halaman seperti pada gambar berikut:
copy semua yang telah saya tandai seperti pada gambar di atas, selanjutnya kembali ke blog anda pilih template kemudian pilih edit html, seperti pada gambar berikut :
Saatnya save templat anda.
Kemudian kembali ke tab halaman ferivikasi di mana anda tadi mengambil meta tag yang anda copy ke dalam template blog anda, dan pilih ferivikasi, berikut gambarnya
Selesai anda akan ditujukan ke halaman seperti gambar berikut :
Itulah praktek ferivikasi blog ke search console, semoga bermanfaat.
PRAKTEK VERIFIKASI KEPEMILIKAN BLOG PENTING BUAT BLOGGER PEMULA
Berbicara masalah verifikasi sangatlah penting karna sesuatu yang anda miliki namun tidak mengklaim...
Subscribe to:
Posts (Atom)