Mengedit Tampilan Blog Hanya Judul Postingan Di Homepage

DINAMIKA - Modifikasi Tampilan Homepage Hanya Judul Postingan - Untuk membuat tampilan blog dengan sejumlah alasan, misalnya agar blog lebih menarik, atau lebih efisien dan tertata, banyak strategi yang bisa diterapkan. 

Salah satu contohnya adalah dengan Modifikasi Tampilan Homepage Hanya Judul Postingan.  Buat para blogger yang menyukai tampilan homepage yang tidak ribet, mungkin bisa menerapkan ini. Hanya saja untuk membuat blog seperti ini tidak ada thumbnail atau gambar posting yang bisa mewakili keseluruhan isi artikel, artinya memang cuma judul thok.

Lalu bagaimana cara membuat postingan artikel hanya berupa judul saja di homepage ? Banyak artikel dan tips serupa yang bisa ditemukan di mesin pencari seperti Google, namun kali ini akan ditampilkan tips dari blog sebelah ya (dari MDF - Blog). Coba lihat tips berikut :

Halaman Utama (Homepage)  dan Halaman Label (Label Page) merupakan halaman yang menampilkan beberapa posting dengan ringkasan dan juga menampilkan gambar posting tersebut. 

Terkadang untuk membuka sebuah halaman utama atau halaman label waktu yang dibutuhkan cukup lama karena harus menampilkan gambar posting dengan ukuran tertentu (bila ada gambarnya). 

Tentu bagi kamu yang memiliki koneksi internet yang (maaf) agak lambat untuk membuka halaman label waktunya cukup lama apalagi kalau menampilkan lebih dari 10 posting yang mengandung gambar, sampai sedikit membuat kesal.

Cara jitu mengatasi masalah itu kita hanya sedikit memasukan beberapa Tag Conditional dan kode CSS sehingga pada waktu membuka halaman utama (homepage) dan halaman label hanya menampilkan judul posting yang akan mengurangi waktu loading ketika membuka halaman tersebut.

Sebenarnya bukan hanya pada 2 halaman tersebut tetapi juga pada halaman arsip (archive page) dan halaman pencarian (search page).

Langkah langkah penerapannya:

> Login akun Blogger anda.

> Di halaman Dasbor, anda pilih Template.

> Kemudian pilih Edit HTML

> Beritandacentang pada Expand Template Widget 

> Cari kode <b:include data='post' name='post'/>

lalu ganti kode tersebut dengan kode dibawah ini

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

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

<a expr:href='data:post.url'>   

<div style='padding:5px 0 5px 10px;box-shadow:5px 6px 2px #808080;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;margin-bottom:2px;color:#333;text-shadow: 1px -1px 0px #E0E0E0;font-size:20px;'>

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

kode ini merupakan untuk menampilkan hanya judul posting pada semua halaman kecuali halaman posting dan halaman statis.

Kode yang warna hijau merupakan kode CSS silahkan kamu sesuaikan sendiri.

Kalau kamu hanya ingin merubah halaman utama atau halaman label saja ganti kode Tag Conditionalnya saja.

Untuk Halaman Utama, ganti kode :

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

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

dengan kode dibawah ini :

<b:if cond='data:blog.homepageUrl == data:blog.url'>

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

Untuk Halaman Label saja, ganti dengan kode dibawah ini :

<b:if cond='data:blog.homepageUrl != data:blog.url'>

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

Nah, itu dia tadi tips membuat postingan artikel hanya berupa judul saja di homepage, tentunya sebagai referensi buat para blogger. Semoga bermanfaat.

(sumber:http://mdf-blog.blogspot.com/2013/01/halaman-utama-dan-halaman-label-hanya.html#.UYNZUmPBjD8)

Read More

Mempercantik Tampilan Blog Dengan Widget Popular Posts

DINAMIKA | Cara Membuat Blog Menarik Dengan Popular Posts Unik - Widget Popular Posts yang unik dapat mempercantik tampilan blog, dan membuat blog itu sendiri menjadi unik pula.

Cara membuat blog menarik dengan widget popular posts yang unik dapat dilakukan dengan langkah-langkah berikut ini :

• Langkah pertama pastikan widget popular post anda sudah aktik/terpasang (cara pasang : login ke blogger > klik tata letak > klik add gadget > klik populer entri> kemudian klik save/simpan)

• Setelah langkah diatas berhasil silahkan masuk ke template>edit HTML>centang Expand Template Widget, Cari kode seperti ini ]]></b:skin> untuk mempercepat pencarian tekan CTRL+F.
  Setelah berhasil menemukan kode di atas copy dan pastekan kode berikut tepat di atasnya :
  
  

<style>

.popular-posts ul{padding-left:0px;}

.popular-posts ul li {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8_eYZmvB_ZS1DNjN3tlWVhygaWkixouVtws0DyOIOlKzk-vmK09-5qDZh2aTtsFhjGdje_plVzj1oVZ2I293Gj9SwkUxv7x6B9Lvl_bvK1cSsKkCIcgrsbLl9-hKq-8yfjRxMwby0dJc/s1600/rb+cancel+icon...jpg) no-repeat scroll 5px 10px;

list-style-type: none;

margin: 0 0 5px 0px;

padding: 5px 5px 5px 33px !important;

border: 1px dashed #dddddd;

border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

}

.popular-posts ul li:hover {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEiS1WOMGa1CidgW2ORUGwnuHSrv8yHcH0MEDI0N31Y6JCcxk0Mrsfj96h5Rt763kuejHzUhji9uQbJbyWZPoPn6Y964ODKq8JEYskBWr_9-EyRvAM_psJhfigt03A7pOHdjWmFN_Ri3U/s1600/rb+mark+icon...jpg) no-repeat 2px;

border: 2px solid #b60000;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

}

.popular-posts ul li a:hover {

text-decoration:none;

}

</style>

Nah, itu dia cara membuat blog menarik dengan popular posts unik. Namun bila sobat masih ingin mengeksplorasi lagi dengan widget popular posts unik lainnya, silahkan baca Cara Membuat Blog Dengan Popular Posts Aneka Warna.

(sumber : http://sekitarduniaunik.blogspot.com/2013/02/cara-membuat-widget-populer-post-yang.html)

Read More

Cara Membuat Popular Posts Dengan Animasi 3 Dimensi

DINAMIKA | Membuat Widget Popular Posts Dengan Animasi 3 Dimensii - Widget Popular Posts dapat mempercantik tampilan dari sebuah blog, meskipun blog itu sederhana sekalipun. 

Telah dijelaskan sebelumnya bahwa widget Popular Posts memiliki banyak gaya. Bila sebelumnya telah dijelaskan  Cara Membuat Widget Popular Posts Aneka Warna, kali ini akan diuraikan mengenai Membuat Widget Popular Posts Dengan Animasi 3 Dimensi. Bagaimana caranya ?

• Login ke blog anda > Design > kemudian Add gadged baru pada elemen, jangan lupa pilih HTML / Javascript ( bebas dimana saja, karena hanya untuk penempatan Css dan koda javascript saja )
• Copy kode atau script berikut dan paste pada gadget tadi kemudian save ( tidak perlu judul )
• 
  

<style type="text/css">

.cube { width: 250px; height: 250px;}

a img { border: none; }

#linksCube img { width: 100%; height: 100%; }

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="http://script-bamz-us.googlecode.com/files/jqueryimagecube.js"></script>

<script type="text/javascript" charset="utf-8">

$(function () {

    $('.popular-posts ul').abupopularcube();

});

</script>

<script type="text/javascript" src="http://script-bamz-us.googlecode.com/files/popularcube.js"></script>

• Sekarang masih pada halaman Design
• Silahkan add Gadged baru lagi dan pilih gadget popular post ( penempatannya terserah anda, bisa pada sidebar kanan atau kiri dan bawah ) kemudian save dan lihat hasilnya.

Cara membuat widget Popular Post animasi 3D ini sebenarnya masih bisa diterjemahkan atau istilahnya di dirinci, tapi dari pada mumet edit HTML templatenya mending pake cara di atas lebih mudah dan tidak beresiko . Oh iya jangan lupa sesuaikan lebar dan tinggi widget ini sesuai lebar sidebar dimana tempat anda akan memasang widget popular post itu. Jika mau ,pasang widget popular post nya di pasang di tempat yang strategis biar menarik perhatian para pengunjung. Bila sobat ingin lebih mengeksplorasi lagi mengenai widget popular posts, silahkan baca Cara Membuat Blog Menarik Dengan Popular Posts Unik.




(sumber : http://eko-tipsntrick.blogspot.com/2012/05/cara-membuat-popular-post-animasi-3d.html )

Read More

Cara Membuat Blog Dengan Popular Posts Aneka Warna

DINAMIKA | Membuat Blog Dengan Widget Popular Posts Aneka Warna - Buat blogger pemula yang ingin mempercantik dan menambah konten menarik di blog dapat membuat widget Popular Posts beraneka warna.

Cara membuat blog lebih menarik dapat dilakukan dengan banyak cara, diantaranya dengan menambah beberapa widget. Tujuannya adalah selain mempercantik desain juga dapat meningkatkan daya tarik bagi orang yang berkunjung ke blog. Salah satu widget yang dapat ditampilkan di blog adalah widget Popular Posts, yang berisi posting artikel-artikel top yang paling sering dibaca orang. Widget Popular Posts dapat pula ditampilkan dengan banyak gaya atau style, salah satunya dengan efek pelangi atau dikenal dengan Rainbow Popular Posts yang menampilkan banyak warna. 

Membuat widget Rainbow Popular Posts yaitu sebagai berikut :

1. Masuk ke dashboard, lalu klik design. Setelah itu pada menu layout, klik add widget Popular Post, atur sedemikian rupa terserah mau ditaruh di sidebar mana. Lebih baik diberikan thumbnail dan tidak diberikan tulisan (bisa diatur menurut selera).

2. Kemudian catat widgetid nya, disini widget ID saya adalah PopularPosts1. Jika sudah, masuklah ke menu template > Edit HTML > cari kode ]]></b:skin>

3. Letakkan kode dibawah ini, tepat diatas kode ]]></b:skin> 

/* Rainbow Popular Post Style Start */

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}

#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}

#PopularPosts1 ul li:first-child:after{content:"1"}

#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}

#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}

#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}

#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}

#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}

#PopularPosts1 ul li:first-child:after,

#PopularPosts1 ul li:first-child + li:after,

#PopularPosts1 ul li:first-child + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}

#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}

#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

#PopularPosts3 img{

-moz-border-radius: 130px;

-webkit-border-radius: 130px;

border-radius: 130px;

-webkit-transition: all 0.3s ease;

-moz-transition: all 0.3s ease;

transition: all 0.3s ease;

padding:4px;

border:1px solid #fff !important;

background: #F2F2F2;}#PopularPosts1 img:hover {

-moz-transform: scale(1.2) rotate(-560deg) ;

-webkit-transform: scale(1.2) rotate(-560deg) ;

-o-transform: scale(1.2) rotate(-560deg) ;

-ms-transform: scale(1.2) rotate(-560deg) ;

transform: scale(1.2) rotate(-560deg) ;

}

/* Rainbow Popular Post Style End */ 

4. Klik Pratinjau terlebih dahulu, jika sudah tidak terjadi error pada widget maupun template, silahkan klik simpan untuk menyimpan perubahannya.

Semoga widget popular posts ini bisa menambah warna di blog Anda, sehingga tidak terlalu monoton yang pada akhirnya lebih cepat membuat para pembaca merasa bosan. Bila ingin mengeksplorasi lagi mengenai widget popular posts, silahkan baca Cara Membuat Blog Menarik Dengan Popular Posts Unik dan Cara Membuat Blog Menarik Dengan Popular Posts Animasi 3 Dimensi.

(sumber: http://ravictory.blogspot.com/2013/04/cara-membuat-widget-popular-posts-warna.html )

Read More