日本で働こう!収入を生み出す。
http://bit.ly/MagangJepang2019

17 Cara Membuat Halaman 404 Error Not Found Pada Blogger

Selasa, Desember 30, 2014
Cara Membuat Halaman 404 Error Not Found Pada Blogger | Cirebon-Cyber4rt - Mungkin dari kalian pernah menjumpai sebuah blog dengan Halaman 404 Error Not Found yaitu halaman blog yang tidak ada konten/isinya. Hal itu dapat membuat pengujung tidak nyaman karena sesuatu yang dicari tidak ada.

Halaman 404 error Not Found
Halaman 404 error Not Found


Nah, kali ini saya akan share bagaimana agar halaman kosong tadi menjadi lebih menarik dengan menambahkan CSS, sehingga tampilan halaman not found tadi menjadi lebih fresh dan ditambah dengan link menuju Halaman Utama atau Hompage blog sehingga pengunjung tidak akan langsung pergi. Berikut caranya :

Cara Membuat Halaman 404 Error Not Found Pada Blogger :
1). Login ke Blogger
2). Pilih menu Template kemudian pilih Edit HTML
3). Masukkan kode Meta Tag berikut tepat dibawah kode <head>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
<b:else/>
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
        <title>404: Page Not Found - <data:blog.title/></title>
    <b:else/>
        <title><data:blog.pageName/> - <data:blog.title/></title>
    </b:if>
</b:if> 

4). Lalu letakkan kode CSS berikut tepat diatas kode ]]></b:skin> atau </style>

/* PAGE NOT FOUND */
#error-page {
  background-color:#000;
  position:fixed !important;
  position:absolute;
  text-align:center;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:99999;
}
#error-inner {
  margin:6% auto;
}
#error-inner .box-404 {
  width:200px;
  height:200px;
  background:#080;
  color:#fff;
  font-size:80px;
  line-height:200px;
  border-radius:10px;
  margin:0 auto 50px;
  position:relative;
}
#error-inner .box-404::after {
  content:&quot;
  &quot;
  ;
  width:0;
  height:0;
  bottom:-8px;
  border-color:#21afa4 transparent transparent;
  border-style:solid;
  border-width:9px 9px 0;
  position:absolute;
  left:47%;
}
#error-inner h1 {
  text-transform:uppercase;
}
#error-inner p {
  line-height:1.8em;
  font-size:15px;
}

5). Terakhir letakkan kode berikut tepat diatas kode </body>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
        <div id='error-page'>
          <div id='error-inner'>
            <div class='box-404'>404</div>
           <h1>Halaman tidak ditemukan</h1>
            <p>Kemungkinan halaman telah dihapus, atau Anda salah menulis URL</p>
            <p>Kembali ke <a expr:href='data:blog.homepageUrl'><data:blog.title/></a></p>
          </div>
        </div>
    </b:if> 

6). Kemudian Simpan Template.

Silakan kalian kreasikan sendiri warnanya background, ukuran font dan lainnya. Sekian postingan saya kali ini tentang Cara Membuat Halaman 404 Error Not Found Pada Blogger, semoga dapat bermanfaat.



107 Cara Memasang Tombol Like di Setiap Postingan

Jumat, November 16, 2012
Cara Memasang Tombol Like di Setiap Postingan | Cirebon-Cyber4rt - Tombol Like langsung terhubung dengan jejaring sosial Facebook, sehingga apabila da seseorang yang mengklik tombol like maka secara otomatis postingan diblog kita ajan tershare ke beranda orang tersebut.

http://cirebon-cyber4rt.blogspot.com/2012/11/cara-memasang-tombol-like-di-setiap.html
Like Button

Dengan kata lain Tombol Like adalah cara alternatif untuk mempromosikan blog kita ke khalayak ramai. Jika sobat tertarik untuk memasang tombol like, caranya cukup mudah kok. Sobat hanya perlu mengikuti tahap-tahapnya yang akan saya share kali ini.

Screenshoot :
http://cirebon-cyber4rt.blogspot.com/2012/11/cara-memasang-tombol-like-di-setiap.html

Cara Memasang Tombol Like di Setiap Postingan :
  1. Login Blogger
  2. Masuk ke Menu Template - Edit HTML - Lanjutkan
  3. Beri Tanda Centang Expand Template Widget
  4. Cari Kode :
<data:post.body/>

     5. Letakan kode berikut tepat dibawah kode <data:post.body/>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:310px; height:31px;'/>

     6. Simpan Template.

Catatan :
Jika dalam pencarian kode <data:post.body/> sobat menemukan lebih dari 1 kode, maka pilih saja kode yang kedua.

Sekian saja postingan saya tentang Cara Memasang Tombol Like di Setiap Postingan, semoga dapat bermanfaat bagi sobat :)



74 Cara Membuat Artikel Terkait dengan Gambar

Rabu, November 14, 2012
Cara Membuat Artikel Terkait dengan Gambar | Cirebon-Cyber4rt - Artikel Terkait atau related post sangatlah penting dalam sebuah blog yang sangat mengutamakan SEO. Karena dengan adanya artikel terkait, pengunjung tidak akan bosan membaca artikel blog kita. Sehingga Bounce Rate akan semakin kecil.

Dan kali ini saya akan share bagaimana cara membuat artikel terkait dengan gambar, Berikut langsung saja kita simak bersama-sama :)

Screenshoot :
http://cirebon-cyber4rt.blogspot.com/2012/11/cara-membuat-artikel-terkait-dengan.html

Cara Membuat Artikel Terkait dengan Gambar :
  1. Login Blogger
  2. Masuk Menu Template - Edit HTML - Lanjutkan
  3. Centang pada Expand Template Widget
  4. Cari kode </head> Gunakan tombol CTRL + F untuk mempermudah pencarian.
  5. Lalu Copy kode berikut dan letakan tepat diatas kode </head>
<!--Start Related Posts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:90%;
min-height:90%;
padding-top:0px;
padding-left:8px;
}
#related-posts h2{
font-size: 1.0em;
font-weight: bold;
color: white;
font-family: Rockwell,Georgia,Serif;
margin-bottom: 0.8em;
margin-top:0em;
padding-bottom:0em;
}
#related-posts a{
color:white;
}
#related-posts a:hover{
color:white;
}
#related-posts a:hover {
background-color:#080;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2xbt9cN17ECoFaYRgQ3lkgtH52Jr0Jhv1fGkaBpe99t4nO_nibAwuYVe5r5jt7q6xS0-WIlbDp5-wHZ4Rrmu1Jc3_cWvpqBsGtrl4jXahYH5DRvoXCQI88fi8qORQ7IyrY2llzeohtrg2/s1600/No+Image.jpg&quot;;
var maxresults=6;
var splittercolor=&quot;#000000&quot;;
var relatedpoststitle=&quot;Silahkan Baca Ini Juga:&quot;;
</script>
<script src='http://yourjavascript.com/22811210832/RelatedPoststhumb3.txt.js' type='text/javascript'/>
</b:if>
<!--End Related Post-->

    6. Selanjutnya cari kode berikut ( Jika ada dua kode, pilih bagian yang kedua ) :
<data:post.body/>
 
    7. Kalau kode diatas sudah ketemu, Sekarang copy'lah script berikut :
<!-- Start Related Posts-->
<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=7&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'/>
</b:if>
<!-- End Related Posts-->

    8. Paste'kan kode script diatas tepat dibawah kode :
<data:post.body/>
 
    9. Jika sudah, klik Simpan Template.

Catatan :
Berikut ini adalah kode yang bisa sobat ganti sebelum menyimpan template, gantilah tulisan berwarna merah sesuai keinginan sobat.
  • Menampilkan jumlah artikel terkait yang muncul max-results=7
  • Judul artikel terkait var relatedpoststitle=&quot;Silahkan Baca Ini Juga:&quot;;
  • Warna Tulisan var splittercolor=&quot;#000000&quot;;
Ok, Sekian saja postingan saya kali ini tentang Cara Membuat Artikel Terkait dengan Gambar, semoga dapat bermanfaat.



36 Cara Membuat Auto Refresh/Reload Otomatis Untuk Blogspot

Senin, Maret 12, 2012
Cara Membuat Auto Refresh Untuk Blogspot | Cirebon-Cyber4rt -  Kali ini saya akan posting tentang cara membuat auto refresh untuk blogspot.

Sobat pasti sudah tahu tentunya apa yang dimaksud dengan auto-refresh, ya betul...
yaitu me-load halaman blog berulang-ulang sesuai dengan waktu yang di tentukan oleh pemilik blog. Tidak usah basa-basi lagi, langsung aja dipraktekan cara membuat auto refresh untuk blogspot.

Cara Membuat Auto Refresh Untuk Blogspot :
  1. Login ke Blogger
  2. Pilih  Design > Edit HTML
  3. Cari kode </head>
  4. Letakan kode dibawah ini setelah kode </head>
<meta content='200' http-equiv='refresh'/>

Keterangan :
Yang berwarna merah berarti blog sobat akan me-refresh setiap 200 detik. Bisa diganti sesuai dengan keinginan sobat. Sekian posting saya kali ini, semoga bermanfaat buat sobat blogger semua.



17 Cara Membuka Disable Klik Kanan Pada Blog yang Diproteksi

Senin, Maret 12, 2012
Cara Membuka Disable Klik Kanan Pada Blog yang Diproteksi | Cirebon-Cyber4rt - Pastinya sobat kesal dengan blog yang ingin sobat copas tidak bisa mengklik kanan, Nah sebenarnya ada cara mudah untuk membuka disable klik kanan di blog.

Mendisable klik kanan menggunakan javascript pada browser
. Kalau browsernya di disable javascriptnya? Otomatis fitur disable klik kanan tidak akan bisa digunakan lagi. Nah cara membuka disable klik kanan pada blog yaitu dengan mendisable javascript pada browser sobat.


Nah berikut 
disable javascript untuk membuka disable klik kanan pada blog pada browser - browser tertentu :

Membuka Disable Klik Kanan di Chrome
  1. Klik Options > Under the Hood > Content Settings
  2. Pilih opsi Do not allow any site to run JavaScript
Membuka Disable Klik Kanan di Mozilla Firefox
  1. Klik Alat > Pengaturan > Isi
  2. Hapus centang Aktifkan JavaScript
Membuka Disable Klik Kanan di Opera
  1. Klik Menu > Settings > Preferences
  2. Klik Tab Advanced
  3. Di Content hapus centang Enable JavaScript
Hanya 3 browser yang saya tahu, kalau di Internet Explorer atau Safari coba saja cari sendiri untuk disable javascript. Begitulah Cara Membuka Disable Klik Kanan Pada Blog yang Diproteksi, yang intinya hanya disable javascript. Sekian saja postingan saya kali ini semoga bisa bermanfaat.



29 Cara Membuat Warna Komentar Admin Berbeda dengan Pengunjung

Sabtu, Januari 14, 2012
Cara Membuat Warna Komentar Admin Berbeda dengan Pengunjung | Cirebon-Cyber4rt - Warna komentar admin berbeda dengan pengunjung maksudnya adalah kotak komentar dari pemilik blog akan berbeda dengan kotak komentar milik pengunjung apabila memberikan komentar.


Cara Membuat Komentar Admin Berbeda dengan Pengunjung :
  • Langkah pertama yang harus sobat lakukan adalah Log in ke blogger dan masuk menu Layout kemudian masuk menu Edit HTML
  • Jangan Lupa centang "expand widget templates"
    Kemudian pasang kode dibawah ini tepat diatas kode ]]></b:skin>
.comment-body-author {
background: #FFFF29; /* Warna Background */
border:1px dotted #FF2929; /*Border*/
margin:0;
padding:0 0 0 20px;
}

  • Selanjutnya letakkan kode persis seperti berikut.
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

  • Perhatikan kode yang berwarna ungu itu adalah code yang harus kamu tambahkan diantara kode yang berwarna putih diatas
    Ingat penempatan kode yang berwarna ungu harus benar maka perhatikan kode yang berwarna biru itu adalah tagsnya.

    Kalau sudah kemudian Simpan dan lihat hasilnya.
Sekian postingan saya kali ini tentang Cara Membuat Warna Komentar Admin Berbeda dengan Pengunjung, semoga dapat bermanfaat.



12 Cara Membuat Navigasi Breadcrumb di Blogspot

Sabtu, Januari 14, 2012
Cara Membuat navigasi Breadcrumb di Blogspot | Cirebon-Cyber4rt - Navigasi Breadcrumb dapat membuat blog kita lebih SEO Friendly, karena akan mempermudah search engine menemukan artikel-artikel kita. Tidak hanya itu dengan adanya  Navigasi Breadcrumb maka pembaca dapat dengan mudah melihat posisi artikel yang dibaca serta mencari artikel dalam satu kategori.



Cara Membuat navigasi Breadcrumb di Blogspot :
  • Login ke akun Blogger sobat
  • Klik Tata Letak
  • Pilih tab Edit HTML
  • Download Full Template untuk jaga-jaga bila terjadi kesalahan
  • Kemudian beri tanda centang pada kotak kecil di samping
    tulisan Expand Template Widget
  • Silahkan cari kode  ]]></b:skin>
  • Copy lalu paste kode di bawah ini persis di atas kode  ]]></b:skin>
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double
#e6e4e3;
}

  •  Kemudian cari kode berikut pada template sobat :
          <div class='post hentry uncustomized-post-template'>


  •  Lalu pasang kode dibawah ini persis di bawah kode <div class='post hentry uncustomized-post-template'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>

Browse &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>

  • Kemudian Save template
Tunggu beberapa saat sampai template sobat tersimpan. Setelah selesai lihat pada postingan sobat tepatnya di atas judul artikel untuk menentukan berhasil tidaknya sobat memasang Navigasi Breadcrume.



20 Cara Membuat Tepi Gambar Bershadow Dengan CSS 3

Kamis, Desember 08, 2011
Cara Membuat Tepi Gambar Bershadow Dengan CSS 3 | Cirebon-Cyber4rt - CSS 3 adalah generasi CSS (Cascading Style Sheet) yang ke 3, banyak keunggulan CSS 3 dibandingkan generasi yang sebelumnya, dan sudah mulai digunakan browser-browser, yaitu diantaranya adalah Mozilla Firefox v 3.6 dan Safari V 3, semoga saja browser-browser lainya menyusul untuk mendukung CSS 3 ini.


Cara Membuat Tepi Gambar Bershadow Dengan CSS 3

Nah sebenarnya topik kita kali ini adalah "Membuat image post blogger berbayang/shadow" dengan menggunakan CSS 3, terlihat seperti gambar di samping kiri. Nah bagaimana caranya? silahkan ikuti langkah-langkah dibawah ini dan buktikan kecanggihan CSS 3.

Setelah Log In ke blogger pada dashboard masuk pada bagian "Template" lalu ke "Edit HTML"

Lalu cari code CSS yang mirip dibawah ini

.post img {
- - -
- - -
}

Note :
  1. Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna hijau adalah definisi CSS yang berbeda-beda setiap template
  2. Dan kadang code yang berwarna merah ada tambahanya sehingga seperti ini : .post img, table.tr-caption-container {
Nah kalau sudah ganti code CSS tadi dengan definisi seperti dibawah ini

.post img {background:#FFFFFF;border:1px solid $bordercolor;padding: 7px;-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);}

Nah yang diganti adalah code CSS yang berwarna hijau saja. Kalau sudah lalu SAVE deh, dan lihat hasilnya di browser Mozilla v 3.6, Safari V 3 dan Google Chrome. Sekian semoga bermanfaat.



12 Cara Menghilangkan Garis Bawah Pada Link

Rabu, Desember 07, 2011
Cara Menghilangkan Garis Bawah Pada Link
Pernah ada salah satu seorang sobat blogger yang mengirimkan pesan ke facebook saya, dia ini menanyakan cara menghilangkan garis bawah link yang ada pada setiap link. Garis bawah ini menurut beliau sangat mengganggu keindahan tulisan-tulisannya. Memang seperti kata-kata saya terdahulu, lain orang lain keinginan, untuk urusan link pun ada yang suka memakai garis bawah dan ada juga yang tidak suka akan garis bawah tersebut. 

Menurut kebiasan yang berlaku, sebuah tulisan yang berbentuk link biasanya memang mempunyai garis bawah, akan tetapi sebenarnya garis bawah tersebut bisa di hilangkan apabila kita mau. Bagaimana cara menghilangkan garis bawah pada link? untuk menghilangkannya sobat perlu merubah beberapa kode yang ada pada style sheet CSS, kode tersebut biasanya seperti ini :


a:link {
color:#58a;
text-decoration:underline;
}

a:hover {
color:#c60;
text-decoration:underline;
}

a:visited {
color:#969;
text-decoration:underline;
} 

Bagaimanakah cara menghilangkan garis bawahnya? nah, sobat hanya tinggal mengganti kata underline menjadi none. Jika sudah, lihat hasilnya.

Sekian postingan saya kali ini tentang cara menghilangkan garis bawah link. semoga dapat bermanfaat bagi sobat ^_^



1 Cara Membuat Back To Top Dengan Jquery

Minggu, Oktober 23, 2011
Kali ini saya akan membahas mengenai Cara Membuat Back To Top Dengan Jquery, Cara Membuat Back To Top Dengan Jquery pada Blogsot. untuk langkahnya anda langsung menuju ke TKP :

Cara Membuat Back To Top Dengan Jquery

Login Ke Blogger
MAsuk ke Rancangan --> Tata Letak --> Add Widget --> Html/Javascript.
Kemudian masukkan kode berikut :



<style type="text/css">#scrolltotop a{display: block;display: none;z-index: 999;opacity: .6;position: fixed;top: 100%;margin-top: -20px;left: 50%;margin-left: -150px;-moz-border-radius: 6px;-webkit-border-radius: 6px;width: 68px;line-height: 1px;height: 15px;padding: 10px 3px;background-color: #000;font-size: 12px;font-weight: bold;text-align: left;color: #fff;}</style><div id="scrolltotop"><a href="#">Scroll to top</a></div><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript">$(function () {var scroll_timer;var displayed = false;var $scrolltotop = $('#scrolltotop a');var $window = $(window);var top = $(document.body).children(0).position().top;$window.scroll(function () {window.clearTimeout(scroll_timer);scroll_timer = window.setTimeout(function () {if($window.scrollTop() <= top){displayed = false;$scrolltotop.fadeOut(500);}else if(displayed == false){displayed = true;$scrolltotop.stop(true, true).show().click(function () { $scrolltotop.fadeOut(500);});}}, 100);});});</script>

Kemudian Simpan.

Sekian postingan saya tentang Cara Membuat back To Top Dengan Jquery, Semoga dapat bermanfaat.



1 Membuat Spoiler di Blog

Sabtu, September 24, 2011
Membuat Spoiler di Blog | Cirebon-Cyber4rt - Layaknya sebuah spoiler yang sering digunakan di dalam sebuah forum, spoiler blog juga sangat dibutuhkan dalam dunia blogging. Dengan membuat spoiler, pemilik blog akan lebih mudah untuk menghemat tempat/area di blog karena konten yang dibuat si pemilik blog yang bisa memakan tempat dapat disembunyikan (gambar, kode, dll).

Membuat Spoiler di Blog

Selain itu, membuat spoiler di blog juga ditujukan untuk mengurangi berat blog saat proses loading sebab konten yang ukurannya besar tidak akan ikut di load dan hanya akan tampil setelah tombolspoiler tersebut di klik.


Contoh Spoiler di Postingan :




Untuk membuat Spoiler seperti diatas, sobat dapat menggunakan kode berikut ini :

<div id="spoiler" style="display: none;">
ini konten yang akan disembunyikan </div>
<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="Klik untuk melihat/menyembunyikan" type="button">Buka/Tutup</button>

Contoh kode spoiler tersebut adalah contoh kode untuk spoiler yang berisikan teks biasa. Kalo sobat blogger mau memasukkan kode HTML, sobat blogger harus parse dulu kode HTML tersebut agar kodenya tidak langsung bekerja.

Untuk gambar, cukup ganti tulisan yang berwarna hijau dengan kode <img src="url gambar"> (kode HTML untuk memanggil gambar).

Secara umum kode untuk membuat spoiler di blog sama seperti kode di atas, tapi sobat blogger bisa sedikit modifikasi sehingga hasilnya nanti bisa sesuai keinginan.




0 Cara Pasang AddThis Share Button di Blog

Sabtu, September 24, 2011
Cara Pasang AddThis Share Button di Blog | Cirebon-Cyber4rt - Memasang share button memang menguntungkan bagi pemilik blog. Kenapa saya bilang menguntungkan?? Sebab dengan memasang share button akan lebih memudahkan para pengunjung untuk berbagi informasi menarik yang ada di blog kita.


Cara Pasang AddThis Share Button di Blog

Selain itu, memasang share button adalah salah satu cara promosi blog yang paling efektif karena kita dapat langsung berbagi informasi di berbagai media sosial seperti facebook, twitter dan berbagai media sosial lainnya.


Sebenarnya blogger.com sudah menyediakan fasilitas share button sendiri. Tapi buat gw pribadi share button bawaan blogger.com kurang memuaskan karena hanya dapat mengakses beberapa media sosial aja. maka dari itu, kali ini gw mau coba share tentang Cara Pasang AddThis Share Button Di Blog.


Langkah Pertama :

  1. Silahkan Masuk ke www.addthis.com
  2. Kemudian pilih jenis tombol yang diinginkan dan Pilih "No, just give me the button"
  3. Klik "Get Your Button" dan Copy Script yang diberikan
Langkap Kedua :
Login ke blogger.com
  1. Pilih menu "Design"
  2. Klik "Edit HTML"
  3. Buat Jaga-jaga, back up dulu template sobat blogger
  4. Beri tanda centang pada "Expand Template Widget"
  5. Cari kode <div class='post-header-line-1'> (untuk header) atau kode <div class='post-footer'> (untuk footer). kalo engga ada, coba cari kode yang mirip dengan kedua kode tersebut.
  6. Letakkan kode share button yang didapat dari addthis.com tadi setelah salah satu kode di atas (poin no. 6)
  7. Klik "Save Template"
Bukan hanya AddThis share button yang disediakan oleh addthis.com, cara pemasangan share button yang lainnya pun akan sama dengan langkah-langkah di atas.

Tapi dikarenakan sharing kali ini gw fokusin sama AddThis share button yang disediakan oleh addthis.com, maka langkah-langkahnya gw sesuaikan.



1 Menghilangkan Navigation Bar di Blog

Sabtu, September 24, 2011
Menghilangkan Navigation Bar di Blog | Cirebon-Cybe4rt - Navigation Bar (Navbar) adalah salah satu fasilitas yang dimiliki oleh Blogspot/Blogger, bentuknya kotak kecil memanjang secara horizontal di bagian paling atas blog, itu tuh.. yang ada di bagian paling atas blog ini.

Menghilangkan Navigation Bar di Blog
Navbar
Menghilangkan Navigation Bar di Blog :
1). Login ke Blogger
2). Pilih menu Template
3). Klik Edit HTML
4). Cari kode berikut ini /* Variable definitions (Supaya lebih mudah, tekan CTRL + F)
5). Lalu letakkan kode berikut tepat diatas kode /* Variable definitions

#navbar-iframe {display: none !important;}

6). Simpan Template.

Jika sudah, silakan cek blog sobat apakah masih ada navbarnya atau tidak hehehe, sekian postingan saya kali ini tentant  Menghilangkan Navigation Bar di Blog, semoga dapat bermanfaat.



6 Menambahkan Scroll Button di Arsip Blog

Sabtu, September 24, 2011
Menambahkan Scroll Button di Arsip Blog | Cirebon-Cyber4rt - Pernah ga ngeliat satu web/blog yang arsip blognya banyak banget??? Terus coba perhatiin deh apa yang terjadi ama tampilan arsip blognya !!! yupz… tampilannya jadi berjejer sangat panjang ke bawah ‘n memberikan kesan yang engga rapi buat yang ngeliat blog tersebut. Ini bukan merupakan suatu hal yang aneh, sebab arsip blog bawaan standar memang di rancang tampil seperti itu.

Menambahkan Scroll Button di Arsip Blog

Buat ngakalinnya, kita cukup nambahin scroll button aja di arsip blog tersebut. Apa efeknya buat blog kita?? Penambahan scroll button sangat berguna, sebab arsip blog dapat dilihat secara bergantian dengan cara ng-drag scroll button tersebut sehingga arsip blog tidak akan memakan ruang di side bar blog kita.

Berikut Cara Membuatnya :

  1. Login dulu ke blogspot
  2. Pilih menu "Design"
  3. Klik "Edit HTML"
  4. Buat jaga-jaga kalo terjadi kesalahan, sebaiknya backup dulu template yang kita gunain, caranya klik "Download Full Template"
  5. Beri tanda centang pada "Expand Template Widget"
  6. Cari kode ini <div id='ArchiveList'> (supaya lebih gampang, tekan ctrl+f ‘n masukan kode yang dicari)
  7. Kalo udah ketemu, copy/paste kode di bawah ini tepat sebelum kode <div id='ArchiveList'>
<div style='overflow:auto; width:ancho; height:100px;'>

     8. Kalo udah, tambahin kode </div> di atas kode <b:include name='quickedit'/>
     9.  Supaya lebih jelas, coba perhatiin beberapa kode yang ada dibawah ini deh.

<div style='overflow:auto; width:ancho; height:100px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>

      10. Klik Simpan.

Catatan :
  • Teks warna merah adalah posisi dimana kode harus diletakkan.
  • Teks warna hijau adalah ukuran dari tinggi kotak arsip blog yang udah kita tambahin scroll button.
Sekian postingan saya kali ini tentang Menambahkan Scroll Button di Arsip Blog, semoga dapat bermanfaat.



Contact

Nama

Email *

Pesan *