Cara Membuat Homepage Static di Blogger

Ketika masuk ke homepage blogger, sebagian besar situs web dibagi menjadi dua: statis dan non-statis. Seperti namanya, homepage statis itu permanen tidak peduli berapa kali website ini diperbarui, sementara homepage non-statis menampilkan perubahan yang dibuat ke situs tersebut dan menunjukkan pesan-pesan terbaru saat pertama.

Yang terakhir ini sudah sangat terkenal saat ini karena meningkatnya popularitas blog pribadi dan bahkan perusahaan. Namun, masih banyak orang yang lebih memilih homepage statis karena membuat situs Web mereka terlihat lebih terorganisir dan profesional.

Hal ini juga memberi mereka lebih banyak kontrol atas pengalaman para pembaca di situs mereka dan membantu mereka menciptakan lebih kuat brand awareness melalui beragam pesan bahwa homepage mereka menyediakannya.

Beruntungnya, jika anda memiliki situs Blogger dan ingin membuat homepage anda menjadi statis, anda akan dapat membuatnya tidak sesulit seperti yang terlihat. Anda dapat membuat homepage statis di Blogger dengan mengikuti langkah-langkah berikut:

Langkah #1 Buat Page Home Statis

Hal pertama yang harus anda lakukan adalah membuat halaman baru untuk blog anda. Ini berfungsi sebagai homepage statis, tetapi untuk saat ini, itu akan terlihat dan bertindak seperti page yang lainnya.

Untuk membuat page/ halaman ini, anda harus masuk ke Dashboard Blogger dan klik pada "Laman" lihat pilihannya di menu kiri pada layar. Itu akan membawa Anda ke Jendela menu "Semua Laman".

Di sini, klik pada tombol "New Page/Laman Baru" dan anda akan masuk ke text/html editor yang terlihat mirip dengan editor Blogger Post yang anda gunakan ketika mempublish sebuah posting blog baru.

Di kotak atas, masukkan judul sesuai dengan keinginan anda untuk page ini. Dalam hal ini, sebut saja Halaman "Welcome".

Dalam kotak teks dibawahnya, ketik konten yang ingin anda munculkan di homepage anda; Anda dapat mengetik suatu teks paragraf, atau tentang diri anda bahkan bisnis anda dan tentang situs anda.

Setelah Selesai, klik "Publikasikan". jendela akan kembali ke menu utama "Semua Laman", dan Anda coba lihat laman baru "Welcome" yang telah anda buat. Salin URL dari laman "Welcome" karena anda akan membutuhkannya nanti. Untuk melakukan ini, klik kanan pada link 'Lihat' dan pilih 'Copy Link Address' dari menu.

Langkah 1

Langkah #2 Redirect homepage default ke homepage statis

Setelah Laman"Welcome" siap digunakan, hal berikutnya yang harus anda lakukan adalah mengubah situs default Blogger . Ini melibatkan redirect dari homepage asli situs anda ke homepage statis yang telah anda buat sehingga akan menjadi hal pertama yang pengujung lihat ketika mereka mengunjungi situs anda.

Untuk melakukan ini, Anda akan harus masuk ke menu Dashboard Blogger, klik pada "Setelan" di sisi kiri layar, dan pilih "Preferensi Penelusuran". Di bagiah bawah "Kesalahan dan pengalihan", Anda akan melihat pilihan "Pengalihan Khusus" dengan link "Edit" di sampingnya.

Klik pada link "Edit" untuk membuat pengalihan, di mana anda akan melihat dua kotak bernama "Dari" (dengan URL blog anda di sampingnya) dan "Kepada".

Dalam kotak "Dari", masukkan simbol garis miring saja "/". Dalam kotak "Kepada", paste URL yang anda copy tadi dan tambahkan bagian akhir URL page "Welcome". Misalnya, URL halaman ini dari blog demo kami adalah cara-membuat-homepage-static.blogspot.co.id/p/welcome_4.html, sehingga saya akan menghapus alamat "http://cara-membuat-homepage-static.blogspot.co.id" dan meninggalkan "/p/welcome_4.html" dalam kotak "Kepada". Tanda "/p" menandakan bahwa itu halaman statis.

Selanjutnya, centang kotak kecil di samping "Permanen", klik link teks "Simpan", dan tekan tombol "Simpan perubahan". Ini akan mengarahkan URL utama situs anda ke Laman home statis yang baru. Akses blog anda pada browser yang terpisah untuk melihat apakah ia bekerja.

Langkah 2

Langkah #3 Membuat tab untuk situs Anda

Jika anda berencana untuk membuat tab tidak terlihat di blog anda. So, anda tidak perlu melanjutkan ke Langkah ini atau Langkah # 3 cukup hentikan sampai Langkah # 2. Tapi, jika Anda ingin situs anda untuk memiliki tab yang menunjukkan Homepage, Halaman DashBoard, atau halaman lainnya yang mungkin Anda miliki (seperti laman Sitemap dan Contact me), anda dapat mengikuti langkah ini sampai selesai.

Mengapa ini penting? Pada dasarnya, ketika tab terlihat atau aktif di situs anda, itu akan menunjukan bahwa situs anda memiliki dua halaman: homepage default dan Laman "Welcome" yang baru anda buat, tetapi itu sudah diarahkan ke halaman statis yang sama. Hal ini dapat membingungkan pembaca anda dan bahkan dapat mempengaruhi peringkat mesin pencari anda.

Untuk memperbaiki ini, Anda harus terlebih dahulu mengaktifkan tab dengan pergi ke menu "Tata Letak" dan klik pada hyperlink "Tambah Gadget". Anda dapat memilih untuk menambahkannya bawah header blog atau sidebar, itu sesusai keinginan anda. Dalam banyak kasus, disarankan untuk menambahkannya di bawah header blog, karena mereka lebih terlihat dan membuat website anda terlihat ramping, profesional.

Setelah jendela pop-up terbuka, scroll ke bawah dan klik pada link 'Laman', setelah jendela lain bernama "Konfigurasikan Daftar Laman" terbuka. Di sini atau di bawah bagian "Laman yang ditampilkan", Anda akan melihat homepage default dan homepage statis baru dengan kotak kecil di samping mereka. Hapus tanda centang pada kotak di samping home page default untuk menyembunyikannya dari pandangan, memeriksa halaman yang ingin ditampilkan dalam menu dan kemudian klik pada tombol "Simpan" untuk menyimpan perubahan.

Cara menambah widget pages

Pada langkah ini, Tab sudah bekerja, tetapi, jika anda ingin membuat tab khusus yang akan mengarah ke halaman posting blog utama anda. Untuk melakukan hal ini, edit gadget "Pages" yang baru saja anda simpan dan klik "+ Tambahkan tautan eksternal".

Pada jendela baru yang akan terbuka, masukkan judul yang anda inginkan untuk laman ("Blog") bersama dengan alamat web /index.html, lalu tekan "Save Link" dan klik tombol "Simpan" pada Jendela "Konfigurasi Daftar Laman".

 

Menambah homepage default

Sekarang, lihat situs anda dan anda akan melihat menu halaman yang berisi page "Welcome" dan tab "Blog". Untuk melihat bagaimana ini bekerja, Anda juga dapat mengunjungi blog demo kami.

FootNote

Memiliki halaman rumah statis dapat bermanfaat bagi blog anda. Ikuti langkah-langkah di atas sekarang untuk membuat homepage statis di Blogger!

Read more

Menambahkan Control Panel Admin di Blogger

Banyak para blogger baik pemula atau pro tidak menggunakan Navbar Blogger di blogspot mereka, bahkan saya sendiri juga tidak menggunakan Navbar Blogger. Namun, menghapus Navbar Blogger juga memiliki kelemahan tersendiri, karena link admin untuk "New Entry", "Customize" dan "Log Out" tidak akan lagi terlihat dan menavigasi melalui fungsi blog, ini kadang-kadang bisa menjadi benar-benar frustasi untuk sebagian.

Ketika navbar terlihat, administrator blog dapat dengan mudah membuat posting baru atau menyesuaikan template mereka dengan hanya satu klik; Namun, ketika navbar tersembunyi, lebih banyak klik yang diperlukan untuk mengakses panel dashboard Blogger lagi. 

Dalam tutorial ini, kita akan melihat bagaimana cara menambahkan menu "Control Panel Admin" dengan banyak tambahan menu yang keren seperti: 

• akses ke homepage Blogger;
• membuat entry dan page baru;
• melihat semua Entry/Post;
• membaca komentar anda;
• mengakses ke tata letak blog untuk menambah atau mengatur ulang gadget;
• mengedit HTML dari Template;
• refresh halaman yang sedang atau sudah terbuka;
• membuka tab baru dengan homepage blog;
• akses ke pengaturan blog;
• melihat statistik Anda
• log out 

kami akan menempatkan semua pilihan ini di bagian atas halaman anda sebagai menu dan kami akan membuatnya terlihat hanya untuk administrator blog, sehingga pengunjung blog kita tidak akan dapat melihatnya. hasilnya akan seperti ini:

Demo

Menambahkan Control Panel Admin di template blogger

Control Panel admin hanya akan terlihat ketika penulis blog login dan tidak akan menampilkan kepada pembaca blog, sama dengan Edit Post atau icon pensil di sudut bawah widget yang hanya dapat dilihat saat anda login. Untuk menambahkan control panel admin untuk Blogger, ikuti langkah-langkah berikut: 

Langkah 1. Masuk ke tab template dan klik pada tombol Edit HTML :

Tab Template

Langkah 2. Klik di mana saja di dalam area kode dan tekan tombol CTRL + F untuk membuka kotak pencarian Blogger 

Membuka Search Box

Langkah 3. Paste baris dibawah ini dalam kotak pencarian lalu tekan Enter untuk menemukannya:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

 Catatan: jika anda tidak menemukan baris diatas, coba temukan tag <body>.

Langkah 4. Tepat di bawah garis atau tag, tambahkan kode berikut:

<span class='item-control blog-admin'><style>.control-panel ul{z-index: 20; position: absolute; margin: 0px auto; background-color: #F6F6F6; width: 100%; }.control-panel ul li{display: inline-block; float: left; padding: 7px 0px;}.control-panel ul li a {color:#686868;padding: 7px 15px;border-right: 1px solid #E3E3E3;font-weight: bold;font-size: 13px;}.control-panel a:hover {text-decoration:none; color:#FC8F44;}</style><div class='control-panel'><ul><li><a href='http://www.blogger.com/home'>My Blogs</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/src=sidebar&quot;' rel='nofollow'>New Post</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=page&quot;' rel='nofollow'>New Page</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#posts&quot;' rel='nofollow'>All Posts</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#comments&quot;' rel='nofollow'>Comments</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pageelements&quot;' rel='nofollow'>Layout</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#templatehtml&quot;' rel='nofollow'>Edit HTML</a></li><li><a href='#' onclick='location.reload(true); return false;'>Refresh</a></li><li><a href='/' target='_blank'>New Tab</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;' rel='nofollow'>Settings</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#overviewstats&quot;' rel='nofollow'>Stats</a></li><li><a href='http://www.blogger.com/logout.g'>Logout</a></li></ul></div></span>

Langkah 4. Klik pada tombol Simpan template untuk menyimpan perubahan. 

Sekarang kita lihat blog anda. Saat anda login ke Blogger, anda akan melihat control panel muncul di atas blog anda. Selamat menikmati!

Dengan ini control panel admin untuk Blogger anda dapat dengan mudah diakses ke fungsi blog dan anda tidak perlu susah-susah dengan selalu membuka halaman blog anda dan homepage Blogger pada saat yang sama.

Read more

Mega menu dengan Thumbnail untuk Blogger

Selamat datang kembali di Dunia-TTT, Kali in saya akan membagikan tutorial membuat Mega menu dengan Thumbnail untuk blogger konten visual memegang daya tarik tertentu yang website mengintegrasikan gambar ke setiap halaman, atau bahkan beroperasi hanya melalui foto. Sekarang, dengan menu navigasi AJAX widget baru, gambar dapat ditambahkan ke menu drop-down juga.

AJAX menu navigasi untuk blogger adalah widget yang dirancang khusus untuk platform Blogger. Hal ini terinspirasi dari situs Mashable jauh sebelum itu diberikan makeover. Meskipun inspirasinya polos dan sederhana, menu drop down dengan gambar adalah kesuksesan yang besar. Ia bekerja berdasarkan pada perpustakaan jQuery dan Blogger JSON Pakan API. Fungsi-wise, bekerja seperti menu drop-down normal ketika JavaScript dinonaktifkan. oleh karena itu, untuk bekerja secara online, blog harus untuk pengunjung umum, sehingga Blogger JSON Umpan API akan berfungsi seperti yang dirancang.

Fitur-Fitur

Multi-Level menu Dukungan

Menu AJAX adalah menu multi-level drop-down yang didasarkan pada daftar unordered standar HTML. Ketika menu berisi sub-menu, itu beban dengan cepat ketika pengguna berguling menu utama. Apa yang hebat tentang ini adalah bahwa hal itu menghemat lalu lintas keluar, terutama pada situs web yang menggunakan navigasi yang besar.

Compitible di browser lain

Sebagian besar aplikasi AJAX akan bekerja di browser yang berbeda bahkan dengan plugin lain atau teknologi eksklusif sudah terpasang. Menu dengan gambar bekerja dalam premis yang sama, bukannya dirancang untuk browser tertentu. AJAX baru, mega menu  drop down dengan gambar adalah pilihan ideal. Beberapa Windows browser yang didukung termasuk IE5 +, Firefox, Google Chrome, Safari Netscape 7 + dan Opera 8 +. Bila Anda menggunakan Mac, menu AJAX didukung pada Firefox, IE dan Safari. Jika JavaScript dinonaktifkan, namun menu masih dapat diakses, tapi hanya menu CSS murni.

Otomatis Sub-Menu Tampil

Dengan menu AJAX baru, Anda hanya perlu berguling item menu dan sub-menu secara otomatis akan memuat. Tidak perlu mengklik menu untuk mendapatkan sub-menu drop-down. Hal ini tidak hanya menghemat waktu navigasi yang berharga bagi pengguna, tetapi juga lalu lintas keluar.

Menu Styling

Menu AJAX dapat ditata dengan hanya mengubah megamenu.js dan gaya CSS. Yang pertama digunakan ketika javascript diaktifkan, sedangkan yang kedua adalah ketika dimatikan. Anda dapat menyesuaikan parameter menu secara manual atau Anda dapat menggunakan template siap digunakan. Ada banyak fitur lainnya, tetapi Anda tidak akan dapat menggunakannya jika Anda tidak menginstal menu mega baru dengan gambar. Apa yang perlu Anda lakukan untuk menerapkannya dalam blog atau website?

Demo

Menambahkan mega menu dengan Images / Thumbnail di Blogger

Langkah 1. Masuk ke akun Blogger Anda, kemudian masuk ke Dashboard. Pilih blog mana yang ingin anda install menu mega baru.

CSS

Langkah 2. Klik Template , kemudian tekan tombol Edit HTML. Tekan di mana saja di dalam area kode dan menggunakan fungsi CTRL + F untuk melakukan pencarian lebih cepat dan lebih mudah. Ketik tag berikut dan tekan Enter untuk temukan:

]]> </ B: skin>

Setelah Anda menemukan tag diatas, tambahkan kode di bawah ini tepat di atas/ sebelum tag diatas:

 Copy css dibawah!!!

.megamenu *{margin:0;padding:0;font-family:'PT Sans Narrow'}ul.megamenu{list-style:none;line-height:1;overflow:visible !important}ul.megamenu:after{margin:0;padding:0;content:' ';display:block;height:0px;clear:both}ul.megamenu li{float:left;display:inline;position:relative;text-transform:uppercase}ul.megamenu li a.menu-target:after{content:"";width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #fff;font-size:0;line-height:0;bottom:22px;right:5px;position:absolute}ul.megamenu li a{display:block;line-height:50px;padding:0px 20px;text-decoration:none;border-left:1px solid #000;box-shadow:1px 0 0 0 rgba(255, 255, 255, 0.1) inset;color:#d9d9d9;font-size:14px;transition:all 0.3s ease-in-out}ul.megamenu li a:hover{background:#111111;color:#fff}ul.megamenu ul{position:absolute;display:none;top:100%}ul.megamenu li:hover > ul{display:block}ul.megamenu ul li{z-index:72;min-width:149px;float:none;background:#000;text-shadow:none}ul.megamenu ul li a{text-transform:none;font-weight:normal}ul.megamenu ul li a:hover,ul.megamenuid ul li a.hover{background:#E0E0E0;color:#444}ul.megamenu ul ul{display:none;left:100%;top:0}ul.megamenuid li div.megasubmenu{background:#F9F9F9;position:absolute;width:830px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;-moz-transform:translate(0,30px);-webkit-transform:translate(0,30px);-o-transform:translate(0,30px);transform:translate(0,30px);transform-origin:50% 0;visibility:hidden;opacity:0;color:#888;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);transition:all 0.3s ease-in-out}ul.megamenuid li:hover div.megasubmenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.megamenuid ul,ul.megamenuid ul li{display:block !important;border:0 none !important;margin:0 !important;padding:0 !important}ul.megamenuid ul li{background:none !important;float:left !important}ul.megamenuid ul.leftmenulist{position:absolute;width:18%;left:0;top:0;bottom:0;background:#EEEEEE;border-right:1px dashed #e5e5e5 !important}ul.megamenuid ul.leftmenulist a{border-left:none !important;color:#555}ul.megamenuid ul.rightmenulist{position:relative;display:block;width:81%;float:right;margin:0px 0px 0px !important;background:none}ul.megamenuid ul.rightmenulist li{display:block;overflow:hidden;position:relative;min-height:210px;padding:5px 17px 5px 0px !important}ul.megamenuid ul.rightmenulist li .thumb-container{left:0;width:100%;height:100%;position:absolute;overflow:hidden;font-size:0;line-height:0}ul.megamenuid ul.rightmenulist li .thumb-container img{position:relative;top:10px;padding:0;width:100%;height:100%;display:block}ul.megamenuid ul.rightmenulist li a{display:block;border-left:none !important;padding:0px 5px !important;line-height:1.4;color:#777;font-weight:bold;font-size:14px}ul.megamenuid ul.rightmenulist li a:hover{color:#000;background:transparent}ul.megamenuid .loading-icon{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOP_sV4zhYdfpslf-J20YOaee9vShklIhAvwE6GBwwRjAxlkCj9_HIm0valiRGIyYHonh_a4FqdISsqsMnrSNWKk1ynBg1CSdP4tbBv7BraASmmb1OGLqF6Hy_ie3XDrJkXUMr0taOFTM/s1600/wait.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.megamenuid .menu-icon{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #777;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}#megamenuid{background:rgba(0, 0, 0, 0) -moz-linear-gradient(center top , #3d3d3d, #212121) repeat scroll 0 0;background:-webkit-linear-gradient(top,#3d3d3d,#212121);background-color:#3d3d3d;box-shadow:1px 1px 0 0 rgba(255, 255, 255, 0.1) inset;height:50px;width:100%;position:relative;max-width:1000px;margin:0 auto;padding:0px}#megamenuid h5{font-size:16px;margin-top:70px;text-align:center}#megamenuid h5:before{content:"";position:absolute;top:50px;left:50%;width:5px;height:2px;margin-left:-4px;border-left:2px solid black;border-right:2px solid black}#megamenuid h5:after{content:"";position:absolute;top:55px;left:50%;width:10px;height:5px;margin-left:-7px;border-top:2px solid black;border-left:2px solid black;border-right:2px solid black;border-radius:8px 8px 0px 0px}li.search-box{float:right !important;line-height:35px;margin:7px 10px 0 0}li.search-box .search-field{border:none;padding:3px;background:#3F3F3F;color:#fff;width:135px;font-size:13px}li.search-box .search-field:focus{border:none;outline:none;background:#4C4C4C;color:#fff}li.search-box .search-button{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOWjYjdM0KfiBGsGFXSOAthr0Bnr0wz2oMjJIXub_DZDESQVeqc8AZ-ySo8R906ZGi9YbwZe8ZonL1b3bTUFt50dKuRb4Dr3h6kCHBWJ1qYeZPbT4dkqS7aY0bwNv2gRs7kcm5FydeF0w/s1600/search.png') no-repeat;border:none;cursor:pointer;padding:5px 10px;transition:all 0.3s ease-in-out}li.search-box .search-button:hover{opacity:0.9}.search-alert{background:#E84C3D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs6m-KK45xvm2hfMIpdBD9RYqzSAeDkIc6-56TiTHo95XtaG_WeqOyuJixcHGkf7wPe80MpNIY6caJLrUkVNBqPohIYW2L0f15cqP49gMOlL8e5UKMMdXIZVv4jVOAkfLYhyphenhyphenJ9QeNSXHI/s1600/search-info.png) no-repeat;background-position:5px;text-transform:capitalize;color:#fff;margin:-5px;padding:0px 15px 0px 40px;display:none;border-radius:5px}

JavaScript

Langkah 3. Periksa apakah blog Anda sudah terpasang plugin jQuery. Jika tidak, Anda perlu menambahkan beberapa baris kode sebelum tag </ head>  (CTRL + F untuk mencarinya). copy dan pastekan kode di bawah ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/><script src='https://helplogger.googlecode.com/svn/trunk/megamenu.js' type='text/javascript'/><script type='text/javascript'>jQuery(document).ready(function($) { $(&#39;#megamenuid&#39;).megaBloggerMenu({  postsNumber : 4,   noThumbnail : &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp1DUGyfnLm5omRRzBhQa1dP1dfj5kaN94StC1fmOiOcsn9_zb9S8niTLzFNlf5nRIFiJStlsJTRgAVfwAHBAvigr4XGa_h55rdf__hNjo3AKSbyOIIy9F-ssZT_6hOq9lF3R_SzKHPX8/s1600/no_image_available.png&#39;  });});
$(function(){  $(&#39;.search-here&#39;).submit(function(e){    if($(&#39;.search-box .search-field&#39;).val().length==0){       $(&#39;.search-box .search-alert&#39;).fadeIn().css(&#39;display&#39;,&#39;inline-block&#39;);      e.preventDefault();    }  });});</script>

Catatan

- Jika jQuery Plugin sudah ada, hapus <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>,Jika belum, yaa biarin aja,,,
- Untuk mengubah jumlah posting yang akan ditampilkan, Ubah di:

postsNumber : 4

- Untuk menambahkan/mengubah thumbnail/gambar default yang berbeda jika postingan yang tidak memiliki gambar, ganti url warna biru ini:

noThumbnail : &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp1DUGyfnLm5omRRzBhQa1dP1dfj5kaN94StC1fmOiOcsn9_zb9S8niTLzFNlf5nRIFiJStlsJTRgAVfwAHBAvigr4XGa_h55rdf__hNjo3AKSbyOIIy9F-ssZT_6hOq9lF3R_SzKHPX8/s1600/no_image_available.png&#39; 

HTML

Langkah 4. Hati-hati menambahkan kode HTML untuk memastikan bahwa drop down menu dengan gambar akan bekerja seperti yang sudah dirancang. Hanya ada tiga jenis URL bahwa AJAX menu harus digunakan dengan sesuai. 

URL Label: http://yourblogurlblogspot.com/search/label/LABELNAME 

Permintaan Pencarian: http://yourblogurl.blogspot.com/search? q = SEARCHQUERY 

Label w / Search Query: http://yourblogurl.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY

Langkah 5. Cari baris berikut menggunakan CTRL + F:

<div class='main-outer'>

Tepat di atas tag diatas, tambahkan kode HTML berikut:

<ul class='megamenu' id='megamenuid'><li><a href='/'>Home</a></li> <li><a class='menu-target' href='#'>MENU TITLE</a><ul><li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li><li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li><li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li></ul></li><li><a class='menu-target' href='#'>MENU TITLE</a><ul><li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li><li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li><li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li></ul></li><li><a href='http://ADDURLHERE.com'>Normal Link</a></li><li class='search-box'><form action='/search' class='search-here' method='get'><input class='search-field' name='q' placeholder='Search Here' size='30' type='text'/><input class='search-button' type='submit' value=' '/></form><p class='search-alert'>Search form is empty!</p></li></ul><div class='clear'/> <div class='clear'/>

Catatan: mengganti teks warna biru dengan url label dan teks dalam merah dengan nama label. Ini adalah contoh yang telah Anda tambahkan ke pengaturan Label editor posting Anda:

Langkah 6. Klik Simpan template agar semua perubahan diterapkan. Jika Anda tidak dapat menemukan baris dari langkah 5, pilih tab Tata Letak , klik Add Gadget , lalu pilih HTML / JavaScript Gadget. Salin kode HTML dan paste di dalam kotak ... kemudian tekan Simpan. 

Itu saja! Setelah selesai, menu AJAX dengan gambar akan ditampilkan dan siap untuk digunakan. Pastikan untuk memilih foto yang relevan dengan menu dan sub-menu sehingga website Anda akan memiliki tampilan yang kohesif dan daya tarik. Penelitian menunjukkan, bagaimanapun, teks yang disertai dengan gambar apapun, bahkan jika benar-benar tidak relevan, bisa menarik perhatian.

Read more