Tampilkan postingan dengan label tips blog. Tampilkan semua postingan
Tampilkan postingan dengan label tips blog. Tampilkan semua postingan

Home » Posts filed under tips blog

3 Style Label Cloud untuk Blog

Diposting oleh Unknown on Selasa, 20 November 2012

Home » CSS » Desain Blog » Tip dan Trik » tutorial Blogger » 3 Style Label Cloud untuk Blogger

3 Style Label Cloud untuk Blogger

Posted On 24.10.12 by Hriza muh |
label widget pada Blogger secara default ada 2 pilihan yaitu List dan Cloud. Widget Label Cloud yang akan jadi bahasan Desain Blog kali ini. Dengan sedikit tambahan kode CSS widget label type cloud ini bisa dipercantik tampilanya di blog. Ada pilihan 3 Style Label Cloud Blogger, Anda bisa memberi sentuhan baru dan cantik pada blog Anda. Tertarik ???........Ikuti tutorialnya dibawah ini.
Label di blog adalah kata kunci yang mengkategorikan seluruh isi/konten blog . Label juga merupakan link-link singkat dan sederhana menuju postingan Anda. Pemasangan widget Tag, Label atau Kategori pada Blog/web bertujuan untuk memberikan navigasi yang mudah bagi pembaca blog. Pada Blogger sejak Google telah mengambil alih atau menyediakan layanan widget resminya melalui server Blogger sendiri, salah satunya adalah Page List and Label Cloud List dengan enable deisgner untuk membuat dynamic menus.
Ini berarti Anda semua mempunyai kesempatan untuk bermain dengan widget dan mengubah/memodifikasinya tampilan widget dengan leluasa, mengingat sekarang stylesheet dapat diakses dengan bebas. Oleh karena itu Desain Blog proBlogiz kali ini akan berbagi stylesheet sederhana yang akan merubah tampilan Label Cloud Blogger menjadi lebih menarik dan keren, seperti 3 Style Label Cloud Blogger dibawah ini.
Untuk membuat dan memodifikasi tampilan Label Cloud Blogger seperti contoh dibawah Anda hanya perlu menambah kode CSS pada template. Style atau gaya pada label cloud tersebut kompatible di semua browser utama termasuk + IE8. Dibawah ini saya bagikan juga kode CSS berikut tutorial cara pemasanganya pada template blogger, kode terebut dapat disesuaikan dengan beberapa kiat untuk membuat desain label lebih menarik. Seperti dengan menambahkan gambar latar belakang ( image background) sendiri pada setiap label.

Pilihan 3 Style Label Cloud Blogger

Labels Cloud Blogger style # 01

Style Label Cloud Blogger # 01

Untuk style ini Anda bisa lihat DEMO-nya  pada bagian bawah post ini.

CSS Code :

/*-----Labels Cloud Styled widget by proBlogiz.blogspot.com----*/ .label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#666; } .label-size:hover { border:1px solid #B20000; text-decoration: none; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .label-size a { text-transform: uppercase; float:left; text-decoration: none; } .label-size a:hover { text-decoration: none; }

Labels Cloud Blogger style # 02

Style Label Cloud Blogger # 02

CSS Code:

/*-----Labels Cloud Styled widget by proBlogiz.blogspot.com----*/ .label-size{margin:0;padding:0;position:relative;} .label-size a{float:left;height:24px;line-height:24px;position:relative;font-size:12px;margin-bottom: 9px;margin-left:15px; padding:0 10px 0 12px;background:#000000;color:#fff;text-decoration:none;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-webkit-border-top-right-radius:4px; border-top-right-radius:4px;} .label-size a:before{content:""; float:left;position:absolute;top:0;left:-12px;width:0;height:0;border-color:transparent #000000 transparent transparent;border-style:solid;border-width:12px 12px 12px 0;} .label-size a:after{content:"";position:absolute;top:10px;left:0;float:left;width:4px;height:4px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;-moz-box-shadow:-1px -1px 2px #000;-webkit-box-shadow:-1px -1px 2px #000;box-shadow:-1px -1px 2px #000;} .label-size a:hover{background:#333;} .label-size a:hover:before{border-color:transparent #333 transparent transparent;}

Labels Cloud Blogger style # 03

Style Label Cloud Blogger # 03

CSS Code:

/*-----Labels Cloud Styled widget by proBlogiz.blogspot.com----*/ .label-size {position: relative;float:left;}.label-size::before {content: ' ';width: 0;height: 0;top: 2px;position: absolute;right: -4px;border: 14px solid transparent;border-left-color: ##E0F8E0;}.label-size a{float: left;font-size: 14px;padding: 5px 10px;background: white;margin: 3px 24px 15px 1px;position: relative;width:95px;outline: 1px solid #DDD;color: #7E7E7E;}.label-size a::before {content: ' ';width: 0;height: 0;top: 0;position: absolute;right: -26px;border: 13px solid transparent;border-left-color: white;}.label-size a::after {content: ' ';position: absolute;background: #E0F8E0;border-radius: 10px;height: 10px;right: -1px;top: 7px;width: 10px;border: 1px solid #DDD;} .label-size a:hover{color:#222 !important}

Cara Pasang Style Label Cloud pada Blogger

Langkah Pertama

1. Masuk Blogger Dasboard > Template > Edit HTML > Lanjutkan
2. Backup template
3. Tekan Control + F > cari kode ]]></b:skin>
4. Copy salah satu kode CSS diatas ( yang Anda pilih )
5. Pastekan / letakkan kodenya tepat DIATAS tag ]]></b:skin>
6. Save Template

Langkah Kedua

1. Masuk Blogger Dasboard > Tata Letak > Klik Tambah Gadget > pilih Label
2. Setting widget Blogger Label > pilih Tampilkan Cloud
3. Untuk pilihan "Sortir" dan "tampilkan semua" atau label yang dipilih terserah Anda
    Lihat gambar dibawah untuk lebih jelasnya
Konfigurasi Label Widget Blogger
4. Setelah selesai konfigurasikan label, klik Simpan
Refresing homepage/blog dan lihatlah hasil tampilan label cloud blogger dengan new style di Blog Anda. Cool right.....?
Anda juga bisa memodif atau mengedit kode CSS diatas, terutama kode-kode warna/color background, color font, size, hover color dan lainnya yang bisa diganti dengan selera Anda.
Unutk referensi warna-warna Hex gunakanlah >>> kode Warna Hex generator
Selamat Mencobanya....
Keep your Blog beauty !!!...
 
sumber:http://problogiz.blogspot.com/2012/10/3-style-label-cloud-untuk-blogger.html
More about → 3 Style Label Cloud untuk Blog
di 18.52 { Add komentar }
Label:

Cara Memodifikasi Blogger Label Dengan CSS3

Diposting oleh Unknown on Minggu, 04 November 2012



CSS - Bosen dengan tampilan label yang biasa saja. Sekarang kamu bisa menghilangkan rasa bosan itu dengan tampil baru dan keren. Dengan CSS3 tampilan blogger label milik kamu jadi keren. Dan berikut cara memodifikasi nya. Di desain oleh stylifyyourblog.


1. Login ke blog kamu.
2. Pastikan kamu sudah memasang label nya.
3. Template > Edit HTML > Cari kode ]]></b:skin>
4. Letakan kode di bawah ini tepat di atas kode nomor 3.
.label-size{
   display: inline-block;
   padding: 0px 10px;
   height: 29px;
   line-height:29px;
   border-radius: 5px;
   font-weight:bold;
   font-size:12px;
   text-decoration:none;
}

.label-size{
  border: 1px solid #769e42;
  box-shadow: inset 0 1px 0 #c5e59c ;
  background-color: #9ed35a;
  text-shadow: 0px 1px 1px #6ea23b;
  color: #fff;
  background-image: linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -o-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}

.label-size:hover{
  background-color: #b7fa66;
  background-image: linear-gradient(top, #b7fa66 0%, #7ec940 100%);
  background-image: -o-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
  background-image: -moz-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
  background-image: -webkit-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
  background-image: -ms-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
}

.label-size:active{
  background-image: linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -o-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -moz-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -webkit-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -ms-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}

.label-size{
  display:inline-block;
  border-radius: 5px 0 0 5px;
  border-right-width:0;
  position:relative;
  z-index:5;
  margin-right: 20px;
  margin-bottom: 10px;
}

.label-size:after{
  content: " ";
  width: 22px;
  height: 22px;
  line-height: 18px;
  font-size:25px;
  border-top: 1px solid #769e42;
  border-right: 1px solid #769e42;
  box-shadow: inset 0 1px 0 #c5e59c ;
  background-color: #9ed35a;
  text-shadow: 0px 1px 1px #7eac46;
  border-radius: 3px 7px 3px 0;
  color: #fff;
  background-image: linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -o-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -moz-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -webkit-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -ms-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  position:absolute;
  top: 3px;
  right: -12px;
  z-index:-3;
  -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
       -moz-transform: rotate(45deg);  /* FF3.5+ */
        -ms-transform: rotate(45deg);  /* IE9 */
         -o-transform: rotate(45deg);  /* Opera 10.5 */
            transform: rotate(45deg);
               filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                       M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
                 zoom: 1;
}

.label-size:hover:after{
  background-color: #b7fa66;
  background-image: linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
  background-image: -o-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
  background-image: -moz-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
  background-image: -webkit-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
  background-image: -ms-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
}

.label-size:active:after{
  background-image: linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -o-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -moz-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -webkit-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -ms-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}

.label-size:before{
  content: " ";
  height:5px;
  width:5px;
  display:block;
  position:absolute;
  right:-3px;
  top:11px;
  background-color: #fcfdf5;
  border: 1px solid #83ab52;
  border-radius:5px;
  box-shadow: 0 1px 0 #b2ddd83;
}

.label-size span{
  padding:2px 5px;
  border: 1px solid #9e5c26;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 #f5bf8c;
  background-color: #ed943f;
  text-shadow: 0px 1px 1px #000;
  margin-left: 10px;
  background-image: linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
  background-image: -o-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
}

#Label1 {height:210px !important;}
Simpan dan lihat hasilnya.

sumber:http://blazerracing.blogspot.com/2012/10/cara-memodifikasi-blogger-label-dengan.html
More about → Cara Memodifikasi Blogger Label Dengan CSS3
di 12.26 { Add komentar }
Label:

Widget Blogger Indonesia di Blog

Diposting oleh Unknown on Selasa, 23 Oktober 2012

Pasang Widget Blogger Indonesia di Blog ---Sekedar berbagi untuk semua teman blogger yang ingin memasang widget Blogger Indonesia di blogspot, bisa mengunakan widget kreasi Iskaruji dot com ini. Untuk Bonus gambar animasi, saya kutip dari beberapa sumber yang saya temui di beberapa blog. Adanya widget ini mungkin dapat menjadi alternatif lain dari widget sejenis untuk sisi tampilan blog sahabat blogger sekalian.

Cara pasang widget ini juga begitu mudah. Pada dasboard blog kamu pilih Design > Page Element > Add Gadget dan pilih JavaScript/HTML. Kemudian pastekan kode yang kamu pilih. Atau bisa juga dengan meng-klik pada gambar widget yang dipilih berikut:


Berikut kode widget Blogger Indonesia:

Iskaruji dot com
SUDUT KIRI ATAS


Iskaruji dot com
SUDUT KANAN ATAS


Iskaruji dot com
SUDUT KIRI BAWAH
Iskaruji dot com
SUDUT KANAN BAWAH

Kamu juga bisa menggunakan image kreasi kamu sendiri dengan format PNG ukuran 100 X 100 Pixel. Kemudian ganti url image yang ada dengan url image kamu.

BONUS KREASI ANIMASI
Klik pada masing-masing animasi untuk memasangnya di Blog.
Note: Pada sebagian template seperti pada template Iskaruji dot com sendiri, tampilan widget Blogger Indonesia ini tidak bisa tampil tepat pada sudut yang diinginkan, sehingga akan terlihat janggal jika memasang widget ini.

selamat mencoba

sumber:http://www.iskaruji.com/2011/01/pasang-widget-blogger-indonesia.html
More about → Widget Blogger Indonesia di Blog
di 20.19 { Add komentar }
Label:

Cara Membuat dua kolom di bawah postingan

Diposting oleh Unknown

Cara Membuat dua kolom di bawah postingan itu lah tutorial pembahasan kita hari ini. di mana salah satu teman kita yang rasa ingin tahu nya dan penasarannya tentang cara membuat dua kolom di bawah postingan blog ini yang terdiri antara related post dan Artikel Berlangganan. bukannya saya enggan untuk mempost tutor ini tapi saya masih bingung untuk memberi nama judul dari artikel ini. Tadinya yang ingin ku kasih judul Membagi Related post menjadi dua kolom tapi kurang cocok ya saya ganti dengan Menambah dua kolom di bawah Artikel atau Postingan. Nah hari ini terjawab sudah dari sebuah pertanyaan sobat ku. walau agak terlambat karna sibuknya aktivitas pekerjaan hari ini ku coba luangkan waktu sedikit untuk membantu nya.

Berikut langkah-langkah cara membuat dua kolom di bawah artikel atau Postingan di blog:

  • Login terlebih dahulu ke blogger
  • Tata letak
  • Edit HTML
  • Beri tanda centang di kotak kecil kanan atas
  • Kemudian cari kode ]]></b:skin>
  • Letakkan kode di bawah ini di atas kode ]]></b:skin>
    #related{background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHkoGo7xRx9UUBbh4E1wrMxMZDe8tUW6O-kZTjcFBiKiUph97c_gHCiYDqOdxLxvqotIHOnf_57EM8IIDj5iGgdyp-sV5yyMdKA17zWRRc2BLWuQ8-6wHNcwkYuxqXuUk-REBkxQ89S-I/) 45% 0 repeat-y;border:1px solid #ddd;color:#000;margin:0 0 10px;padding:15px}
    #related .related-posts{font-weight:400;width:53%;float:right}
    #related .related-posts p{margin:0}
    #related .related-posts h3,#related .related-posts h2,#related .related-posts h1{font-size:12pt;letter-spacing:0;margin:0}
    #related .related-posts ol{font-weight:400;margin:2px 0 0}
    #related .subscribe{width:43%;float:left;color:#000}
    #related .subscribe p.intro{font-weight:400}
    #related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheF7-FseyTAH1wqVkkhZl6oAPKv-Bo42Wh84DfuuptCTeavexNoYMb8DYawo6wduKfg4qWDmgUOXUkvhDVnLRrmw8ozB8VcJTqGoohXZpABRmPI9BWn5_HYQuxf7L45cTP3kUTVxAV27c/) 0 50% no-repeat;vertical-align:middle}
    #related .subscribe form{margin:0;padding:0}
    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
    .clearfix{display:inline-block}

  • Setelah itu cari kode
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
    Letakkan disini
    </b:if>

  • Kemudian Pastekan kode di bawah ini persis ditulisan yang berwarna merah di atas
    <div class='clearfix' id='related'>
    <div class='subscribe'>
    <p class='feed'>
    <a href='http://Letakkan link feed anda disini/feeds/posts/default'>Berlangganan via RSS Feed</a></p><p class='intro'>Letakkan kode Form Berlangganan anda disini</p></div>
    <div class='related-posts'> Letakan kode Related post anda disini</div></div>
  • Ganti tulisan berwarna biru dengan Link Feed anda, kode form Berlangganan dan Kode Related post yang anda punya.
  • Untuk lebih jelas Lihat contoh di bawah ini
    <div class='clearfix' id='related'>
    <div class='subscribe'>
    <p class='feed'>
    <a href='http://jayaputrasbloq.blogspot.com/feeds/posts/default'>Berlangganan via RSS Feed</a></p>
    <p class='intro'>Anda Ingin artikel seperti ini langsung ke Email anda Silahkan masukkan alamat Email anda Untuk Berlangganan :</p><p><form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=J_Putra&apos;, &apos;popupwindow&apos;,&apos;scrollbars=yes,width=600,height=520&apos;);return true' target='popupwindow'><br/><input id='subbox' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Masukan Email anda...&apos;;}' onfocus='if (this.value == &apos;Masukan Email anda...&apos;) {this.value = &apos;&apos;;}' type='text' value='Masukan Email anda...'/><input name='uri' type='hidden' value='Panduan Sukses Blogger'/><br/><br/><input name='loc' type='hidden' value=''/><input id='subbutton' type='submit' value='langganan'/></form>    </p></div>

    <div class='related-posts'><b:if cond='data:blog.pageType == &quot;item&quot;'><div class='rbbox'><div style='margin:0; padding-left:10px;'><div id='albri'/><script type='text/javascript'>var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;var maxNumberOfPostsPerLabel = 2;var maxNumberOfLabels = 8;maxNumberOfPostsPerLabel = 12;maxNumberOfLabels = 3;function listEntries10(json) {var ul = document.createElement(&#39;ul&#39;);var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;for (var i = 0; i &lt; maxPosts; i++) {var entry = json.feed.entry[i];var alturl;for (var k = 0; k &lt; entry.link.length; k++) {if (entry.link[k].rel == &#39;alternate&#39;) {alturl = entry.link[k].href;break;}}var li = document.createElement(&#39;li&#39;);var a = document.createElement(&#39;a&#39;);a.href = alturl;if(a.href!=location.href) {var txt = document.createTextNode(entry.title.$t);a.appendChild(txt);li.appendChild(a);ul.appendChild(li);}}for (var l = 0; l &lt; json.feed.link.length; l++) {if (json.feed.link[l].rel == &#39;alternate&#39;) {var raw = json.feed.link[l].href;var label = raw.substr(homeUrl3.length+13);var k;for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);var txt = document.createTextNode(label);var h = document.createElement(&#39;b&#39;);h.appendChild(txt);var div1 = document.createElement(&#39;div&#39;);div1.appendChild(h);div1.appendChild(ul);document.getElementById(&#39;albri&#39;).appendChild(div1);}}}function search10(query, label) {var script = document.createElement(&#39;script&#39;);script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);document.documentElement.firstChild.appendChild(script);}var labelArray = new Array();var numLabel = 0;<b:loop values='data:posts' var='post'><b:loop values='data:post.labels' var='label'>textLabel = &quot;<data:label.name/>&quot;;var test = 0;for (var i = 0; i &lt; labelArray.length; i++)if (labelArray[i] == textLabel) test = 1;if (test == 0) {labelArray.push(textLabel);var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?labelArray.length : maxNumberOfLabels;if (numLabel &lt; maxLabels) {search10(homeUrl3, textLabel);numLabel++;}}</b:loop></b:loop></script></div><script type='text/javascript'>RelPost();</script></div></b:if></div>
    </div>
    </b:if>

  • Simpan dan lihat hasilnya....

Selamat mencoba.......

http://jayaputrasbloq.blogspot.com/2010/03/menambah-dua-kolom-di-bawah-postingan.html
More about → Cara Membuat dua kolom di bawah postingan
di 19.57 { Add komentar }
Label:

Membuat Navigasi Halaman Untuk Blog

Diposting oleh Unknown

navigasi halaman widget

Widget navigasi halaman merupakan widget yang berfungsi untuk membuka halaman belakang pada blog. Fungsinya hampir sama dengan fungsi "posting lama" dan "posting baru" pada blog. Bedanya adalah dengan widget ini anda bisa lebih cepat untuk menelusuri halaman belakang suatu blog karena anda tidak perlu membuka satu per satu halaman yang ada melainkan bisa langsung melompat kehalamman selanjutnya. Sehingga bisa menghemat waktu pencarian anda.

Ok bagi anda yang tertarik untuk menerapkannya. Berikut cara pemasangannya.

1. Login ke blogger. Buka menu Design -> Page Elements
2. Klik Add a Gadget -> HTML/Javascript lalu letakkan kode dibawah ini kedalam kotak

<style>
.showpageArea a {
text-decoration:underline;
}

.showpageNum a {
text-decoration:none;
border: 1px solid #bbb;
margin:0 3px;
padding:3px;
}

.showpageNum a:hover {
border: 1px solid #bbb;
background-color:#bbb;
}
.showpagePoint {
color:#fff;
text-decoration:none;
border: 1px solid #fff;
background: #000;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #bbb;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'Awal';
var endPageWord = 'Akhir';
var upPageWord ='Sebelumnya';
var downPageWord ='Selanjutnya';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://www.hermanblog.com">Grab this Widget ~ Navigasi Halaman</a></div>

Angka 5 pada "var pageCount" menunjukkan jumlah posting yang akan muncul pada setiap halaman. Silahkan diganti sesuai keinginan anda.

3. Jika sudah klik Save. Lalu letakkan widgetnya dibawah Blog post seperti contoh dibawah ini



4. Klik View Blog dan lihat hasilnya.

Selamat mencoba..

sumber:http://www.hermanblog.com/2009/04/membuat-navigasi-halaman-untuk-blog.html
More about → Membuat Navigasi Halaman Untuk Blog
di 19.41 { Add komentar }
Label:

Cara Menghapus Header Blog

Diposting oleh Unknown on Minggu, 21 Oktober 2012


Salam Sahabat Blogger,Pada pertemuan kali ini saya mau menunjukan cara bagaimana menghapus header blog,Mungkin ada dari sahabat blog yang ingin menghapus header atau judul blog dan menggantinya dengan script iklan,mungkin juga baner flash.Untuk menghapus header blog sangatlah mudah,ayo ikuti langkah dibawah ini.

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5.Cari Kode Berikut ini showaddelement=
6.Setelah Ketemu,akan terlihat kode seperti dibawah ini
   showaddelement=’no‘/>
   <b:widget id=’header’ locked=’true‘
7.Gantilah tulisan yang saya tandai dengan warna merah no dengan yes,true dengan false
   Seperti dibawah ini
   showaddelement=’yes‘/>
   <b:widget id=’header’ locked=’false‘
8.Setelah selesai klik Simpan Template dan keluar.
9.Masuk Kemenu Tata Letak,pilih Edit Header,setelah masuk,di Hapus

Selesai Sudah,tinggal sahabat blogger Menambahkan Gadget Sesuai kreasi dan keinginan dari Sahabat Blogger Sendiri.
Ahir kata,selamat mencoba,semoga bermanfaat.
More about → Cara Menghapus Header Blog
di 19.10 { Add komentar }
Label:

Cara Menampilkan Entri Hanya Judul

Diposting oleh Unknown



Cara Menampilkan Hanya Judul Postingan pada Homepage
  • login blog
  • rancangan >> edit HTML (centang "expand template widget")
  • cari kode <b:include data='post' name='post'/> (klo ada 2 pilih yg bawah)
setelah ketemu ganti kode tsb dengan kode dibawah ini
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<div style='padding:6px 0 6px 5px;border-right:2px dotted #ccc;border-bottom:2px dotted #ccc;margin-bottom:2px;background:#EAE9E9;color:#ff0000;'>
<data:post.title/>
</div>
</a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
  • simpan dan lihat hasilnya
Untuk kode yg berwarna merah bisa sobat otak atik sendiri, selamat mencoba ^_^
More about → Cara Menampilkan Entri Hanya Judul
di 19.10 { Add komentar }
Label:

Cara membuat link saat blog di copas

Diposting oleh Unknown on Selasa, 16 Oktober 2012

Gak usah basa-basi langsung aja dehh :D
Untuk mengantisipasi copas atau copy paste, nie dia script agar memberi sumber otomatis ketika artikel di copy paste..  
Cara Buat Link Otomatis Ketika Artikel di Copy Paste. Kalau yang ini cara pemasangannya cukup mudah dan gag ribet, tapi keduanya punya kelebihan dan kekurangan masing-masing. Okelah langsung saja disimak cara pemasangannya.
Silakan ikuti langkah-langkah dibawah ini:
  • Seperti biasa, kamu tentu harus log in ke blog kamu.
  • Pilih Rancangan => Edit HTML
  • Cari kode <head> (Gunakan Ctrl + F agar lebih mudah menemukannya)
  • Copy Script dibawah ini, lalu paste tepat dibawah kode <head>

<script type='text/javascript'>
function addLink() {
var body_element = document.getElementsByTagName(&#39;body&#39;)[0];
var selection;
selection = window.getSelection();
var pagelink = &quot;<br/><br/> Read more at: <a href='&quot;+document.location.href+&quot;'>&quot;+document.location.href+&quot;</a><br/>Copyright erixsandrea.blogspot.com Under Common Share Alike Atribution&quot;; // change this if you want
var copytext = selection + pagelink;
var newdiv = document.createElement(&#39;div&#39;);
newdiv.style.position=&#39;absolute&#39;;
newdiv.style.left=&#39;-99999px&#39;;
body_element.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(function() {
body_element.removeChild(newdiv);
},0);
}document.oncopy = addLink;
</script>

  • Lalu SAVE. 
          Ket : Ganti erixsandrea.blogspot.com dengan nama blog kamu


Silahkan anda cek dengan copy salah satu postingan anda dan pastekan di Notepad atau sebagainya.

Selamat Mencoba ^_^
More about → Cara membuat link saat blog di copas
di 19.34 { Add komentar }
Label:

Cara Mengecheck Jumlah Backlink Blog Kita

Diposting oleh Unknown on Minggu, 14 Oktober 2012


Mungkin yang sudah terjun di dunia blogger tak asing lagi dengan nama backlink, namun bagi pengguna awam atau newbie masih belum tahu banyak apa itu istilah backlink. Backlink merupakan link kita yang terpasang pada situs lain.


Backlink ada yang bersifat one way link dan two way link. Yang dimaksud dengan One way link adalah link situs kita dipasang oleh situs lain namun kita tidak memasang linknya di situs kita sedangkan two way link adalah saya melink situs anda dan anda juga melink situs saya atau yang sering disebut dengan link exchange.

Adapun tujuan dari backlink tak lain meminta agar page rank jatuh ke blog kita bisa juga dengan istilah lain meningkatkan PR pada blog ataupun situs web kita. Di sini saya akan memberikan sedikit masukan cara nge-check backlink blog atau situs web sobat melalui tool online, tool ini bisa di sebut dengan Backlink Watch atau anda bisa mengunjungi ke alamat ini [ http://www.backlinkwatch.com ].

Cara menggunakan sangat mudah di fahami sob. atau anda bisa lihat screen shot yang sudah saya buat di bawah ini :

Langkah Pertama :



Langkah Kedua :




Keterangan :

10199 Merupakan total backlink dari blog cah dabloeng dan link pada OBL merupakan link dari situs yang memberikan backlink. 

Flag merupakan bagian untuk menampilkan keterangan follow atau nofollow. Jika ada keterangan nofollow berarti situs tersebut memberikan tag nofollow pada link kita yang artinya kita tidak mendapatkan backlink dari situs tersebut.
More about → Cara Mengecheck Jumlah Backlink Blog Kita
di 12.45 { Add komentar }
Label:

Cara Membuat Widget Statistik Blog

Diposting oleh Unknown

Mungkin ada yang berminat menggunakan trick satu ini yaitu " Cara membuat widget agar statistik blog menjadi center atau di tengah " cara ini sangat bermanfaat karena blog kita biar terlihat lebih rapi.

Contoh yang telah saya buat :


Cara nya gampang sekali sob! anda tinggal ikuti langkhnya di bawah ini :

  • Login blogger kalian
  • Masuk Rancangan -> Edit Html
  • Cari Kode ]]></:skin> dengan menggunkan CTRL+F agar lebih mudah mencarinya!
  • Lalu masukkan kode di bawah ini tepat di atas kode di atas tadi :
#Stats1 .widget-content{
text-align:center;
}
  • Kalau sudah silahkan save dan lihat hasilnya!
SEMOGA SUKSES BRO!!!
More about → Cara Membuat Widget Statistik Blog
di 12.43 { Add komentar }
Label:

Cara Membuat Menu Tab View

Diposting oleh Unknown

Karena sering ditanya tentang bagaimana caranya membuat Tab VIew (Biasanya nanyanya gini: "Mas cara membuat menu yg kayak punya mas gmn? yg ada "Tips & Trik", "Lain-lain", "Terbaru", "Komentar" itu lho). Ya kan? hayo ngaku... Tabview itu sangat berguna sekali, karena dengan ukuran kotak yang relatif kecil tapi bisa memuat isi yang buanyak. Sebenarnya dah dari dulu pingin posting tentang itu, tp karena yg dulu cara pasanganya sulit jadi belum bisa aku jelaskan. Trus akhirnya aku menemukan metode baru dalam pembuatannya. Cara yang ini mungkin mirip dengan punyanya o-om, tp scriptnya agak beda. Dan aku dapet script ini juga bukan dari o-om lho :D
Tab view itu contohnya seperti ini :




Beginilah cara untuk membuat menu tab view tersebut

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}


4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat DISINI
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

<script src='http://kendhin.googlepages.com/tabview.js' type='text/javascript'/>


6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>


Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya


sumber:http://trik-tips.blogspot.com/2008/07/cara-membuat-menu-tab-view_31.html
More about → Cara Membuat Menu Tab View
di 11.38 { Add komentar }
Label:

Cara Mengganti Tanggal Postingan Dengan Icon Kalender

Diposting oleh Unknown

Akhirnya jadi juga, setelah beberapa hari nyari-nyari artikel tentang "cara mengganti tanggal dengan icon kalender" dan mengotak-atik template akhirnya berhasil juga aku membuatnya, fiuuhh :f dengan menghabiskan dana ber M-M (maksudnya Maribu, Mablas ribu) untuk melakukan penelitian dan dengan membanting keringat dan memeras tulang dan akhirnya berhasiiiiill..... Mau tahu cara membuatnya? jangan khawatir aku akan membagi-bagikan tutorial ini pada kalian dengan geratis (kalo ada yang mo bayar sih boleh aja :D ) yak mari kita mulai trik dan tipsnya.

Yang pertama harus kita lakukan yaitu mengganti setting tanggal dulu, caranya seperti biasa Login dulu ke blogger terus pilih Settings --> Formatting, ganti "date header format" atau "format tanggal menjadi (mm.dd.yyyy) nha yang masih pemula pasti bingung maksudnya kan? itu lho disebelah tulisan "date header format" kan ada kotak yang ada tanggalnya, trus kamu klik dan pilih yang formatnya bulan.tangal.tahun contohnya 1.13.2008 terus simpan

Langkah yang kedua pilih menu Layout --> Edit HTML . Trus beri tanda centang pada kotak Expand Widget Templates, Oh ya, jangan lupa di back-up dulu template kamu. Yang nggak tahu caranya memback-template silahkan lihat dulu artikel ini. udah? kalo udah mari kita mulai ke jeroannya.

1. Cari kode ini <TITLE><data:blog.pageTitle/></TITLE> (tempatnya dibagian atas) kalo dah ketemu taruh script berikut ini dibawahnya persis
<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://trik-tips.blogspot.com */
/*********************************/
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>



2. kalo udah cari kode ini:
.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}

kalo ggak ada coba cari yang ini
h2.date-header {
margin:1.5em 0 .5em;
}


3. Kalo dah ketemu taruh script berikut dibawahnya
.dateblock {
background: url("http://img600.imageshack.us/img600/3576/bluecalend.gif")
no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;

}


Kode http://img600.imageshack.us/img600/3576/bluecalend.gifadalah gambar icon kalender. kamu bisa menggantinya dengan gambar-gambar dibawah ini caranya ganti kode gambar tersebut dengan kode gambar berikut ini, misalnya kamu pingin kelender yang berwarna merah, maka ganti kode tersebut jadi http://img837.imageshack.us/img837/9199/redcalend.gif

http://i246.photobucket.com/albums/gg91/elu_isme/blackcalend.gifhttp://img805.imageshack.us/img805/9918/blue2calend.gifhttp://img600.imageshack.us/img600/3576/bluecalend.gif
http://img837.imageshack.us/img837/4311/greencalend.gifhttp://img137.imageshack.us/img137/3329/orangecalend.gifhttp://img196.imageshack.us/img196/8339/pinkcalend.gif
http://img837.imageshack.us/img837/9199/redcalend.gifhttp://img220.imageshack.us/img220/3262/ungucalend.gifhttp://img818.imageshack.us/img818/1760/yellowcalend.gif


Trus kode color:#3366CC; adalah kode warna
tanggal, kamu bisa menggantinya dengan warna yang lain. Kamu bisa lihat kode2 warnanya DISINI.

4. langkah selanjutnya yaitu kamu cari kode ini
<data:post.dateHeader/>, cara nyarinya biar gampang copy kode tersebut,
terus tekan Ctrl-f dan paste di dalam kotak yang disediakan, nha langsung
ketemu kan. kalo udah ketemu ganti kode tersebut dengan script dibawah ini.

<DIV class='dateblock'>
<SCRIPT>date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>


5. Simpan Template kamu dan lihat hasilnya. Berhasil nggak ya? :t

Kalo misalnya tulisan bulan dan tanggalnya terlalu keatas coba tambahkan kode ini padding: 4px 0px 0px 0px; dibawah kode .month { dan juga dibawah kode .day {

NB: Kalo Tanggalnya berubah menjadi tulisan "Undefine" itu pasti kamu tidak memperhatikan tutorial ini dari awal. Coba lihat lagi tutorial ini dari awal dan baca baik-baik perintahnya. :D

Selamat mencobaaaaaaaaaa!!!!!!!........

http://trik-tips.blogspot.com/2008/01/mengganti-tanggal-icon-calender.html
More about → Cara Mengganti Tanggal Postingan Dengan Icon Kalender
di 11.29 { Add komentar }
Label: