Dunia IPTEK

Memasang Widget Posting Terbaru dengan Tooltips

Posted by: Fauziemade Posted date: Minggu, Maret 10, 2013 / comment : 0 Blogspot

Bagi Pengguna blogger Widget Recent Post/ Posting Terbaru bukan merupakan hal yang baru. Biasanya widget seperti ini yang diletakkan di sidebar agar pada saat membuka postingan pengunjung bisa melihat artikel apa yang baru dari blog kita. Tidak seperti widget recent post yang biasa kali ini yaitu Widget Posting Terbaru dengan Tooltips dalam bentuk gambar thumbnail. Scriptnya dibuat oleh mas Taufik ~ DTE. Nah langsung saja itu langkah di bawah untuk cara pemasangan.

PEMASANGAN PADA BLOGSPOT

Pertama-tama masuklah ke halaman tata letak dengan mengeklik menu Tata Letak:

Masuk ke halaman Tata Letak

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin semua kode ini dan letakkan di dalam formulirnya:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#mini-gallery {
  width:380px; /* Tentukan lebar yang tepat sesuka hati atau buang saja deklarasi ini */
  margin:0px auto;
  font:normal 11px Verdana,Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:#7E7E7E;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}

#mini-gallery h2 {
  font:normal 14px Impact,Arial,Sans-Serif;
  color:#1CAA01;
  text-shadow:0px 1px 0px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#292929;
}

#mini-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}

#mini-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}

#mini-gallery .rp-item .rp-child {
  position:absolute;
  top:95%;
  left:95%;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:4px solid #00C200;
  -webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.7);
  -moz-box-shadow:0px 0px 3px rgba(0,0,0,0.7);
  box-shadow:0px 0px 3px rgba(0,0,0,0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
}

#mini-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#09AC0F;
}

#mini-gallery .rp-item:hover .hidden {display:block;}
</style>
<script type="text/javascript">
var rpTitle     = "Artikel Terbaru", // Tentukan judul widget
    numposts    = 20,                // Tentukan jumlah thumbnail/posting
    numchar     = 300,               // Tentukan jumlah karakter pada deskripsi tooltip
    rcFadeSpeed = 600,               // Tentukan kecepatan efek .fadeIn() saat tooltip tampil
    pBlank      = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg", // Thumbnail cadangan jika posting yang tampil tidak memiliki gambar
    blogURL     = "http://mkr-site.blogspot.com"; // Alamat blogmu
</script>
<script src="https://ivyth.googlecode.com/svn/js/rp-m-gallery-dte.js" type="text/javascript"></script>

Ganti URL http://mkr-site.blogspot.com dengan alamat blog Anda.
rpTitle untuk judul dari widget,
Tentukan jumlah posting yang ditampilkan (gambar mini) pada variabel numposts, tentukan juga jumlah karakter/ringkasan artikel yang akan muncul pada variabel numchar.
Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, buang kode itu dari widget.
Klik Simpan dan lihat hasilnya.

View The Demo

Sumber Script : DTE ~ Widget Posting Terbaru/Recent Post dengan Gambar Thumbnail dan Tooltip
http://mkr-site.blogspot.com/2012/09/widget-posting-terbaru-dengan-tooltips.html

SMS GRATIS BROO!!

Posted by: Fauziemade Posted date: Rabu, Februari 13, 2013 / comment : 0 Free, Tips n Trik

Cara Membuat Widget Popular Post Blog Unik dan Berwarna

Posted by: Fauziemade Posted date: Kamis, Februari 07, 2013 / comment : 0 Blogspot

Artikel kali ini adalah Cara Membuat Widget Popular Post Blog Unik dan Berwarna. Nah langsung saja berikut cara singkatnya :

1. Buka www.blogger.com dan log ini dahulu
2. Pergilah ke menu Template >> Edit HTML
3. Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #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, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #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:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #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:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

4. Simpan Template
5. Sekarang pergi ke menu Tata Letak >> Tambah Gadget >> Entri Populer
6. Atur hanya 9 postingan saja, dan jangan centang cuplikan dan thumbnail
7. Simpan dan lihat hasilnya.

source : http://smadia.blogspot.com/2012/09/memodifikasi-widget-popular-post.html

Download D'sanbob - Menjauhi Ku

Posted by: Fauziemade Posted date: Senin, Februari 04, 2013 / comment : 0 Music

Artist : D'Sanbob
Tittle : Menjauhi Ku

Download D'sanbob - Menjauhi Ku

untuk Download D'sanbob - Menjauhi Ku klik link di bawah ini >>>

Download

Cara Mengganti atau Merubah Tampilan "Older Posts" Dengan Angka

Posted by: Fauziemade Posted date: Rabu, Januari 30, 2013 / comment : 0 Blogspot, Tips n Trik

Trik Cara Mengganti atau Merubah Tampilan "Older Posts" Dengan Angka - Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". hal ini tentu sangat Beda dengan yang ada pada wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.

Dalam trik kali ini akan kita bahas tentang bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" tersebut menjadi angka seperti yang ditunjukkan pada gambar di bawah ini.
Cara Merubah Older Posts Dengan Angka

1. Langkah pertama tentu saja anda harus Login ke akun blogger milik anda selanjutnya menuju ke desain template anda kemudian lalu "Edit HTML"
2. setelah itu cari kode ini ]]></b:skin> Jika sudah anda temukan lalu letakkan kode CSS dibawah ini sebelum kode tersebut

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

3. Jika sudah kemudian cari kode ini </body> lalu tempatkan kode script dibawah ini sebelum kode tersebut.

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>

4. Terakhir simpan dan lihat hasilnya.

Selamat mencoba semoga informasi tersebut bermanfaat untuk anda.

SOURCE : http://ardiyantobay.blogspot.com/2012/08/cara-merubah-newer-dan-older-posts.html

Cara Untuk Membuat Image Slider Berdasarkan Kategori Tertentu Pada Blogger

Posted by: Fauziemade Posted date: Rabu, Januari 30, 2013 / comment : 0 Blogspot, Tips n Trik

Cara Untuk Membuat Image Slider Berdasarkan Kategori Tertentu Pada Blogger- Image Slider adalah Gambar slideshow yang biasanya berada di bawah header Blog.

Untuk saat ini memang banyak template yang meyediakan fitur slideshow ini untuk mempercantik tampilan template mereka. Jika tampilan blog anda masih sederhana dan anda berkeinginan untuk merubah tampilan blog anda agar terlihat lebih cantik nah,,, artikel berikut ini pastinya sangat menarik untuk anda simak.

Trik Trik Cara Membuat Gambar Slideshow Pada Blogger Versi terbaru 2012

Selain untuk mempercantik tampilan suatu blog fungsi lain yang tak kalah penting dari fitur slideshow ini adalah agar pengunjung lebih mudah dalam menemukan setiap informasi yang terdapat pada blog kita, dengan tampilan gambar dan sedikit deskripsi yang terdapat padaslideshow tentunya akan semakin menambah rasa penasaran para pengunjung untuk membaca artikel yang ditampilkan tersebut selengkapnya..

Untuk anda yang ingin mencobanya, ikuti langkah-langkah berikut ini ya,,

Cara Membuat Slideshow Berdasarkan Kategori Tertentu

* Pertama-tama Masuklah ke akun blogger milik anda terlebih dahulu

* Selanjutnya masuk ke Tata Letak > lalu pilih Edit HTML (jangan lupa centang expand widget templates)

* Kemudian cari kode ]]></b:skin> (gunakan ctrl+f untuk mempercepat pencarian), jika sudah copy dan pastekan kode dibawah ini diatas kode tersebut:

#featured{margin-bottom:8px}
.sliderwrapper{position: relative;overflow: hidden;height: 240px}
.sliderwrapper .contentdiv{visibility: hidden;position: absolute;left: 0;top: 0;padding: 0px;height: 100%;}
.pagination{text-align: left;padding:8px 0px}
.pagination a{font-size:11px;color:#fff;padding: 3px 6px;background:#1b75d6}
.pagination a:hover, .pagination a.selected{color:#dedde5;background-color:#535352}
.featuredPost{width:360px;padding:10px 10px 0;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0}
.featuredPost a{color:#fff}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{margin:0;font-size:12px;line-height:1}
.featuredPost span{font-size:10px}
.featuredPost p{font-size:11px}

* Jika sudah, langkah selanjutnya cari kode </head> , kemudian salin dan tempatkan kode dibawah ini diatas kode tadi

<script>

//<![CDATA[

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjeswpe8iTmUN42Cp256pudhq-aawVmKlDCwrcVsHrNajNriTLlMKTBwFw-_2wXLmfAzh_pAvkdVbGgtQFdawW0l7TwxjK_Tmb_E_HN733uUoavIXQwZnimvkHZRkfR2XJPO7G2HPu2CM/s1600/no+image.jpg";

showRandomImg = true;

aBold = true;

summaryPost = 100;

numposts1 = 5;

label1 = "Blog";

function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}

function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}}

if ("content" in entry) {

var postcontent = entry.content.$t;}

else

if ("summary" in entry) {

var postcontent = entry.summary.$t;}

else var postcontent = "";

postdate = entry.published.$t;

if(j>imgr.length-1) j=0;

img[i] = imgr[j];

s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","Juny","July","August","September","October","November","December"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;

}}

var daystr = day+ ' ' + m + ' ' + y ;

var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="450" height="250" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';

document.write(trtd);

j++;

}}

//]]>

</script>

Perhatikan kode huruf yang berwarna merah label1 = "Blog"; itu adalah label atau kategori yang akan ditampilkan di slideshownya, ganti label tersebut dengan label yang ingin anda tampilkan.

Tinggi dan lebar Slideshow bisa anda sesuaikan dengan cara merubah kode img width="450"height="250" Pilihlah ukuran yang tepat agar tampilan slideshow anda menjadi lebih menarik.

* Setelah itu cari kode </body> , jika sudah tempatkan kode dibawah ini sebelum kode tersebut.

<script src='http://dl.dropbox.com/u/12924430/contentslider.js'/>
<script>
//<![CDATA[
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
//]]>
</script>

* Langkah berikutnya temukan kode <div id='main-wrapper'> letakkan kode berikut ini di bawah kode tersebut :

<b:if cond='data:blog.pageType == "index"'>

<div id='featured'>

<div class='sliderwrapper' id='slider1'>

<script>

document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");

</script>

</div>

<div class='pagination' id='paginate-slider1'>

</div>

</div>

</b:if>

* Terakhir Save/simpan template, langkah untuk membuat slider image berdasarkan kategori tertentu kini sudah selesai, sekarang lihat hasilnya.

source : http://ardiyantobay.blogspot.com/2012/04/trik-cara-membuat-gambar-slideshow-pada.html

Pages

Blog Archive

Like us on Facebook

Popular Posts

Dunia IPTEK

ads

Slider[Style1]

Style2

Style3[OneLeft]

Style3[OneRight]

Style4

Style5

Memasang Widget Posting Terbaru dengan Tooltips

PEMASANGAN PADA BLOGSPOT

SMS GRATIS BROO!!

Cara Membuat Widget Popular Post Blog Unik dan Berwarna

Download D'sanbob - Menjauhi Ku

Cara Mengganti atau Merubah Tampilan "Older Posts" Dengan Angka

Cara Untuk Membuat Image Slider Berdasarkan Kategori Tertentu Pada Blogger

Tags 1

Tags 2

Tags 3

Pages

Blog Archive

Like us on Facebook

Popular Posts

Dunia IPTEK

ads

Slider[Style1]

Style2

Style3[OneLeft]

Style3[OneRight]

Style4

Style5

Memasang Widget Posting Terbaru dengan Tooltips

PEMASANGAN PADA BLOGSPOT

SMS GRATIS BROO!!

Cara Membuat Widget Popular Post Blog Unik dan Berwarna

Download D'sanbob - Menjauhi Ku

Cara Mengganti atau Merubah Tampilan "Older Posts" Dengan Angka

Cara Untuk Membuat Image Slider Berdasarkan Kategori Tertentu Pada Blogger

Películas populares

Labels

Tags 1

Tags 2

Tags 3