Lank Cyber4rt

Cara Membuat Tombol Next Page Prev Dengan Angka di Blog Seperti Template Fastest Magz - Tombol next page ini sama fungsinya dengan tombol next page, previous, dan home yang terdapat pada bagian bawah postingan, namun yang satu ini kita merubah itu semua dengan angka, tujuan nya agar para pengunjung lebih mudah menjelajahi isi dari blog sobat. Tombol next page yang satu ini berbeda dengan tutorial blogger lainnya, karena mungkin tutorial ini belum pernah ada yang share dan CSS nya saya ambil dari template Fastest Magz, dan kode JavaScript nya saya ambil dari beberapa sumber. Dan saya upload ulang alamat javascript nya untuk mencegah apabila, hosting di google code dihapus, ada baiknya sobat upload ulang untuk mencegah terjadinya error.

Cara Membuat Tombol Next Page Dengan Angka di Blog:
1. Login ke blogger.com
2. Pada dashboar -> template -> klik edit HTML
3. Kemudian tambahkan kode dibawah ini diatas ]]></b:skin>

.showpageArea{float:left;color:#555;font-size:11px;margin:10px 0}
.showpageArea a{color:#555;text-shadow:0 1px 2px #fff}
.showpageNum a:hover,.showpage:hover{border:1px solid #b2b2b2;color:#555!important}
.showpage{margin:0}
.showpage:hover a{color:#555!important}
.showpagePoint{background:#f8f8f8;border:1px solid #b2b2b2;margin:0 2px 0 0;padding:5px 12px}
.showpageNum a,.showpageOf,.showpage{border:1px solid #e8e8e8;background:#f8f8f8;margin:0 2px 0 0;padding:5px 12px}

4. Kemudian cari kode </body>, dan tambahkan kode dibawah ini tepat diatasnya:

<script type='text/javascript'>
var pageCount=4;
var displayPageNum=4;
var upPageWord='Prev';
var downPageWord='Next';
</script>
<!-- Tombol Next Page by BlogKrizeer.blogspot.com -->
<script type="text/javascript" src="https://googledrive.com/host/0By9Vs49VphQqeWVMYzNqbWlNaU0"></script>

5. Simpan template

Catatan: silahkan sobat ganti angka "4", dan kata "Prev" dan "Next" yang saya kasih tanda kuning sesuai keinginan sobat. Angka 4 pertama itu akan menunjukan jumlah post yang ingin ditampilkan ketika mengklik salah-satu nomor pada tombol next page tersebut, dan angka 4 kedua akan menampilkan jumlah nomor yang ingin sobat tampilkan pada homepage blog sobat.

 Sumber : Yoga-TC

Tutorial Belajar Blog | Tips Blog | Trik Blog - Cara Mengganti Tampilan Scroll Bar Menjadi Keren di Blog  - Bagi Anda yang ingin scroll bar Anda berubah seperti Punya saya!!  Dengan menggunakan script CSS Anda bisa merubah scroll bar Anda di Blog Anda. Bisa mempebesarnya ataupun memperkecil scroll bar blog Anda!

Selamat malam sahabat blogger. 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 :

DEMO
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 :

Gambar 1.1

3. Kemudian pilih Mode 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://gilang-cyber4rt.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script> </div>

Keterangan :
Ganti kode yang berwarna merah ( gilang-cyber4rt ) : 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

Referensi : http://zicblogger.blogspot.com/2013/01/cara-membuat-daftar-isi-blog-secara.html

Nah sob , Meskipun sudah cukup banyak tutorial mengenai ini, tapi Saya hanya ingin menunjukkan bahwa ada satu cara yang lebih mudah untuk melakukan ini. Anda tidak perlu membongkar struktur template secara keseluruhan hanya untuk menambahkan elemen lain, biarkan JQuery yang mencarinya dan menyisipkan elemen-elemen yang kita butuhkan (dalam hal ini adalah tombol/pemicu panel):

Liat Demo bagian komentar

Salin kode ini dan letakkan di atasnya:

a.openpanel {
  display:block;
  clear:both;
  width:auto;
  padding:0px 0px;
  text-align:center;
  font-weight:bold;
  line-height:32px;
  background-color:#000;
  color:white;
  text-decoration:none;
  margin:0px 0px;
  -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
  box-shadow:0px 1px 1px rgba(0,0,0,0.2);
  position:relative;
}
a.openpanel em {
  width:0px;
  height:0px;
  display:block;
  position:absolute;
  top:15px;
  right:15px;
  border:6px solid transparent;
  border-top-color:white;
}
a.openpanel.active {background-color:#900;}
a.openpanel.active em {
  top:6px;
  border-color:transparent transparent white transparent;
}
div.paneline {
  height:0px;
  border-bottom:4px solid #800;
}
div.hompiPanel {
  padding:10px 20px 20px;
  -webkit-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
  -moz-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
  box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
  margin:0px 0px !important;
}

Lalu cari kode  </head>

Salin kode di bawah ini tepat di atasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector       = '#comments',
    openPanelText       = "Poskan Komentar",
    closePanelText      = "Tutup Komentar",
    slideDownPanelSpeed = 600,
    slideUpPanelSpeed   = 400;
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/blogger-slide-panel-comments.js' type='text/javascript'/>

Sudah, begitu saja.

Sumber : http://www.dte.web.id/2012/03/membuat-komentar-slide-panel-pada.html#.Ue_XWoUoTCU

Sejak berubahnya system edit HTML /perubahan tampilan blogger,banyak sekali template" yang diantaranya yaitu template saya yang ternyata Fitur Lightbox dari blogger tidak berfungsi.Dan sampai sekarang masih sangat sulit untuk memperbaikinya,oleh karena itu yang dapat dilakukan adalah menggunakan Lightbox aternatif yaang cukup sederhana dan ringan,sehingga ketika kita klik gambar pada posting,secara otomatis akan mebuka gambar dengan ukuran normal tanpa berpindah tab baru.Trik ini sebenarnya sudah lama saya temukan di google ,tetapi lupa sumbernya~xDDDDD



Gomenasai gomenasai gomenasai @_____@",yahh,karena saya rasa banyak yang membutuhkanya,mungkin akan sangat berguna bagi yang ingin menggunakan fitur lightbox ini.

Sebelum menggunakan trik ini,saya ingatkan untuk selalu membackup template anda agar bila terjadi suatu masalah,dapat dikembalikan seperti semula,tetapi tidak ada masalah juga sih,kerena sudah saya terapkan di blog Oreimo,hayaraku maou-sama dan Titan~xD


Pertama,Buka blogger=>edit HTML lalu copy-paste CSS dibawah ini tepat diatas kode ]]></b:skin>

CSS

#jquery-overlay{position:absolute;
top:0;left:0;z-index:90;
width:100%;height:500px}
#jquery-lightbox
{position:absolute;top:0;left:0;width:100%;
z-index:100;text-align:center;line-height:0}
#jquery-lightbox a,#jquery-lightbox a:hover
{border:none}
#jquery-lightbox a img{border:none}
#lightbox-container-image-box
{position:relative;background-color:#fff;border-radius: 5px 5px 0px 0px;
width:250px;height:250px;margin:0 auto}
#lightbox-container-image{padding:10px}
#lightbox-loading{position:absolute;top:40%;left:0%;
height:25%;width:100%;text-align:center;
line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;
height:100%;width:100%;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext
{width:49%;height:100%;zoom:1;display:block}
#lightbox-nav-btnPrev{left:0;float:left}
#lightbox-nav-btnNext{right:0;float:right}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;
background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;
width:100%;padding:0 10px 0;border-radius: 0px 0px 5px 5px;}
#lightbox-container-image-data
{padding:0 10px;color:#666}
#lightbox-container-image-data
#lightbox-image-details
{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:bold}
#lightbox-image-details-currentNumber
{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;
padding-bottom:0.7em}

Setelah itu letakan Jquery diatas ini tepat diatas kode </body>

Jquery

<script src='http://lightbox-blogger.googlecode.com/files/jquery.min.js' type='text/javascript'/><script src='http://lightbox-blogger.googlecode.com/files/lightbox.min.js' type='text/javascript'/>

Setelah itu Simpan dan Lihat hasilnya dengan klik gambar pada postingan anda.

Semoga bermanfaat,Arigatou Gozaimasu~

Sumber : Djogzs

Hallo Minna-san :3 , Kali ini saya akan mengshare " Cara membuat box dibawah header " , Saya share karena ada yang minta

Ini SS yang minta :3 :


oke Langsung Aja Ke TKP :

1 . Log In Blogger
2 . Pilih Blog Kamu
3 . Pergi Ke Template 
4 . Klik Edit HTML
5 . Cari Kode ]]></b:skin>
6 . Masukan Kode Di Bawah Ini Tepat Di Atas Kode ]]></b:skin>

.dasar{
width:930px;
height:299px;
float: left;
border-radius: 5px 5px 5px 5px;
background: none repeat scroll 0% 0% rgb(128, 0, 0);
color: rgb(255, 255, 255);
border: 3px solid rgb(0, 0, 0);
padding: 5px;
margin-top: 20px;
margin-right: 10px;
margin-left: 10px;
box-shadow: 0px 0px 10px rgb(0, 0, 0) inset;
}
#dasar2{width: 265px;
height: 258px;
float: left;
border: 3px solid black;
position: absolute;
margin-top: 37px;
margin-left: 29px;
padding:10px;padding-right:5px;
border-radius: 5px 5px 5px 5px;
background: #222;
}
#dasar2 img{transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;border:2px solid #000;opacity:.5;
}
#dasar2 img:hover {transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;border:2px solid #800; opacity:1.0}
#dasar3{width:550px; height:262px; background:#222; float:right;border:3px solid #000; position:absolute; margin-top:40px; margin-left: 372px;padding:5px;border-radius:5px;-moz-box-shadow:    inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow:         inset 0 0 10px #000000;}


#widgetbanneralexa{
float: left;
margin-left: 378px;
width: 120px;
height: 95px;
border: 3px solid #000000;
margin-top: -270px;
padding: 3px;}

#widgetbanneralexa img{opacity:0.5;-webkit-filter:saturate(0.0);-moz-filter:saturate(0.0);-ms-filter:saturate(0.0);-o-filter:saturate(0.0);filter:saturate(0.0);-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out;padding:0}

#widgetbanneralexa img:hover{opacity:1;-webkit-filter:saturate(1.1);-moz-filter:saturate(1.1);-ms-filter:saturate(1.1);-o-filter:saturate(1.1);filter:saturate(1.1);-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}

.Kotak2 {
background: #222;
border:4px solid #000000;
border-top:4px solid #212121;
height:100px;
width:25px;
float:left;
margin-top: -315px;
margin-left: 330px;
}

.Kotak3 {
background: #222;
border:4px solid #000000;
border-bottom:4px solid #212121;
height:100px;
width:25px;
float:left;
margin-top: -106px;
margin-left: 330px;
}

#headlines{
float: left;
margin-left: 642px;
width: 285px;
height: 180px;
border: 3px solid black;
background: #222;
margin-top: -294px;
padding: 1px;}

#LankChat   {
background: #800;
border: 4px solid #000;
border-bottom: 4px solid #212121;
width: 140px;
height: 70px;
-webkit-transition:All .9128s ease;-moz-transition:All .9128s ease;-o-transition:All .9128s ease
float: left;
margin-top: 257px;
position: absolute;
margin-left: 770px;
color:#c2c2c2;line-height:1.5em;text-align:center;
position: absolute;
}

#LankChat:hover {
margin-left: 680px;border-radius: 13px 13px 0 0;border-left:4px solid #000;border-right:4px solid #000;border-top:4px solid #000
-webkit-transition:All .9128s ease;-moz-transition:All .9128s ease;-o-transition:All .9128s ease
}

7 . Oke Lanjutkan Dengan HTML nya
8 .  Sekarang Cari Kode <div id='content-wrapper'> Atau  <div id='content'> Pokoknya yang berhubungan Dengan Content
9 . Pasang Kode Di Bawah Ini Tepat Di Atas (  <div id='content-wrapper'> ,  <div id='content'> , Sejenisnya )

<div class='dasar'/>
<b:section id='dasar2' maxwidgets='5' showaddelement='yes'>
</b:section>
<b:section id='widgetbanneralexa' maxwidgets='5' showaddelement='yes'>
</b:section>
<div class='Kotak2'>
</div>
<div class='Kotak3'>
</div>
<b:section id='headlines' maxwidgets='5' showaddelement='yes'>
</b:section>
     <div id='LankChat'>
       <a href='http://lankchat.blogspot.com/' target='_blank' title='LankChat Box'><img alt='LankChat Box ' src='http://i1061.photobucket.com/albums/t479/Gilang28k/sayonara2_zpsc0422daa.png'/></a>
     </div>

10 . Simpan

Selesai dehh :v , tinggal edit2 sendiri

Hey ketemu lagi ama saya...
kali ini saya akan mengshare trik agar melebarkan posting di dalam postingan *yo dwag :v

Okey Langsung saja :

BEFORE

AFTER

[MEDIAFIRE]

Halo Sobat Lank Cyber4rt,Admin akan memberikan tutorial yaitu "Cara membuat Kotak Banner 88x31 (Sidebar)" ,ini juga request dari pengunjung blogku :D dan ini SSnya bukti kalau dia request :D :


Baiklah Tanpa Basa basi lagi ayo siap tempur :hehe

► Login ke blogger

#sidebarLank{

box-shadow: 0 0 15px white;
background: #0E090D;
border: 4px solid #9F1111;
border-left: 4px solid #9F1111;
float: left;
margin-top: 120px;
margin-left: -100px;
width: 88px;
height: auto;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
z-index: 10px;
line-height: 10px;
box-shadow: 0 0 15px blackred;
background: #222;
background-image: -webkit-linear-gradient(top, #393939, #222);
background-image: -moz-linear-gradient(top, #393939, #222);
background-image: -o-linear-gradient(top, #393939, #222);
background-image: -ms-linear-gradient(top, #393939, #222);
background-image: linear-gradient(to bottom, #393939, #222);
positon:absolute; }
#sidebarLank img{opacity:0.5;-webkit-filter:saturate(0.0);-moz-filter:saturate(0.0);-ms-filter:saturate(0.0);-o-filter:saturate(0.0);filter:saturate(0.0);-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out;padding:0}
#sidebarLank img:hover{opacity:1;-webkit-filter:saturate(1.1);-moz-filter:saturate(1.1);-ms-filter:saturate(1.1);-o-filter:saturate(1.1);filter:saturate(1.1);-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}

►Cari <div id='sidebar-wrapper'>
Jika kode tersebut tidak ditemukan, berarti kodenya beda. Intinya cari kode header
Lalu kalian Letakan Kode dibawah ini tepat di bawah <div id='sidebar-wrapper'>

<b:section id='sidebarLank' maxwidgets='5' showaddelement='yes'>
</b:section>

Selesai - Simpan Template

NB (Harus Baca) : Text Kuning Anda ganti dengan berapa arah ke atas dan Text Hijau anda ganti berapa arah ke kiri (Harus Dengan angka) intinya itu meter atau apalah

 Ketika Di Hover :

Demo :

Demoo coba kamu hover ini

3.cari ]]></b:skin>

4.Masukan Kode Dibawah Ini Ke Atas ]]></b:skin>

4). Masukan Kode Berikut Di Atas Kode ]]></b:skin>

5). Pratinjau / Simpan

Pemberitahuan:

Ganti Kode Warna Merah Dengan Kode Link/Url Gambar Anda

Nah, yang akan saya bahas kali ini adalah Mengenali Ciri-Ciri Komentar Spam Beserta Contohnya. Ok, kita simak bareng-bareng ya :)

Screenshot Contoh Komentar Spam :

1). Menggunakan Keyword Sebagai Nama

Mungkin ini yang paling umum untuk mengenali komentar spam. Si spammer tidak menggunkan akun profile websitenya, melainkan menggunakan Name/Url. Entah malas login atau apa, mereka menggunakan cara tersebut untuk mendapatkan backlink secara cepat.

2). Berkomentar Satu Baris dan Universal

Komentar yang disampaikan pun simpel tidak panjang lebar, hanya satu baris dan universal. Ngga nyambung dengan artikel yang penting komen wkwkw =D

3). Promosi Produk

Promosi Produk adalah sebuah ciri khas seorang spammer yang sulit untuk ditinggalkan. Apakah mereka promosi viagra, situs p*rno, situs yang menyediakan software gratis atau bahkan seperti screenshot diatas hahaha :D

4). Menyisipkan Situs Sebagai Signature

Sama seperti nomor 1 diatas, dulu cara ini mungkin sangat efektif untuk menaikan trafik pengunjung ke website atau blog yang sobat kelola. Dengan meninggalkan link website atau blognya diakhir komentar.

Sebaiknya sobat tidak melakukan tindakan spam saat berkomentar, karena hal itu akan membuat turun reputasi sobat dimata orang lain, Jadilah Pembaca yang Beretika.

Sekian postingan saya kali ini tentang Mengenali Ciri-Ciri Komentar Spam, semoga dapat memberikan wawasan bagi sobat walaupun itu hanya sedikit, Wassalam.

Sumber

 

Sekarang Saya Membuat artikel yaitu Right Click Disable V4,yang seperti di blog ini lho

<script type="text/javascript">
var arShow='slow'; //delay show
var arHide='slow'; //delay hide
var bgAR='http://i1061.photobucket.com/albums/t479/Gilang28k/Narutosaid_zps393eca98.png'; //background image
var transparantAR='0.5'; //jika dibawah '1' transparant
//merah, hijau, biru bisa di campur jadi warna baru
var red_AR='0'; //merah
var green_AR='0'; //hijau
var blue_AR='0'; //biru
</script><script src='http://file.bi3-id.com/share/script/arV4.bi3' type='text/javascript'></script>

fitur:
-Tetap work walau diasble javascript (tapi gx akan muncul gambar)
-Gak ribet
-Animasi
-Gak bisa klik kanan

Keterangan:
-text warna ungu muda bisa kamu rubah dengan kecepatan saat menampilkan yg cocok untuk kamu (bisa di ganti dengan: fast)
-text warna ungu tua bisa kamu rubah dengan kecepatan saat menyembunyikan yg cocok untuk kamu (bisa di ganti dengan: fast)
-text warna orange bisa kamu ubah dengan gambar background kesukaan kamu
-text warna kuning, itu buat kepekaan warna, kalo di isi kurang dari '1' misalnya '0.5' atau '0.7' bakalan ada efek transparant

Cara mencampurkan warna:
-kunjungi http://www.colorschemer.com/online.html
-lalu pilih warna yang anda mau
-setelah itu lihat di bagian sebelah kiri, disana ada kode warna nya https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGRA1UQ2vi56alCSnp2_BOzK9edbeZlePht2RpnYQkdEaUmixb7KgThvKSLARIynY2vpGWO5vS3beryn5-btSnwpZXmGQnHMhRXoXi61NWGlmrcEMh6pIqzuuPFSsuauohKXeeE9W7tj0/s1600/rgb.PNG

Cara pasang:
 -Layout/Tata letak
 -Add gadget
 -HTML/Javascript
 -Kosongkan kolom title
 -Copy kode di atas ke kolom content
 -Save
Succes!

Sumber