How To Make Slideshow On Blog

Here are the steps:
Log into the site and click the button http://www.photosnack.com Make a slideshow to start creating photo slideshow.



Next will appear choices Sign in and Register, for the first time you create a slide show select Register and recharge your name, email address and email password and click the Register button.



Acknowledgments will appear and you are asked to verify the email sent by photosnack.com to email you. Verify in advance in the email you then return to the site photosnack.com then click the Continue button.



Next select only My computer and click the Browse button to select the number of images that exist on your computer, the process will take slightly longer depending on the number of photos would be added. Types of images that support the extension jpg, jpeg, png and gif and size of each photo should be no more than 10 MB. If the upload is complete then click the Next button (on the upper right corner).



Perform the selection of templates that you want by clicking the image template, the template will appear if no match previews just click the Cancel button and vice versa if it is to find the appropriate option button Use this template and then click the Finish button.



Click the link below Direct link, the link will appear in a new tab. Then click the Share / Embed see picture no. 7 the bottom to find out his position.



Select the type of blog that would be used, in this post I chose WordPress, it will display a dialog box HTML code.




In the dialog box select Object Embed Code (old version), enter the username, password and address of his blog and click the Post button, wait until it says Thank You posted the item and then click the Close button.



Well now the final step to open your wordpress blog, then select Writing> All Posts, there is no concept of postings that have been sent automatically by photosnack.com you edit it and select HTML mode and copy the HTML code into your text widget. The results look like on my blog under the right.

Thanks :

Cara Install App Tab Youtube Google+ Pinterest di Halaman Facebook


Apa itu Tab App Facebook?
Facebook adalah sebuah aplikasi sosial media yang begitu populer dan banyak digunakan di seluruh dunia dan sebagai alat komunikasi semua orang. selain bisa membuat akun Profil didalam facebook kita bisa membuat Group facebook dan Halaman atau Fanpage

Group Facebook
Biasa digunakan orang sebagai media komunitas, atau perkumpulan orang khusus dan umum yang bisa bersosialisasi didalamnya,

Halam Facebook / Fanpage
Biasa Digunakan sebagai website Halaman facebook. banyak difungsikan sebagai alat untuk promosi, produk, bisnis, merek, organisasi, bisnis dll yang didalamnya terdapat profil sebagai Pemilik dan pengelolanya.

Tab App Facebook adalah sebuah menu tambahan yang terdapat pada halaman facebook berupa tab aplikasi, yang terdiri dari beberapa aplikasi yang bisa ditambahkan kedalam halaman facebook. tab aplikasi facebook ini diantaranya, tab app youtube, Tab App Google+, Tab App Pinterest, dan banyak lagi tab tab aplikasi facebook lainnya yang dapat di pasang di halaman facebook. contoh menu  Tab App yang ditambahan pada halaman facebook punya saya



Cara Memasang Tab Applikasi di Facebook
Pertama login facebook terlebih dahulu
Kemudian ke Pengaturan - Kelola Halaman
Pilih Halaman Yang anda kelola, jika belum punya halaman anda bisa membuat Halaman terlebih dahulu dengan menekan tombol +Buat halaman Pada facebook.
Selanjutnya Jika Sudah Masuk di Beranda Halaman kemudian anda buat tab baru di browser dan dan masuk ke alamat https://fbapp.us/  untuk memasang dan memilih Tab applikasi Mana yang anda mau pasang di Halaman Facebook anda.
Jika sudah Masuk ke https://fbapp.us/ maka tampilannya seperti ini


Disana ada banyak pilihan tab app yang bisa di install di facebok tinggal klik tulisan Install pada tampilan menu yang tersedia. Jika anda ingin memasang Tab app youtube caranya seperti berikut

Cara Memasang / Install Tab App Youtube di Facebook
Pertama Klik Pilihan Install pada menu Facebook Your Apps for Pages. lihat gambar


Maka akan menuju tanpilan seperti berikut Pilih halaman Facebook Untuk menambahkan Youtube Tab, Klik Tanda Panah kebawah untuk memilih halaman anda. kemudian tekan tombol Tambahkan Tab Halaman. lihat gambar untuk lebih jelasnya.


Tunggu Beberapa detik untuk menuju halaman Aplikasi settings di facebook.
Kemudian isilah data data di menu pengaturan Aplikasi settings tampilan nya seperti ini
Keterangan:
Pada bagian Youtube Channel ID or playlist ID: 
Isi dengan ID Channel Youtube anda, untuk mengetahu ID channel youtube
pertama login youtube menggunakan akun youtube anda kemudian klik ikon Gear yang ada disebelah tulisan Creator Studio pada gambar profil

Kemudian Pilih Advanced maka disana akan terlihat ID User dan ID Channel youtube anda
Nah Jika Sudah mengetahui id channel youtube, tinggal dimasukan ke dalam Aplikasi Setting nya

Untuk mengisi Featured video ID: isi dengan id video yang telah di upload tujuannya untuk menampilkan Thumbnail Video di facebook nya.
untuk mengisinya, lihat video youtube yang telah di upload, kemudia lihat bagian url nya

Kemudian tempelkan di kolom Featured video ID nya  Kemudian Klik Save Setting Di bagian bawah. maka semua video yang ada di chanel youtube anda akan di tampilkan di tab Apps facebook ini.

Untuk menambahkan menu tab apps yang lainnya seperti google+, Pinterest, dan yang lainnya caranya sama seperti diatas. tab apps tambahan ini sangat bermanfaat sekali buat meningkatkan dan trafik, memperbanyak like halaman facebook yang kita kelola, selain itu sebagai alat buat sebuah promosi video video kita di youtube, memperbanyak subscribe, follower google+ dan tentunya masih banyak lagi kegunaan dan manfaatnya. tergantung kita menggunakannya.

Demikian Tutorial Cara Install App Tab Youtube Google+ Pinterest di Halaman Facebook yang dapat di berikan. dilain kesempatan saya akan memberikan tutorial - tutorial yang lebih menarik lainnya.

Jika masih ada kesulitan dalam menggunakan Tab Apps ini, bisa hubungi saya atau sekedar bertanya dan diskusi dengan berkomentar di konten ini. silhakan baca - baca lagi artikel -artikel yang terkait sebagai panduan untuk belajar ngeblog anda.

Semoga dapat membantu dan Semoga berhasil dalam mengikuti tutorial ini, mohon maaf jika ada kesalahan atau kurang jelas dalam pemberian materinya. harap dimaklum karena saya juga hanya seorang manusia biasa yang tak luput dari salah..... hehehe kaya lagu ya!

Cara Memasang Widget Di Blog

play.google

Kali ini saya akan membuat sebuah tutorial yang ringan - ringan saja terkait cara memasang widget di blog, khususnya blogspot. widget adalah alat tambahan bawaan blogger untuk mepercantik blog dan sebagai alat navigasi untuk mempermudah penjelajahan didalam blog sebagai pengganti keterangan atau konten di dalam template blog. sehingga pengunjung dapat mudah mengetahui konten yang ada di dalam blog itu sendiri.

Cara Memasang Widget di Blog Blogspot
Pertama Login Blogger terlebih dahulu
Dan Buka Dashboard blog Kemudian masuk Pengaturan Tata Letak



Lihat gambar diatas untuk lebih jelas lagi cara menambhakan widgetnya. Kemudian Klik tulisan + Tambahkan Gedget maka akan nampak form yang berisi beberapa widget didalam nya.
Untuk dasar - dasar widget yang ada sekarang jumlahnya ada 27 widget yang dapat di tambahakan kedalam blog, belum termasuk gedget lainnya, jika anda memilih gedget lainnya maka ada 779 widget yang bisa di tambahkan ke dalam blog. selain itu anda bisa menambahkan widget punya sendiri dengan memasukan url widget nya saja.

Menambahkan Widget dengan Option Dasar dasar widget di blogspot


Jika anda memilih option Gedget Lainnya maka akan ada 779 widget yang disediakan oleh blogger


Jika anda ingin menambahkan widget punya sendiri anda bisa pilih option widget Milik anda caranya dengan memasukan url widget milik anda sendiri


Jika sudah memilih widgetnya kemudian Klik Tombol Simpan, dan untuk melihat hasilnya Lihat Blog. maka widget otomatis akan di tampilkan di dalam blog.

Sekedar saran.
Menambahkan widget di blog boleh boleh saja dan tidak larangan atau aturan baku didalamnya, tambahkan widget sesuai kebutuhan saja karena banyak widget di dalam blog bukan mempercantik malah akan menjadi berantakan, selain itu blog akan berat sehingga pengunjung melihatpun akan pusing dengan banyaknya widget yang dipasang. diharapkan kembali lagi ketujuan utama membuat blog itu sendiri,
karena yang dibutuhkan pengunjung bukanlah widget melainkan artikel atau konten untuk bahan bacaan sebagai materi untuk belajar dan sebagainya.

Demikian cara memasang widget di blog khususnya blogspot dengan mudah dan sederhana. semoga dapat membantu dan bermanfaat.

Cara Membuat Blog Tidak Bisa di Copy Paste

Sangat disayangkan jika artikel atau postingan kita di duplikat sama orang lain, istilah kerennya copas konten.. hehehe. Sudah cape - cape nulis artikel ketika sudah jadi tidak tahu diduplikat sama orang, kan bikin kita kesel..!
cara membuat anti copy paste ini sudah banyak dibahas dibeberapa blog lain, tapi dalam hal ini tidak ada salahnya juga saya membuatnya dan memasangnya juga di blog saya sendiri, untuk sedikit melindungi dari para penduplikat konten/artikel sebuah postingan, karena menurut saya "artikel adalah suatu karya yang patut dilindungi" karena tidak gampang loh.. membuat arikel itu... korban waktu tenaga dan pikiran, jadi alangkah dan sebaiknya kita lindungi artikel - artikel kita ini dari tangan - tangan yang tidak bertanggung jawab, nyomot artikel tanpa izin dan basa basinya..

Nah.. untuk mengantisipasi hal tersebut disini saya akan membagikan cara Membuat Blog Tidak Bisa di Copy Paste, tapi hanya bagian tertentu saja yang bisa di salin, sebagai contoh yang dapat di copas hanya bagian kode script html saja yang bisa di copy paste.

Cara Membuat Blog Tidak Bisa di Copy Paste
Pertama login blogger terus masuk ke tampilan pengeditan html atau editor template Edit HTML

Cari kode ]]></b:skin> jika tidak ketemu cari kode </Style> Kemudian salin kode berikut dan tempelkan di bagian atas kode tersebut
.post { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -ms-user-select:none; -moz-user-select:none; }
.post blockquote,.post pre,.post code { -webkit-touch-callout:text; -webkit-user-select:text; -khtml-user-select:text; -ms-user-select:text; -moz-user-select:text; }
Ilustrasi:

Setelah itu Simpan Template anda dan preview untuk mengetesnya.
Jika postingan anda sudah tidak bisa dicopy paste itu tandanya penempatan kode tadi sudah benar.
Jika masih ada kesulitan silahkan hubungi saya atau bertanya di kolom komentar.
Demikian tutorial Cara Membuat Blog Tidak Bisa di Copy Paste semoga bermanfaat
NB:sumber kode:seocips.com

Cara Membuat Gambar Berjalan Bolak Balik (Marquee)

Dalam kesempatan ini saya akan membuat sebuah tutorial tentang Cara Membuat Gambar Berjalan disebut juga dengan istilah Marquee efek dari marque ini adalah menjadikan gambar bergerak bolak

Untuk ilustrasi saya sertakan contoh marque sepertti ini:

Cara membuat efek Marquee di blog:
Pertama login blogger.com
dan masuk ke Tampilan Tata Letak
Tambahkan Gedget Kemudian
Pilih HTML/Javascript

Tempelkan kode Berikut didalamnya:
<div class='widget-content'>
<marquee behavior='alternate'><img alt="Title Image"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO6R3LWTPvMTnc5nhE90SMNJuX647agjt78GS4m50MREZiH33Xdd8fmNTfJHJwpbHHeJKA-KJA8HEsG3N5XK-upV5p0C4sUyULmhprhuLR5UXFglyVYby1LzMFnKHvssC-LPi1Mke_8W-z/s120/join-this-site-logo.png" title="Join This Site" />
</marquee></div>
Keterangan:
Ganti Url yang di beri warna Biru dengan url Gambar punya anda
dan simpan. sekarang lihat efek marquee sudah berhasil di pasang di blog anda

Demikian cara membuat gambar berjalan bolak balik. semoga bermanfaat.
NB:
Jika masih kesulitan dalam pembuatan efek marquee ini silahkan hubungi saya atau bertanya di kolom komentar. 

Cara Membuat Daftar isi Otomatis Seperti Blog Ini

Daftar isi dalam sebuah blog biasa juga disebut SITEMAP sangatlah penting buat sebuah blog untuk mempermudah penjelajahan seluruh isi blog itu sendiri, pada artikel sebelumnya saya sudah menulis artikel tentang Cara membuat Daftar isi secara manual 
Baca disini : Cara membuat Daftar isi secara manual

untuk artikel kali ini saya akan membuat Daftar isi Otomatis menggunakan kode javascript..
tenang aja membuat daftar isi otomatis sangat lah mudah dan simple, contoh daftar isi seperti gambar di bawah ini tidaklah sesulit yang dibayangkan,

caranya gampang
pertama login blogger lalu buat halaman dengan mode html
copy paste kode berikut kedalam halaman html anda.
<style type="text/css">
#toc{border-radius:4px;-moz-border-radius:4px;
width:99%;
margin:5px auto;
border:3px solid #282828;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#444;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#c1c1c1 0%,#282828 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#282828),color-stop(1,#c1c1c1));
border:1px solid #c1c1c1;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#2D96DF;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,center 60,right 10,color-stop(0.60,#fff),color-stop);
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>
<a href="http://kangobboy.blogspot.com" target="_blank">SiteMap By Kang Obboy</a></div>
<div id="toc">
<script src="https://yourjavascript.com/9515631132/your-script-sitemap.js" type="text/javascript"></script>
<script src="https://kangobboy.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
Keterangan:
Ganti url yang diberi warna biru dengan url alamat blog anda dan ganti SiteMap By Kang Obboy dengan tulisan yang anda inginkan
Lalu publikasikan Halaman yang sudah anda buat tadi dan lihat hasilnya, gampang dan simpel kan cara membuat daftar isi secara otomatis.
demikian cara membuat daftar isi secara otomatis di blogspot semoga bermanfaat

Jika ada yang masih bingung bisa ditanyakan dengan berkomentar atau kirim email langsung
terimakasih sudah berkunjung. selamat beraktivitas.

Cara Membuat Menu Disertai dengan sosial Media Icon Di Blog


Membuat Menubar dengan tombol sosial media seperti Facebook, Twitter, Youtube, Instagram, dll, di blog adalah salah satu kriteria untuk mempercantik sebuah blog selain itu sangat penting sebagai alat untuk mempermudah pengunjung dalam menjelajahi isi blog, mengarahkan link kesebuah artikel yang penting dan tentunya ada banyak manfaat yang bisa didapat dengan adanya Menubar dengan tombol sosial media ini. disamping itu blogger sendiri merekomendasikan untuk menambahkan navigasi menu ini didalam blog. untuk membuat menu dengan disertai sosial media acon memang sedikit rumit dan perlu ketelitan dalam penempatan script atau kode html nya. Jika sudah familiar dengan kode kode html atau lebih dikenal dengan sebutan javascript maka langkah membuat menubar seperti ini tidak akan sulit.

Contoh menu bar yang akan dibuat adalah seperti gambar dibawah ini, jika anda tertarik untuk membuatnya silahkan ikuti langkah - langkah berikut ini


Cara Membuat Menu Disertai Dengan Sosial Media Icon
Pertama Login Blogger kemudian cari pengaturan Template dan Edit Html
Pada tampilan Editor cari kode
</Style>
Salin kode dibawah ini dan letakan tepat di atas kode </Style>
/* NAVIGATION MENU */
.menu{font:normal normal 12px Arial,sans-serif;padding:0 0;background:#ffffff;margin:0 auto;height:38px;border:1px solid #f0f0f0;overflow:hidden}
.nav-menu{list-style-type:none;margin:0 0 0 0;padding:0 0 0 0}
.nav-menu li{display:block;float:left;line-height:38px;margin:0 0 0 0;padding:0 0 0 0;border-right:1px solid #f0f0f0}
.nav-menu li a{background:#ffffff;color:#666666;display:block;padding:0 8px}
.nav-menu li a:hover{background:#f5f5f5}
ul.nav-social{height:38px;margin:0 0 0 0;padding:0 0;float:right}
ul.nav-social li{display:inline-block;list-style-type:none;float:right;margin:0 0;padding:0 0;border-right:none;border-left:1px solid #f0f0f0}
ul.nav-social li a{display:inline-block;line-height:38px;height:38px;padding:0 8px;margin:0 0 0 0;color:#666666}
ul.nav-social li a i{line-height:38px}
ul.nav-social li a:hover{color:#fff}
ul.nav-social li a.fcb:hover{background:#3B5A9B}
ul.nav-social li a.gpl:hover{background:#DD4B39}
ul.nav-social li a.twt:hover{background:#1BB2E9}
ul.nav-social li a.ytb:hover{background:#ED3F41}

Setelah itu copy paste kode dibawah dan letakan di atas kode <div class='header-wrapper'>
jika tidak menemukan kode tersebut cari kode yang <div id='header-wrapper'> atau <header id="header-wrapper">  kode tersebut tidak harus jadi patokan yang penting ketemu elemen Div header nya.
<div id='nav-wrap'>
<nav class='menu'>
<!-- primary navigation menu start -->
<ul class='nav-menu'>
<li><a href='http://www.kangobboy.blogspot.com/p/about-me.html'>About me</a></li>
<li><a href='http://www.kangobboy.blogspot.com/p/about-us.html'>Contact Us</a></li>
<li><a href='http://www.kangobboy.blogspot.com/p/privacy-policy.html'>Privacy Policy</a></li>
<li><a href='http://www.kangobboy.blogspot.com/p/disclaimer.html'>Disclaimer</a></li>
</ul>
<!-- primary navigation menu end -->
<!-- social media button start -->
<ul class='nav-social'>
<li><a class='fcb' href='https://www.facebook.com/playpgi/' rel='nofollow'><i class='fa fa-facebook-square fa-2x'/></a>
</li>
<li><a class='gpl' href='https://plus.google.com/u/0/117410149211688397255' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'/></a>
</li>
<li><a class='twt' href='https://twitter.com/kang_obboy' rel='nofollow'><i class='fa fa-twitter-square fa-2x'/></a>
</li>
<li><a class='ytb' href='https://www.youtube.com/channel/UC8lNpfo1lrFjHt4HRv8EVrg' rel='nofollow'><i class='fa fa-youtube fa-2x'/></a>
</li>
</ul>
<!-- social media button end -->
</nav>
<div class='clear'/>
</div>

Selanjutnya langkah untuk menampilkan icon sosial medianya salin kode berikut dan letakan persis diatas kode </Head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
Kemudian Simpan dan selalu lakukan pratinjau terlebih dahulu untuk melihat perubahan pada blog
Jika tidak ada kesalahan di setiap langkah - langkah cara diatas seharusnya menu dengan media sosial icon sudah di blog anda sudah bisa ditampilkan. jika belum berhasil lakukan pengecekan dengan teliti dan lakukan "Ctrl + Z" pada keybboard untuk mengembalikan pengaturan kesebelumnya dan jangan lupa setiap mengedit template sebaiknya lakukan back up tempalte terlebih dahulu untuk menghindari kegagalan dalam pengaturan template.

Demikian Cara Membuat Menu dengan sosial Media Widget di Atas Header Blog yang bisa diberikan semoga berhasil. Jika masih kesulitan segera hungungi saya atau bertanya di kolom komentar, terimakasih sudah berkunjung semoga bermanfaat.

Cara membuat daftar isi manual di blog

www.tookatarh.com
Fungsi daftar isi secara umum adalah untuk memudahkan pembaca untuk menemukan halaman dengan cepat sebagai bahan bacaan untuk dibacanya. Daftar isi pada blog tidak jauh beda kegunaannya yaitu untuk memudahkan pengunjung dalam pencarian konten untuk dibaca karean daftar isi yang lebih dikenal dengan sitemap ini sangat penting dan bermanfaat untuk pengunjung dalam menjelajahi isi blog, membuat daftar isi pada blog ada 2 cara yaitu dengan cara manual dan otomatis

Cara membuat daftar isi secara Manual
ilustrasi contoh daftar isi



daftar isi seperti contoh diatas bisa dibuat dengan manual
Login Blogger
Rancangan/Design
Buat Halaman/Page Baru
pilih mode HTML
dan Copy paste kode berikut:

<style>
.list {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ0H5Msns1C36YoyN6Na3tQUC6KhjUN5Bs7SGENCHKqyMSRVhjtv9KW9pMKOqeyaizo6KqgsEi4EvQdy1426HoUzs1OxkH77-yJUpI5Pp7M-1-pefyjuxdJFJgWkMgVXgokCktftotVW6d/") no-repeat left center;
line-height:1.5em;
padding:3px 0px 3px 20px;
}
</style>
<div style="background-color: #FFFFFF; border: 0px solid rgb(68, 67, 67); height: 300px; margin: 0px; overflow: auto; padding: 3px; width: 450px;">
<div class="list">
<a href="http://kangobboy.blogspot.co.id/2016/08/fuchsia-os-terbaru-dari-google.html">Fuchsia OS Terbaru Dari Google</a></div>
<div class="list">
<a href="http://kangobboy.blogspot.co.id/2016/08/6-alasan-sepele-malas-pergi-bekerja.html">6 Alasan Sepele Malas Pergi Bekerja</a></div>
<div class="list">
<a href="http://kangobboy.blogspot.co.id/2016/08/cara-menghapus-navbar-di-blogspot.html">Cara Menghapus Navbar Di Blogspot</a></div>
<div class="list">
<a href="http://kangobboy.blogspot.co.id/2016/08/cara-membuat-quete-pada-blogspot.html">Cara Membuat Quete Pada blogspot</a></div>
<div class="list">
<a href="http://kangobboy.blogspot.co.id/2016/08/cara-membuat-icon-blog-anda-sendiri.html">Cara Membuat Icon Blog anda sendiri</a></div>
<div class="list">
<a href="http://kangobboy.blogspot.co.id/2016/08/gaji-pas-pasan-punya-mobil-punya-rumah.html">Gaji pas pasan punya mobil punya rumah dan istri cantik</a></div>
<div class="list">
<a href="http://kangobboy.blogspot.co.id/2016/07/cara-instal-pokemon-go-di-laptop-dengan.html">Cara Instal Pokemon Go Di Laptop Dengan Bluestacks</a></div>
<div class="list">
<a href="http://kangobboy.blogspot.co.id/2016/07/pt-terasys-virtual.html">PT. Terasys Virtual</a></div>
<div class="list">
<a href="http://kangobboy.blogspot.co.id/2016/07/boyaa-inggris-texas-holdem-poker.html">Jual Beli Chip Boyaa Inggris (Texas Holdem Poker) 2016</a></div>
<div class="list">
<a href="http://kangobboy.blogspot.co.id/2016/07/mengatasi-problem-with-cooling-system.html">Mengatasi a problem with the cooling system has been detected</a></div>
<div class="list">
<a href="http://kangobboy.blogspot.co.id/2016/07/pokemon-go-indonesia.html">Pokemon Go Indonesia</a></div>
<div class="list">
<a href="http://kangobboy.blogspot.co.id/2016/06/cara-menebak-tulisan-yang-disamarkan.html">Cara Menebak Tulisan yang disamarkan pada Gambar</a></div>
<div class="list">
<a href="http://kangobboy.blogspot.co.id/2016/06/cara-memperbaiki-menu-sleep-tidak-aktif.html">Cara memperbaiki menu sleep tidak aktif di windows 7</a></div></div>
membuat daftar isi secara manual memang sedikit ribet tapi kita bisa menentukan dan mengurutkan konten konten dengan keinginan kita sendiri. itulah keuntungan membuat daftar isi  dengan metode seperti ini, jika ingin membuat daftar isi secara otomatis anda bisa membaca di artikel yang lain, sudah saya siapkan bahannya silahkan baca juga tutorial cara membuat daftar isi secara otomatis selain ga ribet kita tidak perlu untuk memasukan link postingan kita lagi. silahkan klik link nya untuk menuju tutorial cara membuat daftar isi secara otomatis
Demikian tutorial cara membuat daftar isi secara manual yang bisa saya sampaikan semoga berhasil dan bermanfaat.

NB:
  • Ganti semua URL dengan alamat URL postingan blog anda contoh yang di beri warna biru 
  • Untuk merubah ukuran ganti bagian ini 
height: 300px; margin: 0px; overflow: auto; padding: 3px; width: 450px
  • untuk : height: 300px dan width: 450px

Cara Membuat Menu Dropdown Sederhana Di Blog


Sebuah navigasi menu didalam blog sangatlah penting dan berfungsi sebagai petunjuk arah untuk memudahkan dalam menjelajahi isi dan konten sebuah blog, blogger sendiri sudah nenyediakan widget untuk membuat tab navigasi untuk menu namun navigasi menu default blogger blogspot tidak ada option untuk membuat menu multi dropdown itu tuh yang kalau mensorot tab menubar maka akan muncul sub menu lagi dibawahnya, sehingga tidak memakan tempat dalam sidebar atau header blog
Selain untuk mempercantik blog menu dropdown ini sangat bermanfaat jika sebuah blog sudah mempunyai banyak kategori dan sub kategori nya, sebaiknya blog tersebut lebih baik menggunakan multiple mene agar memudahkan pencarian kategori kontennya sehingga memudahkan pengunjung menemukan apa yang dicari dalam blog itu sendiri.

sebagai ilustrasi saya sertakan gambar sebuah menu dropdown yang akan kita bahas dalam tutorial kali ini.


Cara Membuat Menu Dropdown Sederhana Di Blog
Pertama Login blogger kemudian ke pengaturan Template Edit HTML dihalam html cari kode
]]></b:skin>
Selanjutnya tempelkan kode di bawah ini diatas kode yang ]]></b:skin>
nav {
display: block;
margin-top: 100px;
background: #374147;
}
.menu {
display: block;
}
.menu li {
display: inline-block;
position: relative;
z-index: 100;
}
.menu li:first-child {
margin-left: 0;
}
.menu li a {
font-weight: 600;
text-decoration: none;
padding: 20px 15px;
display: block;
color: #fff;
transition: all 0.2s ease-in-out 0s;
}
.menu li a:hover,.menu li:hover>a {
color: #fff;
background: #9ca3da;
}
.menu ul {
visibility: hidden;
opacity: 0;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
left: 0px;
background: #fff;
z-index: 99;
transform: translate(0,20px);
transition: all 0.2s ease-out;
}
.menu ul:after {
bottom: 100%;
left: 20%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 6px;
margin-left: -6px;
}
.menu ul li {
display: block;
float: none;
background: none;
margin: 0;
padding: 0;
}
.menu ul li a {
font-size: 12px;
font-weight: normal;
display: block;
color: #797979;
background: #fff;
}
.menu ul li a:hover,.menu ul li:hover>a {
background: #9ca3da;
color: #fff;
}
.menu li:hover>ul {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.menu ul ul {
left: 149px;
top: 0px;
visibility: hidden;
opacity: 0;
transform: translate(20px,20px);
transition: all 0.2s ease-out;
}
.menu ul ul:after {
left: -6px;
top: 10%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 6px;
margin-top: -6px;
}
.menu li>ul ul:hover {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.responsive-menu {
display: none;
width: 100%;
padding: 20px 15px;
background: #374147;
color: #fff;
text-transform: uppercase;
font-weight: 600;
}
.responsive-menu:hover {
background: #374147;
color: #fff;
text-decoration: none;
}
a.homer {
background: #9ca3da;
}
@media (min-width: 768px) and (max-width: 979px) {
.mainWrap {
width: 768px;
}
.menu ul {
top: 37px;
}
.menu li a {
font-size: 12px;
}
a.homer {
background: #374147;
}
}
@media (max-width: 767px) {
.mainWrap {
width: auto;
padding: 50px 20px;
}
.menu {
display: none;
}
.responsive-menu {
display: block;
margin-top: 100px;
}
nav {
margin: 0;
background: none;
}
.menu li {
display: block;
margin: 0;
}
.menu li a {
background: #fff;
color: #797979;
}
.menu li a:hover,.menu li:hover>a {
background: #9ca3da;
color: #fff;
}
.menu ul {
visibility: hidden;
opacity: 0;
top: 0;
left: 0;
width: 100%;
transform: initial;
}
.menu li:hover>ul {
visibility: visible;
opacity: 1;
position: relative;
transform: initial;
}
.menu ul ul {
left: 0;
transform: initial;
}
.menu li>ul ul:hover {
transform: initial;
}
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}
ilustrasi penempatan kodenya di pengaturan template seperti ini


Kemudian cari kode </header> dan letakan kode dibawah ini tepat diatas nya
<nav>
<a class='responsive-menu' href='#' id='resp-menu'><i class='fa fa-reorder'/> Menu</a>

<ul class='menu'>
<li><a class='homer' href='http://kangobboy.blogspot.co.id/'><i class='fa fa-home'/> HOME</a>
</li>
<li><a href='http://kangobboy.blogspot.co.id/'><i class='fa fa-user'/> ABOUT</a></li>
<li><a href='http://kangobboy.blogspot.co.id/'><i class='fa fa-camera'/> SOFTWARE</a>
<ul class='sub-menu'>
<li><a href='#'>Software 1</a></li>
<li><a href='#'>Software 2</a>
<ul>
<li><a href='#'>Sub Software 1</a></li>
<li><a href='#'>Sub Software 2</a></li>
<li><a href='#'>Sub Software 3</a></li>
<li><a href='#'>Sub Software 4</a></li>
<li><a href='#'>Sub Software 5</a></li>

</ul>
</li>
<li><a href='#'>Software 3</a>
<ul>
<li><a href='#'>Sub Sub-Menu 1</a></li>
<li><a href='#'>Sub Sub-Menu 2</a></li>
<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>
<li><a href='#'>Sub Sub-Menu 5</a></li>

</ul>
</li>
</ul>
</li>
<li><a href='http://kangobboy.blogspot.co.id/'><i class='fa fa-bullhorn'/> BLOG</a></li>
<li><a href='http://kangobboy.blogspot.co.id/'><i class='fa fa-tags'/> CATEGORIES</a>
<ul class='sub-menu'>
<li><a href='#'>Sub-Menu 1</a></li>
<li><a href='#'>Sub-Menu 2</a>
<ul>
<li><a href='#'>Sub Sub-Menu 1</a></li>
<li><a href='#'>Sub Sub-Menu 2</a></li>
<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>
<li><a href='#'>Sub Sub-Menu 5</a></li>

</ul>
</li>
<li><a href='#'>Sub-Menu 3</a>
<ul>
<li><a href='#'>Sub Sub-Menu 1</a></li>
<li><a href='#'>Sub Sub-Menu 2</a></li>
<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>
<li><a href='#'>Sub Sub-Menu 5</a></li>

</ul>
</li>
</ul>
</li>
<li><a href='http://kangobboy.blogspot.co.id/'><i class='fa fa-envelope'/> CONTACT</a></li>
<li><a href='http://kangobboy.blogspot.co.id/'><i class='fa fa-sitemap'/> SITEMAP</a></li>
<li><a href='http://kangobboy.blogspot.co.id/'><i class='fa fa-exclamation-triangle'/> DISCLAIMER</a></li>
</ul>
</nav>
Dan terakhir cari kode </body> dan letakan kode dibawah ini di atasnya
<script type='text/javascript'>
$(document).ready(function(){
var touch = $('#resp-menu');
var menu = $('.menu');

$(touch).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});

$(window).resize(function(){
var w = $(window).width();
if(w > 767 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});

});
//]]>
</script>
Kemudia Simpan dan pratinjau blog anda dahulu untuk melihat perubahan nya, jika sudah cukup silahkan di simpan dan keluar dari pengaturan html
Silahkan sesuaiakan Nama menu dan sub menunya dengan yang anda inginkan dan jangan lupa sesuaikan juga url nya yang sudah di beri tanda warna Orange dengan url blog anda
Selain membuat menu seperti ini anda juga bisa membuat menu dengan disertai widget sosial media anda bisa menuju link berikut ini Cara membuat menu disertai dengan widget sosial media

Demikian Cara Membuat Menu Dropdown Sederhana Di Blog semoga berhasil, Jika Masih ada kesulitan dalam pembuatan menu dropdown di blog anda bisa langsung menghubungi saya atau bertanya di kolom komentar yang sudah disediakan.
loading...
| Serba Serbi Bisa © 2016-2017. All Rights Reserved.
| Powered By Blogger