Membuat Tombol Top Up di blogspot


Biasanya jika kita sedang mengunjungi sebuah blog eh ternyata blog tersebut memiliki artikel yang sangaaaaattt panjang sehingga saat kita akan kembali ke atas rasanya malas banget harus narik2 scroll mouse segala gitu. Bisas kebayang kan kalau blog kita tidak memiliki fitur ini, wah pengunjung bisa2 langsung kaburrrrr. nah berikut adalah

cara bagaimana membuat tombol "top Up" di dalam blog kita.


1. Masuk ke Blogger.com
2. Pilih Rancangan --> Edit HTML
3. Cari kode ini </head> gunakan ctrl+f untuk mempermudah pencarian. Lalu copas kode css dibawah ini dan letakan sebelum kode </head> tadi.
<script src='http://hzndi.googlecode.com/files/topup-hzndi.js' type='text/javascript'/>
<script src='http://hzndi.googlecode.com/files/hzndi-down.js' type='text/javascript'>
</script>

4. SAVE TEMPLATE !!!! 

NOTE : TOMBOL INI BERUKURAN KECIL, DAN HANYA MUNCUL JIKA SEDANG KEBAWAH SAJA.

Read more: http://hzndi.blogspot.com/2012/03/membuat-tombol-top-up-di-blogspot.html#ixzz27wloDxb8

Cara Menyisipkan Source CODE pada Postingan

Tidak seperti blockquote yang dipasang pada template,  Memformat Source Code dengan Tag PRE ini merupakan sebuah TOOL dimana script atau code yang akan ditampilkan dalam postingan anda di masukkan ke textarea yang disediakan lalu diformat, hasilnya tinggal anda copy dan paste ke postingan anda.

Berikut contoh hasil pemformatan dengan pengaturan pakai penomoran baris dan tinggi 250 pixel.

1:  <style type="text/css">  
2:  div.sakahayang_wrapper{  
3:    width: 500px;  
4:  }  
5:  div.sakahayang_left_box{  
6:    float: left;  
7:    padding: 5px;  
8:    width: 240px;  
9:    border: none;  
10:    text-align: justify;  
11:  }  
12:  div.sakahayang_right_box{  
13:    float: right;  
14:    padding: 5px;  
15:    width: 240px;  
16:    border: none;  
17:    text-align: justify;  
18:  }  
19:  </style>   


Agar lebih manis dan cantik, kita gabungkan dengan blockquote yang telah kita bahas di Bikin Blockquote Menjadi Lebih Cantik caranya mudah yaitu hasil pemformatan diapit oleh <blockquote> ,,, hasil pemformatan ,,, </blockquote> penampakannya menjadi lebih mantabs.

1:  <style type="text/css">  
2:  div.sakahayang_wrapper{  
3:    width: 500px;  
4:  }  
5:  div.sakahayang_left_box{  
6:    float: left;  
7:    padding: 5px;  
8:    width: 240px;  
9:    border: none;  
10:    text-align: justify;  
11:  }  
12:  div.sakahayang_right_box{  
13:    float: right;  
14:    padding: 5px;  
15:    width: 240px;  
16:    border: none;  
17:    text-align: justify;  
18:  }  
19:  </style>   


Cara penggunaannya sebagai berikut :
  1. Paste script atau code yang akan anda format pade textarea "Paste Here Your Source Code". Contoh :

  2. Lakukan pengaturan pada kotak "Source Code Formatting Options". Silahkan anda coba-coba sendiri. Bila sudah maka lanjutkan click button "Format Source Code".

  3. Hasil pemformatan akan tampak pada kotak "Preview Of Formatted Code"

  4. Bila dirasa sudah cocok dengan selera anda perhatikan textarea "Copy Formatted Source Code", click button  "Select Formatted Source Code" lanjutkan click kanan pada code yang telah terpilih lalu click copy.

  5. Terakhir paste dalam postingan anda pada mode HTML.
  6. Selesai
  7. Bila ingin memformat script / code lagi, click button "Clear" pada kotak "Paste Here Your Source Code"

Tool untuk Memformat Source Code dengan Tag PRE
Paste Here Your Source Code
Source Code Formatting Options
1) Convert Tab into Space :
2) Need Line Code Numbering :
3) Remove blank lines :
4) Embeded styles / Stylesheet :
5) Code Block Width :
6) Code Block Height :
7) Alternative Background :
Copy Formatted Source Code
Preview Of Formatted Code

Semoga bermanfaat,,,,

Read more: http://www.sakahayang.com/2012/04/memformat-source-code-dengan-tag-pre.html#ixzz26QYMhb4F

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Pasang Spoiler Keren di Blogspot


Spoiler adalah satu trick untuk menampilkan dan menyembunyikan suatu konten, dimana konten bisa berupa text, image atau multimedia. Spoiler biasa orang pakai di blog dan forum-forum misal kaskus.

Alasan blogger / kaskuser  menggunakan spoiler di dalam konten blognya / tulisannya bisa bermacam-macam, mungkin saja agar konten terlihat tidak terlalu panjang, atau bikin kejutan begitu dibuka spoilernya akan terpampang gambar yang bikin jantung berdegup kencang ,,, BOOM !!!

Pasang Spoiler Keren di Blogspot




Spoiler - Konten Text / Code

<div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"> <input type="image" src="http://3.bp.blogspot.com/-HIKi-bKh81g/T2naXLefZkI/AAAAAAAACZs/2-q4l0NQjHo/s1600/open.gif" alt="Submit button" 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.src = 'http://3.bp.blogspot.com/-NyaUT0egAFE/T2naXe42x_I/AAAAAAAACZ0/PxT7o0rYPOM/s1600/close.gif'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.src = 'http://3.bp.blogspot.com/-HIKi-bKh81g/T2naXLefZkI/AAAAAAAACZs/2-q4l0NQjHo/s1600/open.gif'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 125px;"type="image" /></div> <div class="alt2" style="border: 1px dashed; margin: 0px; padding: 6px;"> <div style="display: none;"> Letakkan konten Anda di sini. </div> </div> </div>

 lihat yang warna merah dashed, ini adalah jenis border, anda bisa pilih dashed, dotted, double, inset, atau solid. Silahkan anda coba-coba sendiri sesuai selera masing-masing.

Kemudian yang merah kedua  Letakkan konten Anda di sini  bisa anda letakkan konten apa saja text/code, image, atau multimedia.  INGAT !!!  bila yg akan disisipkan berupa code atau script maka harus di-parse atau encode terlebih dahulu menggunakan tool  Script Parse HTML

Read more: http://www.sakahayang.com



ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Mebuat Postingan Full Page

Ikuti step-stepnya sbb.

Pertama-tama identifikasi dulu berapa pixel lebar blog anda, misal blog anda punya area postingan dan sidebar saja maka lebar full page = lebar postingan + lebar side bar.
 Kedua identifikasi ID area postingan pada template.  ID postingan punya Sakahayang adalah #main-wrapper
Kedua identifikasi bagian mana yang akan disembunyikan.  Misal seperti pada postingan   Main Catur Flash di Blog  yang saya sembunyikan adalah
Middle bar yang berisi  banyak widget
Side bar kanan  yang berisi banner sponsor
widget javascript di atas postingan yang berisi Custom Search Engine dan banner sponsor
Nah ketiga bagian di atas kita identifikasi ID-nya dengan mencari di template.blog
Hasil identifikasi ID di template saya dapatkan
ID middle bar   adalah #middlebar
ID side bar  adalah  #sidebar
ID widget diatas postingan #HTML9
Kalo sudah mengidentifikasi semuanya  maka masuk ke dalam  editor postingan pada mode HTML, sisipkan di paling bawah artikel  code berikut

Disini postingan ,,,Disini postingan ,,,Disini postingan ,,,,,,,,,Ini akhir postingan dan tempelkan code-nya di area paling bawah.
<style>#main-wrapper{width:780px;padding-top:10px;padding-left:15px;padding-right:5px;float:left;word-wrap:break-word;/* fix for long text breaking sidebar float in IE */overflow:hidden;/* fix for long non-text content breaking IE sidebar float */}
#middlebar{display:none!important;}#sidebar{display:none!important;}#HTML9{display:none!important;}</style>

Kode di atas adalah contoh untuk postingan Main Catur Flash di Blog .  Yang perlu anda perhatikan  adalah  tulisan yang tebal dan yang warna merah sesuaikan dengan kondisi blog anda.

Disini terlihat untuk menyembunyikan banyak widget, kita tidak perlu menyembunyikan satu per satu, tapi yang perlu kita sembunyikan adalah container-nya.  Container  tersembunyi, maka seluruh widget yang ada di dalamnya pasti hilang dari pandangan.

oyot: http://www.sakahayang.com/2012/05/bikin-postingan-full-page.html#ixzz26QKOUT3G

Cara Menyisipkan CODE Iklan pada Postingan

Ada beberapa sahabat dalam komentarnya pada Script Parse HTML mengarah kepada Cara Menyisipkan Iklan pada Postingan. Kemungkinan diantara sobat-sobat ada yang belum mengetahui caranya.

Sebenarnya ini sangat mudah sekali yaitu menggunakan tag HTML yang super sakti untuk dibuat menampilkan apa saja dan dimana saja sesuai keinginan designer. Tag HTML yang super sakti tersebut adalah
<div> ,,,,, </div>

Coba sobat perhatikan pada template blog anda,  hampir semua cell blog  dibangun oleh div  yang didukung dengan CSS style sheet  sehingga terbentuklah layout  blog yang cantik.

Anda ketik dulu artikel di editor blog sampai dengan selesai.. Terserah anda pengetikannya mau mode Compose atau mode HTML
Identifikasi kira-kira iklan anda mau diletakkan di sebelah mana, mau dikiri, kanan atau tengah-tengah  dan mau di alinea mana. Seperti contoh pada artikel ini Cara Menyisipkan Iklan pada Postingan saya sisipkan di sebelah kanan, silahkan klik sekali saja bila anda suka trick ini.dan bermanfaat bagi anda.  Itung-itung donasi buat biaya domain ,,, hehehehe ,,,
Bila sudah mendapat tempat yang kira-kira cocok, ganti mode editor menjadi mode HTML.
Sisipkan code berikut pada alinea yang anda kehendaki tadi. .

<div class="separator"style="clear:left;float:right;margin-bottom:1em;margin-left:1em">
SISIPKAN SCRIPT IKLAN ANDA DI SINI
</div>
Ganti float:right dengan float:left bila ingin iklan menempel di sebelah kiri dan float:center bila ingin ditengah-tengah,  margin  selalu berlawanan dengan float, bila float left maka margin pilih right, sebaliknya bila float left maka margin-right yg disetting. Namun bila float:center margin kiri-kanan tidak disetting juga tidakpapa.
Usahakan iklan ukuran mini, karena tidak semua pembaca anda menyukai iklan dan agar iklan  tidak mengganggu konten.
Lakukan Pratinjau sebelum Publish, bila dirasa sudah OK publish dech ,,,,


Read more: http://www.sakahayang.com/2012/03/cara-menyisipkan-iklan-pada-postingan.html#ixzz26QH6rHrb

Trik Naikkan Pagerank Dapat Ribuan Backlink

Memang saya sempat ragu untuk melakukan cara ini, tapi berdasarkan survey, blog yang melakukan teknik ini umumnya berpagerank baik dengan Link In Alexa yang sangat banyak..

Sekedar tambahan, pagerank kita bisa naik itu tu urusan om google dan robotnya.. tapi ibarat pelajaran sekolah, raport sekolah adalah Pagerank dan backlink dan segala trik seo lainnya ( Termasuk Keaslian Artikel ) adalah  nilai - nilai pelajaran dalam raport tersebut.

Karna itu, jumlah backlink yang baik akan lebih memungkinkan blog kita untuk naik kelas atau naik pageranknya.

Bagi sobat yang tertarik untuk mengikuti saya menggunakan cara ini, caranya sangatlah gampang, sobat hanya tinggal copy link yang berada di bawah ini dengan syarat anda harus menghapus link pada peringkat 1 dari daftar, lalu pindahkan yang tadinya nomor 2 menjadi nomor 1, nomor 3 menjadi nomor 2, nomor 4 menjadi nomor 3, dst. Kemudian masukan link blog anda sendiri pada urutan paling bawah ( nomor 10). Dan silahkan ajak teman anda untuk mengikuti cara ini serta sebarkan cara ini ke banyak teman-teman anda.

1.    ilmu-kompi
2.    alfacroon
3.    Trik-Gue
4.    Pabrik Info
5.    Hisyam Hananto  ‘◆  WeBlog
6.    Motivasi Silvia
7.    Belajar All
8.    Idebagus
10.  Ataquincy Jepara

Keterangan:
Jika anda mampu mengajak lima orang saja untuk mengcopy artikel ini maka jumlah backlink yang akan didapat adalah:

•    Posisi 10, jumlah backlink = 1
•    Posisi 9, jumlah backlink = 5
•    Posisi 8, jumlah backlink = 25
•    Posisi 7, jumlah backlink = 125
•    Posisi 6, jumlah backlink = 625
•    Posisi 5, jumlah backlink = 3,125
•    Posisi 4, jumlah backlink =15,625
•    Posisi 3, jumlah backlink = 78,125
•    Posisi 2, jumlah backlink = 390,625
•    Posisi 1, jumlah backlink = 1,953,125

Dan nama dari alamat blog dapat dimasukan kata kunci yang anda inginkan yang juga dapat menarik perhatian untuk segera diklik. Dari sisi SEO sobat sudah mendapatkan 1,953,125 backlink dan efek sampingnya jika pengunjung downline mengklik link anda maka anda juga mendapat traffic tambahan.
Saya sarankan sobat mencoba cara ini dan silakan copy sebarkan artikel ini ke teman-teman.Hilangkan link nomor 1 dan masukan alamat blog sobat pada nomor 10. 

Selamat Mencoba!!

Cara Membagi Sidebar Menjadi 2 kolom

Langsong bae lah,,ki ge catetan tok ben aku gak muter2 nyari tutor.. LOL

Ok mari kita mulai..

Cara Membagi Sidebar Menjadi 2 kolom



1. Login ke Blogger. Klik Design -> Edit HTML
2. Backup template anda dengan cara klik "Download Full Template".
3. Beri tanda centang pada "Expand Widget Template"
4. Cari kode
#sidebar-wrapper {
background-color: #f6f6f6;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Agar mudah untuk mencarinya ketik sidebar-wrapper atau sidebar-wrap dalam kotak Find.

Catatan:
Setiap template mempunyai susunan kode yang berbeda-beda. Jadi yang perlu anda perhatikan adalah nilai widthnya.

Sebagai contoh nilai width diatas adalah 254px. Karena kita ingin membagi kolom sidebarnya menjadi 2 bagian maka kita bagi nilai width dengan 2. Sehingga masing kolom mempunyai lebar sebesar 127px. Agar tidak berdempetan maka masing-masing kolom akan kita beri margin sebesar 10px agar terdapat ruang jarak. Sehingga sekarang lebar masing2 sidebar menjadi 117px.

Setelah kita menentukan lebar sidebar kiri dan kanan. Langkah selanjutnya adalah membuatkannya kedalam kode css.

5. Copy kode css diatas lalu letakkan dibawahnya dan ganti sidebar-wrapper pada kode css ke2 menjadi menjadi sidebar-wrapper2 jadi hasilnya seperti ini

#sidebar-wrapper {
background-color: #f6f6f6;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper2 {
background-color: #f6f6f6;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
6. Ganti nilai width masing-masing kolom menjadi 117px. Lalu tambahkan margin:0px 20px 0px 0px; pada bagian sidebar-wrapper2. Sehingga hasilnya menjadi seperti ini

#sidebar-wrapper {
background-color: #f6f6f6;
width:117px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper2 {
background-color: #f6f6f6;
width:117px;
float:$endSide;
padding:0;
margin:0px 20px 0px 0px;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
7. Setelah itu, cari kode

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='kategori' type='Label'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='Feed1' locked='false' title='Herman Blog' type='Feed'/>
</b:section>
</div>
8. Yang harus anda perhatikan adalah kode berwarna biru sedangkan kode berwarna merah setiap template berbeda-beda.

9. Copy kode yang berwarna biru diatas lalu letakkan dibawah </div>. Ganti sidebar-wrapper pada kode ke-2 menjadi sidebar-wrapper2 dan id='sidebar' menjadi id='sidebar2'. Jadi hasilnya menjadi seperti ini.

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='kategori' type='Label'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='Feed1' locked='false' title='Herman Blog' type='Feed'/>
</b:section>
</div>

<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
10. Jika sudah klik Save Template.
11. Selesai. Klik Page Element untuk melihat hasilnya.

oyot=http://www.hermanblog.coml

Related Posts with Thumbnails for Blogger

Related Posts with Thumbnails for Blogger

related posts with thumbnails for blogger
Displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails.

This is another first release from me.This one also uses the media thumbnails generated by blogger for each post.
For displaying the thumbnails,this widget will use the images uploaded for the post using the blogger image uploader(from the post editor) [Update - Now supports external images also.]

Related Posts Widget with Thumbnails for Blogger

Here are the detailed steps to install the related posts widget for blogger with thumbnails
1.First of all Login to your blogger dashboard and navigate to Layout > Edit HTML and check the "Expand Widget Templates" check box
2.Now look for
</head>
and replace it with
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>
3.Now Find
<div class='post-footer-line post-footer-line-1'>
If you cant find it then try finding this one
<p class='post-footer-line post-footer-line-1'>
Now immediately after any of these lines(whichever you could find) place this code snippet
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if> 
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
4.You can adjust the maximum number of related posts being displayed by editing this line in the code.
var maxresults=5;
you will also have to edit the posts per label(it should ideally be one more that maxresults)
max-results=6
5.To edit the title of the widget you can change this line of code
var relatedpoststitle="Related Posts";
6.To change the default thumbnail, you can edit this line of code
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
7.To Change the Colour of the Splitter Line , edit
var splittercolor="#d4eaf2";
To change the other colours and all you will have to modify the CSS
If you fall into troubles implementing this,don't panic.. :) .just leave me a comment here and i will help you out. If you like to give me any suggestions on how to improve this widget,then it would be really great.

How to display the related posts on every page and not only on the post pages?

Just remove the two lines starting with <!-- remove --> from both step 3 and step 2.
that is lines
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
and
<!-- remove --></b:if>
Update 29/03/2012 : If the script is not working for you then please change http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js to http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js

oyot=http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html
 
© Ata Quincy Jepara All Rights Reserved