Cara Membuat Widget Labels atau Kategori Blog Cloud Keren

Cara Membuat Widget Labels atau Kategori Blog Cloud Keren

Kembali lagi sobat blogger yang saya harapkan untuk terus menerus berkunjung ke blog ini.hhe. Pada jam segini, gasik sekali saya berikan teritorial mengenai blog blogger tentang Cara Membuat Widget Labels atau Kategori Blog Cloud yang keren (menurut saya), simpel (menurut saya). Entah menurut anda bagaimana bila melihat tampilan widget labels yang saya share ini. Mudah-mudahan artikel yang saya bagikan bermanfaat buat anda para blogger sejati.

Widget Labels atau Kategori, berfungsi sebagai menu navigasi pada blog agar para pengunjung blog bisa menavigasi blog anda dengan mudah. Ditambah pada widget labels itu bisa menampilkan jumlah postingan pada label tersebut, agar si pengunjung blog bisa menilai seberapa banyaknya artikel yang ada pada blog tersebut, dan semakin banyak artikel, semakin baik pula bagi para pengunjung blog (mungkin).

Kali ini saya akan memberikan tampilan widget labels yang lumayan bagus, tampilan widget labelsnya seperti pada gambar dibawah ini :

Bila anda menyukai dengan tampilan widget labels atau kategori yang saya buat di atas, silahkan ikuti cara-caranya dibawah ini :

1. Masuk ke akun blogger anda, lalu pergi ke bagian Template dan klik edite HTML.
2. Setelah itu tambahkan kode CSS tampilan Label Cloud dibawah ini, tepat di atas kode </head>.

<style type=text/css>
.label-size a {
background: none repeat scroll 0 0 #535353;
color: #FFFFFF;
float: left;
margin: 0 5px 2px 0;
padding: 10px;
font-weight: blod;
font: 12px  Arial, Sans-Serif;
text-transform: uppercase;
}
.label-size a:hover {
background-color: cadetblue;
color: #fff;
text-decoration: none;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
border-right: 5px solid #EEEEEE;
}
</style>

3. Setelah anda menambahkan kode CSS pada HTML blog, silahkan kembali menuju bagian Tata Letak.
4. Tambahkan widget baru dengan menekan tambahkan widget atau add widget.
5. Silahkan pilih label dan atur sesuai pada gambar dibawah ini :

6. Setelah itu,  tinggal anda simpan atau save. Dan lihat hasilnya sobat !.

Selesai artikel teritorial mengenai Cara Membuat Widget Labels atau Kategori Blog Cloud yang keren abis. Mudah-mudahan sangat bermanfaat buat anda yang kebetulan sedang mencari-cari teritorial blogger mengenai cara membuat labels keren. Sukses selalu mengeblog sobat !.

Go to link download

Read full post »

Cara Membuat Tampilan URL Page Not Pound Ringan dan Keren di Blog

Cara Membuat Tampilan URL Page Not Pound Ringan dan Keren di Blog

Bila blog anda mempunyai masalah dalam halaman postingan yang sudah anda hapus URL nya, atau URL Halaman pada post anda ada yang tidak terayapi googlebot.

Seperti contoh positingan anda sudah dihapus, tetapi masih ada yang terindex, dan pengunjung mengklik atau mengunjungi URL yang sudah anda hapus tersebut. Terlebih lagi loading blog anda lambat dan pengunjung pun sudah menunggu lama-lama, malah halaman yang dicari tidak tampil. Hal itu pasti akan membuat para pengunjung blog yang menggunjungi halaman URL Not Pound (halaman tidak ditemukan), pasti akan kecewa atau merasa kesal.

ScreenShot

Nah disini saya akan memberikan cara membuat laman URL Not Pound pada blog anda ringan, dan tidak memunculkan semua menu, header, sidebar, footer dan widget-widget lain yang memberatkan blog. Sekaligus agar para pengujung blog anda bisa dengan mudah mengetahui apakah url yang mereka kunjungi, apakah ada atau sudah tidak ada.

Dan dibawah ini saya akan menjelaskan cara membuatnya, silahkan anda simak cara-caranya dibawah ini !
Buat dulu metag judul URL Not Pound, yaitu dengan cara anda menaruh code dibawah ini :

<b:if cond=data:blog.pageType == &quot;error_page&quot;>
<title>(404) URL Not Pound | <data:blog.title/></title>
</b:if>

Taruh seperti pada contoh dibawah ini :

<b:if cond=data:blog.pageType == &quot;error_page&quot;>
<title>(404) URL Not Pound | <data:blog.title/></title>
</b:if>
<b:if cond=data:blog.pageType == &quot;index&quot;>
    <b:if cond=data:blog.pageType == &quot;item&quot;>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageTitle/></title>
    </b:if>
    <b:else/>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    </b:if>

Setelah itu anda cari dengan menekan CTRL+F kode <body>, dan taruh kode dibawah ini, dibawah kode yang sudah anda cari tadi :

<b:if cond=data:blog.pageType != &quot;error_page&quot;>

Kemudian anda taruh kode dibawah ini, di atas kode penutup </body>, atau taruh diakhir kode <div id="content-wrapper">. Silahkan klik link Gambar Contoh Demo untuk melihat Contohnya.

</b:if>
<b:if cond=data:blog.pageType == &quot;error_page&quot;>
<div id=error-page>
  <div id=error-inner>
    <div class=box-404>
<h1>(404) URL Not Pound</h1>
    </div>
    <p>Text KETRANGAN URL Halaman tidak ditemukan</p>
    <p>Pergi ke Laman Utama  <a href=URL BLOG ANDA>JUDUL BLOG ANDA</a></p>
</div>
</div>
</b:if>

CONTOH DEMO

Keterangan : "Pada Text yang diwarnai warna oren, silahkan isi dengan keterangan URL Not Pound. Dan text yang diwarnai warna merah di isi dengan Url Blog dan Judul Blog anda.

Kemudian anda simpan kode CCS dibawah ini di atas kode </b:skin> atau kode </style>.

<b:if cond=data:blog.pageType == &quot;error_page&quot;>
<style type=text/css>
#error-page {
background-color: #E9E9E9;
position: fixed !important;
text-align: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99999;
}
#error-inner {
margin: 11% auto;
}
#error-inner .box-404 {
width: 604px;
height: 150px;
background: #D15D38;
color: #fff;
font-size: 14px;
font-family: Oswald;
line-height: 150px;
border-radius: 10px;
margin: 0 auto;
position: relative;
}
#error-inner .box-404::after {
content: " ";
width: 0;
height: 0;
bottom: -8px;
border-color: #D15D38 transparent transparent;
border-style: solid;
border-width: 9px 9px 0;
position: absolute;
left: 50%;
}
#error-inner p {
line-height: 0.7em;
font-size: 14px;
font-family: Oswald;
color: #1D1D1D;
}
</style>
</b:if>

Kemudian langkah terakhir save tempelate !. 

Go to link download

Read full post »

Cara Buat Sidebar Blog Keren Seperti Pada Blog Artikel Karya Ku

Cara Buat Sidebar Blog Keren Seperti Pada Blog Artikel Karya Ku

Sidebar pada blog merupakan suatu yang sangat penting sekali untuk bisa menempatkan segala menu dan widget yang penting buat blog tersebut, agar pengunjung blog bisa nyaman. Sebenarnya saya kurang begitu baik dalam mendefinisikan sesuatu tetapi mungkin pengertian saya itu ada benarnya bukan sobat?.

Nah kali ini saya akan membahas mengenai Cara Buat Sidebar Pada Blog saya ini, yang bisa disembunyikan agar bisa menghemat tempat pada blog. Fitur ini saya gunakan dengan jquery dan javascrift, yang pasti seperti yang pernah pada website kang ismet bahas dengan menggunakan kode javascrift toggle.

Bila anda memang ingin sekali membuatnya agar anda bisa menghemat tempat pada widget blog anda, silahkan saja ikuti cara-caranya dibawah ini. Untuk tampilannya silahkan saja lihat pada sidebar blog saya di posisi kanan. Cara-caranya yaitu adalah sebagai berikut :

• Masuk kebagian edite tempelate blog anda, untuk berjaga-jaga anda diharuskan untuk memback up terlebih dahulu tempelatenya.
• Ubah tag title h2 pada sidebar blog anda menjadi h3, seperti contoh pada kode yang diwarnai warna merah dibawah ini.

<div id=sidebar-wrapper>
<b:section class=sidebar1 id=sidebar1 preferred=yes>
  <b:widget id=PopularPosts1 locked=false title=Popular News type=PopularPosts>
    <b:includable id=main>
  <b:if cond=data:title><h2><data:title/></h2></b:if>
  <div class=widget-content popular-posts>
    <ul>
      <b:loop values=data:posts var=post>
bla...bla ...bla... dan seterusnya...

Menjadi seperti kode dibawah ini : 

<aside id=sidebar1-wrapper>
<b:section class=sidebar1 id=sidebar1 preferred=yes>
  <b:widget id=PopularPosts1 locked=false title=Popular News type=PopularPosts>
    <b:includable id=main>
  <b:if cond=data:title><h3><data:title/></h3></b:if>
  <div class=widget-content popular-posts>
    <ul>
      <b:loop values=data:posts var=post>
bla...bla ...bla... dan seterusnya...

• Dan masukan saja kode javascrift dibawah ini dibagian atas kode </head>.

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js type=text/javascript/>
<script type=text/javascript>
//<![CDATA[
$(document).ready(function() {
    $(#sidebar .widget-content).hide();
    $(#sidebar h3:first).addClass(active).next().slideDown(slow);
    $(#sidebar h3).css(cursor, pointer).click(function() {
        if($(this).next().is(:hidden)) {
            $(#sidebar h3).removeClass(active).next().slideUp(slow);
            $(this).toggleClass(active).next().slideDown(slow);
        }
    });
});
//]]>
</script>

Keterangan !!!. Bila pada tempelate anda sudah ada kode jquery versi 1.7.2, yaitu <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js type=text/javascript/>, tinggal abaikan saja kode yang di atas (jangan iktu di copy paste), dan taruh kode itu dibawah kode jquery yang sudah ada pada tempelate anda.

• Dan yang terakhir kita tinggal menambahkan CCS untuk widgetnya. Silahkan tambahkan saja kode CCS dibawah ini untuk tampilan seperti artikel karya ku.

#sidebar-wrapper {
border : #171717 solid 2px;
padding : 2px;
position : relative;
width : 300px;
float : right;
overflow-wrap : break-word;
margin : 5px;
overflow : hidden;
background : #E6E6E6;
}
.sidebar {
margin: 0;
padding: 0;
border: #5E5E5E solid 1px;
}
.sidebar h3 {
display : block;
background : #333;
font-size : 14px;
font-family : Oswald, arial, verdana, sans-serif;
color : #ccc;
text-align : left;
word-spacing : normal;
text-transform : uppercase;
font-weight : normal;
padding : 5px;
margin : 0;
}
.sidebar h3.active {
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYVxrMWiPmLxYK4ZJvyIL_f7rWmS8o_D41qv8E9B6c1-slVErdFx8y9VJebOhJX0Tx_LGr4LHgHGmZ2a_MAMoGJGP5ZdE4qc-K5UkDrk6ke-CyxMn-bmkfiVa-8l22bUhw5LOCbWzqZys5/s16/arrow_select.gif) right center no-repeat #353535;
}
.sidebar h3 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwPMaDVZoSvR8BaffX7plPl3cZIttcdqSy9ISUoB_xbPqkHhLVgX9OLnqbyTqydRDZPFqd8r5spObaUdm_hDfeEIkvQmvtVyzAvcUQT_mGJHvY1JxHMkETQJEceKTjiVW-lTSaWLQVuYxj/s16/arrow_right.gif) right center no-repeat #001747;
border-radius: 2px;
box-shadow: 0 1px 0 transparent, 0 2px 0 #007A7A inset;
color: #FFF;
font: 12px Arial, Time New Roman, sans-serif;
font-weight: bold;
padding: 5px 0 5px 10px;
text-transform: uppercase;
margin: 1px;
}

• Bila sudah, silahkan saja save dan lihat hasilnya. Untuk tampilan warna dan lain-lain, silahkan saja atur sendiri dengan mengeditenya sendiri di browser, itu cara satu-satunya untuk menyesuaikan tampilan yang menurut anda suka/cocok menurut anda.

Sudah usai cara-caranya sobat mengenai artikel Cara Membuat Sidebar Pada Blog Keren Tersebunyi, hhe. Maaf gan, saya juga lupa lagi itu namanya sidebar apaan, tapi yang penting anda sekarang sudah tahu dan bisa membuatnya.

Go to link download

Read full post »