Abri Pecinta Game Online: Tutorial Blog

Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Cara Memasang Auto Read More

Cara Memasang Auto Read More. Selamat malam sob hi dingin amat nih sob admin gk betah sama anginnya,.. yaudah langsung saja di simak Cara Memasang Auto Read More

Auto Read More adalah opsi yang otomatis memotong artikel Sobat saat di tampilkan pada home page blog Anda. Auto Read More ini dilengkapi dengan pengaturan jumlah karakter, Ada 2 pengaturan jumlah karakter yaitu jumlah karakter Read More tanpa gambar dan jumlah karakter Read More dengan gambar. Berikut cara membuat auto read more :

Login ke akun Blogger Sobat,
klik Design / Rancangan > Edit HTML.
Penting!!! Biasakan men-Download / membackup template blog Anda sebelum mengedit template. Beri tanda centang pada Expand widget template, kemudian letakkan kode berikut ini di atas kode </head> (tekan Ctrl+F untuk mempermudah dalam pencarian kode)

Anda juga dapat merubah kode berikut: var thumbnail_mode = "float"; summary_noimg = 250; summary_img = 250; img_thumb_height = 120; img_thumb_width = 120; Ganti angka pada summary_noimg untuk mengatur jumlah karakter yang tampil pada kutipan artikel tanpa gambar.
Ganti angka pada summary_img untuk mengatur jumlah karakter yang tampil pada kutipan artikel dengan gambar.
Ganti angka pada img_thumb_height untuk mengatur tinggi gambar yang tampil pada kutipan artikel.
Ganti angka pada img_thumb_width untuk mengatur lebar gambar yang tampil pada kutipan artikel. Selanjutnya cari kode <data:post.body> lalu ganti dengan kode ini;

<b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> <span class='rmlink' style='float:left'><a expr:href='data:post.url'><b>More about</b> →</a></span> </b:if>

Ganti kata left dengan right untuk menampilkan link readmore di bagian kanan.
Ganti kata More about dengan kata yang Anda inginkan.
Misalnya Read More,Baca Selengkapnya, Selanjutnya atau Seterusnya.
Terakhir klik Pratinjau / Preview untuk melihat hasilnya.
Jika Anda rasa sudah sesuai, klik tombol Simpan / Save Template.

Perhatian : Jika Sobat menggunakan opsi ini, Artikel pada halaman juga akan terpotong.
Semoga tutorial ini bisa berguna buat sobat yang ingin Membuat Auto Read More.

Cara memasang menu drop down di atas header

Cara memasang menu drop down di atas header. Selamat sero bray gimana kabarnya baik kan amin deh kalau baik-baik saja ohya bray saya ada artikel baru nih tentang cara memasang menu drop down di atas header yaudah langsung saja di simak.

1. masuk ke blog kalian masing-masing kalau belum masuk klik disini
2. pilih template kemudian edit html

3. masuk kan kode diwabah ini tepat sebelum/ di atas kode ]]></b:skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXYk6DiF2ViLAkBMSFmsu0OKr5A6GGeUgvDg_U-eeCHsriOqthEHm7I1dT77w1maR80IWFES3qsN_KUL06IzrQumFniS7lAzZe5JA_PbBiuKhStOKBysju3EyGqV36fL9TGWVqccQZuZ4/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFxHjvNDX1WV4mdCUur0A3x1avvAF2gdA6PQbhrh8MjQnVqEjFHnfxzN9-UruMowIlVahYtvBFZnpj2lbyjeCdz20drQaJYdz3t3olgjMu4_TZLdmg7EGY-lBGBfNK8OgjZn9eKOKaP_o/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

4. setelah itu masukan kode di bawah ini tepat di atas kode <header>

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='http://abrihandany.blogspot.com/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV9LBHvu8sdQS7vTtPd-fjQ5y-fDnAdKcEtzmisewUCI-n8kQZ0dqbBtRcg78v48zRbNcmNmk3uahsdF4OqlfO8oWdwo1euCB-vucg3Boe0CV5QYfhxLx62MfqQh1JpcKhjb4JCsP_Otw/s1600/home_white.png' style='padding:0px;'/>Home</a></li>
<li><a href='http://abrihandany.blogspot.com/2013/06/biodata-tentang-saya.html?max-results=10'>About Me</a></li>
<li><a class='trigger'>Kumpulan Cerita</a>
<ul>
<li><a href='http://abrihandany.blogspot.com/search/label/Cerita%20Bacaan?max-results=10'>Cerita Bacaan</a></li>
<li class='hr'/>
<li><a href='http://abrihandany.blogspot.com/search/label/Cerita%20Dewasa?max-results=10'>Cerita Dewasa</a></li>
<li class='hr'/>
<li><a href='http://abrihandany.blogspot.com/search/label/Cerita%20Seram?max-results=10'>Cerita Seram</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Komik Bahasa Indo</a>
<ul>
<li><a href='http://abrihandany.blogspot.com/2013/07/komik-shingeki-no-kyojin-bahasa.html'>Shingeki No Kyojin</a></li>
<li class='hr'/>
<li><a href='#/'>Bleach</a></li>
<li class='hr'/>
<li><a href='http://abrihandany.blogspot.com/2013/06/komik-khusus-dewasa.html'>Komik Khusus Dewasa</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Sejarah Anime-anime</a>
<ul>
<li><a href='http://abrihandany.blogspot.com/2013/07/komik-shingeki-no-kyojin-bahasa.html'>Shingeki No Kyojin</a></li>
<li class='hr'/>
<li><a href='http://abrihandany.blogspot.com/2013/07/sejarah-bleach.html'>Bleach</a></li>
<li class='hr'/>
<li><a href='http://abrihandany.blogspot.com/2013/06/sejarah-one-piece.html'>One Piece</a></li>
<li class='hr'/>
</ul>
</li>

5. Kemudian save/simpan

NB: Kode warna kuning adalah alamat blog anda dan alamat label blog anda jadi ganti dengan punya anda
: Kode warna hijau adalah judul menu drop down jadi ganti sesuai punya anda

dan hasilnya akan sama seperti punya saya dan bila ada kekurangan anda bisa menambahkanya dengan cara mengedit kodenya, dan seandainya anda kurang mengerti anda bisa menanyakannya ke saya dengan cara berkomentar di kotak komentar,. secepatnya saya akan merespon komentar anda.

Cara membuat bendera translate

Cara membuat bendera translate. Selamat siang sob kali ini saya akan berbagi cara membuat translate bahasa tapi melalui klik bendera,.. hahahaha ada yang belom tau lihat di blog aku pasti ada,.. lah kali ini aku mau membagikan ke anda-anda yang berminat saja,. langsung saja lihat cara dibawah ini.

1. masuk ke akun blog kalian kalau belom klik disini
2. pilih tata letak,
3. tambahkan gadget
4. pilih html/javascript
5. copy code dibawah ini kemudian pastekan ke gadget
6. save/simpan dan selesai

<style>
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
<div>
<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="English"><img align="absbottom" alt="English" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjszlG38WWir0yWtwX58Huked17Yo4Bzb1FE1ZZPxTQRjeett2C5bzP1doA1WXJgmkSuSfalXrKDabJ0zRTllRIem4SNrWXzQQH7KJFjRIGQzACozwPEm3yZocVTQHFZHWc70gkx7A4T28/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="English" width="24" /></a>

<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="French"><img align="absbottom" alt="French" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd2616oeiVuNLGsaGPdO13-TQhuPcvBRIHYzf5Y7OvmFINuvmudHsOqBjrDfmy989HUdAwuWQtUWZ8iLtagxcbSRtC8-0itN5ldla7t__A83PZo5_65WcU1Yp30BlQZqZAcjw4gBXxQPU/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="French" width="24" /></a>

<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="German"><img align="absbottom" alt="German" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO3o1DgOYmj8vnt4kdsNhDYtm6Wc17xuVnsD47air8nRzbmr30uhR-ZfYYAjWlf0bYioKX_T-M6Z17UfysAm9Od5GZOM1IjnNeYiJl_6H0SU9WCpC7BM_-IL7OG_4knuGjmP6oUia-SNzj/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="German" width="24" /></a>

<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Spain"><img align="absbottom" alt="Spain" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmFYg3cfKBfJabR08rhTWJCT8llcSoKPUo7R7hwpgzNmX1d6FNF7JoWqrRdB1qMtz1HMIhe6ebiBJOspmib9Evb-D1YmyIYnviz-h027KBSStA6nPTiOGpqTlh4rqK7mJYBpI-v8UbdbFf/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Spain" width="24" /></a>

<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Russian"><img align="absbottom" alt="Russian" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijxl9oCnqvZ4yTbJ-WWp8HCa8uNzYYH8BjeqmjU5kWF4vxoZS0ARjOF_8H2C_gNwJOGPJX-K1mesFbSCTNq8v-9pg02DfOjmZDXRQJ_2Q4zyhUXuVAQo1p_strTJ5qyfigtipebMge5uk/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Russian" width="24" /></a>

<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Japanese"><img align="absbottom" alt="Japanese" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipvYIQtiLNBE94wq3TImTymr-jnqWpaR_2OkYK39ejIIkc_hEWc7AVeYCXZH-aqhBojRsWd2JOmntteIug3oxOiBI62xWWmljve9AGJmH2mP0hRaJupVHjvuFqOvxHBiCsQ3riL4G0g8cA/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Japanese" width="24" /></a>

<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Arabic"><img align="absbottom" alt="Arabic" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW_sX3t-mfM-fOaDoaZHU3idqvPjvpdxLUg9hW8vQu3ZSVOQDlm6ZqfyUc1qT3gKgPhR_dp4U4jt02r6Cq2gk4RgAPRb6tBXd3e_N72EedDSb5YELduut9UdfojUQ27LKZZslWqf8ulqI/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Arabic" width="24" /></a>

<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Chinese Simplified"><img align="absbottom" alt="Chinese Simplified" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Yffk9-NXm0Aubf-UbgyBNoo-Z-LW7EIWWh2i1M0povvjAcmTZla1jNo_eMn7FjVb2rQINdnPoohudhHFdpQaDr6gLZGTPTA3wmGscOfJ5xDYr1oR_kkPpv9ijMWjZnioggKnryswsig/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Chinese Simplified" width="24" /></a></div>

Cukup ya sampai disini dulu artikel sobat abri,. semoga bermanfaat bagi pembaca dan si penulis.
bila ada yang kurang bisa anda coment di kotak comentar

Cara membuat spoiler keren 2013

Cara membuat spoiler keren 2013. Selamat siang gan, gan aku mau bagi-bagi ni tentang cara membuat spoiler di blog yang sebelumnya aku juga tela membahas spoiler di postingan Cara membuat spoiler di blog,
cuman disini saya akan membeberkan lagi tentang spoiler,.. spoiler sendiri adalah penyingkat tempat atau biasa di gunakan di forum-forum,. sekarang anda bisa mencobanya silahkan copy semua kode di bawah ini

<div style="margin: 0px;">
<div style="margin-bottom: 0px;text-align:center;">
<img onclick="if (this.parentNode.parentNode.getElementsByTagName
('div')[1].getElementsByTagName
('div')[0].style.display != '')
{ this.parentNode.parentNode.getElementsByTagName
('div')[1].getElementsByTagName
('div')[0].style.display = '';
this.innerText = ''; this.value = 'Close'; }
else { this.parentNode.parentNode.getElementsByTagName
('div')[1].getElementsByTagName
('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }
" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVvzjTeGUALFW5E6b1x7ET_Z0vwYqkVoVsYIW5eomAWc4rIXnYzOjCbu0mljB0CG-5865mlWtL4NrJ5prcuVdZ2awsoE-sDvU2Xh24DLcpgrefG23vqbq-s5ZznpE-vfZnuQEdVK4VI5M/s1600/btn_more.png" style="vertical-align: middle;" /></div>
<div style="padding: 6px; width: auto;">
<div style="display: none;">

letakkan link, gambar atau ulasan tentang anda disini

</div>
</div>
</div>

perhatian: kode yang berwana pink adalah tampilan dari penutu\p spoiler bila anda mempunya gambar sendiri anda bisa menggantinya

cukup sekian dan semoga membantu anda bila ada kurangnya silahkan tinggalkan coment anda.

Cara membuat widget 3 kolom di atas footer

Cara membuat widget 3 kolom di atas footer.
hay sob gimana kabar kalian baik" saja kan,. amin lah kalau gitu oh ya sob aku ada artikel baru nih tpi khusu kamu yang belom tau adalah bagai mana cara buat widget di atas footer, langsung saja bray di simak di bawah ini

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg23dXUVPfk5ols3mIl-KHSsoQmsuN_lQCRl0F8e051GCnyqutc1GFbDXPY9RQh58S0Z0fVpmN2KHlzMz0nf9H8ixrdTs0O4uWPTMkwkMgvhU5Nf3FwHGoPBuhtzVfoheKGOGxpsSf9JCcd/s1600/footer+3+kolom+di+blogger.png

masuk ke blog kalian kalau belum bisa klik disini

cari kode ]]></b:skin> biar mudah gunakan ctrl+f

bila sudah ketemu, letakkan kode di bawah ini di atas kode ]]></b:skin>

/* -----http://abrihandany.blogspot.com/ ----- */
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333434;
}
#lower-wrapper {
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
}
#lowerbar-wrapper {
border:1px solid #DEDEDE;
background:#fff;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
font-size:100%;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
color:#0084ce;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
border-bottom:3px solid #0084ce;
}
.lowerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
.lowerbar li {
margin: 0px 0px 2px 0px;
padding: 0px 0px 1px 0px;
border-bottom: 1px dotted #ccc;
}

perhatian: bila anda mau merubah apapun yang kurang anda bisa lihat pengaturan di bawah ini

background:#333434; Gantilah 6 digit kode warna pada bagian ini untuk mengubah warna background widget.
width: 960px; Ini adalah lebar widget. Jika Anda mau, Anda dapat menyesuaikan nilai ini agar lebarnya sesuai dengan lebar blog Anda.
background:#fff dan width: 32%; Ini adalah warna background dan lebar tiga kolom widget yang ditambahkan.
color:#0084ce; Ini adalah warna Title Heading
font: bold 14px Arial, Tahoma, Verdana; Edit bagian ini untuk mengganti ukuran font dan jenis font.
border-bottom: 3px solid # 0084ce; Edit bagian ini untuk mengubah ketebalan, style, dan warna border yang muncul di bagian bawah Title Heading.
border-bottom: 1px dotted # ccc; Edit bagian ini untuk mengubah ukuran, style, dan warna border yang muncul di bawah link.

Setelah itu cari kode </body> dan letakkan kode di bawah ini tepat sebelum kode </body>

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

Klik Save template kemudian masuk ke tab Layout - Gulir ke bawah dan Anda siap menambahkan gadget yang Anda inginkan di sana.
semoga membantu anda yang mengalami kebingungan, heheheh

Cara membuat slideshow di blog

Cara membuat slideshow di blog. Selamat malam sob sekarang saya mau mosting'in tentang cara membuat slideshow di blog. cukup mudah kok langsung saja lihat kodenya dan screnshotnya di bawah ini

cara memasang di blog.

buka blog kalian kalau belum masuk klik disini
pilih tata letak dan edit atau tambahkan gadget
dan pilih html atau java script
kemudian masukkan kode di bawah ini
dan save atau simpan

Cara menaruh judul posting di depan bagian 2

Cara menaruh judul posting di depan bagian 2.
Selamat malam sobat gimana kabarnya baik-baik saja kan, ohya sob kali ini saya akan mengulang kembali artikel yg membahas tentang menaruh judul posting di depan. yang sebelumnya juga perna saya bahas di Cara menaruh judul posting di depan agar SEO
saya mempunyai dua cara yang cara pertama ada di artikel ini
Cara menaruh judul posting di depan agar SEO
yang kedua baru saya mau postingin ke pada anda-anda sekalian

Kalau belum masuk ke blog anda tinggal Klik disini
kemudian pilih template trus edit html
cari kode </head> biar pencarian mudah alt+f atau f3
kalau sudah ketemu tambahkan kode di bawah ini tepat di atas kode </head>

Cara Dapat Uang Dari Blog

Cara Dapat Uang Dari Blog

Salah satu cara untuk mendapatkan penghasilan dari blog adalah memasang iklan, salah satu penyedia jasa periklanan online adalah SITTI singkatan dari (sistem iklan teknologi teks Indonesia) merupakan jaringan pemasangan iklan online terbesar di Indonesia. SITTI mempunyai ambisi yang sangat besar untuk menyaingi google adsense dalam bidang periklanannya. Jaringan SITTI mencakup lebih dari ribuan situs dan blog berbahasa Indonesia memudahkan para pemasang iklan untuk menjangkau sasaran pasar dalam jaringan internet yang dituju.

Dalam hal ini akan dibahas bagaimana cara mendaftar dan memasang iklan dari SITTI diblog atau situs anda :

Mendaftarkan ke SITTI klik di sini https://sittizen.sitti.co.id/daftar.php
Kemudian tuliskan email, paswoard, nama situs, pilih jenis situs, pilih aplikasi yang digunakan dan jumlah pengunjung kemudian tuliskan kode verifikasinya, kemudian klik kirim ke SITTI

Setelah mendaftar akan muncul Terima kasih sudah mendaftarkan diri untuk menjadi anggota jaringan penyedia konten SITTIZEN
Masuk ke akun SITTI anda tuliskan email anda, kata sandi dan kode verifikasinya kemudian klik masuk
.

Kemudian akan muncul tampilan seperti dibawah ini kemudian pilih Buatlah Slot Iklan Baru.

Kemudian tuliskan alamat situs/blog anda, kemudian setting tampilan iklan, jenis huruf, warna-warnanya, ukurannya sesuai dengan blog anda sehingga cocok dengan blog anda.
Kemudian klik SELESAI DAN TAMPILKAN KODE HTML

Copy KODE HTML IKLAN ANDA dan paste di blog anda.

Masuk ke blog anda pilih rancangan tambah gadge, pilih HTML/JavaScript

Kemudian paste KODE HTML IKLAN disini kemudian simpan.

dan cukup sekian dan trimakasih atas kunjungan anda ke blog saya. salam sukses buat anda

Sumber

Cara memasang menu drop down

Cara memasang menu drop down

Jika Anda sedang mencari Menu Drop Down pure CSS maka disini akan dapat temukan 10 koleksi menu drop down keren dan simple. Semua drop down menu ini hanya menggunakan 100% kode CSS ( tanpa image ) dan kompatibel semua browser utama, Chrome, Mozilla Firefox, IE8,, IE9 IE10, Opera, dan Safari . Pada Desain Blog kali ini Anda bisa memilih salah satu menu navigasi dropdown keren dibawah dan serta juga source kode CSS-nya. Juga dipandu cara menambahkan dan edit menu dropdown di Blogger.

Note : untuk Anda yang menggunakan Browser IE tambahkan kode berikut diatas tag <style>

<!--[if ie]><meta content='IE=8' http-equiv='X-UA-Compatible'/><![endif]-->

Cara Pasang Menu Drop Down pada Blogger

Setelah Anda menentukan pilihan menu navigasi yang paling disukai, ikuti langkah berikut :

Masuk Blogger > pilih Tata Letak

Klik Add a Gadget atau Add a Page element

Pilih HTML/JavaScript widget

Paste semua kode Menu Drop Down tersebut dalam HTML/JavaScript widget

Klik Save

Kemudian drag atau geser HTML/JavaScript widget tersebut dan letakkan tepat dibawah header / judul Blog. lihat gambar dibawah :

Anda bisa mengubah link-link item menu dropdown nantinya sesuai keperluan, dengan cara mengubah / edit bagian kode HTML dibawah ini :

<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub '><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>

Ganti tanda "#" dengan Link Halaman / URL halaman dan ganti juga menu item Products , Product 2, About, Contact, Sub Item dst. dengan nama atau judul halaman Anda.

Jika Anda ingin menambah atau mengurangi menu tab, maka dengan mudah bisa ditambah atau di-delete / hapus line html tersebut :

<li><a href="#" ><span>Nama Item</span></a></li>

Red Opera Drop Down Menu

source code :


<style>

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 49px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
  border-bottom: 2px solid #e00f16;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #e00f16;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
}
#cssmenu > ul > li:hover > a {
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #e00f16;
  border-bottom: 1px dotted #ec6f73;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #b00c11;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #b00c11;
  border-bottom: 1px dotted #d06d70;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #80090d;
}


</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub '><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Cara menaruh judul posting di depan agar SEO

Cara menaruh judul posting di depan agar SEO.selamat malam sobat, gimana kabar anda baik" jga kan hehehe di malam yg sejuk ini saya akan memposting tentang bagaimana cara agar judul postingan anda ada di depan sedangkan judul blog ada di belakang,. langsung simak saja caranya

Login ke blog anda Klik disini
Kemudianpilih template
Edit HTML
Cari kode <title><data:blog.pageTitle/></title>
Agar pencarian mudah crusor klik kan di kolom dan tekan ctrl+f / f3 kemudian amankan crusor agar template anda tdak kehapaus/ketambahan kode
Bila sudah ketemu ganti kode tersebut dengan kode di bawah ini

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

perhatian kode yg berwana merah adalah pembatas antara judul posting anda dan judul blog anda terserah anda ganti apa

cukup sekian postingan saya semoga bermanfaat bagi anda yg butuh

Cara membuat daftar isi manual di blog

Cara membuat daftar isi manual di blog

selamat malam kawan bloger gimana kbar anda skrang baik kan,.. amin ohya sob saya punya artikel baru nih
namanya daftar isi manual yg bsa di sesuaikan di blog anda masing". oh ayu langsung di praktekkan saja sob

masuk blog anda Klik disini
masuk ke tata letak
kemudian tambahkan gadget pilih html/javascript
dan masuk kan kode di bawah ini
dan save/simpan

Cara Mudah Memasang Lagu Di Blog

Cara Mudah Memasang Lagu Di Blog

Selamat malam kali ini saya akan memposting tentang dan cara memasang music atau lagu di dalam blog
dengan cara mudah Cara Mudah Memasang Lagu Di Blog Banyak sudah tutorial-tutorial tentang cara memasang lagu atau cara menambahkan lagu pada blog, Memasang Widget Musik Player untuk sebuah blog memiliki kekurangan dan kelebihan tersendiri. Tergantung dari si pengunjung dan koneksi yang dimilikinya.
Untuk anda yang tetap ingin memasang lagu diblognya, berikut saya sediakan satu tutorial mudah dan singkat, silangkan disimak.
Pertama kunjungi situs scmplayer.net, kemudian pada tab Choose Skin, silahkan pilih tampilan skin widget yang nantinya akan ditampilkan pada blog anda.

Lalu klik pada tab Edit Playlist, disini ada dua pilihan yaitu dengan memasukan url lagu yang di pasang manual(Manual Playlist). Atau dari playlist akun youtube(RSS Podcast) anda. gunakan saja pilihan pertama "Manual Playlist".

Perhatikan pada gambar yang saya lingkari merah, disitu terterah contoh untuk memasukan lagu yang anda inginkan, silahkan anda cari situs yang menyediakan lagu atau bisa anda upload sendiri ataupun mencari di youtube.com video yang nantinya sebagai url lagu.(bukan menampilkan video, hanya suara dari video)

Kemudian klik pada tab Configure Settings untuk mengatur lagu yang sudah kita pilih tadi, atur sesuai keinginan anda. Atau seperti pengaturan saya pada gambar dibawah ini

Setelah itu klik tombol Done, lalu copy script yang diberikan.

Langkah terakhir, masuk ke akun blogger anda pilih tata letak. Kemudian klik tambah gadget pilih gadget HTML/Javascript. Lalu paste kan script tadi. klik Simpan.

dan lihat hasilnya blog anda ada musicnya atau lagunya dan cukup sampe di sini saya mengantar anda dari awal sampe ahkirnya anda bsa memasangnya sebuah kemajuan yang bagus salam sukses selalu sobat bloger.

Cara Membuat Daftar Isi Blog Secara Otomatis

Cara Membuat Daftar Isi Blog Secara Otomatis - Selamat malam sahabat blogger, pada kesempatan sebelumnya saya sudah menulis artikel tetang bagaimana cara memasang "Meta Tag SEO Friendly Valid HTML5", maka pada kesempatan ini saya akan menjelaskan bagaimana cara membuat daftar isi di blog secara otomatis. Daftar isi sangat berguna untuk mempermudah para pengunjung blog dalam mencari artikel atau konten yang mereka cari / inginkan. Sedangkan manfaat untuk admin blog yaitu daftar isi blog juga dapat meningkatkan jumlah page view blog.

Untuk melihat tampilannya seperti apa, anda bisa melihat demonya terlebih dahulu :

Nah bagaimana, apakah anda berminat untuk memasang daftar isi di blog anda? Untuk memasang widget daftar isi di blog, anda dapat melakukan beberapa langkah mudah membuat daftar isi berikut ini :

Langkah-langkah memasang widget Daftar Isi di blog :

1. Login ke akun blogger

2. Klik "Laman Baru" kemudian klik "Laman Kosong", untuk lebih jelasnya, silahkan perhatikan gambar dibawah ini :

Cara Membuat Daftar Isi Blog Secara Otomatis

Gambar 1.1

3. Kemudian pilih Mode HTML

http://zicblogger.blogspot.com/p/daftar-isi.html

4. Lalu copy kode script dibawah ini :

<div style="border: 1px solid #eee; height: 700px; overflow: auto; padding: 10px; width: 530px;">
<script src="http://widgetsitemap.googlecode.com/files/daftarisi.js"></script><script src="http://abrihandany.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script> </div>

Keterangan :

Ganti kode yang berwarna merah ( zicblogger ) : dengan alamat blog anda!

6. Kemudian anda letakan pada halaman kosong tadi,

Keterangan gambar 1.2 :

1. Pilih mode HTML

2. Letakan kode pada halaman kosong

3. Berikan judul (terserah anda)

4. Klik "Publikasikan"

7. Selesai

Bagaimana, mudah bukan? Mungkin hanya itu yang dapat saya sampaikan, sekarang tingga anda yang mencoba mempraktekannya. Demikian artikel tentang bagaimana cara memasang daftar isi di blog secara otomatis. Walaupun artikel ini sederhana, tapi mudah-mudahan dapat bermanfaat. Terimakasih

kunjungi juga Cara membuat daftar isi manual di blog

Meta Tag SEO Friendly Valid HTM 5

Meta Tag SEO Friendly Valid HTM 5

Selamat pagi sabahat blogger, kali ini saya akan menulis postingan tentang optimasi SEO on Page, yaitu dengan mengoptimalkan settingan meta tag yang ada di blog kita. Satu lagi yang unik dalam postingan ini yaitu saya akan berbagi info seputar meta tag SEO Friendly dan Valid Html 5, dan satu lagi meta tag ini adalah meta tag yang saya gunakan di blog saya ini.

Apa itu Meta Tag?

Meta tag merupakan elemen atau kode tag dalam bahasa pemrograman html dan xhtml yang dipakai untuk mengaplikasikan metadata dalam suatu halaman web. Meta tag harus diletakan dibagian "Head". Meta tag berfungsi untuk menjelaskan attribut dari blog/website kita misalnya seperti, judul dan deskripsi website serta keyword yang kita pakai kepada mesin pencari, sehingga mesin pencari dapat mengenali halaman blog/website kita.

Cara Memasang Meta Tag SEO Friendly :

1. Login ke akun blogger

2. Klik "template"

3. Klik "Edit Html"

4. Cari kode berikut : <b:include data='blog' name='all-head-content'/>

5. kemudian hapus kode di antara
<b:include data='blog' name='all-head-content'/>

dan

<b:skin><![CDATA[

6. Kemudian ganti dengan meta tag berikut ini :

<b:if cond='data:blog.pageType == "index"'> <title><data:blog.pageTitle/></title>
<b:else/><title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.homepageUrl == data:blog.url'><meta content='Isi dengan Deskripsi Blog Anda' name='description'/>
<meta content='Isi dengan keyword blog anda' name='keywords'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>
<meta content='Isi dengan kode verfikasi Google anda' name='google-site-verification'/>
<meta content='Isi dengan kode verfikasi Alexa Anda' name='alexaVerifyID'/>
<meta content='Isi dengan kode verfikasi Bing Anda' name='msvalidate.01'/>
<meta content='index, follow' name='robots'/>
<meta content='2 days' name='revisit-after'/>
<meta content='general' name='rating'/>
<meta content='never' name='expires'/>
<meta content='id' http-equiv='Content-Language'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<meta content='Isi dengan nama anda' name='author'/>

Keterangan :

Ganti semua kode yang berwarna merah mudah sesuai data blog anda

7. Kemudian simpan Template

Bagaimana, mudah bukan? pemasangan meta tag dalam suatu blog merupakan salah satu dari optimasi SEO on page yang wajib untuk dilakukan, karena dapat memperngaruhi jumlah visitor suatu blog. Demikian postingan mengenai Meta Tag SEO Friendly Valid HTM 5 ( Update! ). Semoga bermanfaat bagi yang membutuhkan. Terimakasih

Cara membuat spoiler di blog

Cara membuat spoiler di blog

Selamat siang sobat bloger,. lagi ngapain gan kalian siang" gini nddak tidur hahahaha pasti lagi Browsing..?
ohya gan saya punya artikel baru,. tapi penyebutan itu kalau khusus agan ya artikel lama,. maklum gan newbie

Sebagian orang pastinya sudah tahu apa itu spoiler apalagi kalau sering bermain di forum. Spoiler sudah pasti sering digunakan. Lalu bagaimana kalau mau menerapkan atau membuat spoiler di blog? Sebelumnya kalau ada yang belum tahu apa itu spoiler. saya jelasin singkat saja. Spoiler adalah tombol yang diguanakan untuk menyingkat tempat atau menyembunyikan konten (teks, foto atau video) dengan buka tutup. Contohnya bisa dilihat di bawah halaman ini.

Spoiler bisa juga dibuat di blog, lebih khusus dipostingan. Biasanya digunakan untuk membuat penasaran si pembaca dengan menyembunyikan terlebih dahulu. Untuk melihatnya dengan mengklik tombol spoiler itu. Selain itu juga untuk menghemat tempat, ya karena buka tutupitu (spoiler). Lalu bagaimana cara membuat spoiler di blog? Langsung simak yang berikut ini.

Cara Membuat Spoiler di Blog
1. Login ke Blogger
2. Pilih New Post atau Entri Baru seperti membuat postingan biasa
3. Pilihlah pada mode Edit HTML saat membuat postingan
4. Gunakan kode script berikut ini untuk membuat spoiler:

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Letakkan teks atau kode script (gambar atau video) di sini

5. Kita dapat mengganti Judul Spoiler sesuai kehendak kita, begitu juga Buka dan Tutup.
6. Klik Publish atau Terbitkan Entri jika sudah selesai.

Cara Membuat Social Media di Blog

Cara Membuat Social Media di Blog

Selamat malam sobat,. gimana kabarnya baik kan alhamdulilah sekarang saya akan memposting cara membuat Social Media di dalam blog anda dimana di Social Media ini terdapat fitur" kerenya
antara lain Facebook, Twitter, Google+, Pinterest, dan yg terahkir RSS,. langsung saja saya jelaskan kelebihanya Social Media ini dari CSS dan saya akan membagikanya ke pda anda yg belum punya atau masih newbie,.

Fitur dari Widget ini :

Meliputi empat tombol jejaring sosial yang sering digunakan dan di tambahkan di dalam ikon RSS
Efek memperluas ke samping
Penggunaan CSS seprite
Sangat rapih dan indah di pandang
kode asli dari CSS

Sekarang saya akan jelaskan cara memasang kode di bawah ini

Buka blog kalian biar cepat Klik Disini
Masuk ke tata letak
Tambahkan Gadget
Pilih HTML/Javascript
Lalu masukkan kode di bawah ini
Simpan

<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://abrihandany.blogspot.com/2013/04/kali-ini-saya-akan-memberi-tutor-kepada.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>

Perhatian: kode yg berwarna merah/ # itu adalah alamat Social anda,. selamat menikmati keindahan blog anda salam sukse

Alamat-alamat Template Gratis dan keren

Alamat-alamat Template Gratis dan keren

selamat malam, sekarang hari yg paling indah bagi anda yg ingin mengganti template. kali ini saya akan membagikan alamat" url template gratis, dimana setiap orang menginginkan tampilan blog mereka bagus
maupun keren, kalau nddak percaya silahkan dilihat di screnshot di bawah ini

Cukup sekian yg saya ketahui,.. semoga template" gratis itu bsa memajukan blog kta bersama.
selamat memilih template blog