Abri Pecinta Game Online: Tutorial Blog
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
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 :


  1. Login ke akun Blogger Sobat, 
  2. klik Design / Rancangan  > Edit HTML. 
  3. 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)

<script type="text/javascript">
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 220;
img_thumb_height = 120;
img_thumb_width = 220;
</script>
<script type="text/javascript">
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf("
",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>
"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>


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 != &quot;item&quot;'> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script> <span class='rmlink' style='float:left'><a expr:href='data:post.url'><b>More about</b> &#8594;</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. 
Diposting oleh Unknown 0 komentar
Label:

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.
Diposting oleh Unknown 0 komentar
Label:

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
Diposting oleh Unknown 0 komentar
Label:

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.
Diposting oleh Unknown 0 komentar
Label:

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
  • 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
Diposting oleh Unknown 0 komentar
Label:

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
<style type="text/css">
#rp_plus_img{height:385px;overflow:hidden;border:0;padding:6px 10px 14px 5px;background: transparant;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:solid 1px #585858; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:85px;padding:5px;list-style:none;}
#rp_plus_img a{color:#000;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:12px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 5px #585858;width:65px;height:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="" src="http://permathicblog.googlecode.com/files/Slideshow%20Postingan.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="">
var numposts = 100;
var numchars = 80;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>

keterangan: var numposts adalah berapa posting yang mau di akan di tampilkan di slideshow,tpi menunggu giliran beberapa detik
var numchars  adalah tempat keterangan artikel yang muncul di slideshow

cukup sekian dan jangan lupa mampir lagi di blog saya ya
Diposting oleh Unknown 0 komentar
Label:

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

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

<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {color: #333333;}
.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}
</b:if>
</style>


klik simpan atau save
dan lihat hasilnya antara 1 sampai 2 hari kedepan
cukup sampai disini saya memberikan petunjuk kepada anda bila ada masukan tolong coment di kotak komentar saya sangat menghargai setiap masukan anda ke blog ini.
Diposting oleh Unknown 2 komentar
Label:

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


Diposting oleh Unknown 0 komentar
Label:

Cara memasang menu drop down

Red Opera Drop Down Menu
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 :


Add HTML/JavaScript widget


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

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>
Diposting oleh Unknown 2 komentar
Label:

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

<b:if cond='data:blog.pageType == &quot;index&quot;'>
     <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
Diposting oleh Unknown 0 komentar
Label:
 
Support : Creating Website | Abri Pecinta Game Online
Copyright © 2012-2013. Abri Pecinta Game Online - All Rights Reserved
Security Officer Template Abri Pecinta Game Online
Proudly powered by Blogger